@arolariu/components 0.2.0 → 0.3.0

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import "react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { cn } from "../../lib/utilities.js";
+function InputGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "input-group",
+        role: "group",
+        className: cn("group/input-group relative flex w-full items-center rounded-md border border-neutral-200 shadow-xs transition-[color,box-shadow] outline-none dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30", "h-9 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-950 dark:has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-300", "has-[[data-slot][aria-invalid=true]]:border-red-500 has-[[data-slot][aria-invalid=true]]:ring-red-500/20 dark:has-[[data-slot][aria-invalid=true]]:border-red-900 dark:dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-500/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/20", className),
+        ...props
+    });
+}
+const inputGroupAddonVariants = cva("text-neutral-500 flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 dark:text-neutral-400", {
+    variants: {
+        align: {
+            "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+            "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+            "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+            "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+        }
+    },
+    defaultVariants: {
+        align: "inline-start"
+    }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: cn(inputGroupAddonVariants({
+            align
+        }), className),
+        onClick: (e)=>{
+            if (e.target.closest("button")) return;
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        },
+        ...props
+    });
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+            "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+            "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+        }
+    },
+    defaultVariants: {
+        size: "xs"
+    }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return /*#__PURE__*/ jsx(Button, {
+        type: type,
+        "data-size": size,
+        variant: variant,
+        className: cn(inputGroupButtonVariants({
+            size
+        }), className),
+        ...props
+    });
+}
+function InputGroupText({ className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: cn("flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        ...props
+    });
+}
+function InputGroupInput({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Input, {
+        "data-slot": "input-group-control",
+        className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+        ...props
+    });
+}
+function InputGroupTextarea({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Textarea, {
+        "data-slot": "input-group-control",
+        className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+        ...props
+    });
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\input-group.js","sources":["webpack://@arolariu/components/./src/components/ui/input-group.tsx"],"sourcesContent":["\r\n\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Button} from \"@/components/ui/button\";\r\nimport {Input} from \"@/components/ui/input\";\r\nimport {Textarea} from \"@/components/ui/textarea\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction InputGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='input-group'\r\n      role='group'\r\n      className={cn(\r\n        \"group/input-group relative flex w-full items-center rounded-md border border-neutral-200 shadow-xs transition-[color,box-shadow] outline-none dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30\",\r\n        \"h-9 has-[>textarea]:h-auto\",\r\n\r\n        // Variants based on alignment.\r\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\r\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\r\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\r\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\r\n\r\n        // Focus state.\r\n        \"has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-950 dark:has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-300\",\r\n\r\n        // Error state.\r\n        \"has-[[data-slot][aria-invalid=true]]:border-red-500 has-[[data-slot][aria-invalid=true]]:ring-red-500/20 dark:has-[[data-slot][aria-invalid=true]]:border-red-900 dark:dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-500/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/20\",\r\n\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst inputGroupAddonVariants = cva(\r\n  \"text-neutral-500 flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 dark:text-neutral-400\",\r\n  {\r\n    variants: {\r\n      align: {\r\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\r\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]\",\r\n        \"block-start\": \"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5\",\r\n        \"block-end\": \"[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      align: \"inline-start\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction InputGroupAddon({\r\n  className,\r\n  align = \"inline-start\",\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\r\n  return (\r\n    <div\r\n      role='group'\r\n      data-slot='input-group-addon'\r\n      data-align={align}\r\n      className={cn(inputGroupAddonVariants({align}), className)}\r\n      onClick={(e) => {\r\n        if ((e.target as HTMLElement).closest(\"button\")) {\r\n          return;\r\n        }\r\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\r\n      }}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\r\n  variants: {\r\n    size: {\r\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\r\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\r\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\r\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"xs\",\r\n  },\r\n});\r\n\r\nfunction InputGroupButton({\r\n  className,\r\n  type = \"button\",\r\n  variant = \"ghost\",\r\n  size = \"xs\",\r\n  ...props\r\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> & VariantProps<typeof inputGroupButtonVariants>) {\r\n  return (\r\n    <Button\r\n      type={type}\r\n      data-size={size}\r\n      variant={variant}\r\n      className={cn(inputGroupButtonVariants({size}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction InputGroupText({className, ...props}: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction InputGroupInput({className, ...props}: React.ComponentProps<\"input\">) {\r\n  return (\r\n    <Input\r\n      data-slot='input-group-control'\r\n      className={cn(\"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction InputGroupTextarea({className, ...props}: React.ComponentProps<\"textarea\">) {\r\n  return (\r\n    <Textarea\r\n      data-slot='input-group-control'\r\n      className={cn(\r\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea};\r\n"],"names":["InputGroup","className","props","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":";;;;;;;;AAUA,SAASA,WAAW,EAACC,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,MAAK;QACL,WAAWC,GACT,4NACA,8BAGA,mDACA,iDACA,kIACA,4HAGA,6MAGA,wVAEAF;QAED,GAAGC,KAAK;;AAGf;AAEA,MAAME,0BAA0BC,IAC9B,4QACA;IACE,UAAU;QACR,OAAO;YACL,gBAAgB;YAChB,cAAc;YACd,eAAe;YACf,aAAa;QACf;IACF;IACA,iBAAiB;QACf,OAAO;IACT;AACF;AAGF,SAASC,gBAAgB,EACvBL,SAAS,EACTM,QAAQ,cAAc,EACtB,GAAGL,OACwE;IAC3E,OAAO,WAAP,GACE,IAAC;QACC,MAAK;QACL,aAAU;QACV,cAAYK;QACZ,WAAWJ,GAAGC,wBAAwB;YAACG;QAAK,IAAIN;QAChD,SAAS,CAACO;YACR,IAAKA,EAAE,MAAM,CAAiB,OAAO,CAAC,WACpC;YAEFA,EAAE,aAAa,CAAC,aAAa,EAAE,cAAc,UAAU;QACzD;QACC,GAAGN,KAAK;;AAGf;AAEA,MAAMO,2BAA2BJ,IAAI,+CAA+C;IAClF,UAAU;QACR,MAAM;YACJ,IAAI;YACJ,IAAI;YACJ,WAAW;YACX,WAAW;QACb;IACF;IACA,iBAAiB;QACf,MAAM;IACR;AACF;AAEA,SAASK,iBAAiB,EACxBT,SAAS,EACTU,OAAO,QAAQ,EACfC,UAAU,OAAO,EACjBC,OAAO,IAAI,EACX,GAAGX,OAC+F;IAClG,OAAO,WAAP,GACE,IAACY,QAAMA;QACL,MAAMH;QACN,aAAWE;QACX,SAASD;QACT,WAAWT,GAAGM,yBAAyB;YAACI;QAAI,IAAIZ;QAC/C,GAAGC,KAAK;;AAGf;AAEA,SAASa,eAAe,EAACd,SAAS,EAAE,GAAGC,OAAoC;IACzE,OAAO,WAAP,GACE,IAAC;QACC,WAAWC,GACT,2IACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASc,gBAAgB,EAACf,SAAS,EAAE,GAAGC,OAAqC;IAC3E,OAAO,WAAP,GACE,IAACe,OAAKA;QACJ,aAAU;QACV,WAAWd,GAAG,oGAAoGF;QACjH,GAAGC,KAAK;;AAGf;AAEA,SAASgB,mBAAmB,EAACjB,SAAS,EAAE,GAAGC,OAAwC;IACjF,OAAO,WAAP,GACE,IAACiB,UAAQA;QACP,aAAU;QACV,WAAWhB,GACT,qHACAF;QAED,GAAGC,KAAK;;AAGf"}

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

@@ -1,12 +1,35 @@
-import { OTPInput } from "input-otp";
 import * as React from "react";
-declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
     containerClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    noScriptCSSFallback?: string | null;
+} & {
+    render: (props: import("input-otp").RenderProps) => React.ReactNode;
+    children?: never;
+} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render?: never;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     index: number;
-}): import("react/jsx-runtime").JSX.Element;
-declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
 //# sourceMappingURL=input-otp.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-otp.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAkB,MAAM,WAAW,CAAC;AAEpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,2CASA;AAED,iBAAS,aAAa,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,2CAqBA;AAED,iBAAS,iBAAiB,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASjE;AAED,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAC,CAAC"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-otp.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,QAAQ;;;;;kBAK8C,GAAG;;;;;;;;;;;;;kBAAH,GAAG;;;;;;;;2FAI9D,CAAC;AAGF,QAAA,MAAM,aAAa,mKAMjB,CAAC;AAGH,QAAA,MAAM,YAAY;WAA6F,MAAM;wCAuBpH,CAAC;AAGF,QAAA,MAAM,iBAAiB,mKAOrB,CAAC;AAGH,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAC,CAAC"}

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

@@ -1,35 +1,32 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
-import { useContext } from "react";
+import { Minus } from "lucide-react";
+import { forwardRef, useContext } from "react";
 import { cn } from "../../lib/utilities.js";
-function InputOTP({ className, containerClassName, ...props }) {
-    return /*#__PURE__*/ jsx(OTPInput, {
-        "data-slot": "input-otp",
-        containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+const InputOTP = /*#__PURE__*/ forwardRef(({ className, containerClassName, ...props }, ref)=>/*#__PURE__*/ jsx(OTPInput, {
+        ref: ref,
+        containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
         className: cn("disabled:cursor-not-allowed", className),
         ...props
-    });
-}
-function InputOTPGroup({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "input-otp-group",
+    }));
+InputOTP.displayName = "InputOTP";
+const InputOTPGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         className: cn("flex items-center", className),
         ...props
-    });
-}
-function InputOTPSlot({ index, className, ...props }) {
+    }));
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = /*#__PURE__*/ forwardRef(({ index, className, ...props }, ref)=>{
     const inputOTPContext = useContext(OTPInputContext);
-    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
     return /*#__PURE__*/ jsxs("div", {
-        "data-slot": "input-otp-slot",
-        "data-active": isActive,
-        className: cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-red-500 data-[active=true]:z-10 data-[active=true]:border-neutral-950 data-[active=true]:ring-[3px] data-[active=true]:ring-neutral-950/50 data-[active=true]:aria-invalid:border-red-500 data-[active=true]:aria-invalid:ring-red-500/20 dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:aria-invalid:border-red-900 dark:data-[active=true]:border-neutral-300 dark:data-[active=true]:ring-neutral-300/50 dark:data-[active=true]:aria-invalid:border-red-900 dark:dark:data-[active=true]:aria-invalid:ring-red-900/40 dark:data-[active=true]:aria-invalid:ring-red-500/40 dark:data-[active=true]:aria-invalid:ring-red-900/20", className),
+        ref: ref,
+        className: cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-neutral-800", isActive && "z-10 ring-1 ring-neutral-950 dark:ring-neutral-300", className),
         ...props,
         children: [
             char,
-            Boolean(hasFakeCaret) && /*#__PURE__*/ jsx("div", {
+            hasFakeCaret && /*#__PURE__*/ jsx("div", {
                 className: "pointer-events-none absolute inset-0 flex items-center justify-center",
                 children: /*#__PURE__*/ jsx("div", {
                     className: "animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50"
@@ -37,15 +34,15 @@ function InputOTPSlot({ index, className, ...props }) {
             })
         ]
     });
-}
-function InputOTPSeparator({ ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "input-otp-separator",
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         role: "separator",
         ...props,
-        children: /*#__PURE__*/ jsx(MinusIcon, {})
-    });
-}
+        children: /*#__PURE__*/ jsx(Minus, {})
+    }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
 
 //# sourceMappingURL=input-otp.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\input-otp.js","sources":["webpack://@arolariu/components/./src/components/ui/input-otp.tsx"],"sourcesContent":["\r\n\r\nimport {OTPInput, OTPInputContext} from \"input-otp\";\r\nimport {MinusIcon} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction InputOTP({\r\n  className,\r\n  containerClassName,\r\n  ...props\r\n}: React.ComponentProps<typeof OTPInput> & {\r\n  containerClassName?: string;\r\n}) {\r\n  return (\r\n    <OTPInput\r\n      data-slot='input-otp'\r\n      containerClassName={cn(\"flex items-center gap-2 has-disabled:opacity-50\", containerClassName)}\r\n      className={cn(\"disabled:cursor-not-allowed\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction InputOTPGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='input-otp-group'\r\n      className={cn(\"flex items-center\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction InputOTPSlot({\r\n  index,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  index: number;\r\n}) {\r\n  const inputOTPContext = React.useContext(OTPInputContext);\r\n  const {char, hasFakeCaret, isActive} = inputOTPContext?.slots[index] ?? {};\r\n\r\n  return (\r\n    <div\r\n      data-slot='input-otp-slot'\r\n      data-active={isActive}\r\n      className={cn(\r\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-red-500 data-[active=true]:z-10 data-[active=true]:border-neutral-950 data-[active=true]:ring-[3px] data-[active=true]:ring-neutral-950/50 data-[active=true]:aria-invalid:border-red-500 data-[active=true]:aria-invalid:ring-red-500/20 dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:aria-invalid:border-red-900 dark:data-[active=true]:border-neutral-300 dark:data-[active=true]:ring-neutral-300/50 dark:data-[active=true]:aria-invalid:border-red-900 dark:dark:data-[active=true]:aria-invalid:ring-red-900/40 dark:data-[active=true]:aria-invalid:ring-red-500/40 dark:data-[active=true]:aria-invalid:ring-red-900/20\",\r\n        className,\r\n      )}\r\n      {...props}>\r\n      {char}\r\n      {Boolean(hasFakeCaret) && (\r\n        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>\r\n          <div className='animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50' />\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction InputOTPSeparator({...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='input-otp-separator'\r\n      role='separator'\r\n      {...props}>\r\n      <MinusIcon />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot};\r\n"],"names":["InputOTP","className","containerClassName","props","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","React","OTPInputContext","char","hasFakeCaret","isActive","Boolean","InputOTPSeparator","MinusIcon"],"mappings":";;;;;;AAQA,SAASA,SAAS,EAChBC,SAAS,EACTC,kBAAkB,EAClB,GAAGC,OAGJ;IACC,OAAO,WAAP,GACE,IAACC,UAAQA;QACP,aAAU;QACV,oBAAoBC,GAAG,mDAAmDH;QAC1E,WAAWG,GAAG,+BAA+BJ;QAC5C,GAAGE,KAAK;;AAGf;AAEA,SAASG,cAAc,EAACL,SAAS,EAAE,GAAGE,OAAmC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWE,GAAG,qBAAqBJ;QAClC,GAAGE,KAAK;;AAGf;AAEA,SAASI,aAAa,EACpBC,KAAK,EACLP,SAAS,EACT,GAAGE,OAGJ;IACC,MAAMM,kBAAkBC,WAAiBC;IACzC,MAAM,EAACC,IAAI,EAAEC,YAAY,EAAEC,QAAQ,EAAC,GAAGL,iBAAiB,KAAK,CAACD,MAAM,IAAI,CAAC;IAEzE,OAAO,WAAP,GACE,KAAC;QACC,aAAU;QACV,eAAaM;QACb,WAAWT,GACT,q1BACAJ;QAED,GAAGE,KAAK;;YACRS;YACAG,QAAQF,iBAAiB,WAAjBA,GACP,IAAC;gBAAI,WAAU;0BACb,kBAAC;oBAAI,WAAU;;;;;AAKzB;AAEA,SAASG,kBAAkB,EAAC,GAAGb,OAAmC;IAChE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,MAAK;QACJ,GAAGA,KAAK;kBACT,kBAACc,WAASA,CAAAA;;AAGhB"}
+{"version":3,"file":"components\\ui\\input-otp.js","sources":["webpack://@arolariu/components/./src/components/ui/input-otp.tsx"],"sourcesContent":["\r\n\r\nimport {OTPInput, OTPInputContext} from \"input-otp\";\r\nimport {Minus} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(\r\n  ({className, containerClassName, ...props}, ref) => (\r\n    <OTPInput\r\n      ref={ref}\r\n      containerClassName={cn(\"flex items-center gap-2 has-[:disabled]:opacity-50\", containerClassName)}\r\n      className={cn(\"disabled:cursor-not-allowed\", className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\nInputOTP.displayName = \"InputOTP\";\r\n\r\nconst InputOTPGroup = React.forwardRef<React.ElementRef<\"div\">, React.ComponentPropsWithoutRef<\"div\">>(({className, ...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex items-center\", className)}\r\n    {...props}\r\n  />\r\n));\r\nInputOTPGroup.displayName = \"InputOTPGroup\";\r\n\r\nconst InputOTPSlot = React.forwardRef<React.ElementRef<\"div\">, React.ComponentPropsWithoutRef<\"div\"> & {index: number}>(\r\n  ({index, className, ...props}, ref) => {\r\n    const inputOTPContext = React.useContext(OTPInputContext);\r\n    const {char, hasFakeCaret, isActive} = inputOTPContext.slots[index];\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\n          \"relative flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-neutral-800\",\r\n          isActive && \"z-10 ring-1 ring-neutral-950 dark:ring-neutral-300\",\r\n          className,\r\n        )}\r\n        {...props}>\r\n        {char}\r\n        {hasFakeCaret && (\r\n          <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>\r\n            <div className='animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50' />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nInputOTPSlot.displayName = \"InputOTPSlot\";\r\n\r\nconst InputOTPSeparator = React.forwardRef<React.ElementRef<\"div\">, React.ComponentPropsWithoutRef<\"div\">>(({...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    role='separator'\r\n    {...props}>\r\n    <Minus />\r\n  </div>\r\n));\r\nInputOTPSeparator.displayName = \"InputOTPSeparator\";\r\n\r\nexport {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot};\r\n"],"names":["InputOTP","React","className","containerClassName","props","ref","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","InputOTPSeparator","Minus"],"mappings":";;;;;;AAQA,MAAMA,WAAW,WAAXA,GAAWC,WACf,CAAC,EAACC,SAAS,EAAEC,kBAAkB,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GAC1C,IAACC,UAAQA;QACP,KAAKD;QACL,oBAAoBE,GAAG,sDAAsDJ;QAC7E,WAAWI,GAAG,+BAA+BL;QAC5C,GAAGE,KAAK;;AAIfJ,SAAS,WAAW,GAAG;AAEvB,MAAMQ,gBAAgB,WAAhBA,GAAgBP,WAAiF,CAAC,EAACC,SAAS,EAAE,GAAGE,OAAM,EAAEC,MAAAA,WAAAA,GAC7H,IAAC;QACC,KAAKA;QACL,WAAWE,GAAG,qBAAqBL;QAClC,GAAGE,KAAK;;AAGbI,cAAc,WAAW,GAAG;AAE5B,MAAMC,eAAe,WAAfA,GAAeR,WACnB,CAAC,EAACS,KAAK,EAAER,SAAS,EAAE,GAAGE,OAAM,EAAEC;IAC7B,MAAMM,kBAAkBV,WAAiBW;IACzC,MAAM,EAACC,IAAI,EAAEC,YAAY,EAAEC,QAAQ,EAAC,GAAGJ,gBAAgB,KAAK,CAACD,MAAM;IAEnE,OAAO,WAAP,GACE,KAAC;QACC,KAAKL;QACL,WAAWE,GACT,uMACAQ,YAAY,sDACZb;QAED,GAAGE,KAAK;;YACRS;YACAC,gBAAgB,WAAhBA,GACC,IAAC;gBAAI,WAAU;0BACb,kBAAC;oBAAI,WAAU;;;;;AAKzB;AAEFL,aAAa,WAAW,GAAG;AAE3B,MAAMO,oBAAoB,WAApBA,GAAoBf,WAAiF,CAAC,EAAC,GAAGG,OAAM,EAAEC,MAAAA,WAAAA,GACtH,IAAC;QACC,KAAKA;QACL,MAAK;QACJ,GAAGD,KAAK;kBACT,kBAACa,OAAKA,CAAAA;;AAGVD,kBAAkB,WAAW,GAAG"}

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

@@ -1,4 +1,4 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAcxE;AAED,OAAO,EAAC,KAAK,EAAC,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,KAAK,8KAYT,CAAC;AAGH,OAAO,EAAC,KAAK,EAAC,CAAC"}

package/dist/components/ui/input.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utilities.js";
-import "react";
-function Input({ className, type, ...props }) {
-    return /*#__PURE__*/ jsx("input", {
+import { forwardRef } from "react";
+const Input = /*#__PURE__*/ forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ jsx("input", {
         type: type,
-        "data-slot": "input",
-        className: cn("flex h-9 w-full min-w-0 rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-neutral-900 selection:text-neutral-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:file:text-neutral-50 dark:placeholder:text-neutral-400", "focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50", "aria-invalid:border-red-500 aria-invalid:ring-red-500/20 dark:aria-invalid:border-red-900 dark:aria-invalid:ring-red-500/40 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40", className),
+        className: cn("flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", className),
+        ref: ref,
         ...props
-    });
-}
+    }));
+Input.displayName = "Input";
 export { Input };
 
 //# sourceMappingURL=input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\input.js","sources":["webpack://@arolariu/components/./src/components/ui/input.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nfunction Input({className, type, ...props}: React.ComponentProps<\"input\">) {\r\n  return (\r\n    <input\r\n      type={type}\r\n      data-slot='input'\r\n      className={cn(\r\n        \"flex h-9 w-full min-w-0 rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-neutral-900 selection:text-neutral-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:file:text-neutral-50 dark:placeholder:text-neutral-400\",\r\n        \"focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50\",\r\n        \"aria-invalid:border-red-500 aria-invalid:ring-red-500/20 dark:aria-invalid:border-red-900 dark:aria-invalid:ring-red-500/40 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Input};\r\n"],"names":["Input","className","type","props","cn"],"mappings":";;;;AAKA,SAASA,MAAM,EAACC,SAAS,EAAEC,IAAI,EAAE,GAAGC,OAAqC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,MAAMD;QACN,aAAU;QACV,WAAWE,GACT,onBACA,4KACA,wMACAH;QAED,GAAGE,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\input.js","sources":["webpack://@arolariu/components/./src/components/ui/input.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(({className, type, ...props}, ref) => {\r\n  return (\r\n    <input\r\n      type={type}\r\n      className={cn(\r\n        \"flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nInput.displayName = \"Input\";\r\n\r\nexport {Input};\r\n"],"names":["Input","React","className","type","props","ref","cn"],"mappings":";;;;AAKA,MAAMA,QAAQ,WAARA,GAAQC,WAAkE,CAAC,EAACC,SAAS,EAAEC,IAAI,EAAE,GAAGC,OAAM,EAAEC,MACrG,WAAP,GACE,IAAC;QACC,MAAMF;QACN,WAAWG,GACT,4eACAJ;QAEF,KAAKG;QACJ,GAAGD,KAAK;;AAIfJ,MAAM,WAAW,GAAG"}

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

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Separator } from "./separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare const itemVariants: (props?: {
+    variant?: "default" | "outline" | "muted";
+    size?: "default" | "sm";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const itemMediaVariants: (props?: {
+    variant?: "image" | "default" | "icon";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/ui/item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAGpD,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASpE;AAED,iBAAS,aAAa,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASnF;AAED,QAAA,MAAM,YAAY;;;iEAmBjB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAC,2CAWvF;AAED,QAAA,MAAM,iBAAiB;;iEActB,CAAC;AAEF,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,2CASlI;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQpE;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAYxE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAC,CAAC"}

package/dist/components/ui/item.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import "react";
+import { Separator } from "./separator.js";
+import { cn } from "../../lib/utilities.js";
+function ItemGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        role: "list",
+        "data-slot": "item-group",
+        className: cn("group/item-group flex flex-col", className),
+        ...props
+    });
+}
+function ItemSeparator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Separator, {
+        "data-slot": "item-separator",
+        orientation: "horizontal",
+        className: cn("my-0", className),
+        ...props
+    });
+}
+const itemVariants = cva("group/item [a]:hover:bg-neutral-100/50 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-neutral-200 border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] dark:[a]:hover:bg-neutral-800/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:border-neutral-800", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-neutral-200 dark:border-neutral-800",
+            muted: "bg-neutral-100/50 dark:bg-neutral-800/50"
+        },
+        size: {
+            default: "gap-4 p-4",
+            sm: "gap-2.5 px-4 py-3"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "item",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(itemVariants({
+            variant,
+            size,
+            className
+        })),
+        ...props
+    });
+}
+const itemMediaVariants = 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: "bg-neutral-100 size-8 rounded-sm border border-neutral-200 [&_svg:not([class*='size-'])]:size-4 dark:bg-neutral-800 dark:border-neutral-800",
+            image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-media",
+        "data-variant": variant,
+        className: cn(itemMediaVariants({
+            variant,
+            className
+        })),
+        ...props
+    });
+}
+function ItemContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-content",
+        className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+        ...props
+    });
+}
+function ItemTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-title",
+        className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className),
+        ...props
+    });
+}
+function ItemDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx("p", {
+        "data-slot": "item-description",
+        className: cn("line-clamp-2 text-sm leading-normal font-normal text-balance text-neutral-500 dark:text-neutral-400", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
+        ...props
+    });
+}
+function ItemActions({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-actions",
+        className: cn("flex items-center gap-2", className),
+        ...props
+    });
+}
+function ItemHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-header",
+        className: cn("flex basis-full items-center justify-between gap-2", className),
+        ...props
+    });
+}
+function ItemFooter({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "item-footer",
+        className: cn("flex basis-full items-center justify-between gap-2", className),
+        ...props
+    });
+}
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
+
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\item.js","sources":["webpack://@arolariu/components/./src/components/ui/item.tsx"],"sourcesContent":["\r\n\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction ItemGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      role='list'\r\n      data-slot='item-group'\r\n      className={cn(\"group/item-group flex flex-col\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemSeparator({className, ...props}: React.ComponentProps<typeof Separator>) {\r\n  return (\r\n    <Separator\r\n      data-slot='item-separator'\r\n      orientation='horizontal'\r\n      className={cn(\"my-0\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst itemVariants = cva(\r\n  \"group/item [a]:hover:bg-neutral-100/50 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-neutral-200 border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] dark:[a]:hover:bg-neutral-800/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:border-neutral-800\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        outline: \"border-neutral-200 dark:border-neutral-800\",\r\n        muted: \"bg-neutral-100/50 dark:bg-neutral-800/50\",\r\n      },\r\n      size: {\r\n        default: \"gap-4 p-4\",\r\n        sm: \"gap-2.5 px-4 py-3\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction Item({\r\n  className,\r\n  variant = \"default\",\r\n  size = \"default\",\r\n  asChild = false,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & {asChild?: boolean}) {\r\n  const Comp = asChild ? Slot : \"div\";\r\n  return (\r\n    <Comp\r\n      data-slot='item'\r\n      data-variant={variant}\r\n      data-size={size}\r\n      className={cn(itemVariants({variant, size, className}))}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst itemMediaVariants = cva(\r\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\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        icon: \"bg-neutral-100 size-8 rounded-sm border border-neutral-200 [&_svg:not([class*='size-'])]:size-4 dark:bg-neutral-800 dark:border-neutral-800\",\r\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction ItemMedia({className, variant = \"default\", ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\r\n  return (\r\n    <div\r\n      data-slot='item-media'\r\n      data-variant={variant}\r\n      className={cn(itemMediaVariants({variant, className}))}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-content'\r\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemTitle({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-title'\r\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <p\r\n      data-slot='item-description'\r\n      className={cn(\r\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-neutral-500 dark:text-neutral-400\",\r\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemActions({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-actions'\r\n      className={cn(\"flex items-center gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemHeader({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-header'\r\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemFooter({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-footer'\r\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle};\r\n"],"names":["ItemGroup","className","props","cn","ItemSeparator","Separator","itemVariants","cva","Item","variant","size","asChild","Comp","Slot","itemMediaVariants","ItemMedia","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"mappings":";;;;;;;AASA,SAASA,UAAU,EAACC,SAAS,EAAE,GAAGC,OAAmC;IACnE,OAAO,WAAP,GACE,IAAC;QACC,MAAK;QACL,aAAU;QACV,WAAWC,GAAG,kCAAkCF;QAC/C,GAAGC,KAAK;;AAGf;AAEA,SAASE,cAAc,EAACH,SAAS,EAAE,GAAGC,OAA8C;IAClF,OAAO,WAAP,GACE,IAACG,WAASA;QACR,aAAU;QACV,aAAY;QACZ,WAAWF,GAAG,QAAQF;QACrB,GAAGC,KAAK;;AAGf;AAEA,MAAMI,eAAeC,IACnB,0aACA;IACE,UAAU;QACR,SAAS;YACP,SAAS;YACT,SAAS;YACT,OAAO;QACT;QACA,MAAM;YACJ,SAAS;YACT,IAAI;QACN;IACF;IACA,iBAAiB;QACf,SAAS;QACT,MAAM;IACR;AACF;AAGF,SAASC,KAAK,EACZP,SAAS,EACTQ,UAAU,SAAS,EACnBC,OAAO,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGT,OACmF;IACtF,MAAMU,OAAOD,UAAUE,OAAO;IAC9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAcH;QACd,aAAWC;QACX,WAAWP,GAAGG,aAAa;YAACG;YAASC;YAAMT;QAAS;QACnD,GAAGC,KAAK;;AAGf;AAEA,MAAMY,oBAAoBP,IACxB,sMACA;IACE,UAAU;QACR,SAAS;YACP,SAAS;YACT,MAAM;YACN,OAAO;QACT;IACF;IACA,iBAAiB;QACf,SAAS;IACX;AACF;AAGF,SAASQ,UAAU,EAACd,SAAS,EAAEQ,UAAU,SAAS,EAAE,GAAGP,OAA4E;IACjI,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAcO;QACd,WAAWN,GAAGW,kBAAkB;YAACL;YAASR;QAAS;QAClD,GAAGC,KAAK;;AAGf;AAEA,SAASc,YAAY,EAACf,SAAS,EAAE,GAAGC,OAAmC;IACrE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,qEAAqEF;QAClF,GAAGC,KAAK;;AAGf;AAEA,SAASe,UAAU,EAAChB,SAAS,EAAE,GAAGC,OAAmC;IACnE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,kEAAkEF;QAC/E,GAAGC,KAAK;;AAGf;AAEA,SAASgB,gBAAgB,EAACjB,SAAS,EAAE,GAAGC,OAAiC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,uGACA,0GACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASiB,YAAY,EAAClB,SAAS,EAAE,GAAGC,OAAmC;IACrE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,2BAA2BF;QACxC,GAAGC,KAAK;;AAGf;AAEA,SAASkB,WAAW,EAACnB,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,sDAAsDF;QACnE,GAAGC,KAAK;;AAGf;AAEA,SAASmB,WAAW,EAACpB,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,sDAAsDF;QACnE,GAAGC,KAAK;;AAGf"}

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Kbd, KbdGroup };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/ui/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/ui/kbd.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,GAAG,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa9D;AAED,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQnE;AAED,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAC,CAAC"}

package/dist/components/ui/kbd.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utilities.js";
+import "react";
+function Kbd({ className, ...props }) {
+    return /*#__PURE__*/ jsx("kbd", {
+        "data-slot": "kbd",
+        className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-neutral-100 px-1 font-sans text-xs font-medium text-neutral-500 select-none dark:bg-neutral-800 dark:text-neutral-400", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-white/20 [[data-slot=tooltip-content]_&]:text-white dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/20 dark:[[data-slot=tooltip-content]_&]:bg-white/10 dark:dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/10 dark:[[data-slot=tooltip-content]_&]:text-neutral-950", className),
+        ...props
+    });
+}
+function KbdGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("kbd", {
+        "data-slot": "kbd-group",
+        className: cn("inline-flex items-center gap-1", className),
+        ...props
+    });
+}
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/ui/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\kbd.js","sources":["webpack://@arolariu/components/./src/components/ui/kbd.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nfunction Kbd({className, ...props}: React.ComponentProps<\"kbd\">) {\r\n  return (\r\n    <kbd\r\n      data-slot='kbd'\r\n      className={cn(\r\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-neutral-100 px-1 font-sans text-xs font-medium text-neutral-500 select-none dark:bg-neutral-800 dark:text-neutral-400\",\r\n        \"[&_svg:not([class*='size-'])]:size-3\",\r\n        \"[[data-slot=tooltip-content]_&]:bg-white/20 [[data-slot=tooltip-content]_&]:text-white dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/20 dark:[[data-slot=tooltip-content]_&]:bg-white/10 dark:dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/10 dark:[[data-slot=tooltip-content]_&]:text-neutral-950\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction KbdGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <kbd\r\n      data-slot='kbd-group'\r\n      className={cn(\"inline-flex items-center gap-1\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Kbd, KbdGroup};\r\n"],"names":["Kbd","className","props","cn","KbdGroup"],"mappings":";;;;AAKA,SAASA,IAAI,EAACC,SAAS,EAAE,GAAGC,OAAmC;IAC7D,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,2NACA,wCACA,oTACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASE,SAAS,EAACH,SAAS,EAAE,GAAGC,OAAmC;IAClE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,kCAAkCF;QAC/C,GAAGC,KAAK;;AAGf"}

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

@@ -1,5 +1,6 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };
 //# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWrF;AAED,OAAO,EAAC,KAAK,EAAC,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,KAAK,gPAST,CAAC;AAGH,OAAO,EAAC,KAAK,EAAC,CAAC"}

package/dist/components/ui/label.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-label";
-import "react";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-function Label({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Root, {
-        "data-slot": "label",
-        className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
+        ref: ref,
+        className: cn(labelVariants(), className),
         ...props
-    });
-}
+    }));
+Label.displayName = Root.displayName;
 export { Label };
 
 //# sourceMappingURL=label.js.map

package/dist/components/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\label.js","sources":["webpack://@arolariu/components/./src/components/ui/label.tsx"],"sourcesContent":["\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction Label({className, ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n  return (\r\n    <LabelPrimitive.Root\r\n      data-slot='label'\r\n      className={cn(\r\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Label};\r\n"],"names":["Label","className","props","LabelPrimitive","cn"],"mappings":";;;;;AAOA,SAASA,MAAM,EAACC,SAAS,EAAE,GAAGC,OAAwD;IACpF,OAAO,WAAP,GACE,IAACC,MAAmB;QAClB,aAAU;QACV,WAAWC,GACT,uNACAH;QAED,GAAGC,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\label.js","sources":["webpack://@arolariu/components/./src/components/ui/label.tsx"],"sourcesContent":["\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst labelVariants = cva(\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\");\r\n\r\nconst Label = React.forwardRef<\r\n  React.ElementRef<typeof LabelPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>\r\n>(({className, ...props}, ref) => (\r\n  <LabelPrimitive.Root\r\n    ref={ref}\r\n    className={cn(labelVariants(), className)}\r\n    {...props}\r\n  />\r\n));\r\nLabel.displayName = LabelPrimitive.Root.displayName;\r\n\r\nexport {Label};\r\n"],"names":["labelVariants","cva","Label","React","className","props","ref","LabelPrimitive","cn"],"mappings":";;;;;;AAQA,MAAMA,gBAAgBC,IAAI;AAE1B,MAAMC,QAAQ,WAARA,GAAQC,WAGZ,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,IAACC,MAAmB;QAClB,KAAKD;QACL,WAAWE,GAAGR,iBAAiBI;QAC9B,GAAGC,KAAK;;AAGbH,MAAM,WAAW,GAAGK,KAAAA,WAA+B"}