@hirely/ui 0.1.6 → 0.1.8

package/dist/components/ui/image-upload.es.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { Button as t } from "./button.es.js";
+import { useDropzone as n } from "../../node_modules/.bun/react-dropzone@15.0.0_e14d3f224186685e/node_modules/react-dropzone/dist/es/index.es.js";
+import { AlertCircle as r, Loader2 as i, Upload as a, X as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l, { useCallback as u, useState as d } from "react";
+//#region src/components/ui/image-upload.tsx
+function f({ value: f, onChange: p, onRemove: m, className: h, classNames: g, maxSize: _ = 5 * 1024 * 1024, alt: v = "Upload preview", disabled: y = !1, loading: b = !1 }) {
+	let [x, S] = d(null), [C, w] = d(null);
+	l.useEffect(() => {
+		if (typeof f == "string") S(f);
+		else if (f instanceof File) {
+			let e = URL.createObjectURL(f);
+			return S(e), () => URL.revokeObjectURL(e);
+		} else S(null);
+	}, [f]);
+	let { getRootProps: T, getInputProps: E, isDragActive: D } = n({
+		onDrop: u((e, t) => {
+			if (w(null), t.length > 0) {
+				let e = t[0];
+				e.errors[0]?.code === "file-too-large" ? w(`File is too large. Max size is ${_ / (1024 * 1024)}MB.`) : e.errors[0]?.code === "file-invalid-type" ? w("Invalid file type. Please upload PNG, JPG, WEBP, or JPEG.") : w("Could not upload file. Please try again.");
+				return;
+			}
+			let n = e[0];
+			n && p(n);
+		}, [p, _]),
+		accept: { "image/*": [
+			".jpeg",
+			".jpg",
+			".png",
+			".webp"
+		] },
+		maxFiles: 1,
+		multiple: !1,
+		maxSize: _,
+		disabled: y
+	}), O = (e) => {
+		e.stopPropagation(), w(null), m(), S(null);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e("w-full", h, g?.root),
+		children: [/* @__PURE__ */ c("div", {
+			...T(),
+			className: e("w-full", g?.dropzone),
+			children: [/* @__PURE__ */ s("input", { ...E() }), b ? /* @__PURE__ */ c("div", {
+				className: e("flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 py-12 text-center", g?.emptyState),
+				children: [/* @__PURE__ */ s(i, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ s("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Processing image…"
+				})]
+			}) : x ? /* @__PURE__ */ c("div", {
+				className: e("relative w-full overflow-hidden rounded-lg border border-border", "aspect-square max-w-[400px] mx-auto sm:aspect-video sm:max-h-[200px] sm:max-w-none", "cursor-pointer group/preview", g?.preview),
+				children: [
+					/* @__PURE__ */ s(t, {
+						type: "button",
+						onClick: O,
+						variant: "destructive",
+						size: "icon",
+						"aria-label": "Remove image",
+						className: e("absolute right-2 top-2 z-10 rounded-full h-8 w-8 shadow-lg opacity-0 group-hover/preview:opacity-100 transition-opacity", g?.removeButton),
+						children: /* @__PURE__ */ s(o, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ c("div", {
+						className: e("absolute inset-0 z-5 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover/preview:opacity-100 transition-opacity", g?.swapOverlay),
+						children: [/* @__PURE__ */ s(a, { className: "w-8 h-8 text-white mb-2" }), /* @__PURE__ */ s("span", {
+							className: "text-sm font-bold text-white uppercase tracking-widest",
+							children: "Swap Image"
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "absolute inset-0 w-full h-full scale-110 blur-xl opacity-30",
+						children: /* @__PURE__ */ s("img", {
+							sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+							src: x,
+							alt: "",
+							className: "object-cover w-full h-full"
+						})
+					}),
+					/* @__PURE__ */ s("div", { className: "absolute inset-0 bg-neutral-900/40" }),
+					/* @__PURE__ */ s("img", {
+						sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+						src: x,
+						alt: v,
+						className: e("size-full object-cover transition-all duration-300 relative z-0", g?.previewImage)
+					})
+				]
+			}) : /* @__PURE__ */ s("div", {
+				className: e("relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-6 sm:p-12 text-center transition hover:bg-muted/80", D && "border-primary bg-primary/5", y && "opacity-50 cursor-not-allowed", g?.emptyState),
+				children: /* @__PURE__ */ c("div", {
+					className: "flex flex-col items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ s("div", {
+						className: e("rounded-full bg-background p-4 shadow-sm border border-border", g?.emptyIcon),
+						children: /* @__PURE__ */ s(a, { className: "h-6 w-6" })
+					}), /* @__PURE__ */ c("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ s("p", {
+							className: "text-sm font-semibold text-foreground",
+							children: "Click to upload or drag and drop"
+						}), /* @__PURE__ */ c("p", {
+							className: "text-xs",
+							children: [
+								"PNG, JPG, WEBP or JPEG (max. ",
+								_ / (1024 * 1024),
+								"MB)"
+							]
+						})]
+					})]
+				})
+			})]
+		}), C && /* @__PURE__ */ c("div", {
+			role: "alert",
+			className: e("mt-2 flex items-center gap-2 text-sm text-destructive", g?.error),
+			children: [/* @__PURE__ */ s(r, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ s("span", { children: C })]
+		})]
+	});
+}
+//#endregion
+export { f as ImageUpload };
+
+//# sourceMappingURL=image-upload.es.js.map

package/dist/components/ui/image-upload.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.es.js","names":[],"sources":["../../../src/components/ui/image-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { useDropzone, type FileRejection } from \"react-dropzone\";\nimport { Upload, X, AlertCircle, Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface ImageUploadClassNames {\n    root?: string;\n    dropzone?: string;\n    preview?: string;\n    previewImage?: string;\n    removeButton?: string;\n    swapOverlay?: string;\n    emptyState?: string;\n    emptyIcon?: string;\n    error?: string;\n}\n\ninterface ImageUploadProps {\n    value?: string | File;\n    onChange: (file?: File) => void;\n    onRemove: () => void;\n    className?: string;\n    classNames?: ImageUploadClassNames;\n    /** Max file size in bytes (default: 5MB) */\n    maxSize?: number;\n    /** Custom alt text for the preview image */\n    alt?: string;\n    /** Disable the upload */\n    disabled?: boolean;\n    /** Show loading spinner */\n    loading?: boolean;\n}\n\nexport function ImageUpload({\n    value,\n    onChange,\n    onRemove,\n    className,\n    classNames,\n    maxSize = 5 * 1024 * 1024, // 5MB default\n    alt = \"Upload preview\",\n    disabled = false,\n    loading = false,\n}: ImageUploadProps) {\n    const [preview, setPreview] = useState<string | null>(null);\n    const [error, setError] = useState<string | null>(null);\n\n    // Generate preview from value\n    React.useEffect(() => {\n        if (typeof value === \"string\") {\n            setPreview(value);\n        } else if (value instanceof File) {\n            const objectUrl = URL.createObjectURL(value);\n            setPreview(objectUrl);\n            return () => URL.revokeObjectURL(objectUrl);\n        } else {\n            setPreview(null);\n        }\n    }, [value]);\n\n    const onDrop = useCallback(\n        (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n            setError(null);\n\n            if (rejectedFiles.length > 0) {\n                const rejection = rejectedFiles[0];\n                if (rejection.errors[0]?.code === \"file-too-large\") {\n                    setError(`File is too large. Max size is ${maxSize / (1024 * 1024)}MB.`);\n                } else if (rejection.errors[0]?.code === \"file-invalid-type\") {\n                    setError(\"Invalid file type. Please upload PNG, JPG, WEBP, or JPEG.\");\n                } else {\n                    setError(\"Could not upload file. Please try again.\");\n                }\n                return;\n            }\n\n            const file = acceptedFiles[0];\n            if (file) {\n                onChange(file);\n            }\n        },\n        [onChange, maxSize]\n    );\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n        onDrop,\n        accept: {\n            \"image/*\": [\".jpeg\", \".jpg\", \".png\", \".webp\"],\n        },\n        maxFiles: 1,\n        multiple: false,\n        maxSize,\n        disabled,\n    });\n\n    const handleRemove = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        setError(null);\n        onRemove();\n        setPreview(null);\n    };\n\n    return (\n        <div className={cn(\"w-full\", className, classNames?.root)}>\n            <div\n                {...getRootProps()}\n                className={cn(\"w-full\", classNames?.dropzone)}\n            >\n                <input {...getInputProps()} />\n\n                {loading ? (\n                    // Loading state\n                    <div\n                        className={cn(\n                            \"flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 py-12 text-center\",\n                            classNames?.emptyState\n                        )}\n                    >\n                        <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n                        <p className=\"text-sm text-muted-foreground\">Processing image…</p>\n                    </div>\n                ) : preview ? (\n                    // Preview state\n                    <div\n                        className={cn(\n                            \"relative w-full overflow-hidden rounded-lg border border-border\",\n                            \"aspect-square max-w-[400px] mx-auto sm:aspect-video sm:max-h-[200px] sm:max-w-none\", // sensible defaults\n                            \"cursor-pointer group/preview\",\n                            classNames?.preview\n                        )}\n                    >\n                        {/* Remove button */}\n                        <Button\n                            type=\"button\"\n                            onClick={handleRemove}\n                            variant=\"destructive\"\n                            size=\"icon\"\n                            aria-label=\"Remove image\"\n                            className={cn(\n                                \"absolute right-2 top-2 z-10 rounded-full h-8 w-8 shadow-lg opacity-0 group-hover/preview:opacity-100 transition-opacity\",\n                                classNames?.removeButton\n                            )}\n                        >\n                            <X className=\"h-4 w-4\" />\n                        </Button>\n\n                        {/* Swap overlay */}\n                        <div\n                            className={cn(\n                                \"absolute inset-0 z-5 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover/preview:opacity-100 transition-opacity\",\n                                classNames?.swapOverlay\n                            )}\n                        >\n                            <Upload className=\"w-8 h-8 text-white mb-2\" />\n                            <span className=\"text-sm font-bold text-white uppercase tracking-widest\">\n                                Swap Image\n                            </span>\n                        </div>\n\n                        {/* Ambient blurred background */}\n                        <div className=\"absolute inset-0 w-full h-full scale-110 blur-xl opacity-30\">\n                            <img\n                                sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n                                src={preview}\n                                alt=\"\"\n                                className=\"object-cover w-full h-full\"\n                            />\n                        </div>\n\n                        {/* Dark tint */}\n                        <div className=\"absolute inset-0 bg-neutral-900/40\" />\n\n                        {/* Main image */}\n                        <img\n                            sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n                            src={preview}\n                            alt={alt}\n                            className={cn(\n                                \"size-full object-cover transition-all duration-300 relative z-0\",\n                                classNames?.previewImage\n                            )}\n                        />\n                    </div>\n                ) : (\n                    // Empty state\n                    <div\n                        className={cn(\n                            \"relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-6 sm:p-12 text-center transition hover:bg-muted/80\",\n                            isDragActive && \"border-primary bg-primary/5\",\n                            disabled && \"opacity-50 cursor-not-allowed\",\n                            classNames?.emptyState\n                        )}\n                    >\n                        <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n                            <div\n                                className={cn(\n                                    \"rounded-full bg-background p-4 shadow-sm border border-border\",\n                                    classNames?.emptyIcon\n                                )}\n                            >\n                                <Upload className=\"h-6 w-6\" />\n                            </div>\n                            <div className=\"flex flex-col gap-1\">\n                                <p className=\"text-sm font-semibold text-foreground\">\n                                    Click to upload or drag and drop\n                                </p>\n                                <p className=\"text-xs\">\n                                    PNG, JPG, WEBP or JPEG (max. {maxSize / (1024 * 1024)}MB)\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </div>\n\n            {/* Error message */}\n            {error && (\n                <div\n                    role=\"alert\"\n                    className={cn(\n                        \"mt-2 flex items-center gap-2 text-sm text-destructive\",\n                        classNames?.error\n                    )}\n                >\n                    <AlertCircle className=\"h-4 w-4 shrink-0\" />\n                    <span>{error}</span>\n                </div>\n            )}\n        </div>\n    );\n}"],"mappings":";;;;;;;;AAoCA,SAAgB,EAAY,EACxB,UACA,aACA,aACA,cACA,eACA,aAAU,IAAI,OAAO,MACrB,SAAM,kBACN,cAAW,IACX,aAAU,MACO;CACjB,IAAM,CAAC,GAAS,KAAc,EAAwB,IAAI,GACpD,CAAC,GAAO,KAAY,EAAwB,IAAI;CAGtD,EAAM,gBAAgB;EAClB,IAAI,OAAO,KAAU,UACjB,EAAW,CAAK;OACb,IAAI,aAAiB,MAAM;GAC9B,IAAM,IAAY,IAAI,gBAAgB,CAAK;GAE3C,OADA,EAAW,CAAS,SACP,IAAI,gBAAgB,CAAS;EAC9C,OACI,EAAW,IAAI;CAEvB,GAAG,CAAC,CAAK,CAAC;CA0BV,IAAM,EAAE,iBAAc,kBAAe,oBAAiB,EAAY;EAC9D,QAzBW,GACV,GAAuB,MAAmC;GAGvD,IAFA,EAAS,IAAI,GAET,EAAc,SAAS,GAAG;IAC1B,IAAM,IAAY,EAAc;IAChC,AAAI,EAAU,OAAO,EAAE,EAAE,SAAS,mBAC9B,EAAS,kCAAkC,KAAW,OAAO,MAAM,IAAI,IAChE,EAAU,OAAO,EAAE,EAAE,SAAS,sBACrC,EAAS,2DAA2D,IAEpE,EAAS,0CAA0C;IAEvD;GACJ;GAEA,IAAM,IAAO,EAAc;GAC3B,AAAI,KACA,EAAS,CAAI;EAErB,GACA,CAAC,GAAU,CAAO,CAIlB;EACA,QAAQ,EACJ,WAAW;GAAC;GAAS;GAAQ;GAAQ;EAAO,EAChD;EACA,UAAU;EACV,UAAU;EACV;EACA;CACJ,CAAC,GAEK,KAAgB,MAAwB;EAI1C,AAHA,EAAE,gBAAgB,GAClB,EAAS,IAAI,GACb,EAAS,GACT,EAAW,IAAI;CACnB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,GAAW,GAAY,IAAI;YAAxD,CACI,kBAAC,OAAD;GACI,GAAI,EAAa;GACjB,WAAW,EAAG,UAAU,GAAY,QAAQ;aAFhD,CAII,kBAAC,SAAD,EAAO,GAAI,EAAc,EAAI,CAAA,GAE5B,IAEG,kBAAC,OAAD;IACI,WAAW,EACP,8IACA,GAAY,UAChB;cAJJ,CAMI,kBAAC,GAAD,EAAS,WAAU,6CAA8C,CAAA,GACjE,kBAAC,KAAD;KAAG,WAAU;eAAgC;IAAoB,CAAA,CAChE;QACL,IAEA,kBAAC,OAAD;IACI,WAAW,EACP,mEACA,sFACA,gCACA,GAAY,OAChB;cANJ;KASI,kBAAC,GAAD;MACI,MAAK;MACL,SAAS;MACT,SAAQ;MACR,MAAK;MACL,cAAW;MACX,WAAW,EACP,2HACA,GAAY,YAChB;gBAEA,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;KACpB,CAAA;KAGR,kBAAC,OAAD;MACI,WAAW,EACP,2IACA,GAAY,WAChB;gBAJJ,CAMI,kBAAC,GAAD,EAAQ,WAAU,0BAA2B,CAAA,GAC7C,kBAAC,QAAD;OAAM,WAAU;iBAAyD;MAEnE,CAAA,CACL;;KAGL,kBAAC,OAAD;MAAK,WAAU;gBACX,kBAAC,OAAD;OACI,OAAM;OACN,KAAK;OACL,KAAI;OACJ,WAAU;MACb,CAAA;KACA,CAAA;KAGL,kBAAC,OAAD,EAAK,WAAU,qCAAsC,CAAA;KAGrD,kBAAC,OAAD;MACI,OAAM;MACN,KAAK;MACA;MACL,WAAW,EACP,mEACA,GAAY,YAChB;KACH,CAAA;IACA;QAGL,kBAAC,OAAD;IACI,WAAW,EACP,mMACA,KAAgB,+BAChB,KAAY,iCACZ,GAAY,UAChB;cAEA,kBAAC,OAAD;KAAK,WAAU;eAAf,CACI,kBAAC,OAAD;MACI,WAAW,EACP,iEACA,GAAY,SAChB;gBAEA,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;KAC5B,CAAA,GACL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACI,kBAAC,KAAD;OAAG,WAAU;iBAAwC;MAElD,CAAA,GACH,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAuB;QACW,KAAW,OAAO;QAAM;OACvD;QACF;OACJ;;GACJ,CAAA,CAER;MAGJ,KACG,kBAAC,OAAD;GACI,MAAK;GACL,WAAW,EACP,yDACA,GAAY,KAChB;aALJ,CAOI,kBAAC,GAAD,EAAa,WAAU,mBAAoB,CAAA,GAC3C,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,CAClB;IAER;;AAEb"}

package/dist/components/ui/input-group.cjs.js

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),n=require("../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs.js"),r=require("./button.cjs.js"),i=require("./input.cjs.js"),a=require("./textarea.cjs.js");let o=require("react/jsx-runtime"),s=require("react");s=e.__toESM(s,1);function c({className:e,...n}){return(0,o.jsx)(`div`,{"data-slot":`input-group`,role:`group`,className:t.cn(`group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5`,e),...n})}var l=n.cva(`flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4`,{variants:{align:{"inline-start":`order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]`,"inline-end":`order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]`,"block-start":`order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2`,"block-end":`order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2`}},defaultVariants:{align:`inline-start`}});function u({className:e,align:n=`inline-start`,...r}){return(0,o.jsx)(`div`,{role:`group`,"data-slot":`input-group-addon`,"data-align":n,className:t.cn(l({align:n}),e),onClick:e=>{e.target.closest(`button`)||e.currentTarget.parentElement?.querySelector(`input`)?.focus()},...r})}var d=n.cva(`flex items-center gap-2 text-sm shadow-none`,{variants:{size:{xs:`h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5`,sm:``,"icon-xs":`size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0`,"icon-sm":`size-8 p-0 has-[>svg]:p-0`}},defaultVariants:{size:`xs`}});function f({className:e,type:n=`button`,variant:i=`ghost`,size:a=`xs`,...s}){return(0,o.jsx)(r.Button,{type:n,"data-size":a,variant:i,className:t.cn(d({size:a}),e),...s})}function p({className:e,...n}){return(0,o.jsx)(`span`,{className:t.cn(`flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4`,e),...n})}function m({className:e,...n}){return(0,o.jsx)(i.Input,{"data-slot":`input-group-control`,className:t.cn(`flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...n})}function h({className:e,...n}){return(0,o.jsx)(a.Textarea,{"data-slot":`input-group-control`,className:t.cn(`flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...n})}exports.InputGroup=c,exports.InputGroupAddon=u,exports.InputGroupButton=f,exports.InputGroupInput=m,exports.InputGroupText=p,exports.InputGroupTextarea=h;
+//# sourceMappingURL=input-group.cjs.js.map

package/dist/components/ui/input-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.cjs.js","names":[],"sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":"8aAQA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,KAAK,QACL,UAAW,EAAA,GACT,wlCACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,IAAM,EAA0B,EAAA,IAC9B,0PACA,CACE,SAAU,CACR,MAAO,CACL,eACE,uEACF,aACE,sEACF,cACE,oGACF,YACE,kGACJ,CACF,EACA,gBAAiB,CACf,MAAO,cACT,CACF,CACF,EAEA,SAAS,EAAgB,CACvB,YACA,QAAQ,eACR,GAAG,GAC0E,CAC7E,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,QACL,YAAU,oBACV,aAAY,EACZ,UAAW,EAAA,GAAG,EAAwB,CAAE,OAAM,CAAC,EAAG,CAAS,EAC3D,QAAU,GAAM,CACT,EAAE,OAAuB,QAAQ,QAAQ,GAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM,CAC/D,EACA,GAAI,CACL,CAAA,CAEL,CAEA,IAAM,EAA2B,EAAA,IAC/B,8CACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UACE,8DACF,UAAW,2BACb,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAEA,SAAS,EAAiB,CACxB,YACA,OAAO,SACP,UAAU,QACV,OAAO,KACP,GAAG,GAIA,CACH,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CACQ,OACN,YAAW,EACF,UACT,UAAW,EAAA,GAAG,EAAyB,CAAE,MAAK,CAAC,EAAG,CAAS,EAC3D,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAe,CAAE,YAAW,GAAG,GAAuC,CAC7E,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,UAAW,EAAA,GACT,yHACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAgB,CACvB,YACA,GAAG,GAC6B,CAChC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACE,YAAU,sBACV,UAAW,EAAA,GACT,mLACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAmB,CAC1B,YACA,GAAG,GACgC,CACnC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CACE,YAAU,sBACV,UAAW,EAAA,GACT,oMACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/components/ui/input-group.d.ts

@@ -1,14 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { Button } from './button';
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    align?: "inline-start" | "inline-end" | "block-end" | "block-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
     type?: "button" | "submit" | "reset";
 }): React.JSX.Element;

package/dist/components/ui/input-group.es.js

@@ -0,0 +1,79 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { cva as t } from "../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.es.js";
+import { Button as n } from "./button.es.js";
+import { Input as r } from "./input.es.js";
+import { Textarea as i } from "./textarea.es.js";
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+//#region src/components/ui/input-group.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: e("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", t),
+		...n
+	});
+}
+var s = t("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function c({ className: t, align: n = "inline-start", ...r }) {
+	return /* @__PURE__ */ a("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": n,
+		className: e(s({ align: n }), t),
+		onClick: (e) => {
+			e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...r
+	});
+}
+var l = t("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function u({ className: t, type: r = "button", variant: i = "ghost", size: o = "xs", ...s }) {
+	return /* @__PURE__ */ a(n, {
+		type: r,
+		"data-size": o,
+		variant: i,
+		className: e(l({ size: o }), t),
+		...s
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ a("span", {
+		className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ a(r, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ a(i, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...n
+	});
+}
+//#endregion
+export { o as InputGroup, c as InputGroupAddon, u as InputGroupButton, f as InputGroupInput, d as InputGroupText, p as InputGroupTextarea };
+
+//# sourceMappingURL=input-group.es.js.map

package/dist/components/ui/input-group.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.es.js","names":[],"sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":";;;;;;;;AAQA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,EACT,ylCACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAA0B,EAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,EAAgB,EACvB,cACA,WAAQ,gBACR,GAAG,KAC0E;CAC7E,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,EAAG,EAAwB,EAAE,SAAM,CAAC,GAAG,CAAS;EAC3D,UAAU,MAAM;GACT,EAAE,OAAuB,QAAQ,QAAQ,KAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAA2B,EAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,SAAS,EAAiB,EACxB,cACA,UAAO,UACP,aAAU,SACV,UAAO,MACP,GAAG,KAIA;CACH,OACE,kBAAC,GAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,EAAG,EAAyB,EAAE,QAAK,CAAC,GAAG,CAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAe,EAAE,cAAW,GAAG,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,WAAW,EACT,0HACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EACvB,cACA,GAAG,KAC6B;CAChC,OACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,oLACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAmB,EAC1B,cACA,GAAG,KACgC;CACnC,OACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,qMACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/input-otp.cjs.js

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),n=require("../../node_modules/.bun/input-otp@1.4.2_7492c01c6988791b/node_modules/input-otp/dist/index.cjs.js");let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("react");a=e.__toESM(a,1);function o({className:e,containerClassName:r,...a}){return(0,i.jsx)(n.OTPInput,{"data-slot":`input-otp`,containerClassName:t.cn(`cn-input-otp flex items-center has-disabled:opacity-50`,r),spellCheck:!1,className:t.cn(`disabled:cursor-not-allowed`,e),...a})}function s({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`input-otp-group`,className:t.cn(`flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40`,e),...n})}function c({index:e,className:r,...o}){let{char:s,hasFakeCaret:c,isActive:l}=a.useContext(n.OTPInputContext)?.slots[e]??{};return(0,i.jsxs)(`div`,{"data-slot":`input-otp-slot`,"data-active":l,className:t.cn(`relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40`,r),...o,children:[s,c&&(0,i.jsx)(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:(0,i.jsx)(`div`,{className:`h-4 w-px animate-caret-blink bg-foreground duration-1000`})})]})}function l({...e}){return(0,i.jsx)(`div`,{"data-slot":`input-otp-separator`,className:`flex items-center [&_svg:not([class*='size-'])]:size-4`,role:`separator`,...e,children:(0,i.jsx)(r.MinusIcon,{})})}exports.InputOTP=o,exports.InputOTPGroup=s,exports.InputOTPSeparator=l,exports.InputOTPSlot=c;
+//# sourceMappingURL=input-otp.cjs.js.map

package/dist/components/ui/input-otp.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.cjs.js","names":[],"sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"../../lib/utils\"\nimport { MinusIcon } from \"lucide-react\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"mappings":"mWAMA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAGF,CACD,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CACE,YAAU,YACV,mBAAoB,EAAA,GAClB,yDACA,CACF,EACA,WAAY,GACZ,UAAW,EAAA,GAAG,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,kBACV,UAAW,EAAA,GACT,0KACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJ,EAAM,WAAW,EAAA,eACA,CAAA,EAAiB,MAAM,IAAU,CAAC,EAE3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,UAAW,EAAA,GACT,4eACA,CACF,EACA,GAAI,WAPN,CASG,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kFACb,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAEA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,sBACV,UAAU,yDACV,KAAK,YACL,GAAI,YAEJ,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CACC,CAAA,CACE,CAAA,CAET"}

package/dist/components/ui/input-otp.d.ts

@@ -1,5 +1,5 @@
+import { OTPInput } from 'input-otp';
 import * as React from "react";
-import { OTPInput } from "input-otp";
 declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
 }): React.JSX.Element;

package/dist/components/ui/input-otp.es.js

@@ -0,0 +1,48 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { OTPInput as t, OTPInputContext as n } from "../../node_modules/.bun/input-otp@1.4.2_7492c01c6988791b/node_modules/input-otp/dist/index.es.js";
+import { MinusIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "react";
+//#region src/components/ui/input-otp.tsx
+function s({ className: n, containerClassName: r, ...a }) {
+	return /* @__PURE__ */ i(t, {
+		"data-slot": "input-otp",
+		containerClassName: e("cn-input-otp flex items-center has-disabled:opacity-50", r),
+		spellCheck: !1,
+		className: e("disabled:cursor-not-allowed", n),
+		...a
+	});
+}
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "input-otp-group",
+		className: e("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", t),
+		...n
+	});
+}
+function l({ index: t, className: r, ...s }) {
+	let { char: c, hasFakeCaret: l, isActive: u } = o.useContext(n)?.slots[t] ?? {};
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": u,
+		className: e("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", r),
+		...s,
+		children: [c, l && /* @__PURE__ */ i("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ i("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+}
+function u({ ...e }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		role: "separator",
+		...e,
+		children: /* @__PURE__ */ i(r, {})
+	});
+}
+//#endregion
+export { s as InputOTP, c as InputOTPGroup, u as InputOTPSeparator, l as InputOTPSlot };
+
+//# sourceMappingURL=input-otp.es.js.map

package/dist/components/ui/input-otp.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.es.js","names":[],"sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"../../lib/utils\"\nimport { MinusIcon } from \"lucide-react\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"mappings":";;;;;;AAMA,SAAS,EAAS,EAChB,cACA,uBACA,GAAG,KAGF;CACD,OACE,kBAAC,GAAD;EACE,aAAU;EACV,oBAAoB,EAClB,0DACA,CACF;EACA,YAAY;EACZ,WAAW,EAAG,+BAA+B,CAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAc,EAAE,cAAW,GAAG,KAAsC;CAC3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,2KACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EACpB,UACA,cACA,GAAG,KAGF;CAED,IAAM,EAAE,SAAM,iBAAc,gBADJ,EAAM,WAAW,CACA,CAAA,EAAiB,MAAM,MAAU,CAAC;CAE3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,EACT,6eACA,CACF;EACA,GAAI;YAPN,CASG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;EACxE,CAAA,CAEJ;;AAET;AAEA,SAAS,EAAkB,EAAE,GAAG,KAAsC;CACpE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAU;EACV,MAAK;EACL,GAAI;YAEJ,kBAAC,GAAD,CACC,CAAA;CACE,CAAA;AAET"}

package/dist/components/ui/input.cjs.js

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);let i=require("@base-ui/react/input");function a({className:e,type:r,...a}){return(0,n.jsx)(i.Input,{type:r,"data-slot":`input`,className:t.cn(`h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40`,e),...a})}exports.Input=a;
+//# sourceMappingURL=input.cjs.js.map

package/dist/components/ui/input.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs.js","names":[],"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":"gQAKA,SAAS,EAAM,CAAE,YAAW,OAAM,GAAG,GAAwC,CAC3E,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACQ,OACN,YAAU,QACV,UAAW,EAAA,GACT,8oBACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/components/ui/input.es.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Input as n } from "@base-ui/react/input";
+//#region src/components/ui/input.tsx
+function r({ className: r, type: i, ...a }) {
+	return /* @__PURE__ */ t(n, {
+		type: i,
+		"data-slot": "input",
+		className: e("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", r),
+		...a
+	});
+}
+//#endregion
+export { r as Input };
+
+//# sourceMappingURL=input.es.js.map

package/dist/components/ui/input.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.es.js","names":[],"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";;;;;AAKA,SAAS,EAAM,EAAE,cAAW,SAAM,GAAG,KAAwC;CAC3E,OACE,kBAAC,GAAD;EACQ;EACN,aAAU;EACV,WAAW,EACT,+oBACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/item.cjs.js

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),n=require("../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs.js"),r=require("./separator.cjs.js");let i=require("react/jsx-runtime"),a=require("react");a=e.__toESM(a,1);let o=require("@base-ui/react/merge-props"),s=require("@base-ui/react/use-render");function c({className:e,...n}){return(0,i.jsx)(`div`,{role:`list`,"data-slot":`item-group`,className:t.cn(`group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2`,e),...n})}function l({className:e,...n}){return(0,i.jsx)(r.Separator,{"data-slot":`item-separator`,orientation:`horizontal`,className:t.cn(`my-2`,e),...n})}var u=n.cva(`group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted`,{variants:{variant:{default:`border-transparent`,outline:`border-border`,muted:`border-transparent bg-muted/50`},size:{default:`gap-2.5 px-3 py-2.5`,sm:`gap-2.5 px-3 py-2.5`,xs:`gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0`}},defaultVariants:{variant:`default`,size:`default`}});function d({className:e,variant:n=`default`,size:r=`default`,render:i,...a}){return(0,s.useRender)({defaultTagName:`div`,props:(0,o.mergeProps)({className:t.cn(u({variant:n,size:r,className:e}))},a),render:i,state:{slot:`item`,variant:n,size:r}})}var f=n.cva(`flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none`,{variants:{variant:{default:`bg-transparent`,icon:`[&_svg:not([class*='size-'])]:size-4`,image:`size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover`}},defaultVariants:{variant:`default`}});function p({className:e,variant:n=`default`,...r}){return(0,i.jsx)(`div`,{"data-slot":`item-media`,"data-variant":n,className:t.cn(f({variant:n,className:e})),...r})}function m({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`item-content`,className:t.cn(`flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none`,e),...n})}function h({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`item-title`,className:t.cn(`line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4`,e),...n})}function g({className:e,...n}){return(0,i.jsx)(`p`,{"data-slot":`item-description`,className:t.cn(`line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary`,e),...n})}function _({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`item-actions`,className:t.cn(`flex items-center gap-2`,e),...n})}function v({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`item-header`,className:t.cn(`flex basis-full items-center justify-between gap-2`,e),...n})}function y({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`item-footer`,className:t.cn(`flex basis-full items-center justify-between gap-2`,e),...n})}exports.Item=d,exports.ItemActions=_,exports.ItemContent=m,exports.ItemDescription=g,exports.ItemFooter=y,exports.ItemGroup=c,exports.ItemHeader=v,exports.ItemMedia=p,exports.ItemSeparator=l,exports.ItemTitle=h;
+//# sourceMappingURL=item.cjs.js.map

package/dist/components/ui/item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.cjs.js","names":[],"sources":["../../../src/components/ui/item.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Separator } from \"./separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n"],"mappings":"ycAQA,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,OACL,YAAU,aACV,UAAW,EAAA,GACT,kGACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAc,CACrB,YACA,GAAG,GACsC,CACzC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CACE,YAAU,iBACV,YAAY,aACZ,UAAW,EAAA,GAAG,OAAQ,CAAS,EAC/B,GAAI,CACL,CAAA,CAEL,CAEA,IAAM,EAAe,EAAA,IACnB,6OACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,qBACT,QAAS,gBACT,MAAO,gCACT,EACA,KAAM,CACJ,QAAS,sBACT,GAAI,sBACJ,GAAI,4DACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEA,SAAS,EAAK,CACZ,YACA,UAAU,UACV,OAAO,UACP,SACA,GAAG,GACmE,CACtE,OAAA,EAAA,EAAA,UAAA,CAAiB,CACf,eAAgB,MAChB,OAAA,EAAA,EAAA,WAAA,CACE,CACE,UAAW,EAAA,GAAG,EAAa,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,CAC1D,EACA,CACF,EACA,SACA,MAAO,CACL,KAAM,OACN,UACA,MACF,CACF,CAAC,CACH,CAEA,IAAM,EAAoB,EAAA,IACxB,iMACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,KAAM,uCACN,MACE,6IACJ,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,EAEA,SAAS,EAAU,CACjB,YACA,UAAU,UACV,GAAG,GACoE,CACvE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,aACV,eAAc,EACd,UAAW,EAAA,GAAG,EAAkB,CAAE,UAAS,WAAU,CAAC,CAAC,EACvD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,eACV,UAAW,EAAA,GACT,oGACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,aACV,UAAW,EAAA,GACT,iGACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,OACE,EAAA,EAAA,IAAA,CAAC,IAAD,CACE,YAAU,mBACV,UAAW,EAAA,GACT,sLACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,eACV,UAAW,EAAA,GAAG,0BAA2B,CAAS,EAClD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAA,GACT,qDACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAA,GACT,qDACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/components/ui/item.d.ts

@@ -1,17 +1,17 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator';
 import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { type VariantProps } from "class-variance-authority";
-import { Separator } from "./separator";
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    size?: "default" | "sm" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
     variant?: "image" | "default" | "icon" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/item.es.js

@@ -0,0 +1,123 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { cva as t } from "../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.es.js";
+import { Separator as n } from "./separator.es.js";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { mergeProps as i } from "@base-ui/react/merge-props";
+import { useRender as a } from "@base-ui/react/use-render";
+//#region src/components/ui/item.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: e("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", t),
+		...n
+	});
+}
+function s({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: e("my-2", t),
+		...i
+	});
+}
+var c = t("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function l({ className: t, variant: n = "default", size: r = "default", render: o, ...s }) {
+	return a({
+		defaultTagName: "div",
+		props: i({ className: e(c({
+			variant: n,
+			size: r,
+			className: t
+		})) }, s),
+		render: o,
+		state: {
+			slot: "item",
+			variant: n,
+			size: r
+		}
+	});
+}
+var u = t("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function d({ className: t, variant: n = "default", ...i }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-media",
+		"data-variant": n,
+		className: e(u({
+			variant: n,
+			className: t
+		})),
+		...i
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-content",
+		className: e("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-title",
+		className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", t),
+		...n
+	});
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ r("p", {
+		"data-slot": "item-description",
+		className: e("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-actions",
+		className: e("flex items-center gap-2", t),
+		...n
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-header",
+		className: e("flex basis-full items-center justify-between gap-2", t),
+		...n
+	});
+}
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-footer",
+		className: e("flex basis-full items-center justify-between gap-2", t),
+		...n
+	});
+}
+//#endregion
+export { l as Item, h as ItemActions, f as ItemContent, m as ItemDescription, _ as ItemFooter, o as ItemGroup, g as ItemHeader, d as ItemMedia, s as ItemSeparator, p as ItemTitle };
+
+//# sourceMappingURL=item.es.js.map