@bricks-toolkit/toolkit 0.1.20 → 0.1.22

package/dist/chunk-Z5FRCULF.mjs

@@ -0,0 +1,531 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useState, useEffect, useCallback, useRef } from 'react';
+import { ClockIcon, XMarkIcon, ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function parseTime(value) {
+  if (!value) return { hours: 0, minutes: 0 };
+  const numbers = value.split(":").map(Number);
+  const h = numbers[0];
+  const m = numbers[1];
+  return {
+    hours: h === void 0 || isNaN(h) ? 0 : h,
+    minutes: m === void 0 || isNaN(m) ? 0 : m
+  };
+}
+function toTimeString(hours, minutes) {
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+function formatDisplay(value, use12Hour) {
+  if (!value) return "";
+  const { hours, minutes } = parseTime(value);
+  if (use12Hour) {
+    const ampm = hours >= 12 ? "PM" : "AM";
+    const h = hours % 12 || 12;
+    return `${String(h).padStart(2, "0")}:${String(minutes).padStart(2, "0")} ${ampm}`;
+  }
+  return toTimeString(hours, minutes);
+}
+var ITEM_HEIGHT = 36;
+var sizeClasses = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base",
+  xl: "h-12 px-4 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus-within:bg-surface focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent",
+  unstyled: "border-0 bg-transparent p-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus-within:border-primary",
+    filled: "focus-within:border-primary",
+    flushed: "border-border focus-within:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-within:border-error focus-within:ring-error/20",
+    filled: "bg-error/5 focus-within:border-error focus-within:ring-error/20",
+    flushed: "border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-within:border-success focus-within:ring-success/20",
+    filled: "bg-success/5 focus-within:border-success focus-within:ring-success/20",
+    flushed: "border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-within:border-warning focus-within:ring-warning/20",
+    filled: "bg-warning/5 focus-within:border-warning focus-within:ring-warning/20",
+    flushed: "border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+function ScrollColumn({ items, selected, onSelect, label }) {
+  const listRef = useRef(null);
+  const scrollToSelected = useCallback(
+    (behavior = "smooth") => {
+      if (!listRef.current) return;
+      const idx = items.indexOf(selected);
+      if (idx < 0) return;
+      const top = idx * ITEM_HEIGHT - ITEM_HEIGHT * 2;
+      if (typeof listRef.current.scrollTo === "function") {
+        listRef.current.scrollTo({ top: Math.max(0, top), behavior });
+      }
+    },
+    [items, selected]
+  );
+  useEffect(() => {
+    scrollToSelected("instant");
+  }, []);
+  useEffect(() => {
+    scrollToSelected("smooth");
+  }, [scrollToSelected]);
+  const step = (dir) => {
+    const idx = items.indexOf(selected);
+    const next = items[(idx + dir + items.length) % items.length];
+    if (next) onSelect(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", "aria-label": label, role: "group", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          step(-1);
+        },
+        className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
+        "aria-label": `Decrease ${label}`,
+        children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-x-0 rounded-lg bg-primary/10 border-y border-primary/20 pointer-events-none",
+          style: { top: ITEM_HEIGHT * 2, height: ITEM_HEIGHT }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: listRef,
+          className: "overflow-y-auto scrollbar-none",
+          style: { height: ITEM_HEIGHT * 5, width: 56 },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { height: ITEM_HEIGHT * 2 } }),
+            items.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onSelect(item);
+                },
+                className: cn(
+                  "w-full flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150",
+                  "hover:bg-hover",
+                  selected === item ? "text-primary font-bold" : "text-text-secondary"
+                ),
+                style: { height: ITEM_HEIGHT },
+                "aria-pressed": selected === item,
+                "aria-label": `${label} ${item}`,
+                children: item
+              },
+              item
+            )),
+            /* @__PURE__ */ jsx("div", { style: { height: ITEM_HEIGHT * 2 } })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          step(1);
+        },
+        className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
+        "aria-label": `Increase ${label}`,
+        children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+}
+function AddonIcon({ children, side, size, onClick, asButton = false, ariaLabel }) {
+  const iconSize = {
+    xs: "w-3.5 h-3.5",
+    sm: "w-4 h-4",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+    xl: "w-5 h-5"
+  };
+  const base = cn(
+    "absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
+    side === "left" ? "left-3" : "right-3",
+    iconSize[size]
+  );
+  if (asButton && onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(base, "cursor-pointer hover:text-text transition-colors"),
+        tabIndex: -1,
+        "aria-label": ariaLabel,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": !ariaLabel,
+      className: cn(base, "pointer-events-none"),
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
+        side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
+      ),
+      children
+    }
+  );
+}
+var TimePicker = forwardRef(
+  ({
+    label,
+    required = false,
+    helperText,
+    errorMessage,
+    successMessage,
+    warningMessage,
+    variant = "default",
+    size = "md",
+    state = "default",
+    fullWidth = true,
+    leftElement,
+    rightElement,
+    prefix,
+    suffix,
+    wrapperClassName,
+    inputGroupClassName,
+    inputClassName,
+    labelClassName,
+    helperClassName,
+    id: idProp,
+    disabled,
+    className,
+    clearable,
+    isLoading,
+    value,
+    defaultValue,
+    onChange,
+    onTimeChange,
+    placeholder = "Select time",
+    minuteStep = 1,
+    use12Hour = false,
+    name,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby
+  }, ref) => {
+    const generatedId = useId();
+    const inputId = idProp ?? generatedId;
+    const helperId = `${inputId}-helper`;
+    const stateMessageId = `${inputId}-state`;
+    const popoverId = `${inputId}-popover`;
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const displayValue = isControlled ? value : internalValue;
+    const { hours: selHours, minutes: selMinutes } = parseTime(displayValue);
+    const selAmpm = selHours >= 12 ? "PM" : "AM";
+    const selHours12 = selHours % 12 || 12;
+    const pickerHour = String(use12Hour ? selHours12 : selHours).padStart(2, "0");
+    const pickerMinute = String(selMinutes).padStart(2, "0");
+    const pickerAmpm = selAmpm;
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+      if (!isOpen) return;
+      function handleClick(e) {
+        const wrapper = ref?.current;
+        if (wrapper && !wrapper.contains(e.target)) {
+          setIsOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", handleClick);
+      return () => {
+        document.removeEventListener("mousedown", handleClick);
+      };
+    }, [isOpen]);
+    const hourItems = use12Hour ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0")) : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+    const minuteItems = Array.from(
+      { length: Math.ceil(60 / minuteStep) },
+      (_, i) => String(i * minuteStep).padStart(2, "0")
+    );
+    const applyTime = useCallback(
+      (h, m, ap) => {
+        let hours24 = parseInt(h, 10);
+        if (use12Hour) {
+          if (ap === "AM" && hours24 === 12) hours24 = 0;
+          if (ap === "PM" && hours24 !== 12) hours24 += 12;
+        }
+        const iso = toTimeString(hours24, parseInt(m, 10));
+        if (!isControlled) setInternalValue(iso);
+        onChange?.(iso);
+        onTimeChange?.(iso);
+      },
+      [isControlled, onChange, onTimeChange, use12Hour]
+    );
+    const handleHourSelect = (h) => {
+      applyTime(h, pickerMinute, pickerAmpm);
+    };
+    const handleMinuteSelect = (m) => {
+      applyTime(pickerHour, m, pickerAmpm);
+    };
+    const handleAmpmSelect = (ap) => {
+      const a = ap;
+      applyTime(pickerHour, pickerMinute, a);
+    };
+    const handleClear = () => {
+      if (!isControlled) setInternalValue("");
+      onChange?.("");
+      onTimeChange?.(null);
+    };
+    const toggleOpen = () => {
+      if (disabled || isLoading) return;
+      setIsOpen((prev) => !prev);
+    };
+    const showClear = clearable && displayValue.length > 0 && !disabled && !isLoading;
+    const rightPad = {
+      xs: "pr-6",
+      sm: "pr-8",
+      md: "pr-9",
+      lg: "pr-10",
+      xl: "pr-11"
+    };
+    const stateMessage = state === "error" ? errorMessage : state === "success" ? successMessage : state === "warning" ? warningMessage : void 0;
+    const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null, ariaDescribedby ?? null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-1 relative",
+          fullWidth ? "w-full" : "w-fit",
+          wrapperClassName,
+          className
+        ),
+        children: [
+          label !== void 0 && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: inputId,
+              className: cn(
+                "font-black leading-none text-text uppercase tracking-widest",
+                labelSizeClasses[size],
+                labelClassName
+              ),
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+              children: [
+                prefix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "left", children: prefix }),
+                /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
+                  /* @__PURE__ */ jsx(AddonIcon, { side: "left", size, children: leftElement ?? /* @__PURE__ */ jsx(ClockIcon, { className: "w-full h-full" }) }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: inputId,
+                      type: "button",
+                      role: "combobox",
+                      "aria-expanded": isOpen,
+                      "aria-haspopup": "dialog",
+                      "aria-controls": popoverId,
+                      "aria-label": ariaLabel ?? label ?? "Time picker",
+                      "aria-describedby": describedBy,
+                      "aria-required": required,
+                      "aria-invalid": state === "error" ? true : void 0,
+                      disabled: Boolean(disabled) || Boolean(isLoading),
+                      onClick: toggleOpen,
+                      name,
+                      className: cn(
+                        "w-full flex items-center text-left transition-colors duration-150 cursor-pointer",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        sizeClasses[size],
+                        variantClasses[variant],
+                        stateVariantClasses[state][variant],
+                        "pl-9",
+                        showClear || rightElement ? rightPad[size] : "",
+                        prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : "",
+                        inputClassName
+                      ),
+                      children: displayValue ? /* @__PURE__ */ jsx("span", { className: "text-text", children: formatDisplay(displayValue, use12Hour) }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+                    }
+                  ),
+                  isLoading ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "animate-spin h-full w-full text-text-muted",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            className: "opacity-25",
+                            cx: "12",
+                            cy: "12",
+                            r: "10",
+                            stroke: "currentColor",
+                            strokeWidth: "4"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            className: "opacity-75",
+                            fill: "currentColor",
+                            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          }
+                        )
+                      ]
+                    }
+                  ) }) : showClear ? /* @__PURE__ */ jsx(
+                    AddonIcon,
+                    {
+                      side: "right",
+                      size,
+                      asButton: true,
+                      onClick: handleClear,
+                      ariaLabel: "Clear time",
+                      children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
+                    }
+                  ) : rightElement ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: rightElement }) : null
+                ] }),
+                suffix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "right", children: suffix })
+              ]
+            }
+          ),
+          helperText !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: helperId,
+              className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+              children: helperText
+            }
+          ),
+          stateMessage !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: stateMessageId,
+              role: state === "error" ? "alert" : void 0,
+              className: cn(
+                "text-xs leading-tight mt-0.5 font-medium",
+                stateMessageClasses[state],
+                helperClassName
+              ),
+              children: stateMessage
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: popoverId,
+              role: "dialog",
+              "aria-label": "Time picker",
+              "aria-modal": "true",
+              className: cn(
+                "absolute top-full left-0 z-50 mt-1",
+                "bg-surface border border-border rounded-xl shadow-xl",
+                "transition-all duration-200 origin-top",
+                isOpen ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-text-muted uppercase tracking-widest mb-3 text-center", children: "Select Time" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    ScrollColumn,
+                    {
+                      items: hourItems,
+                      selected: pickerHour,
+                      onSelect: handleHourSelect,
+                      label: "Hour"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex items-center self-center pb-2 text-text-muted font-bold text-lg select-none",
+                      style: { height: ITEM_HEIGHT },
+                      children: ":"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ScrollColumn,
+                    {
+                      items: minuteItems,
+                      selected: pickerMinute,
+                      onSelect: handleMinuteSelect,
+                      label: "Minute"
+                    }
+                  ),
+                  use12Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border mx-1" }),
+                    /* @__PURE__ */ jsx(
+                      ScrollColumn,
+                      {
+                        items: ["AM", "PM"],
+                        selected: pickerAmpm,
+                        onSelect: handleAmpmSelect,
+                        label: "AM/PM"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-3 pt-3 border-t border-border text-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary font-mono", children: displayValue ? formatDisplay(displayValue, use12Hour) : "\u2013\u2013:\u2013\u2013" }) })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { TimePicker };

package/dist/date-picker/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWVRXSANT_cjs = require('../chunk-WVRXSANT.cjs');
+var chunkYV3WWKQY_cjs = require('../chunk-YV3WWKQY.cjs');
 require('../chunk-J53N2LAE.cjs');
 require('../chunk-L5VQZZVR.cjs');
 
@@ -8,5 +8,5 @@ require('../chunk-L5VQZZVR.cjs');
 
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkWVRXSANT_cjs.DatePicker; }
+  get: function () { return chunkYV3WWKQY_cjs.DatePicker; }
 });

package/dist/date-picker/index.d.mts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 type DatePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -47,6 +47,6 @@ interface DatePickerProps {
     'aria-describedby'?: string;
 }
 
-declare function DatePicker({ label, required, helperText, errorMessage, successMessage, warningMessage, variant, size, state, fullWidth, leftElement, rightElement, prefix, suffix, wrapperClassName, inputGroupClassName, inputClassName, labelClassName, helperClassName, id: idProp, disabled, className, clearable, isLoading, value, defaultValue, onChange, onDateChange, placeholder, minDate, maxDate, disabledDates, locale, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: DatePickerProps): React.JSX.Element;
+declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
 
 export { DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerState, type DatePickerVariant };

package/dist/date-picker/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 type DatePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -47,6 +47,6 @@ interface DatePickerProps {
     'aria-describedby'?: string;
 }
 
-declare function DatePicker({ label, required, helperText, errorMessage, successMessage, warningMessage, variant, size, state, fullWidth, leftElement, rightElement, prefix, suffix, wrapperClassName, inputGroupClassName, inputClassName, labelClassName, helperClassName, id: idProp, disabled, className, clearable, isLoading, value, defaultValue, onChange, onDateChange, placeholder, minDate, maxDate, disabledDates, locale, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: DatePickerProps): React.JSX.Element;
+declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
 
 export { DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerState, type DatePickerVariant };

package/dist/date-picker/index.mjs

@@ -1,3 +1,3 @@
-export { DatePicker } from '../chunk-M5V2IWA6.mjs';
+export { DatePicker } from '../chunk-UPSMZISM.mjs';
 import '../chunk-4PRNRENN.mjs';
 import '../chunk-OCPFOFJ4.mjs';

package/dist/date-time-picker/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkHG4BPC2T_cjs = require('../chunk-HG4BPC2T.cjs');
+var chunkM6XPQ5BE_cjs = require('../chunk-M6XPQ5BE.cjs');
 require('../chunk-J53N2LAE.cjs');
 require('../chunk-L5VQZZVR.cjs');
 
@@ -8,5 +8,5 @@ require('../chunk-L5VQZZVR.cjs');
 
 Object.defineProperty(exports, "DateTimePicker", {
   enumerable: true,
-  get: function () { return chunkHG4BPC2T_cjs.DateTimePicker; }
+  get: function () { return chunkM6XPQ5BE_cjs.DateTimePicker; }
 });

package/dist/date-time-picker/index.d.mts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 type DateTimePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DateTimePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -47,6 +47,6 @@ interface DateTimePickerProps {
     'aria-describedby'?: string;
 }
 
-declare function DateTimePicker({ label, required, helperText, errorMessage, successMessage, warningMessage, variant, size, state, fullWidth, leftElement, rightElement, prefix, suffix, wrapperClassName, inputGroupClassName, inputClassName, labelClassName, helperClassName, className, clearable, isLoading, disabled, value, defaultValue, onChange, onDateTimeChange, placeholder, locale, minDate, maxDate, disabledDates, minuteStep, use12Hour, id: idProp, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: DateTimePickerProps): React.JSX.Element;
+declare const DateTimePicker: ForwardRefExoticComponent<DateTimePickerProps & RefAttributes<HTMLDivElement>>;
 
 export { DateTimePicker, type DateTimePickerProps, type DateTimePickerSize, type DateTimePickerState, type DateTimePickerVariant };

package/dist/date-time-picker/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 type DateTimePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DateTimePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -47,6 +47,6 @@ interface DateTimePickerProps {
     'aria-describedby'?: string;
 }
 
-declare function DateTimePicker({ label, required, helperText, errorMessage, successMessage, warningMessage, variant, size, state, fullWidth, leftElement, rightElement, prefix, suffix, wrapperClassName, inputGroupClassName, inputClassName, labelClassName, helperClassName, className, clearable, isLoading, disabled, value, defaultValue, onChange, onDateTimeChange, placeholder, locale, minDate, maxDate, disabledDates, minuteStep, use12Hour, id: idProp, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: DateTimePickerProps): React.JSX.Element;
+declare const DateTimePicker: ForwardRefExoticComponent<DateTimePickerProps & RefAttributes<HTMLDivElement>>;
 
 export { DateTimePicker, type DateTimePickerProps, type DateTimePickerSize, type DateTimePickerState, type DateTimePickerVariant };

package/dist/date-time-picker/index.mjs

@@ -1,3 +1,3 @@
-export { DateTimePicker } from '../chunk-E6KUCC56.mjs';
+export { DateTimePicker } from '../chunk-6LBTRQZD.mjs';
 import '../chunk-4PRNRENN.mjs';
 import '../chunk-OCPFOFJ4.mjs';

package/dist/index.cjs

@@ -7,7 +7,7 @@ require('./chunk-NMJ5CVZH.cjs');
 var chunkOEU5VG3D_cjs = require('./chunk-OEU5VG3D.cjs');
 var chunkY6AN7AWX_cjs = require('./chunk-Y6AN7AWX.cjs');
 var chunkXFNRKHHF_cjs = require('./chunk-XFNRKHHF.cjs');
-var chunkFK5HAWIU_cjs = require('./chunk-FK5HAWIU.cjs');
+var chunk62JXQJBD_cjs = require('./chunk-62JXQJBD.cjs');
 var chunkYMMNWJT6_cjs = require('./chunk-YMMNWJT6.cjs');
 var chunkQ3IFXFFD_cjs = require('./chunk-Q3IFXFFD.cjs');
 var chunkYK7IS7JL_cjs = require('./chunk-YK7IS7JL.cjs');
@@ -22,8 +22,8 @@ var chunkBIKJK4L4_cjs = require('./chunk-BIKJK4L4.cjs');
 var chunkVRZFAKSV_cjs = require('./chunk-VRZFAKSV.cjs');
 var chunk7R5JRJ2W_cjs = require('./chunk-7R5JRJ2W.cjs');
 var chunkKLBABQEJ_cjs = require('./chunk-KLBABQEJ.cjs');
-var chunkWVRXSANT_cjs = require('./chunk-WVRXSANT.cjs');
-var chunkHG4BPC2T_cjs = require('./chunk-HG4BPC2T.cjs');
+var chunkYV3WWKQY_cjs = require('./chunk-YV3WWKQY.cjs');
+var chunkM6XPQ5BE_cjs = require('./chunk-M6XPQ5BE.cjs');
 require('./chunk-J53N2LAE.cjs');
 var chunkOPOCCRJG_cjs = require('./chunk-OPOCCRJG.cjs');
 var chunkAJXVELXK_cjs = require('./chunk-AJXVELXK.cjs');
@@ -651,7 +651,7 @@ Object.defineProperty(exports, "TextInput", {
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
-  get: function () { return chunkFK5HAWIU_cjs.TimePicker; }
+  get: function () { return chunk62JXQJBD_cjs.TimePicker; }
 });
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
@@ -727,11 +727,11 @@ Object.defineProperty(exports, "ComboBox", {
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkWVRXSANT_cjs.DatePicker; }
+  get: function () { return chunkYV3WWKQY_cjs.DatePicker; }
 });
 Object.defineProperty(exports, "DateTimePicker", {
   enumerable: true,
-  get: function () { return chunkHG4BPC2T_cjs.DateTimePicker; }
+  get: function () { return chunkM6XPQ5BE_cjs.DateTimePicker; }
 });
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,