@bricks-toolkit/toolkit 0.1.20 → 0.1.21

package/dist/chunk-M5V2IWA6.mjs

@@ -1,565 +0,0 @@
-import { parseISODate, buildCalendarGrid, getYearRange, formatDate, MONTH_NAMES, DAY_NAMES_SHORT, isSameDay, isDisabledDate, MONTH_NAMES_SHORT, toISODateString } from './chunk-4PRNRENN.mjs';
-import { cn } from './chunk-OCPFOFJ4.mjs';
-import { useId, useState, useMemo, useRef, useEffect } from 'react';
-import { CalendarIcon, XMarkIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { jsxs, jsx, Fragment } from '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 = 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": "true", 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
-    }
-  );
-}
-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 = 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 selectedDate = parseISODate(displayValue);
-  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const [isOpen, setIsOpen] = useState(false);
-  const [viewYear, setViewYear] = useState(selectedDate?.getFullYear() ?? today.getFullYear());
-  const [viewMonth, setViewMonth] = useState(selectedDate?.getMonth() ?? today.getMonth());
-  const [viewMode, setViewMode] = useState("day");
-  const wrapperRef = useRef(null);
-  const popoverRef = useRef(null);
-  const [prevDisplay, setPrevDisplay] = useState(displayValue);
-  if (displayValue !== prevDisplay) {
-    setPrevDisplay(displayValue);
-    if (selectedDate) {
-      setViewYear(selectedDate.getFullYear());
-      setViewMonth(selectedDate.getMonth());
-    }
-  }
-  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 (isDisabledDate(date, minDate, maxDate, disabledDates)) return;
-    const iso = 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 = buildCalendarGrid(viewYear, viewMonth);
-  const yearRange = 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 = cn(
-    hasLeftElement && leftPad[size],
-    (hasRightElement || showClear) && rightPad[size]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      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(CalendarIcon, { 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 ?? "Date 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",
-                      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__ */ jsx("span", { className: "text-text truncate", children: formatDate(selectedDate, locale) }) : /* @__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 date",
-                    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,
-            ref: popoverRef,
-            role: "dialog",
-            "aria-label": "Date picker calendar",
-            "aria-modal": "true",
-            className: 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__ */ jsxs("div", { className: "p-3", children: [
-              viewMode === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ 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__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ 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: [
-                        MONTH_NAMES[viewMonth],
-                        " ",
-                        viewYear
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ 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__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-1", children: DAY_NAMES_SHORT.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-xs font-semibold text-text-muted py-1", children: d }, d)) }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-y-0.5", children: calendarGrid.flat().map((date, idx) => {
-                  if (!date) return /* @__PURE__ */ jsx("div", {}, idx);
-                  const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
-                  const isToday = isSameDay(date, today);
-                  const isDisabled = isDisabledDate(date, minDate, maxDate, disabledDates);
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        handleSelect(date);
-                      },
-                      disabled: isDisabled,
-                      "aria-label": date.toDateString(),
-                      "aria-pressed": isSelected,
-                      className: 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__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ 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__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ 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__ */ 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__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES_SHORT.map((m, i) => {
-                  const isActive = i === viewMonth && viewYear === (selectedDate?.getFullYear() ?? -1);
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        setViewMonth(i);
-                        setViewMode("day");
-                      },
-                      className: 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__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ 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__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-text", children: [
-                    yearRange[0],
-                    " \u2013 ",
-                    yearRange[yearRange.length - 1]
-                  ] }),
-                  /* @__PURE__ */ 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__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: yearRange.map((yr) => {
-                  const isActive = yr === (selectedDate?.getFullYear() ?? -1);
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        setViewYear(yr);
-                        setViewMode("month");
-                      },
-                      className: 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
-                  );
-                }) })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-
-export { DatePicker };