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

package/dist/src/components/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tag.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"../shadcn/lib/utils\";\n\nconst baseChipStyles = cn(\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"whitespace-nowrap\",\n\t\"shrink-0\",\n\t\"[&>svg]:pointer-events-none\",\n\t\"[&>svg]:shrink-0\",\n\t\"transition-colors\",\n\t\"duration-200\",\n);\n\nconst iconBaseClasses = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"shrink-0\",\n\t\"[&>svg]:pointer-events-none\",\n\t\"[&>svg]:shrink-0\",\n);\n\nconst iconSizeClasses = {\n\tbig: cn(\"[&>svg]:size-4\"),\n\tsmall: cn(\"[&>svg]:w-3\", \"[&>svg]:h-3\"),\n};\n\nconst tagVariants = cva(baseChipStyles, {\n\tvariants: {\n\t\tshape: {\n\t\t\tround: \"rounded-full\",\n\t\t\tsquare: \"rounded\",\n\t\t},\n\t\tsize: {\n\t\t\tbig: cn(\"gap-1\", \"typo-body\"),\n\t\t\tsmall: cn(\"gap-1\", \"typo-body-xs\"),\n\t\t},\n\t\ttype: {\n\t\t\tfilled: \"\",\n\t\t\toutlined: \"border bg-transparent\",\n\t\t},\n\t\tvibrance: {\n\t\t\tvivid: \"\",\n\t\t\tsubtle: \"\",\n\t\t},\n\t\tcolor: {\n\t\t\tgreen: \"\",\n\t\t\tgray: \"\",\n\t\t\tred: \"\",\n\t\t\tblue: \"\",\n\t\t\tyellow: \"\",\n\t\t\tcontrast: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t// ============ SIZE + TYPE (padding compensation for border) ============\n\t\t{\n\t\t\tsize: \"big\",\n\t\t\ttype: \"filled\",\n\t\t\tclass: \"px-3 py-1\",\n\t\t},\n\t\t{\n\t\t\tsize: \"big\",\n\t\t\ttype: \"outlined\",\n\t\t\tclass: \"px-[11px] py-[3px]\",\n\t\t},\n\t\t{\n\t\t\tsize: \"small\",\n\t\t\ttype: \"filled\",\n\t\t\tclass: \"px-2 h-[22px]\",\n\t\t},\n\t\t{\n\t\t\tsize: \"small\",\n\t\t\ttype: \"outlined\",\n\t\t\tclass: \"px-[7px] h-[22px]\",\n\t\t},\n\n\t\t// ============ FILLED VIVID ============\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"red\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-bg-error-primary_inverse text-fg-primary_on-brand\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"yellow\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-bg-warning-primary_inverse text-fg-warning-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"green\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-fg-success-primary text-fg-primary_on-brand\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"blue\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-bg-link text-fg-primary_on-brand\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"gray\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-fg-tertiary text-fg-primary_on-brand\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"contrast\",\n\t\t\tvibrance: \"vivid\",\n\t\t\tclass: \"bg-bg-primary_inverse text-fg-primary_on-brand\",\n\t\t},\n\n\t\t// ============ FILLED SUBTLE ============\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"red\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-error-tertiary text-fg-error-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"yellow\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-warning-secondary text-fg-warning-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"green\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-success-secondary text-fg-success-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"blue\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-info-primary text-fg-info-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"gray\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-tertiary text-text-secondary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"filled\",\n\t\t\tcolor: \"contrast\",\n\t\t\tvibrance: \"subtle\",\n\t\t\tclass: \"bg-bg-tertiary text-fg-primary\",\n\t\t},\n\n\t\t// ============ OUTLINED (only vivid) ============\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"red\",\n\t\t\tclass: \"border-border-error text-text-error-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"yellow\",\n\t\t\tclass: \"border-fg-warning-primary text-text-warning-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"green\",\n\t\t\tclass: \"border-border-success text-text-success-primary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"blue\",\n\t\t\tclass: \"border-border-link text-text-link\",\n\t\t},\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"gray\",\n\t\t\tclass: \"border-border-primary_hover text-fg-secondary\",\n\t\t},\n\t\t{\n\t\t\ttype: \"outlined\",\n\t\t\tcolor: \"contrast\",\n\t\t\tclass: \"border-border-primary_hover text-fg-primary\",\n\t\t},\n\t],\n\tdefaultVariants: {\n\t\tshape: \"round\",\n\t\tsize: \"big\",\n\t\ttype: \"filled\",\n\t\tvibrance: \"vivid\",\n\t\tcolor: \"green\",\n\t},\n});\n\nexport type TagProps = {\n\ticon?: React.ReactNode;\n\tshowIcon?: boolean;\n} & Omit<React.ComponentProps<\"div\">, \"color\"> &\n\tVariantProps<typeof tagVariants>;\n\nexport function Tag({\n\tchildren,\n\tshape,\n\tsize = \"big\",\n\ttype = \"filled\",\n\tvibrance = \"vivid\",\n\tcolor,\n\ticon,\n\tshowIcon = true,\n\tclassName,\n\t...props\n}: TagProps) {\n\tconst shouldShowIcon = showIcon && icon;\n\tconst currentSize: \"big\" | \"small\" = size ?? \"big\";\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"tag\"\n\t\t\tclassName={cn(\n\t\t\t\ttagVariants({ shape, size, type, vibrance, color }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{shouldShowIcon && (\n\t\t\t\t<div className={cn(iconBaseClasses, iconSizeClasses[currentSize])}>\n\t\t\t\t\t{icon}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<span>{children}</span>\n\t\t</div>\n\t);\n}\n"],"names":["cva","cn","baseChipStyles","iconBaseClasses","iconSizeClasses","big","small","tagVariants","variants","shape","round","square","size","type","filled","outlined","vibrance","vivid","subtle","color","green","gray","red","blue","yellow","contrast","compoundVariants","class","defaultVariants","Tag","children","icon","showIcon","className","props","shouldShowIcon","currentSize","div","data-slot","span"],"mappings":"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"}

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

@@ -0,0 +1,459 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { Check, Circle, Star, X, Zap } from "lucide-react";
+import { Tag } from "./tag.js";
+const iconMap = {
+    check: /*#__PURE__*/ _jsx(Check, {
+        className: "size-4"
+    }),
+    star: /*#__PURE__*/ _jsx(Star, {
+        className: "size-4"
+    }),
+    zap: /*#__PURE__*/ _jsx(Zap, {
+        className: "size-4"
+    }),
+    circle: /*#__PURE__*/ _jsx(Circle, {
+        className: "size-4"
+    }),
+    x: /*#__PURE__*/ _jsx(X, {
+        className: "size-4"
+    })
+};
+function TagWrapper({ icon = "check", children, ...props }) {
+    return /*#__PURE__*/ _jsx(Tag, {
+        icon: iconMap[icon],
+        ...props,
+        children: children
+    });
+}
+const meta = {
+    title: "Component/Tag",
+    component: TagWrapper,
+    parameters: {
+        layout: "centered",
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        shape: {
+            control: "select",
+            options: [
+                "round",
+                "square"
+            ]
+        },
+        size: {
+            control: "select",
+            options: [
+                "big",
+                "small"
+            ]
+        },
+        type: {
+            control: "select",
+            options: [
+                "filled",
+                "outlined"
+            ]
+        },
+        vibrance: {
+            control: "select",
+            options: [
+                "vivid",
+                "subtle"
+            ]
+        },
+        color: {
+            control: "select",
+            options: [
+                "red",
+                "yellow",
+                "green",
+                "blue",
+                "gray",
+                "contrast"
+            ]
+        },
+        showIcon: {
+            control: "boolean"
+        },
+        icon: {
+            control: "select",
+            options: [
+                "check",
+                "star",
+                "zap",
+                "circle",
+                "x"
+            ]
+        },
+        children: {
+            control: "text"
+        }
+    },
+    args: {
+        children: "Tag",
+        shape: "round",
+        size: "big",
+        type: "filled",
+        vibrance: "vivid",
+        color: "green",
+        showIcon: true,
+        icon: "check"
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ children, ...args })=>/*#__PURE__*/ _jsx(TagWrapper, {
+            ...args,
+            children: children
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>{
+        const colors = [
+            {
+                label: "Red",
+                value: "red"
+            },
+            {
+                label: "Yellow",
+                value: "yellow"
+            },
+            {
+                label: "Green",
+                value: "green"
+            },
+            {
+                label: "Blue",
+                value: "blue"
+            },
+            {
+                label: "Gray",
+                value: "gray"
+            },
+            {
+                label: "Contrast",
+                value: "contrast"
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "space-y-8",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "typo-h4 mb-4",
+                            children: "Filled"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "overflow-x-auto",
+                            children: /*#__PURE__*/ _jsxs("table", {
+                                className: "border-collapse",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("thead", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-left border border-gray-200",
+                                                        children: "Color"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        colSpan: 4,
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Round"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        colSpan: 4,
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Square"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 border border-gray-200"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big/Vivid"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big/Subtle"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small/Vivid"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small/Subtle"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big/Vivid"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big/Subtle"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small/Vivid"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small/Subtle"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("tbody", {
+                                        children: colors.map((color)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 typo-label border border-gray-200",
+                                                        children: color.label
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "big",
+                                                            type: "filled",
+                                                            vibrance: "vivid",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "big",
+                                                            type: "filled",
+                                                            vibrance: "subtle",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "small",
+                                                            type: "filled",
+                                                            vibrance: "vivid",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "small",
+                                                            type: "filled",
+                                                            vibrance: "subtle",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "big",
+                                                            type: "filled",
+                                                            vibrance: "vivid",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "big",
+                                                            type: "filled",
+                                                            vibrance: "subtle",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "small",
+                                                            type: "filled",
+                                                            vibrance: "vivid",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "small",
+                                                            type: "filled",
+                                                            vibrance: "subtle",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    })
+                                                ]
+                                            }, color.value))
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "typo-h4 mb-4",
+                            children: "Outlined"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "overflow-x-auto",
+                            children: /*#__PURE__*/ _jsxs("table", {
+                                className: "border-collapse",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("thead", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-left border border-gray-200",
+                                                        children: "Color"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        colSpan: 2,
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Round"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        colSpan: 2,
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Square"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 border border-gray-200"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Big"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        className: "p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs",
+                                                        children: "Small"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("tbody", {
+                                        children: colors.map((color)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 typo-label border border-gray-200",
+                                                        children: color.label
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "big",
+                                                            type: "outlined",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "round",
+                                                            size: "small",
+                                                            type: "outlined",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "big",
+                                                            type: "outlined",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "p-2 border border-gray-200 text-center",
+                                                        children: /*#__PURE__*/ _jsx(Tag, {
+                                                            shape: "square",
+                                                            size: "small",
+                                                            type: "outlined",
+                                                            color: color.value,
+                                                            icon: /*#__PURE__*/ _jsx(Check, {}),
+                                                            children: "Tag"
+                                                        })
+                                                    })
+                                                ]
+                                            }, color.value))
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=tag.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tag.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Check, Circle, Star, X, Zap } from \"lucide-react\";\nimport { Tag, type TagProps } from \"./tag\";\n\nconst iconMap = {\n\tcheck: <Check className=\"size-4\" />,\n\tstar: <Star className=\"size-4\" />,\n\tzap: <Zap className=\"size-4\" />,\n\tcircle: <Circle className=\"size-4\" />,\n\tx: <X className=\"size-4\" />,\n} as const;\n\ntype IconName = keyof typeof iconMap;\n\ninterface TagWrapperProps extends Omit<TagProps, \"icon\"> {\n\ticon?: IconName;\n}\n\nfunction TagWrapper({ icon = \"check\", children, ...props }: TagWrapperProps) {\n\treturn (\n\t\t<Tag icon={iconMap[icon]} {...props}>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Tag\",\n\tcomponent: TagWrapper,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tshape: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"round\", \"square\"],\n\t\t},\n\t\tsize: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"big\", \"small\"],\n\t\t},\n\t\ttype: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"filled\", \"outlined\"],\n\t\t},\n\t\tvibrance: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"vivid\", \"subtle\"],\n\t\t},\n\t\tcolor: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"red\", \"yellow\", \"green\", \"blue\", \"gray\", \"contrast\"],\n\t\t},\n\t\tshowIcon: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\ticon: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"check\", \"star\", \"zap\", \"circle\", \"x\"],\n\t\t},\n\t\tchildren: {\n\t\t\tcontrol: \"text\",\n\t\t},\n\t},\n\targs: {\n\t\tchildren: \"Tag\",\n\t\tshape: \"round\",\n\t\tsize: \"big\",\n\t\ttype: \"filled\",\n\t\tvibrance: \"vivid\",\n\t\tcolor: \"green\",\n\t\tshowIcon: true,\n\t\ticon: \"check\",\n\t},\n} satisfies Meta<typeof TagWrapper>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({ children, ...args }) => (\n\t\t<TagWrapper {...args}>{children}</TagWrapper>\n\t),\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => {\n\t\tconst colors = [\n\t\t\t{ label: \"Red\", value: \"red\" },\n\t\t\t{ label: \"Yellow\", value: \"yellow\" },\n\t\t\t{ label: \"Green\", value: \"green\" },\n\t\t\t{ label: \"Blue\", value: \"blue\" },\n\t\t\t{ label: \"Gray\", value: \"gray\" },\n\t\t\t{ label: \"Contrast\", value: \"contrast\" },\n\t\t] as const;\n\n\t\treturn (\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t{/* Filled Section */}\n\t\t\t\t<div>\n\t\t\t\t\t<h2 className=\"typo-h4 mb-4\">Filled</h2>\n\t\t\t\t\t<div className=\"overflow-x-auto\">\n\t\t\t\t\t\t<table className=\"border-collapse\">\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-left border border-gray-200\">\n\t\t\t\t\t\t\t\t\t\tColor\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tcolSpan={4}\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tRound\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tcolSpan={4}\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tSquare\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 border border-gray-200\" />\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig/Vivid\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig/Subtle\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall/Vivid\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall/Subtle\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig/Vivid\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig/Subtle\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall/Vivid\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall/Subtle\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{colors.map((color) => (\n\t\t\t\t\t\t\t\t\t<tr key={color.value}>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 typo-label border border-gray-200\">\n\t\t\t\t\t\t\t\t\t\t\t{color.label}\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t{/* Round */}\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"vivid\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"vivid\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t{/* Square */}\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"vivid\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"vivid\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"filled\"\n\t\t\t\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Outlined Section */}\n\t\t\t\t<div>\n\t\t\t\t\t<h2 className=\"typo-h4 mb-4\">Outlined</h2>\n\t\t\t\t\t<div className=\"overflow-x-auto\">\n\t\t\t\t\t\t<table className=\"border-collapse\">\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-left border border-gray-200\">\n\t\t\t\t\t\t\t\t\t\tColor\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tcolSpan={2}\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tRound\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tcolSpan={2}\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tSquare\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 border border-gray-200\" />\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tBig\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t<th className=\"p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs\">\n\t\t\t\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{colors.map((color) => (\n\t\t\t\t\t\t\t\t\t<tr key={color.value}>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 typo-label border border-gray-200\">\n\t\t\t\t\t\t\t\t\t\t\t{color.label}\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"outlined\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"round\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"outlined\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"outlined\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t<td className=\"p-2 border border-gray-200 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\tshape=\"square\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"outlined\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={color.value}\n\t\t\t\t\t\t\t\t\t\t\t\ticon={<Check />}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tTag\n\t\t\t\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n} satisfies Story;\n"],"names":["Controls","Primary","Title","Check","Circle","Star","X","Zap","Tag","iconMap","check","className","star","zap","circle","x","TagWrapper","icon","children","props","meta","title","component","parameters","layout","docs","page","argTypes","shape","control","options","size","type","vibrance","color","showIcon","args","Default","tags","render","Demo","colors","label","value","div","h2","table","thead","tr","th","colSpan","tbody","map","td"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+import type React from "react";
+declare const tileSizeVariants: (props?: ({
+    size?: "auto" | "free" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TileProps = {
+    label?: string;
+    value?: string | number;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    width?: string | number;
+} & Omit<React.ComponentProps<"div">, "size"> & VariantProps<typeof tileSizeVariants>;
+export declare function Tile({ children, label, value, icon, showIcon, size, width, className, style, ...props }: TileProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/components/tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,QAAA,MAAM,gBAAgB;;8EAUpB,CAAC;AAwBH,MAAM,MAAM,SAAS,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAC5C,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEvC,wBAAgB,IAAI,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAgB,EAChB,IAAa,EACb,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACR,EAAE,SAAS,2CAgCX"}

package/dist/src/components/tile.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../shadcn/lib/utils.js";
+const baseTileStyles = cn("flex", "flex-col", "items-start", "gap-2", "p-6", "bg-bg-primary", "rounded-lg", "border", "border-border-default", "transition-colors", "duration-200");
+const tileSizeVariants = cva("", {
+    variants: {
+        size: {
+            auto: "w-auto",
+            free: "w-full"
+        }
+    },
+    defaultVariants: {
+        size: "auto"
+    }
+});
+const contentStyles = cn("flex", "flex-col", "items-start", "w-full");
+const labelStyles = cn("typo-body", "text-text-secondary");
+const valueStyles = cn("typo-page-header", "text-text-primary");
+const iconStyles = cn("flex", "items-center", "justify-center", "size-12", "shrink-0", "rounded-full", "bg-bg-tertiary", "text-fg-secondary", "[&>svg]:size-6", "[&>svg]:pointer-events-none", "[&>svg]:shrink-0");
+const iconContainerStyles = cn("flex", "items-center", "gap-3", "w-full");
+export function Tile({ children, label, value, icon, showIcon = false, size = "auto", width, className, style, ...props }) {
+    const shouldShowIcon = showIcon && icon;
+    const tileStyle = width ? {
+        ...style,
+        width
+    } : style;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "tile",
+        className: cn(baseTileStyles, tileSizeVariants({
+            size
+        }), className),
+        style: tileStyle,
+        ...props,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: contentStyles,
+            children: [
+                shouldShowIcon ? /*#__PURE__*/ _jsxs("div", {
+                    className: iconContainerStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: iconStyles,
+                            children: icon
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col items-start w-full",
+                            children: [
+                                label && /*#__PURE__*/ _jsx("div", {
+                                    className: labelStyles,
+                                    children: label
+                                }),
+                                value !== undefined && /*#__PURE__*/ _jsx("div", {
+                                    className: valueStyles,
+                                    children: value
+                                })
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        label && /*#__PURE__*/ _jsx("div", {
+                            className: labelStyles,
+                            children: label
+                        }),
+                        value !== undefined && /*#__PURE__*/ _jsx("div", {
+                            className: valueStyles,
+                            children: value
+                        })
+                    ]
+                }),
+                children
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=tile.js.map

package/dist/src/components/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tile.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"../shadcn/lib/utils\";\n\nconst baseTileStyles = cn(\n\t\"flex\",\n\t\"flex-col\",\n\t\"items-start\",\n\t\"gap-2\",\n\t\"p-6\",\n\t\"bg-bg-primary\",\n\t\"rounded-lg\",\n\t\"border\",\n\t\"border-border-default\",\n\t\"transition-colors\",\n\t\"duration-200\",\n);\n\nconst tileSizeVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tauto: \"w-auto\",\n\t\t\tfree: \"w-full\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"auto\",\n\t},\n});\n\nconst contentStyles = cn(\"flex\", \"flex-col\", \"items-start\", \"w-full\");\n\nconst labelStyles = cn(\"typo-body\", \"text-text-secondary\");\n\nconst valueStyles = cn(\"typo-page-header\", \"text-text-primary\");\n\nconst iconStyles = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"size-12\",\n\t\"shrink-0\",\n\t\"rounded-full\",\n\t\"bg-bg-tertiary\",\n\t\"text-fg-secondary\",\n\t\"[&>svg]:size-6\",\n\t\"[&>svg]:pointer-events-none\",\n\t\"[&>svg]:shrink-0\",\n);\n\nconst iconContainerStyles = cn(\"flex\", \"items-center\", \"gap-3\", \"w-full\");\n\nexport type TileProps = {\n\tlabel?: string;\n\tvalue?: string | number;\n\ticon?: React.ReactNode;\n\tshowIcon?: boolean;\n\twidth?: string | number;\n} & Omit<React.ComponentProps<\"div\">, \"size\"> &\n\tVariantProps<typeof tileSizeVariants>;\n\nexport function Tile({\n\tchildren,\n\tlabel,\n\tvalue,\n\ticon,\n\tshowIcon = false,\n\tsize = \"auto\",\n\twidth,\n\tclassName,\n\tstyle,\n\t...props\n}: TileProps) {\n\tconst shouldShowIcon = showIcon && icon;\n\tconst tileStyle = width ? { ...style, width } : style;\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"tile\"\n\t\t\tclassName={cn(baseTileStyles, tileSizeVariants({ size }), className)}\n\t\t\tstyle={tileStyle}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className={contentStyles}>\n\t\t\t\t{shouldShowIcon ? (\n\t\t\t\t\t<div className={iconContainerStyles}>\n\t\t\t\t\t\t<div className={iconStyles}>{icon}</div>\n\t\t\t\t\t\t<div className=\"flex flex-col items-start w-full\">\n\t\t\t\t\t\t\t{label && <div className={labelStyles}>{label}</div>}\n\t\t\t\t\t\t\t{value !== undefined && (\n\t\t\t\t\t\t\t\t<div className={valueStyles}>{value}</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label && <div className={labelStyles}>{label}</div>}\n\t\t\t\t\t\t{value !== undefined && <div className={valueStyles}>{value}</div>}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"names":["cva","cn","baseTileStyles","tileSizeVariants","variants","size","auto","free","defaultVariants","contentStyles","labelStyles","valueStyles","iconStyles","iconContainerStyles","Tile","children","label","value","icon","showIcon","width","className","style","props","shouldShowIcon","tileStyle","div","data-slot","undefined"],"mappings":";AAAA,SAASA,GAAG,QAA2B,2BAA2B;AAElE,SAASC,EAAE,QAAQ,yBAAsB;AAEzC,MAAMC,iBAAiBD,GACtB,QACA,YACA,eACA,SACA,OACA,iBACA,cACA,UACA,yBACA,qBACA;AAGD,MAAME,mBAAmBH,IAAI,IAAI;IAChCI,UAAU;QACTC,MAAM;YACLC,MAAM;YACNC,MAAM;QACP;IACD;IACAC,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,MAAMI,gBAAgBR,GAAG,QAAQ,YAAY,eAAe;AAE5D,MAAMS,cAAcT,GAAG,aAAa;AAEpC,MAAMU,cAAcV,GAAG,oBAAoB;AAE3C,MAAMW,aAAaX,GAClB,QACA,gBACA,kBACA,WACA,YACA,gBACA,kBACA,qBACA,kBACA,+BACA;AAGD,MAAMY,sBAAsBZ,GAAG,QAAQ,gBAAgB,SAAS;AAWhE,OAAO,SAASa,KAAK,EACpBC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,WAAW,KAAK,EAChBd,OAAO,MAAM,EACbe,KAAK,EACLC,SAAS,EACTC,KAAK,EACL,GAAGC,OACQ;IACX,MAAMC,iBAAiBL,YAAYD;IACnC,MAAMO,YAAYL,QAAQ;QAAE,GAAGE,KAAK;QAAEF;IAAM,IAAIE;IAEhD,qBACC,KAACI;QACAC,aAAU;QACVN,WAAWpB,GAAGC,gBAAgBC,iBAAiB;YAAEE;QAAK,IAAIgB;QAC1DC,OAAOG;QACN,GAAGF,KAAK;kBAET,cAAA,MAACG;YAAIL,WAAWZ;;gBACde,+BACA,MAACE;oBAAIL,WAAWR;;sCACf,KAACa;4BAAIL,WAAWT;sCAAaM;;sCAC7B,MAACQ;4BAAIL,WAAU;;gCACbL,uBAAS,KAACU;oCAAIL,WAAWX;8CAAcM;;gCACvCC,UAAUW,2BACV,KAACF;oCAAIL,WAAWV;8CAAcM;;;;;mCAKjC;;wBACED,uBAAS,KAACU;4BAAIL,WAAWX;sCAAcM;;wBACvCC,UAAUW,2BAAa,KAACF;4BAAIL,WAAWV;sCAAcM;;;;gBAGvDF;;;;AAIL"}