@arolariu/components 0.4.2 → 1.0.0

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

@@ -1,91 +1,87 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import "react";
+import { forwardRef } from "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
-    });
+import input_group_module from "./input-group.module.js";
+function getAddonAlignClass(align) {
+    switch(align){
+        case "block-end":
+            return input_group_module.blockEnd;
+        case "block-start":
+            return input_group_module.blockStart;
+        case "inline-end":
+            return input_group_module.inlineEnd;
+        default:
+            return input_group_module.inlineStart;
+    }
 }
-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 getButtonSizeClass(size) {
+    switch(size){
+        case "icon-sm":
+            return input_group_module.buttonIconSm;
+        case "icon-xs":
+            return input_group_module.buttonIconXs;
+        case "sm":
+            return input_group_module.buttonSm;
+        default:
+            return input_group_module.buttonXs;
     }
-});
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+}
+const InputGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        role: "group",
+        "data-slot": "input-group",
+        className: cn(input_group_module.group, className),
+        ...props
+    }));
+const InputGroupAddon = /*#__PURE__*/ forwardRef(({ className, align = "inline-start", onClick, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         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();
+        className: cn(input_group_module.addon, getAddonAlignClass(align), className),
+        onClick: (event)=>{
+            if (event.target.closest("button")) return void onClick?.(event);
+            onClick?.(event);
+            if (event.defaultPrevented) return;
+            event.currentTarget.parentElement?.querySelector("input, textarea")?.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, {
+    }));
+const InputGroupButton = /*#__PURE__*/ forwardRef(({ className, type = "button", variant = "ghost", size = "xs", ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
+        ref: ref,
         type: type,
         "data-size": size,
         variant: variant,
-        className: cn(inputGroupButtonVariants({
-            size
-        }), className),
+        className: cn(input_group_module.button, getButtonSizeClass(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),
+    }));
+const InputGroupText = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: cn(input_group_module.text, className),
         ...props
-    });
-}
-function InputGroupInput({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Input, {
+    }));
+const InputGroupInput = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Input, {
+        ref: ref,
         "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),
+        className: cn(input_group_module.input, className),
         ...props
-    });
-}
-function InputGroupTextarea({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Textarea, {
+    }));
+const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Textarea, {
+        ref: ref,
         "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),
+        className: cn(input_group_module.textarea, className),
         ...props
-    });
-}
+    }));
+InputGroup.displayName = "InputGroup";
+InputGroupAddon.displayName = "InputGroupAddon";
+InputGroupButton.displayName = "InputGroupButton";
+InputGroupText.displayName = "InputGroupText";
+InputGroupInput.displayName = "InputGroupInput";
+InputGroupTextarea.displayName = "InputGroupTextarea";
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
 
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/* eslint-disable */\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":";;;;;;;;AAYA,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"}
+{"version":3,"file":"components/ui/input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["\"use client\";\r\n\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\nimport styles from \"./input-group.module.css\";\r\n\r\n/** Supported alignment options for {@link InputGroupAddon}. */\r\nexport type InputGroupAddonAlign = \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\r\n\r\n/** Supported compact button sizes for {@link InputGroupButton}. */\r\nexport type InputGroupButtonSize = \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\";\r\n\r\n/**\r\n * Props for the {@link InputGroup} component.\r\n */\r\nexport type InputGroupProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link InputGroupAddon} component.\r\n */\r\nexport interface InputGroupAddonProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Position of the addon relative to the input control. @default \"inline-start\" */\r\n  align?: InputGroupAddonAlign;\r\n}\r\n\r\n/**\r\n * Props for the {@link InputGroupButton} component.\r\n */\r\nexport interface InputGroupButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, \"size\"> {\r\n  /** Compact button size used within the group chrome. @default \"xs\" */\r\n  size?: InputGroupButtonSize;\r\n}\r\n\r\n/**\r\n * Props for the {@link InputGroupText} component.\r\n */\r\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<\"span\">;\r\n\r\n/**\r\n * Props for the {@link InputGroupInput} component.\r\n */\r\nexport type InputGroupInputProps = React.ComponentPropsWithoutRef<\"input\">;\r\n\r\n/**\r\n * Props for the {@link InputGroupTextarea} component.\r\n */\r\nexport type InputGroupTextareaProps = React.ComponentPropsWithoutRef<\"textarea\">;\r\n\r\nfunction getAddonAlignClass(align: InputGroupAddonAlign): string {\r\n  switch (align) {\r\n    case \"block-end\": {\r\n      return styles.blockEnd;\r\n    }\r\n    case \"block-start\": {\r\n      return styles.blockStart;\r\n    }\r\n    case \"inline-end\": {\r\n      return styles.inlineEnd;\r\n    }\r\n    default: {\r\n      return styles.inlineStart;\r\n    }\r\n  }\r\n}\r\n\r\nfunction getButtonSizeClass(size: InputGroupButtonSize): string {\r\n  switch (size) {\r\n    case \"icon-sm\": {\r\n      return styles.buttonIconSm;\r\n    }\r\n    case \"icon-xs\": {\r\n      return styles.buttonIconXs;\r\n    }\r\n    case \"sm\": {\r\n      return styles.buttonSm;\r\n    }\r\n    default: {\r\n      return styles.buttonXs;\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Creates a composable shell for grouped text inputs and controls.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroup>\r\n *   <InputGroupInput />\r\n * </InputGroup>\r\n * ```\r\n *\r\n * @see {@link InputGroupProps} for available props\r\n */\r\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\r\n  ({className, ...props}: Readonly<InputGroupProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      role='group'\r\n      data-slot='input-group'\r\n      className={cn(styles.group, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders supplementary content around an input group control.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroupAddon align='inline-end'>.com</InputGroupAddon>\r\n * ```\r\n *\r\n * @see {@link InputGroupAddonProps} for available props\r\n */\r\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\r\n  ({className, align = \"inline-start\", onClick, ...props}: Readonly<InputGroupAddonProps>, ref): React.JSX.Element => (\r\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- clicking the addon focuses the related control.\r\n    <div\r\n      ref={ref}\r\n      role='group'\r\n      data-slot='input-group-addon'\r\n      data-align={align}\r\n      className={cn(styles.addon, getAddonAlignClass(align), className)}\r\n      onClick={(event): void => {\r\n        if ((event.target as HTMLElement).closest(\"button\")) {\r\n          onClick?.(event);\r\n          return;\r\n        }\r\n\r\n        onClick?.(event);\r\n\r\n        if (event.defaultPrevented) {\r\n          return;\r\n        }\r\n\r\n        event.currentTarget.parentElement?.querySelector<HTMLInputElement | HTMLTextAreaElement>(\"input, textarea\")?.focus();\r\n      }}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders a compact button matched to input group dimensions.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a wrapped `Button` component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroupButton size='sm'>Search</InputGroupButton>\r\n * ```\r\n *\r\n * @see {@link InputGroupButtonProps} for available props\r\n */\r\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\r\n  ({className, type = \"button\", variant = \"ghost\", size = \"xs\", ...props}: Readonly<InputGroupButtonProps>, ref): React.JSX.Element => (\r\n    <Button\r\n      ref={ref}\r\n      type={type}\r\n      data-size={size}\r\n      variant={variant}\r\n      className={cn(styles.button, getButtonSizeClass(size), className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Displays static inline text within an input group.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<span>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroupText>@</InputGroupText>\r\n * ```\r\n *\r\n * @see {@link InputGroupTextProps} for available props\r\n */\r\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(\r\n  ({className, ...props}: Readonly<InputGroupTextProps>, ref): React.JSX.Element => (\r\n    <span\r\n      ref={ref}\r\n      className={cn(styles.text, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders the primary input control inside an input group.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a wrapped `Input` component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroupInput placeholder='Search...' />\r\n * ```\r\n *\r\n * @see {@link InputGroupInputProps} for available props\r\n */\r\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\r\n  ({className, ...props}: Readonly<InputGroupInputProps>, ref): React.JSX.Element => (\r\n    <Input\r\n      ref={ref}\r\n      data-slot='input-group-control'\r\n      className={cn(styles.input, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders a textarea control inside an input group.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a wrapped `Textarea` component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputGroupTextarea rows={4} />\r\n * ```\r\n *\r\n * @see {@link InputGroupTextareaProps} for available props\r\n */\r\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\r\n  ({className, ...props}: Readonly<InputGroupTextareaProps>, ref): React.JSX.Element => (\r\n    <Textarea\r\n      ref={ref}\r\n      data-slot='input-group-control'\r\n      className={cn(styles.textarea, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\nInputGroup.displayName = \"InputGroup\";\r\nInputGroupAddon.displayName = \"InputGroupAddon\";\r\nInputGroupButton.displayName = \"InputGroupButton\";\r\nInputGroupText.displayName = \"InputGroupText\";\r\nInputGroupInput.displayName = \"InputGroupInput\";\r\nInputGroupTextarea.displayName = \"InputGroupTextarea\";\r\n\r\nexport {InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea};\r\n"],"names":["getAddonAlignClass","align","styles","getButtonSizeClass","size","InputGroup","React","className","props","ref","cn","InputGroupAddon","onClick","event","InputGroupButton","type","variant","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":";;;;;;;;AAoDA,SAASA,mBAAmBC,KAA2B;IACrD,OAAQA;QACN,KAAK;YACH,OAAOC,mBAAAA,QAAe;QAExB,KAAK;YACH,OAAOA,mBAAAA,UAAiB;QAE1B,KAAK;YACH,OAAOA,mBAAAA,SAAgB;QAEzB;YACE,OAAOA,mBAAAA,WAAkB;IAE7B;AACF;AAEA,SAASC,mBAAmBC,IAA0B;IACpD,OAAQA;QACN,KAAK;YACH,OAAOF,mBAAAA,YAAmB;QAE5B,KAAK;YACH,OAAOA,mBAAAA,YAAmB;QAE5B,KAAK;YACH,OAAOA,mBAAAA,QAAe;QAExB;YACE,OAAOA,mBAAAA,QAAe;IAE1B;AACF;AAmBA,MAAMG,aAAa,WAAHA,GAAGC,WACjB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAiC,EAAEC,MAAAA,WAAAA,GACjD,IAAC;QACC,KAAKA;QACL,MAAK;QACL,aAAU;QACV,WAAWC,GAAGR,mBAAAA,KAAY,EAAEK;QAC3B,GAAGC,KAAK;;AAoBf,MAAMG,kBAAkB,WAAHA,GAAGL,WACtB,CAAC,EAACC,SAAS,EAAEN,QAAQ,cAAc,EAAEW,OAAO,EAAE,GAAGJ,OAAsC,EAAEC,M,cAEvF,IAAC;QACC,KAAKA;QACL,MAAK;QACL,aAAU;QACV,cAAYR;QACZ,WAAWS,GAAGR,mBAAAA,KAAY,EAAEF,mBAAmBC,QAAQM;QACvD,SAAS,CAACM;YACR,IAAKA,MAAM,MAAM,CAAiB,OAAO,CAAC,WAAW,YACnDD,UAAUC;YAIZD,UAAUC;YAEV,IAAIA,MAAM,gBAAgB,EACxB;YAGFA,MAAM,aAAa,CAAC,aAAa,EAAE,cAAsD,oBAAoB;QAC/G;QACC,GAAGL,KAAK;;AAoBf,MAAMM,mBAAmB,WAAHA,GAAGR,WACvB,CAAC,EAACC,SAAS,EAAEQ,OAAO,QAAQ,EAAEC,UAAU,OAAO,EAAEZ,OAAO,IAAI,EAAE,GAAGI,OAAuC,EAAEC,MAAAA,WAAAA,GACxG,IAACQ,QAAMA;QACL,KAAKR;QACL,MAAMM;QACN,aAAWX;QACX,SAASY;QACT,WAAWN,GAAGR,mBAAAA,MAAa,EAAEC,mBAAmBC,OAAOG;QACtD,GAAGC,KAAK;;AAoBf,MAAMU,iBAAiB,WAAHA,GAAGZ,WACrB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAqC,EAAEC,MAAAA,WAAAA,GACrD,IAAC;QACC,KAAKA;QACL,WAAWC,GAAGR,mBAAAA,IAAW,EAAEK;QAC1B,GAAGC,KAAK;;AAoBf,MAAMW,kBAAkB,WAAHA,GAAGb,WACtB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAsC,EAAEC,MAAAA,WAAAA,GACtD,IAACW,OAAKA;QACJ,KAAKX;QACL,aAAU;QACV,WAAWC,GAAGR,mBAAAA,KAAY,EAAEK;QAC3B,GAAGC,KAAK;;AAoBf,MAAMa,qBAAqB,WAAHA,GAAGf,WACzB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAyC,EAAEC,MAAAA,WAAAA,GACzD,IAACa,UAAQA;QACP,KAAKb;QACL,aAAU;QACV,WAAWC,GAAGR,mBAAAA,QAAe,EAAEK;QAC9B,GAAGC,KAAK;;AAKfH,WAAW,WAAW,GAAG;AACzBM,gBAAgB,WAAW,GAAG;AAC9BG,iBAAiB,WAAW,GAAG;AAC/BI,eAAe,WAAW,GAAG;AAC7BC,gBAAgB,WAAW,GAAG;AAC9BE,mBAAmB,WAAW,GAAG"}

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

@@ -0,0 +1,20 @@
+import "./input-group_module.css";
+const input_group_module = {
+    group: "group-RtJEAU",
+    addon: "addon-xlzw_H",
+    text: "text-TvQmBD",
+    inlineStart: "inlineStart-k9qRmA",
+    inlineEnd: "inlineEnd-msdq8H",
+    blockStart: "blockStart-SvayWJ",
+    blockEnd: "blockEnd-oWQUL9",
+    button: "button-xXmb7X",
+    buttonXs: "buttonXs-AEKD4r",
+    buttonSm: "buttonSm-q3LgjJ",
+    buttonIconXs: "buttonIconXs-BYAWB7",
+    buttonIconSm: "buttonIconSm-Of2mMc",
+    input: "input-fE3GNC",
+    textarea: "textarea-srr6zK"
+};
+export default input_group_module;
+
+//# sourceMappingURL=input-group.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/input-group.module.js","sources":["../../../src/components/ui/input-group.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./input-group_module.css\"\nexport default {\"group\":\"group-RtJEAU\",\"addon\":\"addon-xlzw_H\",\"text\":\"text-TvQmBD\",\"inlineStart\":\"inlineStart-k9qRmA\",\"inlineEnd\":\"inlineEnd-msdq8H\",\"blockStart\":\"blockStart-SvayWJ\",\"blockEnd\":\"blockEnd-oWQUL9\",\"button\":\"button-xXmb7X\",\"buttonXs\":\"buttonXs-AEKD4r\",\"buttonSm\":\"buttonSm-q3LgjJ\",\"buttonIconXs\":\"buttonIconXs-BYAWB7\",\"buttonIconSm\":\"buttonIconSm-Of2mMc\",\"input\":\"input-fE3GNC\",\"textarea\":\"textarea-srr6zK\"};"],"names":[],"mappings":";AAEA,2BAAe;IAAC,OAAQ;IAAe,OAAQ;IAAe,MAAO;IAAc,aAAc;IAAqB,WAAY;IAAmB,YAAa;IAAoB,UAAW;IAAkB,QAAS;IAAgB,UAAW;IAAkB,UAAW;IAAkB,cAAe;IAAsB,cAAe;IAAsB,OAAQ;IAAe,UAAW;AAAiB"}

package/dist/components/ui/input-group_module.css

@@ -0,0 +1,150 @@
+.group-RtJEAU {
+  background-color: var(--ac-background);
+  border: 1px solid var(--ac-input);
+  border-radius: var(--ac-radius-md);
+  min-height: var(--ac-size-default);
+  transition: border-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast);
+  align-items: center;
+  width: 100%;
+  display: flex;
+  position: relative;
+  box-shadow: 0 1px 2px #0000000a;
+}
+
+.group-RtJEAU:focus-within {
+  border-color: var(--ac-ring);
+  box-shadow: 0 0 0 1px var(--ac-ring);
+}
+
+.group-RtJEAU:has(textarea) {
+  align-items: stretch;
+  min-height: auto;
+}
+
+.group-RtJEAU:has([aria-invalid="true"]) {
+  border-color: var(--ac-destructive);
+  box-shadow: 0 0 0 1px color-mix(in oklch,var(--ac-destructive),transparent 65%);
+}
+
+.group-RtJEAU[data-disabled="true"] {
+  opacity: .5;
+}
+
+.group-RtJEAU:has([data-align="block-end"]), .group-RtJEAU:has([data-align="block-start"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.addon-xlzw_H {
+  color: var(--ac-muted-foreground);
+  cursor: text;
+  font-size: var(--ac-text-sm);
+  align-items: center;
+  gap: var(--ac-space-2);
+  -webkit-user-select: none;
+  user-select: none;
+  font-weight: 500;
+  display: flex;
+}
+
+.addon-xlzw_H > svg, .text-TvQmBD > svg {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.inlineStart-k9qRmA {
+  padding-left: var(--ac-space-3);
+  padding-right: var(--ac-space-2);
+  order: -1;
+}
+
+.inlineEnd-msdq8H {
+  padding-left: var(--ac-space-2);
+  padding-right: var(--ac-space-3);
+  order: 1;
+}
+
+.blockStart-SvayWJ {
+  padding: var(--ac-space-3) var(--ac-space-3) 0;
+  order: -1;
+}
+
+.blockEnd-oWQUL9, .blockStart-SvayWJ {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.blockEnd-oWQUL9 {
+  padding: 0 var(--ac-space-3) var(--ac-space-3);
+  order: 1;
+}
+
+.button-xXmb7X {
+  box-shadow: none;
+  flex-shrink: 0;
+}
+
+.buttonXs-AEKD4r {
+  border-radius: calc(var(--ac-radius-md) - 2px);
+  font-size: var(--ac-text-xs);
+  height: var(--ac-size-sm);
+  padding: 0 var(--ac-space-2);
+}
+
+.buttonSm-q3LgjJ {
+  border-radius: calc(var(--ac-radius-md) - 1px);
+  height: var(--ac-size-default);
+  padding: 0 var(--ac-space-3);
+}
+
+.buttonIconXs-BYAWB7 {
+  border-radius: calc(var(--ac-radius-md) - 2px);
+  height: var(--ac-size-sm);
+  width: var(--ac-size-sm);
+  padding: 0;
+}
+
+.buttonIconSm-Of2mMc {
+  height: var(--ac-size-default);
+  width: var(--ac-size-default);
+  padding: 0;
+}
+
+.text-TvQmBD {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+  align-items: center;
+  gap: var(--ac-space-2);
+  display: flex;
+}
+
+.input-fE3GNC {
+  box-shadow: none;
+  background-color: #0000;
+  border: 0;
+  border-radius: 0;
+  flex: auto;
+  min-width: 0;
+}
+
+.input-fE3GNC:focus-visible, .textarea-srr6zK:focus-visible {
+  box-shadow: none;
+  border-color: #0000;
+}
+
+.textarea-srr6zK {
+  box-shadow: none;
+  min-height: calc(var(--ac-size-default)*2);
+  min-width: 0;
+  padding-bottom: var(--ac-space-3);
+  padding-top: var(--ac-space-3);
+  resize: none;
+  background-color: #0000;
+  border: 0;
+  border-radius: 0;
+  flex: auto;
+}
+
+
+/*# sourceMappingURL=input-group_module.css.map */

package/dist/components/ui/input-group_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/input-group.module.css","webpack://./src/components/ui/input-group.module.css"],"names":[],"mappings":"AADA;ECEE,sCAAsC;EACtC,iCAAiC;EACjC,kCAAkC;EAClC,kCAAkC;EAClC,uFAAuF;EACvF,mBAAmB;EACnB,WAAW;EACX,aAAa;EACb,kBAAkB;EAClB,+BAA+B;AACjC;;AAEA;EACE,4BAA4B;EAC5B,oCAAoC;AACtC;;AAEA;EACE,oBAAoB;EACpB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;EACnC,+EAA+E;AACjF;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,iCAAiC;EACjC,YAAY;EACZ,4BAA4B;EAC5B,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EACzB,iBAAiB;EACjB,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,cAAc;EACd,WAAW;EACX,YAAY;AACd;;AAEA;EACE,+BAA+B;EAC/B,gCAAgC;EAChC,SAAS;AACX;;AAEA;EACE,+BAA+B;EAC/B,gCAAgC;EAChC,QAAQ;AACV;;AAEA;EACE,8CAA8C;EAC9C,SAAS;AACX;;AAEA;EACE,2BAA2B;EAC3B,WAAW;AACb;;AAEA;EACE,8CAA8C;EAC9C,QAAQ;AACV;;AAEA;EACE,gBAAgB;EAChB,cAAc;AAChB;;AAEA;EACE,8CAA8C;EAC9C,4BAA4B;EAC5B,yBAAyB;EACzB,4BAA4B;AAC9B;;AAEA;EACE,8CAA8C;EAC9C,8BAA8B;EAC9B,4BAA4B;AAC9B;;AAEA;EACE,8CAA8C;EAC9C,yBAAyB;EACzB,wBAAwB;EACxB,UAAU;AACZ;;AAEA;EACE,8BAA8B;EAC9B,6BAA6B;EAC7B,UAAU;AACZ;;AAEA;EACE,iCAAiC;EACjC,4BAA4B;EAC5B,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,gBAAgB;EAChB,uBAAuB;EACvB,SAAS;EACT,gBAAgB;EAChB,UAAU;EACV,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;EAChB,0CAA0C;EAC1C,YAAY;EACZ,iCAAiC;EACjC,8BAA8B;EAC9B,YAAY;EACZ,uBAAuB;EACvB,SAAS;EACT,gBAAgB;EAChB,UAAU;AACZ","sourcesContent":[".group{align-items:center;background-color:var(--ac-background);border:1px solid var(--ac-input);border-radius:var(--ac-radius-md);box-shadow:0 1px 2px 0 rgba(0,0,0,.04);display:flex;min-height:var(--ac-size-default);position:relative;transition:border-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast);width:100%}.group:focus-within{border-color:var(--ac-ring);box-shadow:0 0 0 1px var(--ac-ring)}.group:has(textarea){align-items:stretch;min-height:auto}.group:has([aria-invalid=true]){border-color:var(--ac-destructive);box-shadow:0 0 0 1px color-mix(in oklch,var(--ac-destructive),transparent 65%)}.group[data-disabled=true]{opacity:.5}.group:has([data-align=block-end]),.group:has([data-align=block-start]){align-items:stretch;flex-direction:column}.addon{align-items:center;color:var(--ac-muted-foreground);cursor:text;display:flex;font-size:var(--ac-text-sm);font-weight:500;gap:var(--ac-space-2);user-select:none}.addon>svg,.text>svg{flex-shrink:0;height:1rem;width:1rem}.inlineStart{order:-1;padding-left:var(--ac-space-3);padding-right:var(--ac-space-2)}.inlineEnd{order:1;padding-left:var(--ac-space-2);padding-right:var(--ac-space-3)}.blockStart{order:-1;padding:var(--ac-space-3) var(--ac-space-3) 0}.blockEnd,.blockStart{justify-content:flex-start;width:100%}.blockEnd{order:1;padding:0 var(--ac-space-3) var(--ac-space-3)}.button{box-shadow:none;flex-shrink:0}.buttonXs{border-radius:calc(var(--ac-radius-md) - 2px);font-size:var(--ac-text-xs);height:var(--ac-size-sm);padding:0 var(--ac-space-2)}.buttonSm{border-radius:calc(var(--ac-radius-md) - 1px);height:var(--ac-size-default);padding:0 var(--ac-space-3)}.buttonIconXs{border-radius:calc(var(--ac-radius-md) - 2px);height:var(--ac-size-sm);padding:0;width:var(--ac-size-sm)}.buttonIconSm{height:var(--ac-size-default);padding:0;width:var(--ac-size-default)}.text{align-items:center;color:var(--ac-muted-foreground);display:flex;font-size:var(--ac-text-sm);gap:var(--ac-space-2)}.input{background-color:transparent;border:0;border-radius:0;box-shadow:none;flex:1 1 auto;min-width:0}.input:focus-visible,.textarea:focus-visible{border-color:transparent;box-shadow:none}.textarea{background-color:transparent;border:0;border-radius:0;box-shadow:none;flex:1 1 auto;min-height:calc(var(--ac-size-default)*2);min-width:0;padding-bottom:var(--ac-space-3);padding-top:var(--ac-space-3);resize:none}",".group {\n  background-color: var(--ac-background);\n  border: 1px solid var(--ac-input);\n  border-radius: var(--ac-radius-md);\n  min-height: var(--ac-size-default);\n  transition: border-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast);\n  align-items: center;\n  width: 100%;\n  display: flex;\n  position: relative;\n  box-shadow: 0 1px 2px #0000000a;\n}\n\n.group:focus-within {\n  border-color: var(--ac-ring);\n  box-shadow: 0 0 0 1px var(--ac-ring);\n}\n\n.group:has(textarea) {\n  align-items: stretch;\n  min-height: auto;\n}\n\n.group:has([aria-invalid=\"true\"]) {\n  border-color: var(--ac-destructive);\n  box-shadow: 0 0 0 1px color-mix(in oklch,var(--ac-destructive),transparent 65%);\n}\n\n.group[data-disabled=\"true\"] {\n  opacity: .5;\n}\n\n.group:has([data-align=\"block-end\"]), .group:has([data-align=\"block-start\"]) {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.addon {\n  color: var(--ac-muted-foreground);\n  cursor: text;\n  font-size: var(--ac-text-sm);\n  align-items: center;\n  gap: var(--ac-space-2);\n  -webkit-user-select: none;\n  user-select: none;\n  font-weight: 500;\n  display: flex;\n}\n\n.addon > svg, .text > svg {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n\n.inlineStart {\n  padding-left: var(--ac-space-3);\n  padding-right: var(--ac-space-2);\n  order: -1;\n}\n\n.inlineEnd {\n  padding-left: var(--ac-space-2);\n  padding-right: var(--ac-space-3);\n  order: 1;\n}\n\n.blockStart {\n  padding: var(--ac-space-3) var(--ac-space-3) 0;\n  order: -1;\n}\n\n.blockEnd, .blockStart {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.blockEnd {\n  padding: 0 var(--ac-space-3) var(--ac-space-3);\n  order: 1;\n}\n\n.button {\n  box-shadow: none;\n  flex-shrink: 0;\n}\n\n.buttonXs {\n  border-radius: calc(var(--ac-radius-md) - 2px);\n  font-size: var(--ac-text-xs);\n  height: var(--ac-size-sm);\n  padding: 0 var(--ac-space-2);\n}\n\n.buttonSm {\n  border-radius: calc(var(--ac-radius-md) - 1px);\n  height: var(--ac-size-default);\n  padding: 0 var(--ac-space-3);\n}\n\n.buttonIconXs {\n  border-radius: calc(var(--ac-radius-md) - 2px);\n  height: var(--ac-size-sm);\n  width: var(--ac-size-sm);\n  padding: 0;\n}\n\n.buttonIconSm {\n  height: var(--ac-size-default);\n  width: var(--ac-size-default);\n  padding: 0;\n}\n\n.text {\n  color: var(--ac-muted-foreground);\n  font-size: var(--ac-text-sm);\n  align-items: center;\n  gap: var(--ac-space-2);\n  display: flex;\n}\n\n.input {\n  box-shadow: none;\n  background-color: #0000;\n  border: 0;\n  border-radius: 0;\n  flex: auto;\n  min-width: 0;\n}\n\n.input:focus-visible, .textarea:focus-visible {\n  box-shadow: none;\n  border-color: #0000;\n}\n\n.textarea {\n  box-shadow: none;\n  min-height: calc(var(--ac-size-default)*2);\n  min-width: 0;\n  padding-bottom: var(--ac-space-3);\n  padding-top: var(--ac-space-3);\n  resize: none;\n  background-color: #0000;\n  border: 0;\n  border-radius: 0;\n  flex: auto;\n}\n"],"sourceRoot":""}

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

@@ -1,35 +1,115 @@
+import { OTPInput } from "input-otp";
 import * as React from "react";
-declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "textAlign" | "maxLength" | "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: (props: import("input-otp").RenderProps) => React.ReactNode;
-    children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "textAlign" | "maxLength" | "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"> & {
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+export type { OTPInputProps, SlotProps } from "input-otp";
+/**
+ * Props for the {@link InputOTP} component.
+ */
+export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+/**
+ * Props for the {@link InputOTPGroup} component.
+ */
+export type InputOTPGroupProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the {@link InputOTPSlot} component.
+ */
+export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Zero-based slot index resolved from the shared OTP input context. */
     index: number;
-} & React.RefAttributes<HTMLDivElement>>;
+}
+/**
+ * Props for the {@link InputOTPSeparator} component.
+ */
+export type InputOTPSeparatorProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Wraps the `input-otp` root component with shared library styling.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Forwards all supported `input-otp` root props to the underlying primitive
+ *
+ * @example
+ * ```tsx
+ * <InputOTP maxLength={6} />
+ * ```
+ *
+ * @param props.maxLength - Required OTP length used to generate the expected number of slots.
+ * @param props.pattern - Optional validation pattern forwarded to the underlying input, often paired with
+ * `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_CHARS`, or `REGEXP_ONLY_DIGITS_AND_CHARS`.
+ * @param props.onComplete - Callback invoked after the user fills all slots with a complete value.
+ * @param props.pushPasswordManagerStrategy - Controls how password manager UI is handled inside the input
+ * container.
+ * @param props.render - Custom render function for complete control over OTP input rendering. Receives
+ * slot data array and allows fully custom layouts.
+ * @param props.pasteTransformer - Transform pasted text before it is applied. Useful for stripping
+ * spaces or dashes from pasted codes.
+ * @example
+ * ```tsx
+ * <InputOTP pasteTransformer={(text) => text.replace(/\D/g, "")} />
+ * ```
+ * @param props.value - Controlled OTP value. Use with `onChange` for controlled mode.
+ * @param props.onChange - Callback fired when the OTP value changes in controlled mode.
+ * @param props.containerClassName - Additional CSS class for the outer container element.
+ * @param props.noScriptCSSFallback - CSS string to inject for no-JavaScript fallback styling.
+ * @param props.textAlign - Sets how typed characters are aligned inside the hidden backing input.
+ * @see {@link InputOTPProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp API reference}
+ */
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Groups OTP slots into a shared layout row.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPGroup>
+ *   <InputOTPSlot index={0} />
+ * </InputOTPGroup>
+ * ```
+ *
+ * @see {@link InputOTPGroupProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders an individual OTP slot based on shared input context state.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPSlot index={0} />
+ * ```
+ *
+ * @see {@link InputOTPSlotProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
+declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Displays a visual separator between OTP groups.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPSeparator />
+ * ```
+ *
+ * @see {@link InputOTPSeparatorProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
 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":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,QAAQ;;;;;kBAK4C,GAAG;;;;;;;;;;;;;kBAAH,GAAG;;;;;;;;2FAI5D,CAAC;AAGF,QAAA,MAAM,aAAa,mKAMjB,CAAC;AAGH,QAAA,MAAM,YAAY;WAA+F,MAAM;wCAuBtH,CAAC;AAGF,QAAA,MAAM,iBAAiB,mKAOrB,CAAC;AAGH,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":"AAEA,OAAO,EAAC,QAAQ,EAAkB,MAAM,WAAW,CAAC;AAEpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAE,4BAA4B,EAAC,MAAM,WAAW,CAAC;AAC9F,YAAY,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,WAAW,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC9E,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,QAAQ,wFASb,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,aAAa,mKAQlB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY,0FA2BjB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,iBAAiB,mKAUtB,CAAC;AAOF,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAC,CAAC"}

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

@@ -1,48 +1,57 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { OTPInput, OTPInputContext } from "input-otp";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import { Minus } from "lucide-react";
 import { forwardRef, useContext } from "react";
 import { cn } from "../../lib/utilities.js";
+import input_otp_module from "./input-otp.module.js";
+const DEFAULT_SLOT_PLACEHOLDER_CHARACTER = "·";
 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),
+        containerClassName: cn(input_otp_module.container, containerClassName),
+        className: cn(input_otp_module.input, className),
         ...props
     }));
-InputOTP.displayName = "InputOTP";
 const InputOTPGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: cn("flex items-center", className),
+        className: cn(input_otp_module.group, 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 slot = inputOTPContext.slots[index];
+    if (!slot) throw new Error(`InputOTPSlot could not find slot at index ${index}.`);
+    const { char, hasFakeCaret, isActive, placeholderChar } = slot;
+    const shouldRenderPlaceholderCharacter = null === char && false === hasFakeCaret;
+    const displayCharacter = shouldRenderPlaceholderCharacter ? placeholderChar ?? DEFAULT_SLOT_PLACEHOLDER_CHARACTER : char;
     return /*#__PURE__*/ jsxs("div", {
         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),
+        className: cn(input_otp_module.slot, isActive && input_otp_module.slotActive, className),
         ...props,
         children: [
-            char,
+            displayCharacter,
             Boolean(hasFakeCaret) && /*#__PURE__*/ jsx("div", {
-                className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+                className: input_otp_module.fakeCaretContainer,
                 children: /*#__PURE__*/ jsx("div", {
-                    className: "animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50"
+                    className: input_otp_module.fakeCaret
                 })
             })
         ]
     });
 });
-InputOTPSlot.displayName = "InputOTPSlot";
-const InputOTPSeparator = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+const InputOTPSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         role: "separator",
+        className: cn(input_otp_module.separator, className),
         ...props,
-        children: /*#__PURE__*/ jsx(Minus, {})
+        children: /*#__PURE__*/ jsx(Minus, {
+            className: input_otp_module.separatorIcon
+        })
     }));
+InputOTP.displayName = "InputOTP";
+InputOTPGroup.displayName = "InputOTPGroup";
+InputOTPSlot.displayName = "InputOTPSlot";
 InputOTPSeparator.displayName = "InputOTPSeparator";
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
 
 //# sourceMappingURL=input-otp.js.map