@bricks-toolkit/toolkit 0.1.18 → 0.1.20

package/dist/chunk-WVRXSANT.cjs

@@ -0,0 +1,567 @@
+'use strict';
+
+var chunkJ53N2LAE_cjs = require('./chunk-J53N2LAE.cjs');
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 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 = chunkL5VQZZVR_cjs.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__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: chunkL5VQZZVR_cjs.cn(base, "cursor-pointer hover:text-text transition-colors"),
+        tabIndex: -1,
+        "aria-label": ariaLabel,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: chunkL5VQZZVR_cjs.cn(base, "pointer-events-none"), "aria-label": ariaLabel, children });
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.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
+    }
+  );
+}
+function DatePicker({
+  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,
+  onDateChange,
+  placeholder = "Select date",
+  minDate,
+  maxDate,
+  disabledDates,
+  locale = "en-US",
+  name,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
+}) {
+  const generatedId = react.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] = react.useState(defaultValue ?? "");
+  const displayValue = isControlled ? value : internalValue;
+  const selectedDate = chunkJ53N2LAE_cjs.parseISODate(displayValue);
+  const today = react.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [viewYear, setViewYear] = react.useState(selectedDate?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = react.useState(selectedDate?.getMonth() ?? today.getMonth());
+  const [viewMode, setViewMode] = react.useState("day");
+  const wrapperRef = react.useRef(null);
+  const popoverRef = react.useRef(null);
+  const [prevDisplay, setPrevDisplay] = react.useState(displayValue);
+  if (displayValue !== prevDisplay) {
+    setPrevDisplay(displayValue);
+    if (selectedDate) {
+      setViewYear(selectedDate.getFullYear());
+      setViewMonth(selectedDate.getMonth());
+    }
+  }
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleClick(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setViewMode("day");
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [isOpen]);
+  const handleSelect = (date) => {
+    if (chunkJ53N2LAE_cjs.isDisabledDate(date, minDate, maxDate, disabledDates)) return;
+    const iso = chunkJ53N2LAE_cjs.toISODateString(date);
+    if (!isControlled) setInternalValue(iso);
+    onChange?.(iso);
+    onDateChange?.(date);
+    setIsOpen(false);
+    setViewMode("day");
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onChange?.("");
+    onDateChange?.(null);
+  };
+  const toggleOpen = () => {
+    if (disabled || isLoading) return;
+    setIsOpen((prev) => !prev);
+    setViewMode("day");
+    if (!isOpen && selectedDate) {
+      setViewYear(selectedDate.getFullYear());
+      setViewMonth(selectedDate.getMonth());
+    }
+  };
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else setViewMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else setViewMonth((m) => m + 1);
+  };
+  const showClear = clearable && displayValue.length > 0 && !disabled && !isLoading;
+  const hasLeftElement = leftElement !== void 0;
+  const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading);
+  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;
+  const calendarGrid = chunkJ53N2LAE_cjs.buildCalendarGrid(viewYear, viewMonth);
+  const yearRange = chunkJ53N2LAE_cjs.getYearRange(viewYear);
+  const leftPad = {
+    xs: "pl-6",
+    sm: "pl-8",
+    md: "pl-9",
+    lg: "pl-10",
+    xl: "pl-11"
+  };
+  const rightPad = {
+    xs: "pr-6",
+    sm: "pr-8",
+    md: "pr-9",
+    lg: "pr-10",
+    xl: "pr-11"
+  };
+  const paddingClasses = chunkL5VQZZVR_cjs.cn(
+    hasLeftElement && leftPad[size],
+    (hasRightElement || showClear) && rightPad[size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col gap-1 relative",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: chunkL5VQZZVR_cjs.cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "left", children: prefix }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "left", size, children: leftElement ?? /* @__PURE__ */ jsxRuntime.jsx(outline.CalendarIcon, { className: "w-full h-full" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    id: inputId,
+                    type: "button",
+                    role: "combobox",
+                    "aria-expanded": isOpen,
+                    "aria-haspopup": "dialog",
+                    "aria-controls": popoverId,
+                    "aria-label": ariaLabel ?? label ?? "Date picker",
+                    "aria-describedby": describedBy,
+                    "aria-required": required,
+                    "aria-invalid": state === "error" ? true : void 0,
+                    disabled: Boolean(disabled) || Boolean(isLoading),
+                    onClick: toggleOpen,
+                    name,
+                    className: chunkL5VQZZVR_cjs.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",
+                      hasRightElement || showClear ? rightPad[size] : "",
+                      paddingClasses,
+                      inputClassName,
+                      prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : ""
+                    ),
+                    children: displayValue && selectedDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text truncate", children: chunkJ53N2LAE_cjs.formatDate(selectedDate, locale) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: placeholder })
+                  }
+                ),
+                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  AddonIcon,
+                  {
+                    side: "right",
+                    size,
+                    asButton: true,
+                    onClick: handleClear,
+                    ariaLabel: "Clear date",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
+                  }
+                ) : rightElement ? /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, children: rightElement }) : null
+              ] }),
+              suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "right", children: suffix })
+            ]
+          }
+        ),
+        helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: helperId,
+            className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: chunkL5VQZZVR_cjs.cn(
+              "text-xs leading-tight mt-0.5 font-medium",
+              stateMessageClasses[state],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: popoverId,
+            ref: popoverRef,
+            role: "dialog",
+            "aria-label": "Date picker calendar",
+            "aria-modal": "true",
+            className: chunkL5VQZZVR_cjs.cn(
+              "absolute top-full left-0 z-50 mt-1 w-72",
+              "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__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
+              viewMode === "day" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: prevMonth,
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Previous month",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode("month");
+                      },
+                      className: "text-sm font-bold text-text hover:text-primary transition-colors px-2 py-1 rounded-lg hover:bg-hover",
+                      children: [
+                        chunkJ53N2LAE_cjs.MONTH_NAMES[viewMonth],
+                        " ",
+                        viewYear
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: nextMonth,
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Next month",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1", children: chunkJ53N2LAE_cjs.DAY_NAMES_SHORT.map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-xs font-semibold text-text-muted py-1", children: d }, d)) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-y-0.5", children: calendarGrid.flat().map((date, idx) => {
+                  if (!date) return /* @__PURE__ */ jsxRuntime.jsx("div", {}, idx);
+                  const isSelected = selectedDate ? chunkJ53N2LAE_cjs.isSameDay(date, selectedDate) : false;
+                  const isToday = chunkJ53N2LAE_cjs.isSameDay(date, today);
+                  const isDisabled = chunkJ53N2LAE_cjs.isDisabledDate(date, minDate, maxDate, disabledDates);
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleSelect(date);
+                      },
+                      disabled: isDisabled,
+                      "aria-label": date.toDateString(),
+                      "aria-pressed": isSelected,
+                      className: chunkL5VQZZVR_cjs.cn(
+                        "mx-auto flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors duration-150 font-medium",
+                        isSelected ? "bg-primary text-white font-bold shadow-sm" : isToday ? "ring-2 ring-primary text-primary" : "text-text hover:bg-hover",
+                        isDisabled && "opacity-30 cursor-not-allowed"
+                      ),
+                      children: date.getDate()
+                    },
+                    idx
+                  );
+                }) })
+              ] }),
+              viewMode === "month" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewYear((y) => y - 1);
+                      },
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Previous year",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode("year");
+                      },
+                      className: "text-sm font-bold text-text hover:text-primary transition-colors px-2 py-1 rounded-lg hover:bg-hover",
+                      children: viewYear
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewYear((y) => y + 1);
+                      },
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Next year",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1", children: chunkJ53N2LAE_cjs.MONTH_NAMES_SHORT.map((m, i) => {
+                  const isActive = i === viewMonth && viewYear === (selectedDate?.getFullYear() ?? -1);
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMonth(i);
+                        setViewMode("day");
+                      },
+                      className: chunkL5VQZZVR_cjs.cn(
+                        "py-2 rounded-lg text-sm font-medium transition-colors",
+                        isActive ? "bg-primary text-white" : "text-text hover:bg-hover"
+                      ),
+                      children: m
+                    },
+                    m
+                  );
+                }) })
+              ] }),
+              viewMode === "year" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewYear((y) => y - 12);
+                      },
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Previous decade",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold text-text", children: [
+                    yearRange[0],
+                    " \u2013 ",
+                    yearRange[yearRange.length - 1]
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewYear((y) => y + 12);
+                      },
+                      className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary hover:text-text transition-colors",
+                      "aria-label": "Next decade",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1", children: yearRange.map((yr) => {
+                  const isActive = yr === (selectedDate?.getFullYear() ?? -1);
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewYear(yr);
+                        setViewMode("month");
+                      },
+                      className: chunkL5VQZZVR_cjs.cn(
+                        "py-2 rounded-lg text-sm font-medium transition-colors",
+                        isActive ? "bg-primary text-white" : "text-text hover:bg-hover",
+                        yr === today.getFullYear() && !isActive ? "ring-1 ring-primary text-primary" : ""
+                      ),
+                      children: yr
+                    },
+                    yr
+                  );
+                }) })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.DatePicker = DatePicker;

package/dist/date-picker/index.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
-var chunkW2ZAPLQH_cjs = require('../chunk-W2ZAPLQH.cjs');
+var chunkWVRXSANT_cjs = require('../chunk-WVRXSANT.cjs');
+require('../chunk-J53N2LAE.cjs');
 require('../chunk-L5VQZZVR.cjs');
 
 
 
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkW2ZAPLQH_cjs.DatePicker; }
+  get: function () { return chunkWVRXSANT_cjs.DatePicker; }
 });

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

@@ -1,15 +1,26 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type DatePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type DatePickerState = 'default' | 'error' | 'success' | 'warning';
-interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+interface DatePickerProps {
+    /** Controlled value — ISO string 'YYYY-MM-DD' */
+    value?: string;
+    /** Uncontrolled default */
+    defaultValue?: string;
+    /** Fires with ISO string 'YYYY-MM-DD' */
+    onChange?: (value: string) => void;
+    /** Fires with native Date or null */
+    onDateChange?: (date: Date | null) => void;
     label?: string;
     required?: boolean;
     helperText?: string;
     errorMessage?: string;
     successMessage?: string;
     warningMessage?: string;
+    placeholder?: string;
+    /** BCP-47 locale passed to Intl.DateTimeFormat, default 'en-US' */
+    locale?: string;
     variant?: DatePickerVariant;
     size?: DatePickerSize;
     state?: DatePickerState;
@@ -23,10 +34,19 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 's
     inputClassName?: string;
     labelClassName?: string;
     helperClassName?: string;
+    className?: string;
     clearable?: boolean;
     isLoading?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
 }
 
-declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+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;
 
 export { DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerState, type DatePickerVariant };

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

@@ -1,15 +1,26 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type DatePickerVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type DatePickerState = 'default' | 'error' | 'success' | 'warning';
-interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+interface DatePickerProps {
+    /** Controlled value — ISO string 'YYYY-MM-DD' */
+    value?: string;
+    /** Uncontrolled default */
+    defaultValue?: string;
+    /** Fires with ISO string 'YYYY-MM-DD' */
+    onChange?: (value: string) => void;
+    /** Fires with native Date or null */
+    onDateChange?: (date: Date | null) => void;
     label?: string;
     required?: boolean;
     helperText?: string;
     errorMessage?: string;
     successMessage?: string;
     warningMessage?: string;
+    placeholder?: string;
+    /** BCP-47 locale passed to Intl.DateTimeFormat, default 'en-US' */
+    locale?: string;
     variant?: DatePickerVariant;
     size?: DatePickerSize;
     state?: DatePickerState;
@@ -23,10 +34,19 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 's
     inputClassName?: string;
     labelClassName?: string;
     helperClassName?: string;
+    className?: string;
     clearable?: boolean;
     isLoading?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
 }
 
-declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+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;
 
 export { DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerState, type DatePickerVariant };