{"_id":"@azulejo-kit/tag","name":"@azulejo-kit/tag","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@azulejo-kit/tag","version":"1.1.0","type":"module","main":"./dist/index.umd.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","test":"vitest --run --passWithNoTests","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"devDependencies":{"@storybook/addon-essentials":"^7.0.0","@storybook/addon-interactions":"^7.0.0","@storybook/vue3":"^7.0.0","@storybook/vue3-vite":"^7.0.0","@tailwindcss/vite":"^4.0.0","storybook":"^7.0.0","tailwindcss":"^4.0.0","vue":"^3.3.4"},"peerDependencies":{"vue":">=3.0.0"},"gitHead":"a6711e085fc4b083654f8223f01f7a3462e0c66f","description":"A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components.","_id":"@azulejo-kit/tag@1.1.0","_nodeVersion":"20.20.1","_npmVersion":"lerna/6.6.2/node@v20.20.1+x64 (linux)","dist":{"integrity":"sha512-rABDDOifBW9+JKS45wveZn8C3kFqrGeW/CA3dTj8KvRwlcrAnXFF6l+pibe2BzYUBYqekCim1N3bYCwSIPpGGg==","shasum":"0d551b09e59bc847b1be5e27f1dbb419a6b1a74e","tarball":"https://registry.npmjs.org/@azulejo-kit/tag/-/tag-1.1.0.tgz","fileCount":13,"unpackedSize":20973,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGzNFfTlCQhUjHeHDMN3QnQYvTZys7XsFtX18cw0pVYYAiBQhNUtpwmfC8Phk40eZbFMOjHpG5kK8tLNCaQ4kq+COw=="}]},"_npmUser":{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"},"directories":{},"maintainers":[{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tag_1.1.0_1773316206416_0.8773698468419264"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T11:50:06.346Z","1.1.0":"2026-03-12T11:50:06.552Z","modified":"2026-03-12T11:50:06.742Z"},"maintainers":[{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"}],"description":"A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components.","readme":"# Tag\n\nA Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components.\n\n## Installation\n\n```bash\nnpm install @azulejo-kit/tag\n# or\nyarn add @azulejo-kit/tag\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | **Required.** The text label displayed in the tag. |\n| `type` | `\"informative\"` \\| `\"interactive\"` \\| `\"contextualised\"` \\| `\"removable\"` \\| `\"selectable\"` | `\"informative\"` | Defines the behavior and layout of the tag. |\n| `size` | `\"s\"` \\| `\"m\"` \\| `\"l\"` | — | Determines the size of the tag. |\n| `id` | `string` | — | A unique identifier. Required when type is 'selectable' or 'removable'. |\n| `name` | `string` | — | The name attribute (relevant for type: 'selectable'). |\n| `modelValue` | `boolean` | — | The tag's checked state (used for type: 'selectable'). |\n| `disabled` | `boolean` | — | If `true`, disables the tag. |\n| `contextualisedNumber` | `number` | `99` | A number displayed in the badge when the tag is contextualised. |\n| `removableLabel` | `string` | `\"Remove\"` | Accessible label text for the remove button. |\n\n## Emits\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when the tag value changes (selectable). |\n| `remove-tag` | `string` | Emitted when the remove button is clicked (removable). |\n\n## Basic Usage\n\n```vue\n<script setup>\nimport { ref } from 'vue'\nimport { AzTag } from '@azulejo-kit/tag'\n\nconst selected = ref(false)\n</script>\n\n<template>\n  <AzTag label=\"Category\" />\n  <AzTag id=\"tag-1\" label=\"Selectable\" type=\"selectable\" v-model=\"selected\" />\n  <AzTag id=\"tag-2\" label=\"Removable\" type=\"removable\" @remove-tag=\"(id) => console.log(id)\" />\n</template>\n```\n","readmeFilename":"README.md","_rev":"1-b917afe0affb820c14a0cee2db45dbd8"}