ui-lab-registry 0.3.43 → 0.3.45

package/dist/components/Anchor/examples/01-inline-text.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=01-inline-text.d.ts.map

package/dist/components/Anchor/examples/01-inline-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-inline-text.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/01-inline-text.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAc9B"}

package/dist/components/Anchor/examples/01-inline-text.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor } from 'ui-lab-components';
+export const metadata = {
+    title: 'Inline Text',
+    description: 'Anchor used inline within a paragraph — the primary use case for navigational links.',
+};
+export default function Example() {
+    return (_jsxs("p", { className: "text-sm text-foreground max-w-prose leading-relaxed", children: ["Read the", " ", _jsx(Anchor, { href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a", children: "MDN documentation" }), " ", "for a full reference on anchor semantics, or check the", " ", _jsx(Anchor, { href: "https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html", children: "WCAG link purpose guidelines" }), " ", "for accessibility requirements."] }));
+}
+//# sourceMappingURL=01-inline-text.js.map

package/dist/components/Anchor/examples/01-inline-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-inline-text.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/01-inline-text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,sFAAsF;CACpG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,aAAG,SAAS,EAAC,qDAAqD,yBACvD,GAAG,EACZ,KAAC,MAAM,IAAC,IAAI,EAAC,6DAA6D,kCAEjE,EAAC,GAAG,4DAC0C,GAAG,EAC1D,KAAC,MAAM,IAAC,IAAI,EAAC,0EAA0E,6CAE9E,EAAC,GAAG,uCAEX,CACL,CAAC;AACJ,CAAC"}

package/dist/components/Anchor/examples/02-underline-variants.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-underline-variants.d.ts.map

package/dist/components/Anchor/examples/02-underline-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-underline-variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/02-underline-variants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAgB9B"}

package/dist/components/Anchor/examples/02-underline-variants.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Underline Variants',
+    description: 'Three underline styles available via Anchor.Underline: solid (default), dashed, and dotted.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { gap: "lg", align: "center", children: [_jsx(Anchor, { href: "#", children: "Solid" }), _jsxs(Anchor, { href: "#", children: [_jsx(Anchor.Underline, { variant: "dashed" }), "Dashed"] }), _jsxs(Anchor, { href: "#", children: [_jsx(Anchor.Underline, { variant: "dotted" }), "Dotted"] })] }));
+}
+//# sourceMappingURL=02-underline-variants.js.map

package/dist/components/Anchor/examples/02-underline-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-underline-variants.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/02-underline-variants.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,6FAA6F;CAC3G,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC3B,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,sBAEP,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,GAAG,aACd,KAAC,MAAM,CAAC,SAAS,IAAC,OAAO,EAAC,QAAQ,GAAG,cAE9B,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,GAAG,aACd,KAAC,MAAM,CAAC,SAAS,IAAC,OAAO,EAAC,QAAQ,GAAG,cAE9B,IACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Anchor/examples/03-preview-tooltip.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-preview-tooltip.d.ts.map

package/dist/components/Anchor/examples/03-preview-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-preview-tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/03-preview-tooltip.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAmB9B"}

package/dist/components/Anchor/examples/03-preview-tooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Preview Tooltip',
+    description: 'Hover over the links to see a tooltip preview — composed via the preview prop or Anchor.Preview.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { gap: "lg", align: "center", children: [_jsx(Anchor, { href: "https://github.com", preview: _jsx("span", { className: "text-xs text-foreground-400", children: "github.com" }), children: "GitHub" }), _jsxs(Anchor, { href: "https://vercel.com", children: [_jsx(Anchor.Preview, { children: _jsx("span", { className: "text-xs text-foreground-400", children: "vercel.com" }) }), "Vercel"] })] }));
+}
+//# sourceMappingURL=03-preview-tooltip.js.map

package/dist/components/Anchor/examples/03-preview-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-preview-tooltip.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/03-preview-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,kGAAkG;CAChH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC3B,KAAC,MAAM,IACL,IAAI,EAAC,oBAAoB,EACzB,OAAO,EACL,eAAM,SAAS,EAAC,6BAA6B,2BAAkB,uBAI1D,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,oBAAoB,aAC/B,KAAC,MAAM,CAAC,OAAO,cACb,eAAM,SAAS,EAAC,6BAA6B,2BAAkB,GAChD,cAEV,IACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Anchor/examples/04-breadcrumb.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-breadcrumb.d.ts.map

package/dist/components/Anchor/examples/04-breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/04-breadcrumb.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAe9B"}

package/dist/components/Anchor/examples/04-breadcrumb.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Breadcrumb',
+    description: 'Anchor used as navigational crumbs — the last segment is non-interactive text.',
+};
+const crumbs = [
+    { label: 'Home', href: '/' },
+    { label: 'Projects', href: '/projects' },
+    { label: 'ui-lab', href: '/projects/ui-lab' },
+];
+export default function Example() {
+    return (_jsx(Flex, { gap: "xs", align: "center", className: "text-sm", children: crumbs.map((crumb, i) => (_jsxs("span", { className: "flex items-center gap-xs", children: [i > 0 && _jsx("span", { className: "text-foreground-400 mx-1", children: "/" }), i < crumbs.length - 1 ? (_jsx(Anchor, { href: crumb.href, children: crumb.label })) : (_jsx("span", { className: "text-foreground-400", children: crumb.label }))] }, crumb.href))) }));
+}
+//# sourceMappingURL=04-breadcrumb.js.map

package/dist/components/Anchor/examples/04-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/04-breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,gFAAgF;CAC9F,CAAC;AAEF,MAAM,MAAM,GAAG;IACb,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE;IAC5B,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;IACxC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE;CAC9C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,YAC9C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,gBAAuB,SAAS,EAAC,0BAA0B,aACxD,CAAC,GAAG,CAAC,IAAI,eAAM,SAAS,EAAC,0BAA0B,kBAAS,EAC5D,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACvB,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,KAAK,GAAU,CACjD,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,CAAC,KAAK,GAAQ,CAC3D,KANQ,KAAK,CAAC,IAAI,CAOd,CACR,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Anchor/examples/index.d.ts

@@ -1,2 +1,9 @@
-export { default as Example1 } from './01-basic-anchor.js';
+export { default as Example1 } from './01-inline-text.js';
+export { metadata as metadata1 } from './01-inline-text.js';
+export { default as Example2 } from './02-underline-variants.js';
+export { metadata as metadata2 } from './02-underline-variants.js';
+export { default as Example3 } from './03-preview-tooltip.js';
+export { metadata as metadata3 } from './03-preview-tooltip.js';
+export { default as Example4 } from './04-breadcrumb.js';
+export { metadata as metadata4 } from './04-breadcrumb.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Anchor/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Anchor/examples/index.js

@@ -1,2 +1,9 @@
-export { default as Example1 } from './01-basic-anchor.js';
+export { default as Example1 } from './01-inline-text.js';
+export { metadata as metadata1 } from './01-inline-text.js';
+export { default as Example2 } from './02-underline-variants.js';
+export { metadata as metadata2 } from './02-underline-variants.js';
+export { default as Example3 } from './03-preview-tooltip.js';
+export { metadata as metadata3 } from './03-preview-tooltip.js';
+export { default as Example4 } from './04-breadcrumb.js';
+export { metadata as metadata4 } from './04-breadcrumb.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Anchor/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Anchor/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Anchor/examples.json

@@ -1,7 +1,22 @@
 {
-    "01-basic-anchor": {
-        "title": "Basic Anchor",
-        "description": "A simple anchor component with custom underline. Hover to see the popover preview.",
-        "code": "import React from 'react';\nimport { Anchor } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Anchor>\n      Learn more about this topic\n      <Anchor.Preview>\n        <div className=\"text-sm\">Preview content</div>\n      </Anchor.Preview>\n    </Anchor>\n  );\n}"
+    "01-inline-text": {
+        "title": "Inline Text",
+        "description": "Anchor used inline within a paragraph — the primary use case for navigational links.",
+        "code": "import { Anchor } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <p className=\"text-sm text-foreground max-w-prose leading-relaxed\">\n      Read the{\" \"}\n      <Anchor href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\">\n        MDN documentation\n      </Anchor>{\" \"}\n      for a full reference on anchor semantics, or check the{\" \"}\n      <Anchor href=\"https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html\">\n        WCAG link purpose guidelines\n      </Anchor>{\" \"}\n      for accessibility requirements.\n    </p>\n  );\n}"
+    },
+    "02-underline-variants": {
+        "title": "Underline Variants",
+        "description": "Three underline styles available via Anchor.Underline: solid (default), dashed, and dotted.",
+        "code": "import { Anchor, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"lg\" align=\"center\">\n      <Anchor href=\"#\">\n        Solid\n      </Anchor>\n      <Anchor href=\"#\">\n        <Anchor.Underline variant=\"dashed\" />\n        Dashed\n      </Anchor>\n      <Anchor href=\"#\">\n        <Anchor.Underline variant=\"dotted\" />\n        Dotted\n      </Anchor>\n    </Flex>\n  );\n}"
+    },
+    "03-preview-tooltip": {
+        "title": "Preview Tooltip",
+        "description": "Hover over the links to see a tooltip preview — composed via the preview prop or Anchor.Preview.",
+        "code": "import { Anchor, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"lg\" align=\"center\">\n      <Anchor\n        href=\"https://github.com\"\n        preview={\n          <span className=\"text-xs text-foreground-400\">github.com</span>\n        }\n      >\n        GitHub\n      </Anchor>\n      <Anchor href=\"https://vercel.com\">\n        <Anchor.Preview>\n          <span className=\"text-xs text-foreground-400\">vercel.com</span>\n        </Anchor.Preview>\n        Vercel\n      </Anchor>\n    </Flex>\n  );\n}"
+    },
+    "04-breadcrumb": {
+        "title": "Breadcrumb",
+        "description": "Anchor used as navigational crumbs — the last segment is non-interactive text.",
+        "code": "import { Anchor, Flex } from 'ui-lab-components';\n\nconst crumbs = [\n  { label: 'Home', href: '/' },\n  { label: 'Projects', href: '/projects' },\n  { label: 'ui-lab', href: '/projects/ui-lab' },\n];\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" align=\"center\" className=\"text-sm\">\n      {crumbs.map((crumb, i) => (\n        <span key={crumb.href} className=\"flex items-center gap-xs\">\n          {i > 0 && <span className=\"text-foreground-400 mx-1\">/</span>}\n          {i < crumbs.length - 1 ? (\n            <Anchor href={crumb.href}>{crumb.label}</Anchor>\n          ) : (\n            <span className=\"text-foreground-400\">{crumb.label}</span>\n          )}\n        </span>\n      ))}\n    </Flex>\n  );\n}"
     }
 }

package/dist/components/Anchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Anchor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAStD,QAAA,MAAM,cAAc,EAAE,UAAU,EAAO,CAAC;AAexC,eAAO,MAAM,YAAY,EAAE,eAwC1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Anchor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAetD,QAAA,MAAM,cAAc,EAAE,UAAU,EAAO,CAAC;AAexC,eAAO,MAAM,YAAY,EAAE,eAwC1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}

package/dist/components/Anchor/index.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-anchor.js';
+import Example1, { metadata as metadata1 } from './examples/01-inline-text.js';
+import Example2, { metadata as metadata2 } from './examples/02-underline-variants.js';
+import Example3, { metadata as metadata3 } from './examples/03-preview-tooltip.js';
+import Example4, { metadata as metadata4 } from './examples/04-breadcrumb.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
-    { id: '01-basic-anchor', Component: Example1, metadata: metadata1 },
+    { id: '01-inline-text', Component: Example1, metadata: metadata1 },
+    { id: '02-underline-variants', Component: Example2, metadata: metadata2 },
+    { id: '03-preview-tooltip', Component: Example3, metadata: metadata3 },
+    { id: '04-breadcrumb', Component: Example4, metadata: metadata4 },
 ];
 const anchorControls = [];
 const anchorBasicCode = `import { Anchor } from "ui-lab-components";

package/dist/components/Anchor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Anchor/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAW,MAAM,mBAAmB,CAAC;AAEpD,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACpE,CAAC;AAEF,MAAM,cAAc,GAAiB,EAAE,CAAC;AAExC,MAAM,eAAe,GAAG;;;;;;;;;;;EAWtB,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAoB;IAC3C,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,8EAA8E;IAC3F,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,sLAEI,EACJ,2MAEI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,mCAAmC;YAChD,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,CACP,MAAC,MAAM,2BAEL,KAAC,MAAM,CAAC,OAAO,cACb,cAAK,SAAS,EAAC,SAAS,gCAAsB,GAC/B,IACV,CACV;YACD,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,MAAC,MAAM,2BAEL,KAAC,MAAM,CAAC,OAAO,cACb,cAAK,SAAS,EAAC,SAAS,gCAAsB,GAC/B,IACV,CACV;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Anchor/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAW,MAAM,mBAAmB,CAAC;AAEpD,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IAClE,EAAE,EAAE,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACzE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CAClE,CAAC;AAEF,MAAM,cAAc,GAAiB,EAAE,CAAC;AAExC,MAAM,eAAe,GAAG;;;;;;;;;;;EAWtB,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAoB;IAC3C,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,8EAA8E;IAC3F,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,sLAEI,EACJ,2MAEI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,mCAAmC;YAChD,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,CACP,MAAC,MAAM,2BAEL,KAAC,MAAM,CAAC,OAAO,cACb,cAAK,SAAS,EAAC,SAAS,gCAAsB,GAC/B,IACV,CACV;YACD,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,MAAC,MAAM,2BAEL,KAAC,MAAM,CAAC,OAAO,cACb,cAAK,SAAS,EAAC,SAAS,gCAAsB,GAC/B,IACV,CACV;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}

package/dist/components/Badge/examples/01-status-badges.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=01-status-badges.d.ts.map

package/dist/components/Badge/examples/01-status-badges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-status-badges.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/01-status-badges.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAS9B"}

package/dist/components/Badge/examples/01-status-badges.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Status Labels',
+    description: 'Inline status labels alongside text content, such as document or workflow states.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { gap: "sm", align: "center", justify: "center", wrap: "wrap", children: [_jsx(Badge, { variant: "default", children: "Draft" }), _jsx(Badge, { variant: "default", children: "In Review" }), _jsx(Badge, { variant: "default", children: "Published" }), _jsx(Badge, { variant: "default", children: "Archived" })] }));
+}
+//# sourceMappingURL=01-status-badges.js.map

package/dist/components/Badge/examples/01-status-badges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-status-badges.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/01-status-badges.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,mFAAmF;CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,aACxD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,sBAAc,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,0BAAkB,EAC1C,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,0BAAkB,EAC1C,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,yBAAiB,IACpC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/02-icon-position.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-icon-position.d.ts.map

package/dist/components/Badge/examples/02-icon-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-icon-position.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-icon-position.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAS9B"}

package/dist/components/Badge/examples/02-icon-position.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Flex } from 'ui-lab-components';
+import { FaCircleCheck, FaTriangleExclamation, FaArrowRight, FaStar } from 'react-icons/fa6';
+export const metadata = {
+    title: 'Icon Position',
+    description: 'Icons placed on the left or right of the label — left for status/type indicators, right for directional cues.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { gap: "xs", align: "center", justify: "center", wrap: "wrap", children: [_jsx(Badge, { icon: { left: _jsx(FaCircleCheck, { size: 10 }) }, children: "Verified" }), _jsx(Badge, { icon: { left: _jsx(FaTriangleExclamation, { size: 10 }) }, children: "Warning" }), _jsx(Badge, { icon: { right: _jsx(FaArrowRight, { size: 10 }) }, children: "Continue" }), _jsx(Badge, { icon: { right: _jsx(FaStar, { size: 10 }) }, children: "Featured" })] }));
+}
+//# sourceMappingURL=02-icon-position.js.map

package/dist/components/Badge/examples/02-icon-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-icon-position.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-icon-position.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE7F,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,+GAA+G;CAC7H,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,aACxD,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAC,aAAa,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,yBAAkB,EACpE,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAC,qBAAqB,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,wBAAiB,EAC3E,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,yBAAkB,EACpE,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,yBAAkB,IACzD,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/02-variants-and-sizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"02-variants-and-sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-variants-and-sizes.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA8D9B"}
+{"version":3,"file":"02-variants-and-sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-variants-and-sizes.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAqC9B"}

package/dist/components/Badge/examples/02-variants-and-sizes.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from 'ui-lab-components';
 export const metadata = {
-    title: 'Badge Variants and Sizes',
-    description: 'Showcases all available badge variants (default, success, warning, danger, info) and sizes (sm, md, lg). Also demonstrates pill-shaped badges.'
+    title: 'Badge Variants',
+    description: 'Showcases all available badge variants (default, success, warning, danger, info) and demonstrates pill-shaped badges.'
 };
 export default function Example() {
-    return (_jsxs("div", { className: "p-4 space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Variants" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "default", children: "Default" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Sizes" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { size: "sm", children: "Small" }), _jsx(Badge, { size: "md", children: "Medium" }), _jsx(Badge, { size: "lg", children: "Large" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Pill Shape" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { pill: true, variant: "default", children: "Default Pill" }), _jsx(Badge, { pill: true, variant: "success", children: "Success Pill" }), _jsx(Badge, { pill: true, variant: "warning", children: "Warning Pill" }), _jsx(Badge, { pill: true, variant: "danger", children: "Danger Pill" }), _jsx(Badge, { pill: true, variant: "info", children: "Info Pill" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Variants with Sizes" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "success", size: "sm", children: "Small Success" }), _jsx(Badge, { variant: "success", size: "md", children: "Medium Success" }), _jsx(Badge, { variant: "success", size: "lg", children: "Large Success" })] }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "danger", size: "sm", children: "Small Danger" }), _jsx(Badge, { variant: "danger", size: "md", children: "Medium Danger" }), _jsx(Badge, { variant: "danger", size: "lg", children: "Large Danger" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "With Count" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "default", count: 5 }), _jsx(Badge, { variant: "success", count: 12 }), _jsx(Badge, { variant: "warning", count: 99 }), _jsx(Badge, { variant: "danger", count: 3, pill: true }), _jsx(Badge, { variant: "info", count: 42, pill: true })] })] })] }));
+    return (_jsxs("div", { className: "p-4 space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Variants" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "default", children: "Default" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "Pill Shape" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { pill: true, variant: "default", children: "Default Pill" }), _jsx(Badge, { pill: true, variant: "success", children: "Success Pill" }), _jsx(Badge, { pill: true, variant: "warning", children: "Warning Pill" }), _jsx(Badge, { pill: true, variant: "danger", children: "Danger Pill" }), _jsx(Badge, { pill: true, variant: "info", children: "Info Pill" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground-200 mb-3", children: "With Count" }), _jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [_jsx(Badge, { variant: "default", count: 5 }), _jsx(Badge, { variant: "success", count: 12 }), _jsx(Badge, { variant: "warning", count: 99 }), _jsx(Badge, { variant: "danger", count: 3, pill: true }), _jsx(Badge, { variant: "info", count: 42, pill: true })] })] })] }));
 }
 //# sourceMappingURL=02-variants-and-sizes.js.map

package/dist/components/Badge/examples/02-variants-and-sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"02-variants-and-sizes.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-variants-and-sizes.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,0BAA0B;IACjC,WAAW,EAAE,gJAAgJ;CAC9J,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,0BACE,aAAI,SAAS,EAAC,gDAAgD,yBAAc,EAC5E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,uBAAe,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,qBAAa,IAC9B,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,sBAAW,EACzE,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,IAAI,EAAC,IAAI,sBAAc,EAC9B,KAAC,KAAK,IAAC,IAAI,EAAC,IAAI,uBAAe,EAC/B,KAAC,KAAK,IAAC,IAAI,EAAC,IAAI,sBAAc,IAC1B,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,2BAAgB,EAC9E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,4BAAoB,EAChD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,MAAM,0BAAkB,IACxC,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,oCAAyB,EACvF,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,8BAAsB,EACxD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,+BAAuB,EACzD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,8BAAsB,IACpD,EACN,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,6BAAqB,EACtD,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,8BAAsB,EACvD,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,6BAAqB,IAClD,IACF,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,2BAAgB,EAC9E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,GAAI,EACrC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,GAAI,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,GAAI,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,SAAG,EACzC,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,IAAI,SAAG,IACpC,IACF,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"02-variants-and-sizes.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/02-variants-and-sizes.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,uHAAuH;CACrI,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,0BACE,aAAI,SAAS,EAAC,gDAAgD,yBAAc,EAC5E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,uBAAe,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,qBAAa,IAC9B,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,2BAAgB,EAC9E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,SAAS,6BAAqB,EAClD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,4BAAoB,EAChD,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAC,MAAM,0BAAkB,IACxC,IACF,EAEN,0BACE,aAAI,SAAS,EAAC,gDAAgD,2BAAgB,EAC9E,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,GAAI,EACrC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,GAAI,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,GAAI,EACtC,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,SAAG,EACzC,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,IAAI,SAAG,IACpC,IACF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/03-selectable-tags.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-selectable-tags.d.ts.map

package/dist/components/Badge/examples/03-selectable-tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-selectable-tags.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/03-selectable-tags.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA0B9B"}

package/dist/components/Badge/examples/03-selectable-tags.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge, Flex } from 'ui-lab-components';
+import { FaTag } from 'react-icons/fa6';
+export const metadata = {
+    title: 'Selectable Tags',
+    description: 'Icon-prefixed tags that toggle active state, e.g. for filtering or labeling.',
+};
+const tags = ['design', 'frontend', 'api', 'docs'];
+export default function Example() {
+    const [active, setActive] = useState(['design']);
+    function toggle(tag) {
+        setActive((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
+    }
+    return (_jsx(Flex, { gap: "xs", align: "center", justify: "center", wrap: "wrap", children: tags.map((tag) => (_jsx(Badge, { icon: _jsx(FaTag, { size: 10 }), onClick: () => toggle(tag), style: {
+                cursor: 'pointer',
+                opacity: active.includes(tag) ? 1 : 0.45,
+            }, children: tag }, tag))) }));
+}
+//# sourceMappingURL=03-selectable-tags.js.map

package/dist/components/Badge/examples/03-selectable-tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-selectable-tags.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/03-selectable-tags.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3D,SAAS,MAAM,CAAC,GAAW;QACzB,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CACjB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CACpE,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACvD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,KAAC,KAAK,IAEJ,IAAI,EAAE,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAC1B,KAAK,EAAE;gBACL,MAAM,EAAE,SAAS;gBACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;aACzC,YAEA,GAAG,IARC,GAAG,CASF,CACT,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/04-dismissible.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-dismissible.d.ts.map

package/dist/components/Badge/examples/04-dismissible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-dismissible.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/04-dismissible.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAwB9B"}

package/dist/components/Badge/examples/04-dismissible.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Dismissible Tags',
+    description: 'Applied label chips in a multi-select input or filter bar that can be individually removed.',
+};
+const initial = ['React', 'TypeScript', 'CSS Modules', 'Next.js', 'Radix UI'];
+export default function Example() {
+    const [tags, setTags] = useState(initial);
+    return (_jsxs(Flex, { gap: "xs", align: "center", justify: "center", wrap: "wrap", children: [tags.map((tag) => (_jsx(Badge, { dismissible: true, onDismiss: () => setTags((prev) => prev.filter((t) => t !== tag)), children: tag }, tag))), tags.length === 0 && (_jsx("span", { className: "text-sm text-foreground-400 cursor-pointer", onClick: () => setTags(initial), children: "All dismissed \u2014 click to reset" }))] }));
+}
+//# sourceMappingURL=04-dismissible.js.map

package/dist/components/Badge/examples/04-dismissible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-dismissible.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/04-dismissible.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,6FAA6F;CAC3G,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAE9E,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,aACvD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,KAAC,KAAK,IAEJ,WAAW,QACX,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,YAEhE,GAAG,IAJC,GAAG,CAKF,CACT,CAAC,EACD,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,eACE,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,oDAG1B,CACR,IACI,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/05-semantic-colors.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=05-semantic-colors.d.ts.map

package/dist/components/Badge/examples/05-semantic-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-semantic-colors.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/05-semantic-colors.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAU9B"}

package/dist/components/Badge/examples/05-semantic-colors.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Semantic Colors',
+    description: 'Badges styled with design system semantic color tokens for success, warning, danger, info, and accent states.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { gap: "sm", align: "center", justify: "center", wrap: "wrap", children: [_jsx(Badge, { className: "bg-success-500/20 text-success-500 border-none", children: "Success" }), _jsx(Badge, { className: "bg-warning-500/20 text-warning-500 border-none", children: "Warning" }), _jsx(Badge, { className: "bg-danger-500/20 text-danger-500 border-none", children: "Danger" }), _jsx(Badge, { className: "bg-info-500/20 text-info-500 border-none", children: "Info" }), _jsx(Badge, { className: "bg-accent-500/20 text-accent-500 border-none", children: "Accent" })] }));
+}
+//# sourceMappingURL=05-semantic-colors.js.map

package/dist/components/Badge/examples/05-semantic-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-semantic-colors.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/05-semantic-colors.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,+GAA+G;CAC7H,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,aACxD,KAAC,KAAK,IAAC,SAAS,EAAC,gDAAgD,wBAAgB,EACjF,KAAC,KAAK,IAAC,SAAS,EAAC,gDAAgD,wBAAgB,EACjF,KAAC,KAAK,IAAC,SAAS,EAAC,8CAA8C,uBAAe,EAC9E,KAAC,KAAK,IAAC,SAAS,EAAC,0CAA0C,qBAAa,EACxE,KAAC,KAAK,IAAC,SAAS,EAAC,8CAA8C,uBAAe,IACzE,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Badge/examples/index.d.ts

@@ -1,5 +1,11 @@
-export { default as Example1 } from './01-basic-badge.js';
-export { metadata as metadata1 } from './01-basic-badge.js';
-export { default as Example2 } from './02-variants-and-sizes.js';
-export { metadata as metadata2 } from './02-variants-and-sizes.js';
+export { default as Example1 } from './01-status-badges.js';
+export { metadata as metadata1 } from './01-status-badges.js';
+export { default as Example2 } from './02-icon-position.js';
+export { metadata as metadata2 } from './02-icon-position.js';
+export { default as Example3 } from './03-selectable-tags.js';
+export { metadata as metadata3 } from './03-selectable-tags.js';
+export { default as Example4 } from './04-dismissible.js';
+export { metadata as metadata4 } from './04-dismissible.js';
+export { default as Example5 } from './05-semantic-colors.js';
+export { metadata as metadata5 } from './05-semantic-colors.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Badge/examples/index.js

@@ -1,5 +1,11 @@
-export { default as Example1 } from './01-basic-badge.js';
-export { metadata as metadata1 } from './01-basic-badge.js';
-export { default as Example2 } from './02-variants-and-sizes.js';
-export { metadata as metadata2 } from './02-variants-and-sizes.js';
+export { default as Example1 } from './01-status-badges.js';
+export { metadata as metadata1 } from './01-status-badges.js';
+export { default as Example2 } from './02-icon-position.js';
+export { metadata as metadata2 } from './02-icon-position.js';
+export { default as Example3 } from './03-selectable-tags.js';
+export { metadata as metadata3 } from './03-selectable-tags.js';
+export { default as Example4 } from './04-dismissible.js';
+export { metadata as metadata4 } from './04-dismissible.js';
+export { default as Example5 } from './05-semantic-colors.js';
+export { metadata as metadata5 } from './05-semantic-colors.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Badge/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Badge/examples.json

@@ -1,12 +1,27 @@
 {
-    "01-basic-badge": {
-        "title": "Basic Badge",
-        "description": "A simple badge with default styling. Use this to display labels, tags, or status indicators in your interface.",
-        "code": "import React from 'react';\nimport { Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Badge>New</Badge>;\n}"
-    },
-    "02-variants-and-sizes": {
-        "title": "Badge Variants and Sizes",
-        "description": "Showcases all available badge variants (default, success, warning, danger, info) and sizes (sm, md, lg). Also demonstrates pill-shaped badges.",
-        "code": "import React from 'react';\nimport { Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"p-4 space-y-8\">\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Variants</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge variant=\"default\">Default</Badge>\n          <Badge variant=\"success\">Success</Badge>\n          <Badge variant=\"warning\">Warning</Badge>\n          <Badge variant=\"danger\">Danger</Badge>\n          <Badge variant=\"info\">Info</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Sizes</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge size=\"sm\">Small</Badge>\n          <Badge size=\"md\">Medium</Badge>\n          <Badge size=\"lg\">Large</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Pill Shape</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge pill variant=\"default\">Default Pill</Badge>\n          <Badge pill variant=\"success\">Success Pill</Badge>\n          <Badge pill variant=\"warning\">Warning Pill</Badge>\n          <Badge pill variant=\"danger\">Danger Pill</Badge>\n          <Badge pill variant=\"info\">Info Pill</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Variants with Sizes</h3>\n        <div className=\"space-y-3\">\n          <div className=\"flex gap-2 flex-wrap items-center\">\n            <Badge variant=\"success\" size=\"sm\">Small Success</Badge>\n            <Badge variant=\"success\" size=\"md\">Medium Success</Badge>\n            <Badge variant=\"success\" size=\"lg\">Large Success</Badge>\n          </div>\n          <div className=\"flex gap-2 flex-wrap items-center\">\n            <Badge variant=\"danger\" size=\"sm\">Small Danger</Badge>\n            <Badge variant=\"danger\" size=\"md\">Medium Danger</Badge>\n            <Badge variant=\"danger\" size=\"lg\">Large Danger</Badge>\n          </div>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">With Count</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge variant=\"default\" count={5} />\n          <Badge variant=\"success\" count={12} />\n          <Badge variant=\"warning\" count={99} />\n          <Badge variant=\"danger\" count={3} pill />\n          <Badge variant=\"info\" count={42} pill />\n        </div>\n      </div>\n    </div>\n  );\n}"
+    "01-status-badges": {
+        "title": "Status Labels",
+        "description": "Inline status labels alongside text content, such as document or workflow states.",
+        "code": "import { Badge, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"sm\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge variant=\"default\">Draft</Badge>\n      <Badge variant=\"default\">In Review</Badge>\n      <Badge variant=\"default\">Published</Badge>\n      <Badge variant=\"default\">Archived</Badge>\n    </Flex>\n  );\n}"
+    },
+    "02-icon-position": {
+        "title": "Icon Position",
+        "description": "Icons placed on the left or right of the label — left for status/type indicators, right for directional cues.",
+        "code": "import { Badge, Flex } from 'ui-lab-components';\nimport { FaCircleCheck, FaTriangleExclamation, FaArrowRight, FaStar } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge icon={{ left: <FaCircleCheck size={10} /> }}>Verified</Badge>\n      <Badge icon={{ left: <FaTriangleExclamation size={10} /> }}>Warning</Badge>\n      <Badge icon={{ right: <FaArrowRight size={10} /> }}>Continue</Badge>\n      <Badge icon={{ right: <FaStar size={10} /> }}>Featured</Badge>\n    </Flex>\n  );\n}"
+    },
+    "03-selectable-tags": {
+        "title": "Selectable Tags",
+        "description": "Icon-prefixed tags that toggle active state, e.g. for filtering or labeling.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Badge, Flex } from 'ui-lab-components';\nimport { FaTag } from 'react-icons/fa6';\n\nconst tags = ['design', 'frontend', 'api', 'docs'];\n\nexport default function Example() {\n  const [active, setActive] = useState<string[]>(['design']);\n\n  function toggle(tag: string) {\n    setActive((prev) =>\n      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]\n    );\n  }\n\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      {tags.map((tag) => (\n        <Badge\n          key={tag}\n          icon={<FaTag size={10} />}\n          onClick={() => toggle(tag)}\n          style={{\n            cursor: 'pointer',\n            opacity: active.includes(tag) ? 1 : 0.45,\n          }}\n        >\n          {tag}\n        </Badge>\n      ))}\n    </Flex>\n  );\n}"
+    },
+    "04-dismissible": {
+        "title": "Dismissible Tags",
+        "description": "Applied label chips in a multi-select input or filter bar that can be individually removed.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Badge, Flex } from 'ui-lab-components';\n\nconst initial = ['React', 'TypeScript', 'CSS Modules', 'Next.js', 'Radix UI'];\n\nexport default function Example() {\n  const [tags, setTags] = useState(initial);\n\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      {tags.map((tag) => (\n        <Badge\n          key={tag}\n          dismissible\n          onDismiss={() => setTags((prev) => prev.filter((t) => t !== tag))}\n        >\n          {tag}\n        </Badge>\n      ))}\n      {tags.length === 0 && (\n        <span\n          className=\"text-sm text-foreground-400 cursor-pointer\"\n          onClick={() => setTags(initial)}\n        >\n          All dismissed — click to reset\n        </span>\n      )}\n    </Flex>\n  );\n}"
+    },
+    "05-semantic-colors": {
+        "title": "Semantic Colors",
+        "description": "Badges styled with design system semantic color tokens for success, warning, danger, info, and accent states.",
+        "code": "import { Badge, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"sm\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge className=\"bg-success-500/20 text-success-500 border-none\">Success</Badge>\n      <Badge className=\"bg-warning-500/20 text-warning-500 border-none\">Warning</Badge>\n      <Badge className=\"bg-danger-500/20 text-danger-500 border-none\">Danger</Badge>\n      <Badge className=\"bg-info-500/20 text-info-500 border-none\">Info</Badge>\n      <Badge className=\"bg-accent-500/20 text-accent-500 border-none\">Accent</Badge>\n    </Flex>\n  );\n}"
     }
 }

package/dist/components/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUtD,QAAA,MAAM,aAAa,EAAE,UAAU,EA+B9B,CAAC;AAQF,eAAO,MAAM,WAAW,EAAE,eAkDzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkBtD,QAAA,MAAM,aAAa,EAAE,UAAU,EAoB9B,CAAC;AAQF,eAAO,MAAM,WAAW,EAAE,eAiDzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}