@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/components/sandbox.stories.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { Sandbox } from "./sandbox.js";
+const meta = {
+    title: "Component/Sandbox",
+    component: Sandbox,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        url: {
+            control: "text",
+            description: "Display url"
+        },
+        showCopy: {
+            control: "boolean",
+            description: "Show the copy button"
+        },
+        showEye: {
+            control: "boolean",
+            description: "Show the eye button"
+        },
+        copyIcon: {
+            control: false,
+            description: "Show the copy icon"
+        },
+        tooltipText: {
+            control: "text",
+            description: "Copy button tooltip text"
+        },
+        showToast: {
+            control: "boolean",
+            description: "Show toast on copy"
+        },
+        onCopy: {
+            action: "copied",
+            description: "Successful copy callback"
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy URL",
+        showToast: true
+    }
+};
+export const LongUrl = {
+    args: {
+        url: "https://very-long-domain-name-that-should-be-truncated.example.com/api/v1/very-long-endpoint-name",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy URL",
+        showToast: true
+    }
+};
+export const WithoutCopy = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: false,
+        showEye: true
+    }
+};
+export const CustomIcon = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Check, {}),
+        tooltipText: "Copy URL",
+        showToast: true
+    }
+};
+export const CustomTooltip = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy link",
+        showToast: true
+    }
+};
+export const WithoutToast = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy URL",
+        showToast: false
+    }
+};
+export const WithCallback = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: true,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy URL",
+        showToast: true,
+        onCopy: (text)=>{
+            console.log("Copied:", text);
+        }
+    }
+};
+export const WithoutEye = {
+    args: {
+        url: "http://localhost:8080/fhir",
+        showCopy: true,
+        showEye: false,
+        copyIcon: /*#__PURE__*/ _jsx(Copy, {}),
+        tooltipText: "Copy URL",
+        showToast: true
+    }
+};
+
+//# sourceMappingURL=sandbox.stories.js.map

package/dist/src/components/sandbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sandbox.stories.tsx"],"sourcesContent":["import { Check, Copy } from \"lucide-react\";\nimport { Sandbox } from \"./sandbox\";\n\nconst meta = {\n\ttitle: \"Component/Sandbox\",\n\tcomponent: Sandbox,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\turl: {\n\t\t\tcontrol: \"text\",\n\t\t\tdescription: \"Display url\",\n\t\t},\n\t\tshowCopy: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Show the copy button\",\n\t\t},\n\t\tshowEye: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Show the eye button\",\n\t\t},\n\t\tcopyIcon: {\n\t\t\tcontrol: false,\n\t\t\tdescription: \"Show the copy icon\",\n\t\t},\n\t\ttooltipText: {\n\t\t\tcontrol: \"text\",\n\t\t\tdescription: \"Copy button tooltip text\",\n\t\t},\n\t\tshowToast: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Show toast on copy\",\n\t\t},\n\t\tonCopy: {\n\t\t\taction: \"copied\",\n\t\t\tdescription: \"Successful copy callback\",\n\t\t},\n\t},\n};\n\nexport default meta;\n\nexport const Default = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: true,\n\t},\n};\n\nexport const LongUrl = {\n\targs: {\n\t\turl: \"https://very-long-domain-name-that-should-be-truncated.example.com/api/v1/very-long-endpoint-name\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: true,\n\t},\n};\n\nexport const WithoutCopy = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: false,\n\t\tshowEye: true,\n\t},\n};\n\nexport const CustomIcon = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Check />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: true,\n\t},\n};\n\nexport const CustomTooltip = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy link\",\n\t\tshowToast: true,\n\t},\n};\n\nexport const WithoutToast = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: false,\n\t},\n};\n\nexport const WithCallback = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: true,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: true,\n\t\tonCopy: (text: string) => {\n\t\t\tconsole.log(\"Copied:\", text);\n\t\t},\n\t},\n};\n\nexport const WithoutEye = {\n\targs: {\n\t\turl: \"http://localhost:8080/fhir\",\n\t\tshowCopy: true,\n\t\tshowEye: false,\n\t\tcopyIcon: <Copy />,\n\t\ttooltipText: \"Copy URL\",\n\t\tshowToast: true,\n\t},\n};\n"],"names":["Check","Copy","Sandbox","meta","title","component","parameters","layout","tags","argTypes","url","control","description","showCopy","showEye","copyIcon","tooltipText","showToast","onCopy","action","Default","args","LongUrl","WithoutCopy","CustomIcon","CustomTooltip","WithoutToast","WithCallback","text","console","log","WithoutEye"],"mappings":";AAAA,SAASA,KAAK,EAAEC,IAAI,QAAQ,eAAe;AAC3C,SAASC,OAAO,QAAQ,eAAY;AAEpC,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;IAClBC,UAAU;QACTC,KAAK;YACJC,SAAS;YACTC,aAAa;QACd;QACAC,UAAU;YACTF,SAAS;YACTC,aAAa;QACd;QACAE,SAAS;YACRH,SAAS;YACTC,aAAa;QACd;QACAG,UAAU;YACTJ,SAAS;YACTC,aAAa;QACd;QACAI,aAAa;YACZL,SAAS;YACTC,aAAa;QACd;QACAK,WAAW;YACVN,SAAS;YACTC,aAAa;QACd;QACAM,QAAQ;YACPC,QAAQ;YACRP,aAAa;QACd;IACD;AACD;AAEA,eAAeT,KAAK;AAEpB,OAAO,MAAMiB,UAAU;IACtBC,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;IACZ;AACD,EAAE;AAEF,OAAO,MAAMK,UAAU;IACtBD,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;IACZ;AACD,EAAE;AAEF,OAAO,MAAMM,cAAc;IAC1BF,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;IACV;AACD,EAAE;AAEF,OAAO,MAAMU,aAAa;IACzBH,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACf;QACXgB,aAAa;QACbC,WAAW;IACZ;AACD,EAAE;AAEF,OAAO,MAAMQ,gBAAgB;IAC5BJ,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;IACZ;AACD,EAAE;AAEF,OAAO,MAAMS,eAAe;IAC3BL,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;IACZ;AACD,EAAE;AAEF,OAAO,MAAMU,eAAe;IAC3BN,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;QACXC,QAAQ,CAACU;YACRC,QAAQC,GAAG,CAAC,WAAWF;QACxB;IACD;AACD,EAAE;AAEF,OAAO,MAAMG,aAAa;IACzBV,MAAM;QACLX,KAAK;QACLG,UAAU;QACVC,SAAS;QACTC,wBAAU,KAACd;QACXe,aAAa;QACbC,WAAW;IACZ;AACD,EAAE"}

package/dist/src/components/segment-control.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+interface SegmentControlProps<T extends string> {
+    value: T;
+    onValueChange: (value: T) => void;
+    items: {
+        value: T;
+        label: ReactNode;
+    }[];
+}
+declare function SegmentControl<T extends string>({ value, onValueChange, items, }: SegmentControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export { SegmentControl };
+export type { SegmentControlProps };
+//# sourceMappingURL=segment-control.d.ts.map

package/dist/src/components/segment-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,UAAU,mBAAmB,CAAC,CAAC,SAAS,MAAM;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,aAAa,EACb,KAAK,GACL,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAgCxB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/src/components/segment-control.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../shadcn/lib/utils.js";
+// Container: h-24px, p-2px, rounded-full, bg-secondary_inverse
+const containerClass = cn("inline-flex", "h-6", "p-0.5", "bg-bg-secondary_inverse", "rounded-full", "border", "border-transparent", "outline-none", "transition-all", "focus-visible:border-border-link", "focus-visible:ring-4", "focus-visible:ring-ring-blue");
+// Item: px-8px py-2px, rounded-full (16px), typo-body
+const itemBaseClass = cn("flex", "items-center", "justify-center", "px-2", "py-0.5", "typo-body", "leading-4", "cursor-pointer", "rounded-full", "select-none", "transition-colors");
+const itemInactiveClass = "text-text-quternary_on-brand";
+const itemActiveClass = "bg-bg-primary text-text-primary";
+function SegmentControl({ value, onValueChange, items }) {
+    const isToggle = items.length === 2;
+    return /*#__PURE__*/ _jsx("div", {
+        className: containerClass,
+        children: items.map((item)=>{
+            const isActive = item.value === value;
+            return /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: cn(itemBaseClass, isActive ? itemActiveClass : itemInactiveClass),
+                onClick: ()=>{
+                    if (isToggle) {
+                        const other = items.find((i)=>i.value !== item.value);
+                        onValueChange(isActive ? other?.value ?? item.value : item.value);
+                    } else if (!isActive) {
+                        onValueChange(item.value);
+                    }
+                },
+                children: item.label
+            }, item.value);
+        })
+    });
+}
+export { SegmentControl };
+
+//# sourceMappingURL=segment-control.js.map

package/dist/src/components/segment-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Container: h-24px, p-2px, rounded-full, bg-secondary_inverse\nconst containerClass = cn(\n\t\"inline-flex\",\n\t\"h-6\",\n\t\"p-0.5\",\n\t\"bg-bg-secondary_inverse\",\n\t\"rounded-full\",\n\t\"border\",\n\t\"border-transparent\",\n\t\"outline-none\",\n\t\"transition-all\",\n\t\"focus-visible:border-border-link\",\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n);\n\n// Item: px-8px py-2px, rounded-full (16px), typo-body\nconst itemBaseClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"typo-body\",\n\t\"leading-4\",\n\t\"cursor-pointer\",\n\t\"rounded-full\",\n\t\"select-none\",\n\t\"transition-colors\",\n);\n\nconst itemInactiveClass = \"text-text-quternary_on-brand\";\nconst itemActiveClass = \"bg-bg-primary text-text-primary\";\n\ninterface SegmentControlProps<T extends string> {\n\tvalue: T;\n\tonValueChange: (value: T) => void;\n\titems: { value: T; label: ReactNode }[];\n}\n\nfunction SegmentControl<T extends string>({\n\tvalue,\n\tonValueChange,\n\titems,\n}: SegmentControlProps<T>) {\n\tconst isToggle = items.length === 2;\n\n\treturn (\n\t\t<div className={containerClass}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst isActive = item.value === value;\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\titemBaseClass,\n\t\t\t\t\t\t\tisActive ? itemActiveClass : itemInactiveClass,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isToggle) {\n\t\t\t\t\t\t\t\tconst other = items.find((i) => i.value !== item.value);\n\t\t\t\t\t\t\t\tonValueChange(\n\t\t\t\t\t\t\t\t\tisActive ? (other?.value ?? item.value) : item.value,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else if (!isActive) {\n\t\t\t\t\t\t\t\tonValueChange(item.value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nexport { SegmentControl };\nexport type { SegmentControlProps };\n"],"names":["cn","containerClass","itemBaseClass","itemInactiveClass","itemActiveClass","SegmentControl","value","onValueChange","items","isToggle","length","div","className","map","item","isActive","button","type","onClick","other","find","i","label"],"mappings":";AACA,SAASA,EAAE,QAAQ,yBAAuB;AAE1C,+DAA+D;AAC/D,MAAMC,iBAAiBD,GACtB,eACA,OACA,SACA,2BACA,gBACA,UACA,sBACA,gBACA,kBACA,oCACA,wBACA;AAGD,sDAAsD;AACtD,MAAME,gBAAgBF,GACrB,QACA,gBACA,kBACA,QACA,UACA,aACA,aACA,kBACA,gBACA,eACA;AAGD,MAAMG,oBAAoB;AAC1B,MAAMC,kBAAkB;AAQxB,SAASC,eAAiC,EACzCC,KAAK,EACLC,aAAa,EACbC,KAAK,EACmB;IACxB,MAAMC,WAAWD,MAAME,MAAM,KAAK;IAElC,qBACC,KAACC;QAAIC,WAAWX;kBACdO,MAAMK,GAAG,CAAC,CAACC;YACX,MAAMC,WAAWD,KAAKR,KAAK,KAAKA;YAChC,qBACC,KAACU;gBAEAC,MAAK;gBACLL,WAAWZ,GACVE,eACAa,WAAWX,kBAAkBD;gBAE9Be,SAAS;oBACR,IAAIT,UAAU;wBACb,MAAMU,QAAQX,MAAMY,IAAI,CAAC,CAACC,IAAMA,EAAEf,KAAK,KAAKQ,KAAKR,KAAK;wBACtDC,cACCQ,WAAYI,OAAOb,SAASQ,KAAKR,KAAK,GAAIQ,KAAKR,KAAK;oBAEtD,OAAO,IAAI,CAACS,UAAU;wBACrBR,cAAcO,KAAKR,KAAK;oBACzB;gBACD;0BAECQ,KAAKQ,KAAK;eAjBNR,KAAKR,KAAK;QAoBlB;;AAGH;AAEA,SAASD,cAAc,GAAG"}

package/dist/src/components/segment-control.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { SegmentControl } from "./segment-control.js";
+const meta = {
+    title: "Component/SegmentControl",
+    component: SegmentControl,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        value: "yaml",
+        onValueChange: ()=>{},
+        items: [
+            {
+                value: "yaml",
+                label: "YAML"
+            },
+            {
+                value: "json",
+                label: "JSON"
+            }
+        ]
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ _jsx(SegmentControl, {
+            value: value,
+            onValueChange: setValue,
+            items: args.items
+        });
+    }
+};
+export const MoreThanTwo = {
+    args: {
+        value: "yaml",
+        onValueChange: ()=>{},
+        items: [
+            {
+                value: "yaml",
+                label: "YAML"
+            },
+            {
+                value: "json",
+                label: "JSON"
+            },
+            {
+                value: "toml",
+                label: "TOML"
+            }
+        ]
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ _jsx(SegmentControl, {
+            value: value,
+            onValueChange: setValue,
+            items: args.items
+        });
+    }
+};
+
+//# sourceMappingURL=segment-control.stories.js.map

package/dist/src/components/segment-control.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/segment-control.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { useState } from \"react\";\n\nimport { SegmentControl } from \"./segment-control\";\n\nconst meta = {\n\ttitle: \"Component/SegmentControl\",\n\tcomponent: SegmentControl,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n} satisfies Meta<typeof SegmentControl>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n\targs: {\n\t\tvalue: \"yaml\",\n\t\tonValueChange: () => {},\n\t\titems: [\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t],\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.value);\n\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={setValue}\n\t\t\t\titems={args.items}\n\t\t\t/>\n\t\t);\n\t},\n};\n\nexport const MoreThanTwo: Story = {\n\targs: {\n\t\tvalue: \"yaml\",\n\t\tonValueChange: () => {},\n\t\titems: [\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t\t{ value: \"toml\", label: \"TOML\" },\n\t\t],\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.value);\n\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={setValue}\n\t\t\t\titems={args.items}\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"names":["useState","SegmentControl","meta","title","component","parameters","layout","tags","Default","args","value","onValueChange","items","label","render","setValue","MoreThanTwo"],"mappings":";AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC7BC,MAAM;QACLC,OAAO;QACPC,eAAe,KAAO;QACtBC,OAAO;YACN;gBAAEF,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;SAC/B;IACF;IACAC,QAAQ,CAACL;QACR,MAAM,CAACC,OAAOK,SAAS,GAAGf,SAASS,KAAKC,KAAK;QAE7C,qBACC,KAACT;YACAS,OAAOA;YACPC,eAAeI;YACfH,OAAOH,KAAKG,KAAK;;IAGpB;AACD,EAAE;AAEF,OAAO,MAAMI,cAAqB;IACjCP,MAAM;QACLC,OAAO;QACPC,eAAe,KAAO;QACtBC,OAAO;YACN;gBAAEF,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;SAC/B;IACF;IACAC,QAAQ,CAACL;QACR,MAAM,CAACC,OAAOK,SAAS,GAAGf,SAASS,KAAKC,KAAK;QAE7C,qBACC,KAACT;YACAS,OAAOA;YACPC,eAAeI;YACfH,OAAOH,KAAKG,KAAK;;IAGpB;AACD,EAAE"}

package/dist/src/components/split-button.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import type React from "react";
+declare const splitButtonVariants: (props?: ({
+    size?: "small" | "regular" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SplitButtonProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof splitButtonVariants> {
+    children: React.ReactNode;
+}
+declare function SplitButton({ children, size, disabled, className, ...props }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export { SplitButton };
+//# sourceMappingURL=split-button.d.ts.map

package/dist/src/components/split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,QAAA,MAAM,mBAAmB;;;8EAqCvB,CAAC;AAEH,MAAM,WAAW,gBAChB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EACpD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACR,EAAE,gBAAgB,2CASlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/components/split-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../shadcn/lib/utils.js";
+const splitButtonBaseStyles = cn("flex", "*:data-[slot=button]:rounded-r-none", "*:data-[slot=dropdown-menu-trigger]:rounded-l-none", "*:data-[slot=dropdown-menu-trigger]:border-l-0");
+const splitButtonVariants = cva(splitButtonBaseStyles, {
+    variants: {
+        size: {
+            regular: cn("*:data-[slot=button]:h-9", "*:data-[slot=button]:px-4", "*:data-[slot=button]:typo-label", "*:data-[slot=dropdown-menu-trigger]:h-9", "*:data-[slot=dropdown-menu-trigger]:px-1", "*:data-[slot=dropdown-menu-trigger]:py-2"),
+            small: cn("*:data-[slot=button]:h-6", "*:data-[slot=button]:px-2", "*:data-[slot=button]:gap-1", "*:data-[slot=button]:typo-button-label-xs", "*:data-[slot=dropdown-menu-trigger]:h-6", "*:data-[slot=dropdown-menu-trigger]:px-1", "*:data-[slot=dropdown-menu-trigger]:py-1")
+        },
+        disabled: {
+            true: cn("*:data-[slot=button]:disabled:bg-bg-primary", "*:data-[slot=button]:disabled:text-text-disabled", "*:data-[slot=button]:disabled:border-border-disabled", "*:data-[slot=dropdown-menu-trigger]:disabled:bg-bg-primary", "*:data-[slot=dropdown-menu-trigger]:disabled:text-text-disabled", "*:data-[slot=dropdown-menu-trigger]:disabled:border-border-disabled"),
+            false: ""
+        }
+    },
+    defaultVariants: {
+        size: "regular",
+        disabled: false
+    }
+});
+function SplitButton({ children, size, disabled, className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(splitButtonVariants({
+            size,
+            disabled
+        }), className),
+        ...props,
+        children: children
+    });
+}
+export { SplitButton };
+
+//# sourceMappingURL=split-button.js.map

package/dist/src/components/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/split-button.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst splitButtonBaseStyles = cn(\n\t\"flex\",\n\t\"*:data-[slot=button]:rounded-r-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:rounded-l-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n);\n\nconst splitButtonVariants = cva(splitButtonBaseStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: cn(\n\t\t\t\t\"*:data-[slot=button]:h-9\",\n\t\t\t\t\"*:data-[slot=button]:px-4\",\n\t\t\t\t\"*:data-[slot=button]:typo-label\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:h-9\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:px-1\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:py-2\",\n\t\t\t),\n\t\t\tsmall: cn(\n\t\t\t\t\"*:data-[slot=button]:h-6\",\n\t\t\t\t\"*:data-[slot=button]:px-2\",\n\t\t\t\t\"*:data-[slot=button]:gap-1\",\n\t\t\t\t\"*:data-[slot=button]:typo-button-label-xs\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:h-6\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:px-1\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:py-1\",\n\t\t\t),\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: cn(\n\t\t\t\t\"*:data-[slot=button]:disabled:bg-bg-primary\",\n\t\t\t\t\"*:data-[slot=button]:disabled:text-text-disabled\",\n\t\t\t\t\"*:data-[slot=button]:disabled:border-border-disabled\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:disabled:bg-bg-primary\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:disabled:text-text-disabled\",\n\t\t\t\t\"*:data-[slot=dropdown-menu-trigger]:disabled:border-border-disabled\",\n\t\t\t),\n\t\t\tfalse: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t\tdisabled: false,\n\t},\n});\n\nexport interface SplitButtonProps\n\textends Omit<React.ComponentProps<\"div\">, \"children\">,\n\t\tVariantProps<typeof splitButtonVariants> {\n\tchildren: React.ReactNode;\n}\n\nfunction SplitButton({\n\tchildren,\n\tsize,\n\tdisabled,\n\tclassName,\n\t...props\n}: SplitButtonProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(splitButtonVariants({ size, disabled }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { SplitButton };\n"],"names":["cva","cn","splitButtonBaseStyles","splitButtonVariants","variants","size","regular","small","disabled","true","false","defaultVariants","SplitButton","children","className","props","div"],"mappings":";AAAA,SAASA,GAAG,QAA2B,2BAA2B;AAElE,SAASC,EAAE,QAAQ,yBAAoB;AAEvC,MAAMC,wBAAwBD,GAC7B,QACA,uCACA,sDACA;AAGD,MAAME,sBAAsBH,IAAIE,uBAAuB;IACtDE,UAAU;QACTC,MAAM;YACLC,SAASL,GACR,4BACA,6BACA,mCACA,2CACA,4CACA;YAEDM,OAAON,GACN,4BACA,6BACA,8BACA,6CACA,2CACA,4CACA;QAEF;QACAO,UAAU;YACTC,MAAMR,GACL,+CACA,oDACA,wDACA,8DACA,mEACA;YAEDS,OAAO;QACR;IACD;IACAC,iBAAiB;QAChBN,MAAM;QACNG,UAAU;IACX;AACD;AAQA,SAASI,YAAY,EACpBC,QAAQ,EACRR,IAAI,EACJG,QAAQ,EACRM,SAAS,EACT,GAAGC,OACe;IAClB,qBACC,KAACC;QACAF,WAAWb,GAAGE,oBAAoB;YAAEE;YAAMG;QAAS,IAAIM;QACtD,GAAGC,KAAK;kBAERF;;AAGJ;AAEA,SAASD,WAAW,GAAG"}

package/dist/src/components/split-button.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus, Save } from "lucide-react";
+import { Button } from "../shadcn/components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../shadcn/components/ui/dropdown-menu.js";
+import { SplitButton } from "./split-button.js";
+const meta = {
+    title: "Component/SplitButton",
+    component: SplitButton,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        size: {
+            control: "select",
+            options: [
+                "regular",
+                "small"
+            ],
+            description: "Size of the split button"
+        },
+        disabled: {
+            control: "boolean",
+            description: "Disabled state of the split button"
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        size: "regular",
+        disabled: false
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(SplitButton, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(Button, {
+                    variant: "secondary",
+                    disabled: args.disabled ?? false,
+                    children: [
+                        /*#__PURE__*/ _jsx(Save, {}),
+                        "Save"
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                disabled: args.disabled ?? false,
+                                children: /*#__PURE__*/ _jsx(ChevronDown, {})
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                    children: "Save to collection:"
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                                /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                    disabled: true,
+                                    children: "No collections"
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                                /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Plus, {
+                                            className: "text-fg-link"
+                                        }),
+                                        "New collection"
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=split-button.stories.js.map

package/dist/src/components/split-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/split-button.stories.tsx"],"sourcesContent":["import type { StoryObj } from \"@storybook/react-vite\";\nimport { ChevronDown, Plus, Save } from \"lucide-react\";\nimport { Button } from \"#shadcn/components/ui/button.js\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"#shadcn/components/ui/dropdown-menu.js\";\nimport { SplitButton } from \"./split-button\";\n\nconst meta = {\n\ttitle: \"Component/SplitButton\",\n\tcomponent: SplitButton,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tsize: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"regular\", \"small\"],\n\t\t\tdescription: \"Size of the split button\",\n\t\t},\n\t\tdisabled: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Disabled state of the split button\",\n\t\t},\n\t},\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SplitButton>;\n\nexport const Default: Story = {\n\targs: {\n\t\tsize: \"regular\",\n\t\tdisabled: false,\n\t},\n\trender: (args) => (\n\t\t<SplitButton {...args}>\n\t\t\t<Button variant=\"secondary\" disabled={args.disabled ?? false}>\n\t\t\t\t<Save />\n\t\t\t\tSave\n\t\t\t</Button>\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\" disabled={args.disabled ?? false}>\n\t\t\t\t\t\t<ChevronDown />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent>\n\t\t\t\t\t<DropdownMenuLabel>Save to collection:</DropdownMenuLabel>\n\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t<DropdownMenuItem disabled>No collections</DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t<Plus className=\"text-fg-link\" />\n\t\t\t\t\t\tNew collection\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t</SplitButton>\n\t),\n};\n"],"names":["ChevronDown","Plus","Save","Button","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuTrigger","SplitButton","meta","title","component","parameters","layout","tags","argTypes","size","control","options","description","disabled","Default","args","render","variant","asChild","className"],"mappings":";AACA,SAASA,WAAW,EAAEC,IAAI,EAAEC,IAAI,QAAQ,eAAe;AACvD,SAASC,MAAM,QAAQ,oCAAkC;AACzD,SACCC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,iBAAiB,EACjBC,qBAAqB,EACrBC,mBAAmB,QACb,2CAAyC;AAChD,SAASC,WAAW,QAAQ,oBAAiB;AAE7C,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;IAClBC,UAAU;QACTC,MAAM;YACLC,SAAS;YACTC,SAAS;gBAAC;gBAAW;aAAQ;YAC7BC,aAAa;QACd;QACAC,UAAU;YACTH,SAAS;YACTE,aAAa;QACd;IACD;AACD;AAEA,eAAeV,KAAK;AAIpB,OAAO,MAAMY,UAAiB;IAC7BC,MAAM;QACLN,MAAM;QACNI,UAAU;IACX;IACAG,QAAQ,CAACD,qBACR,MAACd;YAAa,GAAGc,IAAI;;8BACpB,MAACrB;oBAAOuB,SAAQ;oBAAYJ,UAAUE,KAAKF,QAAQ,IAAI;;sCACtD,KAACpB;wBAAO;;;8BAGT,MAACE;;sCACA,KAACK;4BAAoBkB,OAAO;sCAC3B,cAAA,KAACxB;gCAAOuB,SAAQ;gCAAYJ,UAAUE,KAAKF,QAAQ,IAAI;0CACtD,cAAA,KAACtB;;;sCAGH,MAACK;;8CACA,KAACE;8CAAkB;;8CACnB,KAACC;8CACD,KAACF;oCAAiBgB,QAAQ;8CAAC;;8CAC3B,KAACd;8CACD,MAACF;;sDACA,KAACL;4CAAK2B,WAAU;;wCAAiB;;;;;;;;;AAOvC,EAAE"}

package/dist/src/components/tag.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "class-variance-authority";
+import type React from "react";
+declare const tagVariants: (props?: ({
+    shape?: "round" | "square" | null | undefined;
+    size?: "big" | "small" | null | undefined;
+    type?: "filled" | "outlined" | null | undefined;
+    vibrance?: "vivid" | "subtle" | null | undefined;
+    color?: "blue" | "gray" | "green" | "red" | "yellow" | "contrast" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TagProps = {
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+} & Omit<React.ComponentProps<"div">, "color"> & VariantProps<typeof tagVariants>;
+export declare function Tag({ children, shape, size, type, vibrance, color, icon, showIcon, className, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tag.d.ts.map

package/dist/src/components/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6B/B,QAAA,MAAM,WAAW;;;;;;8EAqKf,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAC7C,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAElC,wBAAgB,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,IAAY,EACZ,IAAe,EACf,QAAkB,EAClB,KAAK,EACL,IAAI,EACJ,QAAe,EACf,SAAS,EACT,GAAG,KAAK,EACR,EAAE,QAAQ,2CAqBV"}

package/dist/src/components/tag.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../shadcn/lib/utils.js";
+const baseChipStyles = cn("inline-flex", "items-center", "justify-center", "whitespace-nowrap", "shrink-0", "[&>svg]:pointer-events-none", "[&>svg]:shrink-0", "transition-colors", "duration-200");
+const iconBaseClasses = cn("flex", "items-center", "justify-center", "shrink-0", "[&>svg]:pointer-events-none", "[&>svg]:shrink-0");
+const iconSizeClasses = {
+    big: cn("[&>svg]:size-4"),
+    small: cn("[&>svg]:w-3", "[&>svg]:h-3")
+};
+const tagVariants = cva(baseChipStyles, {
+    variants: {
+        shape: {
+            round: "rounded-full",
+            square: "rounded"
+        },
+        size: {
+            big: cn("gap-1", "typo-body"),
+            small: cn("gap-1", "typo-body-xs")
+        },
+        type: {
+            filled: "",
+            outlined: "border bg-transparent"
+        },
+        vibrance: {
+            vivid: "",
+            subtle: ""
+        },
+        color: {
+            green: "",
+            gray: "",
+            red: "",
+            blue: "",
+            yellow: "",
+            contrast: ""
+        }
+    },
+    compoundVariants: [
+        // ============ SIZE + TYPE (padding compensation for border) ============
+        {
+            size: "big",
+            type: "filled",
+            class: "px-3 py-1"
+        },
+        {
+            size: "big",
+            type: "outlined",
+            class: "px-[11px] py-[3px]"
+        },
+        {
+            size: "small",
+            type: "filled",
+            class: "px-2 h-[22px]"
+        },
+        {
+            size: "small",
+            type: "outlined",
+            class: "px-[7px] h-[22px]"
+        },
+        // ============ FILLED VIVID ============
+        {
+            type: "filled",
+            color: "red",
+            vibrance: "vivid",
+            class: "bg-bg-error-primary_inverse text-fg-primary_on-brand"
+        },
+        {
+            type: "filled",
+            color: "yellow",
+            vibrance: "vivid",
+            class: "bg-bg-warning-primary_inverse text-fg-warning-primary"
+        },
+        {
+            type: "filled",
+            color: "green",
+            vibrance: "vivid",
+            class: "bg-fg-success-primary text-fg-primary_on-brand"
+        },
+        {
+            type: "filled",
+            color: "blue",
+            vibrance: "vivid",
+            class: "bg-bg-link text-fg-primary_on-brand"
+        },
+        {
+            type: "filled",
+            color: "gray",
+            vibrance: "vivid",
+            class: "bg-fg-tertiary text-fg-primary_on-brand"
+        },
+        {
+            type: "filled",
+            color: "contrast",
+            vibrance: "vivid",
+            class: "bg-bg-primary_inverse text-fg-primary_on-brand"
+        },
+        // ============ FILLED SUBTLE ============
+        {
+            type: "filled",
+            color: "red",
+            vibrance: "subtle",
+            class: "bg-bg-error-tertiary text-fg-error-primary"
+        },
+        {
+            type: "filled",
+            color: "yellow",
+            vibrance: "subtle",
+            class: "bg-bg-warning-secondary text-fg-warning-primary"
+        },
+        {
+            type: "filled",
+            color: "green",
+            vibrance: "subtle",
+            class: "bg-bg-success-secondary text-fg-success-primary"
+        },
+        {
+            type: "filled",
+            color: "blue",
+            vibrance: "subtle",
+            class: "bg-bg-info-primary text-fg-info-primary"
+        },
+        {
+            type: "filled",
+            color: "gray",
+            vibrance: "subtle",
+            class: "bg-bg-tertiary text-text-secondary"
+        },
+        {
+            type: "filled",
+            color: "contrast",
+            vibrance: "subtle",
+            class: "bg-bg-tertiary text-fg-primary"
+        },
+        // ============ OUTLINED (only vivid) ============
+        {
+            type: "outlined",
+            color: "red",
+            class: "border-border-error text-text-error-primary"
+        },
+        {
+            type: "outlined",
+            color: "yellow",
+            class: "border-fg-warning-primary text-text-warning-primary"
+        },
+        {
+            type: "outlined",
+            color: "green",
+            class: "border-border-success text-text-success-primary"
+        },
+        {
+            type: "outlined",
+            color: "blue",
+            class: "border-border-link text-text-link"
+        },
+        {
+            type: "outlined",
+            color: "gray",
+            class: "border-border-primary_hover text-fg-secondary"
+        },
+        {
+            type: "outlined",
+            color: "contrast",
+            class: "border-border-primary_hover text-fg-primary"
+        }
+    ],
+    defaultVariants: {
+        shape: "round",
+        size: "big",
+        type: "filled",
+        vibrance: "vivid",
+        color: "green"
+    }
+});
+export function Tag({ children, shape, size = "big", type = "filled", vibrance = "vivid", color, icon, showIcon = true, className, ...props }) {
+    const shouldShowIcon = showIcon && icon;
+    const currentSize = size ?? "big";
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "tag",
+        className: cn(tagVariants({
+            shape,
+            size,
+            type,
+            vibrance,
+            color
+        }), className),
+        ...props,
+        children: [
+            shouldShowIcon && /*#__PURE__*/ _jsx("div", {
+                className: cn(iconBaseClasses, iconSizeClasses[currentSize]),
+                children: icon
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                children: children
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=tag.js.map