@bearmenu/ui 0.5.2 → 0.6.1

package/dist/components/carousel.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-2BMJRXQX.js';
+import { Button } from '../chunk-ZFNOCP6W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
@@ -21,6 +21,7 @@ function Carousel(_a) {
     opts,
     setApi,
     plugins,
+    gap = 16,
     className,
     children
   } = _b, props = __objRest(_b, [
@@ -28,6 +29,7 @@ function Carousel(_a) {
     "opts",
     "setApi",
     "plugins",
+    "gap",
     "className",
     "children"
   ]);
@@ -39,10 +41,14 @@ function Carousel(_a) {
   );
   const [canScrollPrev, setCanScrollPrev] = React.useState(false);
   const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [slideCount, setSlideCount] = React.useState(0);
   const onSelect = React.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
+    setSelectedIndex(api2.selectedScrollSnap());
+    setSlideCount(api2.scrollSnapList().length);
   }, []);
   const scrollPrev = React.useCallback(() => {
     api == null ? void 0 : api.scrollPrev();
@@ -50,6 +56,12 @@ function Carousel(_a) {
   const scrollNext = React.useCallback(() => {
     api == null ? void 0 : api.scrollNext();
   }, [api]);
+  const scrollTo = React.useCallback(
+    (index) => {
+      api == null ? void 0 : api.scrollTo(index);
+    },
+    [api]
+  );
   const handleKeyDown = React.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
@@ -83,10 +95,14 @@ function Carousel(_a) {
         api,
         opts,
         orientation: orientation || ((opts == null ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+        gap,
         scrollPrev,
         scrollNext,
+        scrollTo,
         canScrollPrev,
-        canScrollNext
+        canScrollNext,
+        selectedIndex,
+        slideCount
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -105,28 +121,26 @@ function Carousel(_a) {
 }
 function CarouselContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation, gap } = useCarousel();
   return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
-      className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)
+      className: cn("flex", orientation === "horizontal" ? "" : "flex-col", className),
+      style: orientation === "horizontal" ? { marginLeft: `-${gap}px` } : { marginTop: `-${gap}px` }
     }, props)
   ) });
 }
 function CarouselItem(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { orientation } = useCarousel();
+  var _b = _a, { className, style } = _b, props = __objRest(_b, ["className", "style"]);
+  const { orientation, gap } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
       role: "group",
       "aria-roledescription": "slide",
       "data-slot": "carousel-item",
-      className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )
+      className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+      style: __spreadValues(__spreadValues({}, orientation === "horizontal" ? { paddingLeft: `${gap}px` } : { paddingTop: `${gap}px` }), style)
     }, props)
   );
 }
@@ -194,5 +208,51 @@ function CarouselNext(_a) {
     })
   );
 }
+function CarouselDots(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { slideCount, selectedIndex, scrollTo } = useCarousel();
+  if (slideCount === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "carousel-dots",
+      className: cn("flex items-center justify-center gap-1.5", className)
+    }, props), {
+      children: Array.from({ length: slideCount }).map((_, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Go to slide ${i + 1}`,
+          "aria-current": i === selectedIndex ? "true" : void 0,
+          onClick: () => scrollTo(i),
+          className: cn(
+            "size-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            i === selectedIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+          )
+        },
+        i
+      ))
+    })
+  );
+}
+function CarouselCounter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { slideCount, selectedIndex } = useCarousel();
+  if (slideCount === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "carousel-counter",
+      "aria-live": "polite",
+      className: cn("text-xs tabular-nums text-muted-foreground", className)
+    }, props), {
+      children: [
+        selectedIndex + 1,
+        " / ",
+        slideCount
+      ]
+    })
+  );
+}
 
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+export { Carousel, CarouselContent, CarouselCounter, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/components/checkbox.js

@@ -1,3 +1,3 @@
-export { Checkbox } from '../chunk-IQASCH2V.js';
+export { Checkbox } from '../chunk-D5QHEHXJ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/circular-progress.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+declare const CircularProgress: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    max?: number;
+    size?: number;
+    strokeWidth?: number;
+    tone?: "primary" | "success" | "warning" | "destructive";
+    showLabel?: boolean;
+    /** Indeterminate spinner mode. */
+    indeterminate?: boolean;
+    /** Accessible label. Defaults to "Progress". */
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { CircularProgress };

package/dist/components/circular-progress.js

@@ -0,0 +1,105 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toneClasses = {
+  primary: "stroke-primary",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  destructive: "stroke-destructive"
+};
+var CircularProgress = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      value = 0,
+      max = 100,
+      size = 40,
+      strokeWidth = 4,
+      tone = "primary",
+      showLabel = false,
+      indeterminate = false,
+      label = "Progress"
+    } = _b, props = __objRest(_b, [
+      "className",
+      "value",
+      "max",
+      "size",
+      "strokeWidth",
+      "tone",
+      "showLabel",
+      "indeterminate",
+      "label"
+    ]);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percent = clampedValue / max * 100;
+    const dashOffset = circumference - circumference * percent / 100;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "circular-progress",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminate ? void 0 : clampedValue,
+        "aria-label": label,
+        className: cn("relative inline-flex shrink-0 items-center justify-center", className),
+        style: { width: size, height: size }
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              className: cn(indeterminate && "animate-spin"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    strokeWidth,
+                    fill: "none",
+                    className: "stroke-muted"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    strokeWidth,
+                    fill: "none",
+                    strokeLinecap: "round",
+                    className: cn("transition-[stroke-dashoffset] duration-300 ease-out", toneClasses[tone]),
+                    style: {
+                      strokeDasharray: circumference,
+                      strokeDashoffset: indeterminate ? circumference * 0.75 : dashOffset,
+                      transform: `rotate(-90deg)`,
+                      transformOrigin: `${size / 2}px ${size / 2}px`
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showLabel && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "absolute text-xs font-medium tabular-nums text-foreground", children: [
+            Math.round(percent),
+            "%"
+          ] })
+        ]
+      })
+    );
+  }
+);
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };

package/dist/components/combobox.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value: string | undefined;
+    onValueChange: (value: string | undefined) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Allow clearing the selection. Defaults to true. */
+    clearable?: boolean;
+    /** If set, external search drives the option list (controlled). */
+    onSearchChange?: (search: string) => void;
+}
+declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, loadingText, className, disabled, loading, clearable, onSearchChange, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+export { Combobox, type ComboboxOption };

package/dist/components/combobox.js

@@ -0,0 +1,102 @@
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-UUJVXN2O.js';
+import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PSR7N36A.js';
+import '../chunk-WKMLZDUT.js';
+import { Button } from '../chunk-ZFNOCP6W.js';
+import '../chunk-R47NEOSI.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { ChevronsUpDown, Check, X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results.",
+  loadingText = "Loading\u2026",
+  className,
+  disabled = false,
+  loading = false,
+  clearable = true,
+  onSearchChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          disabled,
+          className: cn("w-full justify-between font-normal", !selected && "text-muted-foreground", value && clearable && !disabled && "pr-16"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: (selected == null ? void 0 : selected.label) || placeholder }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] p-0",
+          children: /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearchChange, children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearchChange }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              loading ? /* @__PURE__ */ jsx(CommandLoading, { children: loadingText }) : /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  onSelect: () => {
+                    onValueChange(option.value === value ? void 0 : option.value);
+                    setOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: cn(
+                          "mr-2 size-4",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                      option.description && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })
+                    ] })
+                  ]
+                },
+                option.value
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    value && clearable && !disabled && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear selection",
+        onClick: (e) => {
+          e.stopPropagation();
+          onValueChange(void 0);
+        },
+        className: "absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+
+export { Combobox };

package/dist/components/command.d.ts

@@ -19,8 +19,11 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     disablePointerSelection?: boolean;
     vimBindings?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type CommandDialogProps = DialogProps;
-declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
+type CommandDialogProps = DialogProps & {
+    title?: string;
+    description?: string;
+};
+declare const CommandDialog: ({ title, description, children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
 declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
 } & {
@@ -45,6 +48,16 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
 } & {
     asChild?: boolean;
 }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    progress?: number;
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
@@ -81,4 +94,4 @@ declare const CommandShortcut: {
     displayName: string;
 };
 
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };

package/dist/components/command.js

@@ -1,4 +1,4 @@
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../chunk-7H54PTVH.js';
-import '../chunk-4AVS6CV4.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from '../chunk-PSR7N36A.js';
+import '../chunk-WKMLZDUT.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/currency-input.d.ts

@@ -11,6 +11,7 @@ interface CurrencyInputProps {
     disabled?: boolean;
     className?: string;
     error?: string;
+    id?: string;
 }
 declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/components/currency-input.js

@@ -1,22 +1,37 @@
-import { Input } from '../chunk-CW24PLDW.js';
+import { Input } from '../chunk-RIDXFY6M.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var ALLOWED_NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  "Backspace",
+  "Tab",
+  "Escape",
+  "Enter",
+  "Delete",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown"
+]);
+var ALLOWED_SHORTCUT_KEYS = /* @__PURE__ */ new Set(["a", "c", "v", "x", "z"]);
 var CurrencyInput = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
       onChange,
       placeholder = "Enter amount",
-      currency: _currency = "$",
+      currency = "$",
       locale = "en-US",
       min,
       max,
       disabled = false,
       className,
-      error
+      error,
+      id: providedId
     } = _b, props = __objRest(_b, [
       "value",
       "onChange",
@@ -27,17 +42,24 @@ var CurrencyInput = React.forwardRef(
       "max",
       "disabled",
       "className",
-      "error"
+      "error",
+      "id"
     ]);
+    const reactId = React.useId();
+    const id = providedId != null ? providedId : reactId;
+    const errorId = `${id}-error`;
     const [displayValue, setDisplayValue] = React.useState("");
     const [isFocused, setIsFocused] = React.useState(false);
-    const formatNumber = (num) => {
-      if (num === null || isNaN(num)) return "";
-      return new Intl.NumberFormat(locale, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 2
-      }).format(num);
-    };
+    const formatNumber = React.useCallback(
+      (num) => {
+        if (num === null || isNaN(num)) return "";
+        return new Intl.NumberFormat(locale, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2
+        }).format(num);
+      },
+      [locale]
+    );
     const parseInput = (input) => {
       const cleaned = input.replace(/[^\d.-]/g, "");
       const parsed = parseFloat(cleaned);
@@ -47,18 +69,14 @@ var CurrencyInput = React.forwardRef(
       if (!isFocused) {
         setDisplayValue(formatNumber(value));
       }
-    }, [value, isFocused, locale]);
+    }, [value, isFocused, formatNumber]);
     const handleInputChange = (e) => {
       const inputValue = e.target.value;
       setDisplayValue(inputValue);
       const parsedValue = parseInput(inputValue);
       if (parsedValue !== null) {
-        if (min !== void 0 && parsedValue < min) {
-          return;
-        }
-        if (max !== void 0 && parsedValue > max) {
-          return;
-        }
+        if (min !== void 0 && parsedValue < min) return;
+        if (max !== void 0 && parsedValue > max) return;
       }
       onChange(parsedValue);
     };
@@ -77,42 +95,45 @@ var CurrencyInput = React.forwardRef(
       }
     };
     const handleKeyDown = (e) => {
-      if ([8, 9, 27, 13, 46, 35, 36, 37, 38, 39, 40].includes(e.keyCode)) {
-        return;
-      }
-      if ((e.ctrlKey || e.metaKey) && [65, 67, 86, 88, 90].includes(e.keyCode)) {
-        return;
-      }
-      if (e.keyCode >= 48 && e.keyCode <= 57 || // 0-9
-      e.keyCode >= 96 && e.keyCode <= 105 || // numpad 0-9
-      e.keyCode === 190 || e.keyCode === 110 || // decimal point
-      e.keyCode === 189 || e.keyCode === 109) {
-        return;
-      }
+      if (ALLOWED_NAVIGATION_KEYS.has(e.key)) return;
+      if ((e.ctrlKey || e.metaKey) && ALLOWED_SHORTCUT_KEYS.has(e.key.toLowerCase())) return;
+      if (/^[0-9]$/.test(e.key)) return;
+      if (e.key === "." || e.key === "-") return;
       e.preventDefault();
     };
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        __spreadValues({
-          ref,
-          type: "text",
-          value: displayValue,
-          onChange: handleInputChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled,
-          className: cn(
-            "pl-8",
-            // Space for currency symbol
-            error && "border-destructive focus-visible:ring-destructive",
-            className
-          )
-        }, props)
-      ),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive mt-1 ml-1", children: error })
+    const symbolLength = currency.length;
+    const inputPaddingClass = symbolLength <= 1 ? "pl-8" : symbolLength === 2 ? "pl-10" : symbolLength === 3 ? "pl-12" : "pl-14";
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground",
+            children: currency
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          __spreadValues({
+            ref,
+            id,
+            type: "text",
+            inputMode: "decimal",
+            value: displayValue,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? errorId : void 0,
+            className: cn(inputPaddingClass, className)
+          }, props)
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "ml-1 mt-1 text-sm text-destructive", children: error })
     ] });
   }
 );

package/dist/components/date-input.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    /** Native input type. Defaults to "date". */
+    type?: "date" | "datetime-local" | "time" | "month" | "week";
+    size?: "sm" | "default" | "lg";
+    showIcon?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+
+export { DateInput };