@health-samurai/react-components 0.0.0-alpha.1 → 0.0.0-alpha.3

package/dist/src/shadcn/components/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "#shadcn/lib/utils";
+import { cn } from "../../lib/utils.js";
 const iconBaseClasses = "absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 flex items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0";
 const iconLeftPosition = "left-3 hover:text-text-tertiary hover:cursor-default transition-colors duration-300";
 const iconRightContainer = "absolute right-3 top-1/2 -translate-y-1/2 flex gap-2 z-10";
@@ -15,65 +15,84 @@ const suffixInvalidClasses = "border-border-error bg-bg-secondary flex items-cen
 const inputVariants = cva(cn("h-9 file:text-text-primary placeholder:text-text-quternary disabled:placeholder:text-text-disabled selection:bg-bg-primary selection:text-text-primary-foreground border-border-primary hover:border-border-primary_hover flex w-full min-w-0 border bg-transparent px-3 py-2 typo-body text-base transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-md file:font-medium disabled:bg-bg-secondary disabled:cursor-not-allowed disabled:border-border-primary md:text-md selection:bg-selection", "focus-visible:ring-4 focus-visible:ring-ring-blue focus-visible:border-border-link", "aria-invalid:ring-destructive aria-invalid:text-text-error-primary aria-invalid:border-border-error-primary", "", "rounded-md"), {
     variants: {
         hasLeftSlot: {
-            true: "pl-9",
+            true: "pl-9"
         },
         hasRightSlot: {
-            true: "pr-9",
+            true: "pr-9"
         },
         hasSuffix: {
-            true: "border-r-0 focus-visible:ring-offset-0 rounded-l-md rounded-r-none focus-visible:border-r-1",
+            true: "border-r-0 focus-visible:ring-offset-0 rounded-l-md rounded-r-none focus-visible:border-r-1"
         },
         invalid: {
-            true: "border-border-error focus-visible:ring-4 focus-visible:ring-ring-red focus-visible:border-border-error hover:border-border-error_inverse transition-all duration-300",
-        },
+            true: "border-border-error focus-visible:ring-4 focus-visible:ring-ring-red focus-visible:border-border-error hover:border-border-error_inverse transition-all duration-300"
+        }
     },
     defaultVariants: {
         hasSuffix: false,
-        invalid: false,
-    },
+        invalid: false
+    }
 });
 function Input({ className, type, invalid, suffix, leftSlot, rightSlot, ...props }) {
     const processedLeftSlot = leftSlot === "None" ? undefined : leftSlot;
     const processedRightSlot = rightSlot === "None" ? undefined : rightSlot;
-    const hasLeftIcon = processedLeftSlot &&
-        processedLeftSlot !== null &&
-        processedLeftSlot !== undefined;
-    const hasRightIcon = processedRightSlot &&
-        processedRightSlot !== null &&
-        processedRightSlot !== undefined;
-    const renderLeftSlot = () => {
-        if (!hasLeftIcon)
-            return null;
-        const colorClasses = props.disabled
-            ? iconDisabledColor
-            : invalid
-                ? iconInvalidColor
-                : iconNormalColor;
-        return (_jsx("div", { className: `${iconBaseClasses} ${iconLeftPosition} ${colorClasses}`, children: _jsx("div", { className: iconWrapperClasses, children: processedLeftSlot }) }));
+    const hasLeftIcon = processedLeftSlot && processedLeftSlot !== null && processedLeftSlot !== undefined;
+    const hasRightIcon = processedRightSlot && processedRightSlot !== null && processedRightSlot !== undefined;
+    const renderLeftSlot = ()=>{
+        if (!hasLeftIcon) return null;
+        const colorClasses = props.disabled ? iconDisabledColor : invalid ? iconInvalidColor : iconNormalColor;
+        return /*#__PURE__*/ _jsx("div", {
+            className: `${iconBaseClasses} ${iconLeftPosition} ${colorClasses}`,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: iconWrapperClasses,
+                children: processedLeftSlot
+            })
+        });
     };
-    const renderRightSlot = () => {
-        if (!hasRightIcon)
-            return null;
-        const colorClasses = props.disabled
-            ? iconDisabledColor
-            : invalid
-                ? iconInvalidColor
-                : iconNormalColor;
-        return (_jsx("div", { className: `${iconRightContainer} ${iconBaseClasses}`, children: hasRightIcon && (_jsx("div", { className: `${iconRightItemClasses} ${colorClasses}`, children: _jsx("div", { className: iconWrapperClasses, children: processedRightSlot }) })) }));
+    const renderRightSlot = ()=>{
+        if (!hasRightIcon) return null;
+        const colorClasses = props.disabled ? iconDisabledColor : invalid ? iconInvalidColor : iconNormalColor;
+        return /*#__PURE__*/ _jsx("div", {
+            className: `${iconRightContainer} ${iconBaseClasses}`,
+            children: hasRightIcon && /*#__PURE__*/ _jsx("div", {
+                className: `${iconRightItemClasses} ${colorClasses}`,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: iconWrapperClasses,
+                    children: processedRightSlot
+                })
+            })
+        });
     };
     // Input tag
-    const inputElement = (_jsx("input", { type: type, "data-slot": "input", className: cn(inputVariants({
+    const inputElement = /*#__PURE__*/ _jsx("input", {
+        type: type,
+        "data-slot": "input",
+        className: cn(inputVariants({
             invalid,
             hasLeftSlot: !!leftSlot,
             hasRightSlot: !!rightSlot,
             hasSuffix: !!suffix,
-            className,
-        })), ...props }));
-    return (_jsxs("div", { className: "flex w-full min-w-0", children: [_jsxs("div", { className: "flex-1 relative", children: [renderLeftSlot(), inputElement, renderRightSlot()] }), suffix && (_jsx("div", { className: props.disabled
-                    ? suffixDisabledClasses
-                    : invalid
-                        ? suffixInvalidClasses
-                        : suffixClasses, children: suffix }))] }));
+            className
+        })),
+        ...props
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex w-full min-w-0",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 relative",
+                children: [
+                    renderLeftSlot(),
+                    inputElement,
+                    renderRightSlot()
+                ]
+            }),
+            suffix && /*#__PURE__*/ _jsx("div", {
+                className: props.disabled ? suffixDisabledClasses : invalid ? suffixInvalidClasses : suffixClasses,
+                children: suffix
+            })
+        ]
+    });
 }
 export { Input, inputVariants };
+
 //# sourceMappingURL=input.js.map

package/dist/src/shadcn/components/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/input.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst iconBaseClasses =\n\t\"absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 flex items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0\";\n\nconst iconLeftPosition =\n\t\"left-3 hover:text-text-tertiary hover:cursor-default transition-colors duration-300\";\n\nconst iconRightContainer =\n\t\"absolute right-3 top-1/2 -translate-y-1/2 flex gap-2 z-10\";\n\nconst iconNormalColor =\n\t\"text-text-tertiary hover:text-fg-secondary transition-colors duration-300\";\nconst iconInvalidColor =\n\t\"text-fg-tertiary hover:text-fg-secondary transition-colors duration-300\";\nconst iconDisabledColor =\n\t\"text-text-disabled hover:cursor-not-allowed transition-colors duration-300\";\n\nconst iconWrapperClasses = \"[&>svg]:w-full [&>svg]:h-full [&>svg]:stroke-[1.5]\";\n\nconst iconRightItemClasses =\n\t\"cursor-pointer flex items-center justify-center transition-colors duration-300\";\n\nconst suffixClasses =\n\t\"border-border-primary bg-bg-tertiary text-text-tertiary flex items-center rounded-r-md border px-3 py-1 typo-body cursor-default transition-colors duration-300\";\n\nconst suffixDisabledClasses =\n\t\"border-border-primary bg-bg-tertiary text-text-disabled flex items-center rounded-r-md border px-3 py-1 typo-body hover:cursor-not-allowed transition-colors duration-300\";\n\nconst suffixInvalidClasses =\n\t\"border-border-error bg-bg-secondary flex items-center rounded-r-md border px-3 py-1 text-text-tertiary typo-body cursor-default transition-colors duration-300\";\n\nconst inputVariants = cva(\n\tcn(\n\t\t\"h-9 file:text-text-primary placeholder:text-text-quternary disabled:placeholder:text-text-disabled selection:bg-bg-primary selection:text-text-primary-foreground border-border-primary hover:border-border-primary_hover flex w-full min-w-0 border bg-transparent px-3 py-2 typo-body text-base transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-md file:font-medium disabled:bg-bg-secondary disabled:cursor-not-allowed disabled:border-border-primary md:text-md selection:bg-selection\",\n\t\t\"focus-visible:ring-4 focus-visible:ring-ring-blue focus-visible:border-border-link\",\n\t\t\"aria-invalid:ring-destructive aria-invalid:text-text-error-primary aria-invalid:border-border-error-primary\",\n\t\t\"\",\n\t\t\"rounded-md\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\thasLeftSlot: {\n\t\t\t\ttrue: \"pl-9\",\n\t\t\t},\n\t\t\thasRightSlot: {\n\t\t\t\ttrue: \"pr-9\",\n\t\t\t},\n\t\t\thasSuffix: {\n\t\t\t\ttrue: \"border-r-0 focus-visible:ring-offset-0 rounded-l-md rounded-r-none focus-visible:border-r-1\",\n\t\t\t},\n\t\t\tinvalid: {\n\t\t\t\ttrue: \"border-border-error focus-visible:ring-4 focus-visible:ring-ring-red focus-visible:border-border-error hover:border-border-error_inverse transition-all duration-300\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\thasSuffix: false,\n\t\t\tinvalid: false,\n\t\t},\n\t},\n);\n\ninterface InputProps\n\textends React.ComponentProps<\"input\">,\n\t\tVariantProps<typeof inputVariants> {\n\ttype?: \"text\" | \"password\";\n\tsuffix?: string;\n\tinvalid?: boolean;\n\tleftSlot?: React.ReactNode;\n\trightSlot?: React.ReactNode;\n}\n\nfunction Input({\n\tclassName,\n\ttype,\n\tinvalid,\n\tsuffix,\n\tleftSlot,\n\trightSlot,\n\t...props\n}: InputProps) {\n\tconst processedLeftSlot = leftSlot === \"None\" ? undefined : leftSlot;\n\tconst processedRightSlot = rightSlot === \"None\" ? undefined : rightSlot;\n\n\tconst hasLeftIcon =\n\t\tprocessedLeftSlot &&\n\t\tprocessedLeftSlot !== null &&\n\t\tprocessedLeftSlot !== undefined;\n\tconst hasRightIcon =\n\t\tprocessedRightSlot &&\n\t\tprocessedRightSlot !== null &&\n\t\tprocessedRightSlot !== undefined;\n\n\tconst renderLeftSlot = () => {\n\t\tif (!hasLeftIcon) return null;\n\t\tconst colorClasses = props.disabled\n\t\t\t? iconDisabledColor\n\t\t\t: invalid\n\t\t\t\t? iconInvalidColor\n\t\t\t\t: iconNormalColor;\n\t\treturn (\n\t\t\t<div className={`${iconBaseClasses} ${iconLeftPosition} ${colorClasses}`}>\n\t\t\t\t<div className={iconWrapperClasses}>{processedLeftSlot}</div>\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst renderRightSlot = () => {\n\t\tif (!hasRightIcon) return null;\n\n\t\tconst colorClasses = props.disabled\n\t\t\t? iconDisabledColor\n\t\t\t: invalid\n\t\t\t\t? iconInvalidColor\n\t\t\t\t: iconNormalColor;\n\n\t\treturn (\n\t\t\t<div className={`${iconRightContainer} ${iconBaseClasses}`}>\n\t\t\t\t{hasRightIcon && (\n\t\t\t\t\t<div className={`${iconRightItemClasses} ${colorClasses}`}>\n\t\t\t\t\t\t<div className={iconWrapperClasses}>{processedRightSlot}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t};\n\n\t// Input tag\n\tconst inputElement = (\n\t\t<input\n\t\t\ttype={type}\n\t\t\tdata-slot=\"input\"\n\t\t\tclassName={cn(\n\t\t\t\tinputVariants({\n\t\t\t\t\tinvalid,\n\t\t\t\t\thasLeftSlot: !!leftSlot,\n\t\t\t\t\thasRightSlot: !!rightSlot,\n\t\t\t\t\thasSuffix: !!suffix,\n\t\t\t\t\tclassName,\n\t\t\t\t}),\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className=\"flex w-full min-w-0\">\n\t\t\t<div className=\"flex-1 relative\">\n\t\t\t\t{renderLeftSlot()}\n\t\t\t\t{inputElement}\n\t\t\t\t{renderRightSlot()}\n\t\t\t</div>\n\t\t\t{suffix && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tprops.disabled\n\t\t\t\t\t\t\t? suffixDisabledClasses\n\t\t\t\t\t\t\t: invalid\n\t\t\t\t\t\t\t\t? suffixInvalidClasses\n\t\t\t\t\t\t\t\t: suffixClasses\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{suffix}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { Input, inputVariants };\n"],"names":["cva","cn","iconBaseClasses","iconLeftPosition","iconRightContainer","iconNormalColor","iconInvalidColor","iconDisabledColor","iconWrapperClasses","iconRightItemClasses","suffixClasses","suffixDisabledClasses","suffixInvalidClasses","inputVariants","variants","hasLeftSlot","true","hasRightSlot","hasSuffix","invalid","defaultVariants","Input","className","type","suffix","leftSlot","rightSlot","props","processedLeftSlot","undefined","processedRightSlot","hasLeftIcon","hasRightIcon","renderLeftSlot","colorClasses","disabled","div","renderRightSlot","inputElement","input","data-slot"],"mappings":";AAAA,SAASA,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,kBACL;AAED,MAAMC,mBACL;AAED,MAAMC,qBACL;AAED,MAAMC,kBACL;AACD,MAAMC,mBACL;AACD,MAAMC,oBACL;AAED,MAAMC,qBAAqB;AAE3B,MAAMC,uBACL;AAED,MAAMC,gBACL;AAED,MAAMC,wBACL;AAED,MAAMC,uBACL;AAED,MAAMC,gBAAgBb,IACrBC,GACC,8hBACA,sFACA,+GACA,IACA,eAED;IACCa,UAAU;QACTC,aAAa;YACZC,MAAM;QACP;QACAC,cAAc;YACbD,MAAM;QACP;QACAE,WAAW;YACVF,MAAM;QACP;QACAG,SAAS;YACRH,MAAM;QACP;IACD;IACAI,iBAAiB;QAChBF,WAAW;QACXC,SAAS;IACV;AACD;AAaD,SAASE,MAAM,EACdC,SAAS,EACTC,IAAI,EACJJ,OAAO,EACPK,MAAM,EACNC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACS;IACZ,MAAMC,oBAAoBH,aAAa,SAASI,YAAYJ;IAC5D,MAAMK,qBAAqBJ,cAAc,SAASG,YAAYH;IAE9D,MAAMK,cACLH,qBACAA,sBAAsB,QACtBA,sBAAsBC;IACvB,MAAMG,eACLF,sBACAA,uBAAuB,QACvBA,uBAAuBD;IAExB,MAAMI,iBAAiB;QACtB,IAAI,CAACF,aAAa,OAAO;QACzB,MAAMG,eAAeP,MAAMQ,QAAQ,GAChC5B,oBACAY,UACCb,mBACAD;QACJ,qBACC,KAAC+B;YAAId,WAAW,GAAGpB,gBAAgB,CAAC,EAAEC,iBAAiB,CAAC,EAAE+B,cAAc;sBACvE,cAAA,KAACE;gBAAId,WAAWd;0BAAqBoB;;;IAGxC;IAEA,MAAMS,kBAAkB;QACvB,IAAI,CAACL,cAAc,OAAO;QAE1B,MAAME,eAAeP,MAAMQ,QAAQ,GAChC5B,oBACAY,UACCb,mBACAD;QAEJ,qBACC,KAAC+B;YAAId,WAAW,GAAGlB,mBAAmB,CAAC,EAAEF,iBAAiB;sBACxD8B,8BACA,KAACI;gBAAId,WAAW,GAAGb,qBAAqB,CAAC,EAAEyB,cAAc;0BACxD,cAAA,KAACE;oBAAId,WAAWd;8BAAqBsB;;;;IAK1C;IAEA,YAAY;IACZ,MAAMQ,6BACL,KAACC;QACAhB,MAAMA;QACNiB,aAAU;QACVlB,WAAWrB,GACVY,cAAc;YACbM;YACAJ,aAAa,CAAC,CAACU;YACfR,cAAc,CAAC,CAACS;YAChBR,WAAW,CAAC,CAACM;YACbF;QACD;QAEA,GAAGK,KAAK;;IAIX,qBACC,MAACS;QAAId,WAAU;;0BACd,MAACc;gBAAId,WAAU;;oBACbW;oBACAK;oBACAD;;;YAEDb,wBACA,KAACY;gBACAd,WACCK,MAAMQ,QAAQ,GACXxB,wBACAQ,UACCP,uBACAF;0BAGJc;;;;AAKN;AAEA,SAASH,KAAK,EAAER,aAAa,GAAG"}

package/dist/src/shadcn/components/ui/input.stories.js

@@ -1,19 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleX, Copy, Mail } from "lucide-react";
-import { Badge } from "#shadcn/components/ui/badge";
-import { Input } from "#shadcn/components/ui/input";
-import { Label } from "#shadcn/components/ui/label";
-function InputWithLabel({ label = "Label", description = "This is a hint text to help user.", invalid = false, disabled = false, placeholder = "Placeholder", leftSlot, rightSlot, suffix, }) {
-    const descriptionColor = invalid
-        ? "text-text-error-primary"
-        : disabled
-            ? "text-text-disabled"
-            : "text-text-secondary";
-    return (_jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "space-y-2 w-full", children: [_jsx(Label, { children: label }), _jsx(Input, { placeholder: placeholder, leftSlot: leftSlot, rightSlot: rightSlot, ...(suffix && { suffix }), invalid: invalid, disabled: disabled }), _jsx("p", { className: `typo-body ${descriptionColor}`, children: description })] }) }));
+import { Badge } from "./badge.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+function InputWithLabel({ label = "Label", description = "This is a hint text to help user.", invalid = false, disabled = false, placeholder = "Placeholder", leftSlot, rightSlot, suffix }) {
+    const descriptionColor = invalid ? "text-text-error-primary" : disabled ? "text-text-disabled" : "text-text-secondary";
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex w-full",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "space-y-2 w-full",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    placeholder: placeholder,
+                    leftSlot: leftSlot,
+                    rightSlot: rightSlot,
+                    ...suffix && {
+                        suffix
+                    },
+                    invalid: invalid,
+                    disabled: disabled
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: `typo-body ${descriptionColor}`,
+                    children: description
+                })
+            ]
+        })
+    });
 }
 const meta = {
     title: "Component/Input",
-    component: Input,
+    component: Input
 };
 export default meta;
 export const Default = {
@@ -21,19 +41,367 @@ export const Default = {
         type: "text",
         placeholder: "Placeholder",
         leftSlot: undefined,
-        rightSlot: undefined,
-    },
+        rightSlot: undefined
+    }
 };
 export const Demo = {
-    render: () => (_jsx("div", { className: "p-6 min-h-screen flex justify-center items-center", children: _jsxs("div", { className: "rounded-lg p-6 shadow-sm w-280", children: [_jsxs("div", { className: "flex items-center mb-4 justify-between", children: [_jsx("div", { className: "w-40 text-left", children: "Inputs without labels" }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Invalid:", _jsx(Badge, { variant: "outline", className: "text-xs ml-2", children: "false" })] }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Invalid:", _jsx(Badge, { variant: "outline", className: "text-xs ml-2", children: "true" })] }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Disabled:", _jsx(Badge, { variant: "outline", className: "text-xs ml-2", children: "true" })] })] }), ["none", "left", "right", "both", "left-double-right"].map((variant) => {
-                    const variantLabel = {
-                        none: "None",
-                        left: "leftSlot",
-                        right: "rightSlot",
-                        both: "leftSlot + rightSlot",
-                        "left-double-right": "BothPlusExtra",
-                    }[variant];
-                    return (_jsx("div", { className: "items-center gap-3 py-3 border-gray-l00 border-t border-border-separator", children: _jsxs("div", { className: "flex gap-3 items-center py-2 justify-between", children: [_jsx("div", { className: "w-40 text-sm text-text-secondary", children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "w-15", children: "Slots:" }), _jsx(Badge, { variant: "outline", className: "text-xs", children: variantLabel })] }) }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && _jsx(Input, { placeholder: "Placeholder" }), variant === "left" && (_jsx(Input, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}) })), variant === "right" && (_jsx(Input, { placeholder: "Placeholder", rightSlot: _jsx(CircleX, {}) })), variant === "both" && (_jsx(Input, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}) })), variant === "left-double-right" && (_jsx(Input, { placeholder: "Placeholder", className: "pr-15", leftSlot: _jsx(Mail, {}), rightSlot: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CircleX, {}), _jsx(Copy, {})] }), suffix: "milliseconds" }))] }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && (_jsx(Input, { placeholder: "Placeholder", invalid: true })), variant === "left" && (_jsx(Input, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), invalid: true })), variant === "right" && (_jsx(Input, { placeholder: "Placeholder", rightSlot: _jsx(CircleX, {}), invalid: true })), variant === "both" && (_jsx(Input, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), invalid: true })), variant === "left-double-right" && (_jsx(Input, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), suffix: "milliseconds", invalid: true }))] }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && (_jsx(Input, { placeholder: "Aidbox", disabled: true })), variant === "left" && (_jsx(Input, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), disabled: true })), variant === "right" && (_jsx(Input, { placeholder: "Aidbox", rightSlot: _jsx(CircleX, {}), disabled: true })), variant === "both" && (_jsx(Input, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), disabled: true })), variant === "left-double-right" && (_jsx(Input, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), suffix: "milliseconds", disabled: true }))] })] }) }, variant));
-                }), _jsxs("div", { className: "mt-8", children: [_jsxs("div", { className: "flex items-center mb-4 justify-between", children: [_jsx("div", { className: "w-40 text-left", children: "Input + Label + Description" }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Invalid:", _jsx(Badge, { variant: "outline", className: "text-xs", children: "false" })] }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Invalid:", _jsx(Badge, { variant: "outline", className: "text-xs", children: "true" })] }), _jsxs("div", { className: "w-70 text-left text-sm text-text-secondary", children: ["Disabled:", _jsx(Badge, { variant: "outline", className: "text-xs", children: "true" })] })] }), ["none", "left", "right", "both", "left-double-right"].map((variant) => (_jsx("div", { className: "items-center gap-3 py-3 border-gray-l00 border-t border-border-separator", children: _jsxs("div", { className: "flex gap-3 items-center py-2 justify-between", children: [_jsx("div", { className: "w-40 text-sm text-text-secondary", children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "w-15", children: "Slots:" }), _jsx(Badge, { variant: "outline", className: "text-xs", children: variant })] }) }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && (_jsx(InputWithLabel, { placeholder: "Placeholder" })), variant === "left" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}) })), variant === "right" && (_jsx(InputWithLabel, { placeholder: "Placeholder", rightSlot: _jsx(CircleX, {}) })), variant === "both" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}) })), variant === "left-double-right" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), suffix: "milliseconds" }))] }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && (_jsx(InputWithLabel, { placeholder: "Placeholder", invalid: true })), variant === "left" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), invalid: true })), variant === "right" && (_jsx(InputWithLabel, { placeholder: "Placeholder", rightSlot: _jsx(CircleX, {}), invalid: true })), variant === "both" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), invalid: true })), variant === "left-double-right" && (_jsx(InputWithLabel, { placeholder: "Placeholder", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), suffix: "milliseconds", invalid: true }))] }), _jsxs("div", { className: "w-70 flex gap-3 justify-center", children: [variant === "none" && (_jsx(InputWithLabel, { placeholder: "Aidbox", disabled: true })), variant === "left" && (_jsx(InputWithLabel, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), disabled: true })), variant === "right" && (_jsx(InputWithLabel, { placeholder: "Aidbox", rightSlot: _jsx(CircleX, {}), disabled: true })), variant === "both" && (_jsx(InputWithLabel, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), disabled: true })), variant === "left-double-right" && (_jsx(InputWithLabel, { placeholder: "Aidbox", leftSlot: _jsx(Mail, {}), rightSlot: _jsx(CircleX, {}), suffix: "milliseconds", disabled: true }))] })] }) }, `label-${variant}`)))] })] }) })),
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "p-6 min-h-screen flex justify-center items-center",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "rounded-lg p-6 shadow-sm w-280",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center mb-4 justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "w-40 text-left",
+                                children: "Inputs without labels"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "w-70 text-left text-sm text-text-secondary",
+                                children: [
+                                    "Invalid:",
+                                    /*#__PURE__*/ _jsx(Badge, {
+                                        variant: "outline",
+                                        className: "text-xs ml-2",
+                                        children: "false"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "w-70 text-left text-sm text-text-secondary",
+                                children: [
+                                    "Invalid:",
+                                    /*#__PURE__*/ _jsx(Badge, {
+                                        variant: "outline",
+                                        className: "text-xs ml-2",
+                                        children: "true"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "w-70 text-left text-sm text-text-secondary",
+                                children: [
+                                    "Disabled:",
+                                    /*#__PURE__*/ _jsx(Badge, {
+                                        variant: "outline",
+                                        className: "text-xs ml-2",
+                                        children: "true"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    [
+                        "none",
+                        "left",
+                        "right",
+                        "both",
+                        "left-double-right"
+                    ].map((variant)=>{
+                        const variantLabel = {
+                            none: "None",
+                            left: "leftSlot",
+                            right: "rightSlot",
+                            both: "leftSlot + rightSlot",
+                            "left-double-right": "BothPlusExtra"
+                        }[variant];
+                        return /*#__PURE__*/ _jsx("div", {
+                            className: "items-center gap-3 py-3 border-gray-l00 border-t border-border-separator",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-3 items-center py-2 justify-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "w-40 text-sm text-text-secondary",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: "w-15",
+                                                    children: "Slots:"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Badge, {
+                                                    variant: "outline",
+                                                    className: "text-xs",
+                                                    children: variantLabel
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 flex gap-3 justify-center",
+                                        children: [
+                                            variant === "none" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder"
+                                            }),
+                                            variant === "left" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {})
+                                            }),
+                                            variant === "right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {})
+                                            }),
+                                            variant === "both" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {})
+                                            }),
+                                            variant === "left-double-right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                className: "pr-15",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        /*#__PURE__*/ _jsx(Copy, {})
+                                                    ]
+                                                }),
+                                                suffix: "milliseconds"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 flex gap-3 justify-center",
+                                        children: [
+                                            variant === "none" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                invalid: true
+                                            }),
+                                            variant === "left" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                invalid: true
+                                            }),
+                                            variant === "right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                invalid: true
+                                            }),
+                                            variant === "both" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                invalid: true
+                                            }),
+                                            variant === "left-double-right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Placeholder",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                suffix: "milliseconds",
+                                                invalid: true
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 flex gap-3 justify-center",
+                                        children: [
+                                            variant === "none" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Aidbox",
+                                                disabled: true
+                                            }),
+                                            variant === "left" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Aidbox",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                disabled: true
+                                            }),
+                                            variant === "right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Aidbox",
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                disabled: true
+                                            }),
+                                            variant === "both" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Aidbox",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                disabled: true
+                                            }),
+                                            variant === "left-double-right" && /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Aidbox",
+                                                leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                suffix: "milliseconds",
+                                                disabled: true
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, variant);
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "mt-8",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center mb-4 justify-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "w-40 text-left",
+                                        children: "Input + Label + Description"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 text-left text-sm text-text-secondary",
+                                        children: [
+                                            "Invalid:",
+                                            /*#__PURE__*/ _jsx(Badge, {
+                                                variant: "outline",
+                                                className: "text-xs",
+                                                children: "false"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 text-left text-sm text-text-secondary",
+                                        children: [
+                                            "Invalid:",
+                                            /*#__PURE__*/ _jsx(Badge, {
+                                                variant: "outline",
+                                                className: "text-xs",
+                                                children: "true"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-70 text-left text-sm text-text-secondary",
+                                        children: [
+                                            "Disabled:",
+                                            /*#__PURE__*/ _jsx(Badge, {
+                                                variant: "outline",
+                                                className: "text-xs",
+                                                children: "true"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            [
+                                "none",
+                                "left",
+                                "right",
+                                "both",
+                                "left-double-right"
+                            ].map((variant)=>/*#__PURE__*/ _jsx("div", {
+                                    className: "items-center gap-3 py-3 border-gray-l00 border-t border-border-separator",
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex gap-3 items-center py-2 justify-between",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "w-40 text-sm text-text-secondary",
+                                                children: /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("div", {
+                                                            className: "w-15",
+                                                            children: "Slots:"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Badge, {
+                                                            variant: "outline",
+                                                            className: "text-xs",
+                                                            children: variant
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "w-70 flex gap-3 justify-center",
+                                                children: [
+                                                    variant === "none" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder"
+                                                    }),
+                                                    variant === "left" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {})
+                                                    }),
+                                                    variant === "right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {})
+                                                    }),
+                                                    variant === "both" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {})
+                                                    }),
+                                                    variant === "left-double-right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        suffix: "milliseconds"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "w-70 flex gap-3 justify-center",
+                                                children: [
+                                                    variant === "none" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        invalid: true
+                                                    }),
+                                                    variant === "left" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        invalid: true
+                                                    }),
+                                                    variant === "right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        invalid: true
+                                                    }),
+                                                    variant === "both" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        invalid: true
+                                                    }),
+                                                    variant === "left-double-right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Placeholder",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        suffix: "milliseconds",
+                                                        invalid: true
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "w-70 flex gap-3 justify-center",
+                                                children: [
+                                                    variant === "none" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Aidbox",
+                                                        disabled: true
+                                                    }),
+                                                    variant === "left" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Aidbox",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        disabled: true
+                                                    }),
+                                                    variant === "right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Aidbox",
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        disabled: true
+                                                    }),
+                                                    variant === "both" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Aidbox",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        disabled: true
+                                                    }),
+                                                    variant === "left-double-right" && /*#__PURE__*/ _jsx(InputWithLabel, {
+                                                        placeholder: "Aidbox",
+                                                        leftSlot: /*#__PURE__*/ _jsx(Mail, {}),
+                                                        rightSlot: /*#__PURE__*/ _jsx(CircleX, {}),
+                                                        suffix: "milliseconds",
+                                                        disabled: true
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }, `label-${variant}`))
+                        ]
+                    })
+                ]
+            })
+        })
 };
+
 //# sourceMappingURL=input.stories.js.map