bestax-mcp 0.0.0

package/data/components/Tag.json

@@ -0,0 +1,197 @@
+{
+  "name": "Tag",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/tag",
+  "docsUrl": "https://bestax.io/docs/api/elements/tag",
+  "examples": [
+    { "title": "Default Tag", "code": "<Tag>Default Tag</Tag>" },
+    {
+      "title": "Colored Tag",
+      "code": "<Tag color=\"primary\">Primary Tag</Tag>"
+    },
+    {
+      "title": "Medium and Large Tag",
+      "code": "<Tags>\n  <Tag size=\"medium\">Medium Tag</Tag>\n  <Tag size=\"large\">Large Tag</Tag>\n</Tags>"
+    },
+    { "title": "Rounded Tag", "code": "<Tag isRounded>Rounded Tag</Tag>" },
+    {
+      "title": "Delete Tag (Button)",
+      "code": "<Tag isDelete onDelete={() => alert('Deleted!')} />"
+    },
+    { "title": "With Margin", "code": "<Tag m=\"4\">Tag with Margin</Tag>" },
+    {
+      "title": "Combined Styles",
+      "code": "<Tag color=\"success\" size=\"medium\" isRounded m=\"2\">\n  Combined Tag\n</Tag>"
+    },
+    {
+      "title": "All Colors",
+      "code": "<Tags>\n  {[\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ].map(color => (\n    <Tag key={color} color={color} isHoverable>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Tag>\n  ))}\n</Tags>"
+    },
+    {
+      "title": "Sizes Together",
+      "code": "<Block>\n  {['primary', 'success', 'danger'].map(color => (\n    <Tags key={color}>\n      <Tag color={color} size=\"normal\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Normal\n      </Tag>\n      <Tag color={color} size=\"medium\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Medium\n      </Tag>\n      <Tag color={color} size=\"large\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Large\n      </Tag>\n    </Tags>\n  ))}\n</Block>"
+    },
+    {
+      "title": "Hoverable Tag",
+      "code": "<Tag color=\"primary\" isHoverable>\n  Hoverable Tag\n</Tag>"
+    },
+    {
+      "title": "Tag with Delete Component",
+      "code": "import { Tags, Delete } from '@allxsmith/bestax-bulma';\n\n<Tags hasAddons>\n  <Tag color=\"primary\" size=\"medium\">\n    Tag with Delete\n    <Delete onClick={() => alert('Tag deleted!')} />\n  </Tag>\n</Tags>;"
+    }
+  ],
+  "accessibility": "- **Delete buttons:** Use `aria-label` for delete tags for screen readers.\n- **Keyboard:** Delete tags are rendered as `<button>`, supporting keyboard activation.\n- **Semantics:** Use tags for supplemental information, not as primary headings.\n\n:::tip\nCombine `Tag` with `Tags` for grouped, multi-tag UIs.\n:::",
+  "related": ["Delete", "Tags", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-tag--default",
+  "summary": "The `Tag` component renders a Bulma-styled label or badge.",
+  "import": "import { Tag } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Tag.tsx",
+  "rootClass": "tag",
+  "parts": [
+    {
+      "path": "Tag",
+      "summary": "The `Tag` component renders a Bulma-styled label or badge.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "TagColor",
+          "default": null,
+          "description": "Bulma color modifier for the tag.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Tag size.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Renders a rounded tag.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isDelete",
+          "type": "boolean",
+          "default": "false",
+          "description": "Renders a delete-style tag (delete button).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isHoverable",
+          "type": "boolean",
+          "default": "false",
+          "description": "Adds hover effect to the tag.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onDelete",
+          "type": "() => void",
+          "default": null,
+          "description": "Callback for delete tag/button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Tag content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <span> attributes and Bulma helper props",
+      "types": [
+        {
+          "name": "TagColor",
+          "expansion": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'",
+          "summary": "Valid color values for the Tag component (Bulma tag colors)."
+        }
+      ]
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-tag-h",
+      "sass": "$tag-h",
+      "default": "var(--bulma-scheme-h)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-s",
+      "sass": "$tag-s",
+      "default": "var(--bulma-scheme-s)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-background-l",
+      "sass": "$tag-background-l",
+      "default": "var(--bulma-background-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-background-l-delta",
+      "sass": "$tag-background-l-delta",
+      "default": "0%",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-hover-background-l-delta",
+      "sass": "$tag-hover-background-l-delta",
+      "default": "var(--bulma-hover-background-l-delta)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-active-background-l-delta",
+      "sass": "$tag-active-background-l-delta",
+      "default": "var(--bulma-active-background-l-delta)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-color-l",
+      "sass": "$tag-color-l",
+      "default": "var(--bulma-text-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-radius",
+      "sass": "$tag-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-tag-delete-margin",
+      "sass": "$tag-delete-margin",
+      "default": "1px",
+      "scope": "component"
+    }
+  ]
+}