@neuronection/assistant-ui 0.2.0 → 0.4.0

package/dist/chunk-MEBOS2FX.js

@@ -0,0 +1,359 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-CI56SSO2.js';
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React from 'react';
+import { parseISO, isValid, startOfDay, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, format, isSameDay, isSameMonth, setMonth, setYear, subMonths, subYears, addMonths, addYears } from 'date-fns';
+import { Calendar, X, ChevronLeft, ChevronDown, ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function dayKey(date) {
+  return format(date, "yyyy-MM-dd");
+}
+var DatePicker = React.forwardRef(
+  function DatePicker2({
+    value,
+    onChange,
+    onClear,
+    allowClear = false,
+    clearLabel = "Clear",
+    placeholder = "Select date",
+    displayFormat = "dd/MM/yyyy",
+    minDate,
+    maxDate,
+    weekStartsOn = 1,
+    disabled = false,
+    required,
+    variant = "default",
+    id,
+    name,
+    label = "Choose date",
+    prevLabel = "Previous",
+    nextLabel = "Next",
+    className,
+    panelClassName
+  }, ref) {
+    const autoId = React.useId();
+    const hiddenId = id ?? `date-picker-${autoId}`;
+    const [open, setOpen] = React.useState(false);
+    const [viewMode, setViewMode] = React.useState("days");
+    const [currentDate, setCurrentDate] = React.useState(() => /* @__PURE__ */ new Date());
+    const [focusedDay, setFocusedDay] = React.useState(() => /* @__PURE__ */ new Date());
+    const [yearPage, setYearPage] = React.useState(() => (/* @__PURE__ */ new Date()).getFullYear());
+    const gridRef = React.useRef(null);
+    const selectedDate = React.useMemo(() => {
+      if (!value) return null;
+      const parsed = parseISO(value);
+      return isValid(parsed) ? parsed : null;
+    }, [value]);
+    const isDisabled = React.useCallback(
+      (date) => Boolean(minDate && date < startOfDay(minDate)) || Boolean(maxDate && date > startOfDay(maxDate)),
+      [minDate, maxDate]
+    );
+    const handleOpenChange = (next) => {
+      setOpen(next);
+      if (next) {
+        const base = selectedDate ?? /* @__PURE__ */ new Date();
+        setCurrentDate(base);
+        setFocusedDay(base);
+        setYearPage(base.getFullYear());
+        setViewMode("days");
+      }
+    };
+    const handleSelect = (date) => {
+      if (isDisabled(date)) return;
+      onChange(format(date, "yyyy-MM-dd"));
+      setOpen(false);
+    };
+    const handleClear = (event) => {
+      event.stopPropagation();
+      onChange("");
+      onClear?.();
+      setOpen(false);
+    };
+    const moveFocus = (next) => {
+      if (isDisabled(next)) return;
+      setFocusedDay(next);
+      setCurrentDate(
+        (current) => isSameMonth(current, next) ? current : startOfMonth(next)
+      );
+    };
+    const handleGridKeyDown = (event) => {
+      const step = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
+      if (step !== 0) {
+        event.preventDefault();
+        moveFocus(addDays(focusedDay, step));
+        return;
+      }
+      if (event.key === "PageUp" || event.key === "PageDown") {
+        event.preventDefault();
+        const direction = event.key === "PageUp" ? -1 : 1;
+        moveFocus(addMonths(focusedDay, direction));
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        moveFocus(startOfMonth(focusedDay));
+      } else if (event.key === "End") {
+        event.preventDefault();
+        moveFocus(endOfMonth(focusedDay));
+      }
+    };
+    React.useEffect(() => {
+      if (!open || viewMode !== "days") return;
+      const target = gridRef.current?.querySelector(
+        `[data-day="${dayKey(focusedDay)}"]`
+      );
+      target?.focus();
+    }, [open, viewMode, focusedDay]);
+    const monthStart = startOfMonth(currentDate);
+    const monthEnd = endOfMonth(monthStart);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn });
+    const gridEnd = endOfWeek(monthEnd, { weekStartsOn });
+    const weeks = [];
+    let cursor = gridStart;
+    while (cursor <= gridEnd) {
+      const week = [];
+      for (let i = 0; i < 7; i++) {
+        week.push(cursor);
+        cursor = addDays(cursor, 1);
+      }
+      weeks.push(week);
+    }
+    const today = /* @__PURE__ */ new Date();
+    const weekdayStart = startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn });
+    const headerTitle = viewMode === "days" ? format(currentDate, "MMMM yyyy") : viewMode === "months" ? format(currentDate, "yyyy") : `${Math.floor(yearPage / 12) * 12} \u2013 ${Math.floor(yearPage / 12) * 12 + 11}`;
+    const handlePrev = () => {
+      if (viewMode === "days") setCurrentDate(subMonths(currentDate, 1));
+      else if (viewMode === "months") setCurrentDate(subYears(currentDate, 1));
+      else setYearPage(yearPage - 12);
+    };
+    const handleNext = () => {
+      if (viewMode === "days") setCurrentDate(addMonths(currentDate, 1));
+      else if (viewMode === "months") setCurrentDate(addYears(currentDate, 1));
+      else setYearPage(yearPage + 12);
+    };
+    const toggleViewMode = () => {
+      if (viewMode !== "years") setViewMode("years");
+    };
+    const navButtonClass = "cursor-pointer rounded-[var(--as-radius-sm)] p-1.5 text-[var(--as-muted-fg)] transition-colors hover:bg-[var(--as-muted)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-as": "date-picker",
+        className: cn("relative w-full", className),
+        children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-full", children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": label,
+                className: cn(
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  variant === "default" ? "flex h-9 w-full items-center gap-2 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2 text-left text-sm text-[var(--as-fg)] transition-colors hover:border-[var(--as-fg)]/30 focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]" : "flex items-center gap-1 text-left text-sm text-[var(--as-fg)] outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                  variant === "default" && allowClear && selectedDate && !disabled && "pr-8"
+                ),
+                children: [
+                  variant === "default" ? /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      className: "size-4 shrink-0 text-[var(--as-muted-fg)]",
+                      "aria-hidden": true
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 truncate text-left",
+                        !selectedDate && (variant === "default" ? "text-[var(--as-muted-fg)]" : "opacity-70")
+                      ),
+                      children: selectedDate ? format(selectedDate, displayFormat) : placeholder
+                    }
+                  )
+                ]
+              }
+            ) }),
+            allowClear && selectedDate && !disabled ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": clearLabel,
+                onClick: handleClear,
+                className: "absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full p-0.5 text-[var(--as-muted-fg)] transition-colors hover:bg-[var(--as-muted)] hover:text-[var(--as-fg)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": true })
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              id: hiddenId,
+              name: name ?? hiddenId,
+              value: value ?? "",
+              required
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              align: "start",
+              sideOffset: 4,
+              collisionPadding: 8,
+              "aria-label": label,
+              onOpenAutoFocus: (event) => {
+                event.preventDefault();
+                const panel = event.currentTarget;
+                const target = panel?.querySelector(
+                  '[data-day][tabindex="0"]'
+                );
+                target?.focus();
+              },
+              className: cn(
+                "as-anim-pop z-50 w-[280px] rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-2 text-[var(--as-fg)] shadow-[var(--as-shadow-3)] outline-none",
+                panelClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1 pt-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": prevLabel,
+                      onClick: handlePrev,
+                      className: navButtonClass,
+                      children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5", "aria-hidden": true })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: toggleViewMode,
+                      className: "flex cursor-pointer items-center rounded-[var(--as-radius-sm)] px-3 py-1.5 text-sm font-semibold transition-colors hover:bg-[var(--as-muted)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: headerTitle }),
+                        viewMode !== "years" ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 size-4", "aria-hidden": true }) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": nextLabel,
+                      onClick: handleNext,
+                      className: navButtonClass,
+                      children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-5", "aria-hidden": true })
+                    }
+                  )
+                ] }),
+                viewMode === "days" ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: gridRef,
+                    role: "grid",
+                    "aria-label": label,
+                    onKeyDown: handleGridKeyDown,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { role: "row", className: "mb-2 grid grid-cols-7 gap-1", children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "columnheader",
+                          className: "py-1 text-center text-xs font-medium text-[var(--as-muted-fg)]",
+                          children: format(addDays(weekdayStart, i), "EEEEE")
+                        },
+                        i
+                      )) }),
+                      weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-1", children: week.map((day) => {
+                        const isSelected = selectedDate ? isSameDay(day, selectedDate) : false;
+                        const isFocused = isSameDay(day, focusedDay);
+                        const outside = !isSameMonth(day, monthStart);
+                        const isToday = isSameDay(day, today);
+                        const dayDisabled = isDisabled(day);
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "gridcell",
+                            "aria-selected": isSelected,
+                            className: "p-0",
+                            children: /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                "data-day": dayKey(day),
+                                tabIndex: isFocused ? 0 : -1,
+                                disabled: dayDisabled,
+                                "aria-current": isToday ? "date" : void 0,
+                                onClick: () => handleSelect(day),
+                                className: cn(
+                                  "flex size-8 cursor-pointer items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                                  outside ? "text-[var(--as-muted-fg)] opacity-50" : "text-[var(--as-fg)]",
+                                  isSelected && "bg-[var(--as-primary)] font-medium text-[var(--as-primary-fg)] hover:brightness-110",
+                                  !isSelected && isToday && "bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] font-medium text-[var(--as-primary)]",
+                                  !isSelected && !dayDisabled && "hover:bg-[var(--as-muted)]",
+                                  dayDisabled && "cursor-not-allowed opacity-30 hover:bg-transparent"
+                                ),
+                                children: format(day, "d")
+                              }
+                            )
+                          },
+                          dayKey(day)
+                        );
+                      }) }, weekIndex))
+                    ]
+                  }
+                ) }) : null,
+                viewMode === "months" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: Array.from({ length: 12 }, (_, i) => {
+                  const isSelected = selectedDate?.getMonth() === i && selectedDate?.getFullYear() === currentDate.getFullYear();
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentDate(setMonth(currentDate, i));
+                        setViewMode("days");
+                      },
+                      className: cn(
+                        "cursor-pointer rounded-[var(--as-radius)] py-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                        isSelected ? "bg-[var(--as-primary)] text-[var(--as-primary-fg)]" : "text-[var(--as-fg)] hover:bg-[var(--as-muted)]"
+                      ),
+                      children: format(setMonth(/* @__PURE__ */ new Date(), i), "MMM")
+                    },
+                    i
+                  );
+                }) }) : null,
+                viewMode === "years" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: Array.from({ length: 12 }, (_, i) => {
+                  const year = Math.floor(yearPage / 12) * 12 + i;
+                  const isSelected = selectedDate?.getFullYear() === year;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentDate(setYear(currentDate, year));
+                        setFocusedDay((current) => setYear(current, year));
+                        setViewMode("months");
+                      },
+                      className: cn(
+                        "cursor-pointer rounded-[var(--as-radius)] py-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+                        isSelected ? "bg-[var(--as-primary)] text-[var(--as-primary-fg)]" : "text-[var(--as-fg)] hover:bg-[var(--as-muted)]"
+                      ),
+                      children: year
+                    },
+                    year
+                  );
+                }) }) : null
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+
+export { DatePicker };
+//# sourceMappingURL=chunk-MEBOS2FX.js.map
+//# sourceMappingURL=chunk-MEBOS2FX.js.map

package/dist/chunk-MEBOS2FX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/date-picker/DatePicker.tsx"],"names":["DatePicker","CalendarIcon"],"mappings":";;;;;;;AA2DA,SAAS,OAAO,IAAA,EAAoB;AAClC,EAAA,OAAO,MAAA,CAAO,MAAM,YAAY,CAAA;AAClC;AAEO,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EAC9B,SAASA,WAAAA,CACP;AAAA,IACE,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,UAAA,GAAa,OAAA;AAAA,IACb,WAAA,GAAc,aAAA;AAAA,IACd,aAAA,GAAgB,YAAA;AAAA,IAChB,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA,GAAe,CAAA;AAAA,IACf,QAAA,GAAW,KAAA;AAAA,IACX,QAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,EAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA,GAAQ,aAAA;AAAA,IACR,SAAA,GAAY,UAAA;AAAA,IACZ,SAAA,GAAY,MAAA;AAAA,IACZ,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,IAAA,MAAM,QAAA,GAAW,EAAA,IAAM,CAAA,YAAA,EAAe,MAAM,CAAA,CAAA;AAC5C,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAS,KAAK,CAAA;AAC5C,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAU,eAAmB,MAAM,CAAA;AAC/D,IAAA,MAAM,CAAC,aAAa,cAAc,CAAA,GAAU,eAAe,sBAAM,IAAI,MAAM,CAAA;AAC3E,IAAA,MAAM,CAAC,YAAY,aAAa,CAAA,GAAU,eAAe,sBAAM,IAAI,MAAM,CAAA;AACzE,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAU,KAAA,CAAA,QAAA,CAAS,uBAAM,IAAI,IAAA,EAAK,EAAE,WAAA,EAAa,CAAA;AAC7E,IAAA,MAAM,OAAA,GAAgB,aAAuB,IAAI,CAAA;AAEjD,IAAA,MAAM,YAAA,GAAqB,cAAQ,MAAM;AACvC,MAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,MAAA,MAAM,MAAA,GAAS,SAAS,KAAK,CAAA;AAC7B,MAAA,OAAO,OAAA,CAAQ,MAAM,CAAA,GAAI,MAAA,GAAS,IAAA;AAAA,IACpC,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAA,MAAM,UAAA,GAAmB,KAAA,CAAA,WAAA;AAAA,MACvB,CAAC,IAAA,KACC,OAAA,CAAQ,OAAA,IAAW,OAAO,UAAA,CAAW,OAAO,CAAC,CAAA,IAC7C,OAAA,CAAQ,OAAA,IAAW,IAAA,GAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC/C,CAAC,SAAS,OAAO;AAAA,KACnB;AAEA,IAAA,MAAM,gBAAA,GAAmB,CAAC,IAAA,KAAkB;AAC1C,MAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,MAAA,IAAI,IAAA,EAAM;AACR,QAAA,MAAM,IAAA,GAAO,YAAA,oBAAgB,IAAI,IAAA,EAAK;AACtC,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,WAAA,CAAY,IAAA,CAAK,aAAa,CAAA;AAC9B,QAAA,WAAA,CAAY,MAAM,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAe;AACnC,MAAA,IAAI,UAAA,CAAW,IAAI,CAAA,EAAG;AACtB,MAAA,QAAA,CAAS,MAAA,CAAO,IAAA,EAAM,YAAY,CAAC,CAAA;AACnC,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,QAAA,CAAS,EAAE,CAAA;AACX,MAAA,OAAA,IAAU;AACV,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAe;AAChC,MAAA,IAAI,UAAA,CAAW,IAAI,CAAA,EAAG;AACtB,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,cAAA;AAAA,QAAe,CAAC,YACd,WAAA,CAAY,OAAA,EAAS,IAAI,CAAA,GAAI,OAAA,GAAU,aAAa,IAAI;AAAA,OAC1D;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+B;AACxD,MAAA,MAAM,OACJ,KAAA,CAAM,GAAA,KAAQ,WAAA,GACV,EAAA,GACA,MAAM,GAAA,KAAQ,YAAA,GACZ,CAAA,GACA,KAAA,CAAM,QAAQ,SAAA,GACZ,EAAA,GACA,KAAA,CAAM,GAAA,KAAQ,cACZ,CAAA,GACA,CAAA;AACZ,MAAA,IAAI,SAAS,CAAA,EAAG;AACd,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,OAAA,CAAQ,UAAA,EAAY,IAAI,CAAC,CAAA;AACnC,QAAA;AAAA,MACF;AACA,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,QAAA,IAAY,KAAA,CAAM,QAAQ,UAAA,EAAY;AACtD,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAM,SAAA,GAAY,KAAA,CAAM,GAAA,KAAQ,QAAA,GAAW,EAAA,GAAK,CAAA;AAChD,QAAA,SAAA,CAAU,SAAA,CAAU,UAAA,EAAY,SAAS,CAAC,CAAA;AAC1C,QAAA;AAAA,MACF;AACA,MAAA,IAAI,KAAA,CAAM,QAAQ,MAAA,EAAQ;AACxB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,MACpC,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,KAAA,EAAO;AAC9B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,UAAA,CAAW,UAAU,CAAC,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAEA,IAAM,gBAAU,MAAM;AACpB,MAAA,IAAI,CAAC,IAAA,IAAQ,QAAA,KAAa,MAAA,EAAQ;AAClC,MAAA,MAAM,MAAA,GAAS,QAAQ,OAAA,EAAS,aAAA;AAAA,QAC9B,CAAA,WAAA,EAAc,MAAA,CAAO,UAAU,CAAC,CAAA,EAAA;AAAA,OAClC;AACA,MAAA,MAAA,EAAQ,KAAA,EAAM;AAAA,IAChB,CAAA,EAAG,CAAC,IAAA,EAAM,QAAA,EAAU,UAAU,CAAC,CAAA;AAE/B,IAAA,MAAM,UAAA,GAAa,aAAa,WAAW,CAAA;AAC3C,IAAA,MAAM,QAAA,GAAW,WAAW,UAAU,CAAA;AACtC,IAAA,MAAM,SAAA,GAAY,WAAA,CAAY,UAAA,EAAY,EAAE,cAAc,CAAA;AAC1D,IAAA,MAAM,OAAA,GAAU,SAAA,CAAU,QAAA,EAAU,EAAE,cAAc,CAAA;AAEpD,IAAA,MAAM,QAAkB,EAAC;AACzB,IAAA,IAAI,MAAA,GAAS,SAAA;AACb,IAAA,OAAO,UAAU,OAAA,EAAS;AACxB,MAAA,MAAM,OAAe,EAAC;AACtB,MAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,CAAA,EAAG,CAAA,EAAA,EAAK;AAC1B,QAAA,IAAA,CAAK,KAAK,MAAM,CAAA;AAChB,QAAA,MAAA,GAAS,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,MAC5B;AACA,MAAA,KAAA,CAAM,KAAK,IAAI,CAAA;AAAA,IACjB;AAEA,IAAA,MAAM,KAAA,uBAAY,IAAA,EAAK;AACvB,IAAA,MAAM,eAAe,WAAA,iBAAY,IAAI,MAAK,EAAG,EAAE,cAAc,CAAA;AAE7D,IAAA,MAAM,WAAA,GACJ,QAAA,KAAa,MAAA,GACT,MAAA,CAAO,WAAA,EAAa,WAAW,CAAA,GAC/B,QAAA,KAAa,QAAA,GACX,MAAA,CAAO,WAAA,EAAa,MAAM,CAAA,GAC1B,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA,GAAI,EAAE,CAAA,QAAA,EAAM,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA,GAAI,EAAA,GAAK,EAAE,CAAA,CAAA;AAElF,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,IAAI,aAAa,MAAA,EAAQ,cAAA,CAAe,SAAA,CAAU,WAAA,EAAa,CAAC,CAAC,CAAA;AAAA,WAAA,IACxD,aAAa,QAAA,EAAU,cAAA,CAAe,QAAA,CAAS,WAAA,EAAa,CAAC,CAAC,CAAA;AAAA,WAClE,WAAA,CAAY,WAAW,EAAE,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,IAAI,aAAa,MAAA,EAAQ,cAAA,CAAe,SAAA,CAAU,WAAA,EAAa,CAAC,CAAC,CAAA;AAAA,WAAA,IACxD,aAAa,QAAA,EAAU,cAAA,CAAe,QAAA,CAAS,WAAA,EAAa,CAAC,CAAC,CAAA;AAAA,WAClE,WAAA,CAAY,WAAW,EAAE,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,QAAA,KAAa,OAAA,EAAS,WAAA,CAAY,OAAO,CAAA;AAAA,IAC/C,CAAA;AAEA,IAAA,MAAM,cAAA,GACJ,+NAAA;AAEF,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,aAAA;AAAA,QACR,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA;AAAA,QAE1C,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAY,YAAA,EAAc,gBAAA,EACjC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6BAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAC,QAAA,EACtB,QAAA,kBAAA,IAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,YAAA,EAAY,KAAA;AAAA,gBACZ,SAAA,EAAW,EAAA;AAAA,kBACT,iDAAA;AAAA,kBACA,OAAA,KAAY,YACR,wWAAA,GACA,gLAAA;AAAA,kBACJ,OAAA,KAAY,SAAA,IACV,UAAA,IACA,YAAA,IACA,CAAC,QAAA,IACD;AAAA,iBACJ;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,OAAA,KAAY,SAAA,mBACX,GAAA;AAAA,oBAACC,QAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,2CAAA;AAAA,sBACV,aAAA,EAAW;AAAA;AAAA,mBACb,GACE,IAAA;AAAA,kCACJ,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAW,EAAA;AAAA,wBACT,2BAAA;AAAA,wBACA,CAAC,YAAA,KACE,OAAA,KAAY,SAAA,GAAY,2BAAA,GAA8B,YAAA;AAAA,uBAC3D;AAAA,sBAEC,QAAA,EAAA,YAAA,GACG,MAAA,CAAO,YAAA,EAAc,aAAa,CAAA,GAClC;AAAA;AAAA;AACN;AAAA;AAAA,aACF,EACF,CAAA;AAAA,YACC,UAAA,IAAc,YAAA,IAAgB,CAAC,QAAA,mBAC9B,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,YAAA,EAAY,UAAA;AAAA,gBACZ,OAAA,EAAS,WAAA;AAAA,gBACT,SAAA,EAAU,kRAAA;AAAA,gBAEV,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,UAAA,EAAW,eAAW,IAAA,EAAC;AAAA;AAAA,aACtC,GACE;AAAA,WAAA,EACN,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,EAAA,EAAI,QAAA;AAAA,cACJ,MAAM,IAAA,IAAQ,QAAA;AAAA,cACd,OAAO,KAAA,IAAS,EAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BAEA,IAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,OAAA;AAAA,cACN,UAAA,EAAY,CAAA;AAAA,cACZ,gBAAA,EAAkB,CAAA;AAAA,cAClB,YAAA,EAAY,KAAA;AAAA,cACZ,eAAA,EAAiB,CAAC,KAAA,KAAU;AAC1B,gBAAA,KAAA,CAAM,cAAA,EAAe;AACrB,gBAAA,MAAM,QAAQ,KAAA,CAAM,aAAA;AACpB,gBAAA,MAAM,SAAS,KAAA,EAAO,aAAA;AAAA,kBACpB;AAAA,iBACF;AACA,gBAAA,MAAA,EAAQ,KAAA,EAAM;AAAA,cAChB,CAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,0LAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,QAAA;AAAA,sBACL,YAAA,EAAY,SAAA;AAAA,sBACZ,OAAA,EAAS,UAAA;AAAA,sBACT,SAAA,EAAW,cAAA;AAAA,sBAEX,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA,mBAC9C;AAAA,kCACA,IAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,QAAA;AAAA,sBACL,OAAA,EAAS,cAAA;AAAA,sBACT,SAAA,EAAU,mPAAA;AAAA,sBAEV,QAAA,EAAA;AAAA,wCAAA,GAAA,CAAC,UAAM,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBAClB,QAAA,KAAa,0BACZ,GAAA,CAAC,WAAA,EAAA,EAAY,WAAU,aAAA,EAAc,aAAA,EAAW,MAAC,CAAA,GAC/C;AAAA;AAAA;AAAA,mBACN;AAAA,kCACA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,QAAA;AAAA,sBACL,YAAA,EAAY,SAAA;AAAA,sBACZ,OAAA,EAAS,UAAA;AAAA,sBACT,SAAA,EAAW,cAAA;AAAA,sBAEX,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AAC/C,iBAAA,EACF,CAAA;AAAA,gBAEC,QAAA,KAAa,MAAA,mBACZ,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,WAAA,EACb,QAAA,kBAAA,IAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,GAAA,EAAK,OAAA;AAAA,oBACL,IAAA,EAAK,MAAA;AAAA,oBACL,YAAA,EAAY,KAAA;AAAA,oBACZ,SAAA,EAAW,iBAAA;AAAA,oBAEX,QAAA,EAAA;AAAA,sCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,6BAAA,EACvB,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,CAAA,EAAE,EAAG,CAAC,GAAG,CAAA,qBAC7B,GAAA;AAAA,wBAAC,KAAA;AAAA,wBAAA;AAAA,0BAEC,IAAA,EAAK,cAAA;AAAA,0BACL,SAAA,EAAU,gEAAA;AAAA,0BAET,QAAA,EAAA,MAAA,CAAO,OAAA,CAAQ,YAAA,EAAc,CAAC,GAAG,OAAO;AAAA,yBAAA;AAAA,wBAJpC;AAAA,uBAMR,CAAA,EACH,CAAA;AAAA,sBACC,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,8BAChB,GAAA,CAAC,KAAA,EAAA,EAAoB,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,wBAAA,EACvC,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AACjB,wBAAA,MAAM,UAAA,GAAa,YAAA,GACf,SAAA,CAAU,GAAA,EAAK,YAAY,CAAA,GAC3B,KAAA;AACJ,wBAAA,MAAM,SAAA,GAAY,SAAA,CAAU,GAAA,EAAK,UAAU,CAAA;AAC3C,wBAAA,MAAM,OAAA,GAAU,CAAC,WAAA,CAAY,GAAA,EAAK,UAAU,CAAA;AAC5C,wBAAA,MAAM,OAAA,GAAU,SAAA,CAAU,GAAA,EAAK,KAAK,CAAA;AACpC,wBAAA,MAAM,WAAA,GAAc,WAAW,GAAG,CAAA;AAClC,wBAAA,uBACE,GAAA;AAAA,0BAAC,KAAA;AAAA,0BAAA;AAAA,4BAEC,IAAA,EAAK,UAAA;AAAA,4BACL,eAAA,EAAe,UAAA;AAAA,4BACf,SAAA,EAAU,KAAA;AAAA,4BAEV,QAAA,kBAAA,GAAA;AAAA,8BAAC,QAAA;AAAA,8BAAA;AAAA,gCACC,IAAA,EAAK,QAAA;AAAA,gCACL,UAAA,EAAU,OAAO,GAAG,CAAA;AAAA,gCACpB,QAAA,EAAU,YAAY,CAAA,GAAI,EAAA;AAAA,gCAC1B,QAAA,EAAU,WAAA;AAAA,gCACV,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,gCACjC,OAAA,EAAS,MAAM,YAAA,CAAa,GAAG,CAAA;AAAA,gCAC/B,SAAA,EAAW,EAAA;AAAA,kCACT,mMAAA;AAAA,kCACA,UACI,sCAAA,GACA,qBAAA;AAAA,kCACJ,UAAA,IACE,qFAAA;AAAA,kCACF,CAAC,cACC,OAAA,IACA,gGAAA;AAAA,kCACF,CAAC,UAAA,IAAc,CAAC,WAAA,IAAe,4BAAA;AAAA,kCAC/B,WAAA,IACE;AAAA,iCACJ;AAAA,gCAEC,QAAA,EAAA,MAAA,CAAO,KAAK,GAAG;AAAA;AAAA;AAClB,2BAAA;AAAA,0BA5BK,OAAO,GAAG;AAAA,yBA6BjB;AAAA,sBAEJ,CAAC,CAAA,EAAA,EA1CO,SA2CV,CACD;AAAA;AAAA;AAAA,mBAEL,CAAA,GACE,IAAA;AAAA,gBAEH,QAAA,KAAa,QAAA,mBACZ,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,EAAA,EAAG,EAAG,CAAC,GAAG,CAAA,KAAM;AACpC,kBAAA,MAAM,UAAA,GACJ,cAAc,QAAA,EAAS,KAAM,KAC7B,YAAA,EAAc,WAAA,EAAY,KAAM,WAAA,CAAY,WAAA,EAAY;AAC1D,kBAAA,uBACE,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBAEC,IAAA,EAAK,QAAA;AAAA,sBACL,SAAS,MAAM;AACb,wBAAA,cAAA,CAAe,QAAA,CAAS,WAAA,EAAa,CAAC,CAAC,CAAA;AACvC,wBAAA,WAAA,CAAY,MAAM,CAAA;AAAA,sBACpB,CAAA;AAAA,sBACA,SAAA,EAAW,EAAA;AAAA,wBACT,0LAAA;AAAA,wBACA,aACI,oDAAA,GACA;AAAA,uBACN;AAAA,sBAEC,iBAAO,QAAA,iBAAS,IAAI,MAAK,EAAG,CAAC,GAAG,KAAK;AAAA,qBAAA;AAAA,oBAbjC;AAAA,mBAcP;AAAA,gBAEJ,CAAC,GACH,CAAA,GACE,IAAA;AAAA,gBAEH,QAAA,KAAa,OAAA,mBACZ,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,EAAA,EAAG,EAAG,CAAC,GAAG,CAAA,KAAM;AACpC,kBAAA,MAAM,OAAO,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,IAAI,EAAA,GAAK,CAAA;AAC9C,kBAAA,MAAM,UAAA,GAAa,YAAA,EAAc,WAAA,EAAY,KAAM,IAAA;AACnD,kBAAA,uBACE,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBAEC,IAAA,EAAK,QAAA;AAAA,sBACL,SAAS,MAAM;AACb,wBAAA,cAAA,CAAe,OAAA,CAAQ,WAAA,EAAa,IAAI,CAAC,CAAA;AACzC,wBAAA,aAAA,CAAc,CAAC,OAAA,KAAY,OAAA,CAAQ,OAAA,EAAS,IAAI,CAAC,CAAA;AACjD,wBAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,sBACtB,CAAA;AAAA,sBACA,SAAA,EAAW,EAAA;AAAA,wBACT,0LAAA;AAAA,wBACA,aACI,oDAAA,GACA;AAAA,uBACN;AAAA,sBAEC,QAAA,EAAA;AAAA,qBAAA;AAAA,oBAdI;AAAA,mBAeP;AAAA,gBAEJ,CAAC,GACH,CAAA,GACE;AAAA;AAAA;AAAA;AACN,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF","file":"chunk-MEBOS2FX.js","sourcesContent":["import * as React from 'react'\nimport {\n  addDays,\n  addMonths,\n  addYears,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isSameDay,\n  isSameMonth,\n  isValid,\n  parseISO,\n  setMonth,\n  setYear,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  subMonths,\n  subYears,\n} from 'date-fns'\nimport {\n  Calendar as CalendarIcon,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  X,\n} from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../popover'\n\ntype ViewMode = 'days' | 'months' | 'years'\n\nexport interface DatePickerProps {\n  value: string | null | undefined\n  onChange: (value: string) => void\n  onClear?: () => void\n  allowClear?: boolean\n  clearLabel?: string\n  placeholder?: string\n  displayFormat?: string\n  minDate?: Date\n  maxDate?: Date\n  weekStartsOn?: 0 | 1\n  disabled?: boolean\n  required?: boolean\n  variant?: 'default' | 'unstyled'\n  id?: string\n  name?: string\n  label?: string\n  prevLabel?: string\n  nextLabel?: string\n  className?: string\n  panelClassName?: string\n}\n\nfunction dayKey(date: Date): string {\n  return format(date, 'yyyy-MM-dd')\n}\n\nexport const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(\n  function DatePicker(\n    {\n      value,\n      onChange,\n      onClear,\n      allowClear = false,\n      clearLabel = 'Clear',\n      placeholder = 'Select date',\n      displayFormat = 'dd/MM/yyyy',\n      minDate,\n      maxDate,\n      weekStartsOn = 1,\n      disabled = false,\n      required,\n      variant = 'default',\n      id,\n      name,\n      label = 'Choose date',\n      prevLabel = 'Previous',\n      nextLabel = 'Next',\n      className,\n      panelClassName,\n    },\n    ref,\n  ) {\n    const autoId = React.useId()\n    const hiddenId = id ?? `date-picker-${autoId}`\n    const [open, setOpen] = React.useState(false)\n    const [viewMode, setViewMode] = React.useState<ViewMode>('days')\n    const [currentDate, setCurrentDate] = React.useState<Date>(() => new Date())\n    const [focusedDay, setFocusedDay] = React.useState<Date>(() => new Date())\n    const [yearPage, setYearPage] = React.useState(() => new Date().getFullYear())\n    const gridRef = React.useRef<HTMLDivElement>(null)\n\n    const selectedDate = React.useMemo(() => {\n      if (!value) return null\n      const parsed = parseISO(value)\n      return isValid(parsed) ? parsed : null\n    }, [value])\n\n    const isDisabled = React.useCallback(\n      (date: Date) =>\n        Boolean(minDate && date < startOfDay(minDate)) ||\n        Boolean(maxDate && date > startOfDay(maxDate)),\n      [minDate, maxDate],\n    )\n\n    const handleOpenChange = (next: boolean) => {\n      setOpen(next)\n      if (next) {\n        const base = selectedDate ?? new Date()\n        setCurrentDate(base)\n        setFocusedDay(base)\n        setYearPage(base.getFullYear())\n        setViewMode('days')\n      }\n    }\n\n    const handleSelect = (date: Date) => {\n      if (isDisabled(date)) return\n      onChange(format(date, 'yyyy-MM-dd'))\n      setOpen(false)\n    }\n\n    const handleClear = (event: React.MouseEvent) => {\n      event.stopPropagation()\n      onChange('')\n      onClear?.()\n      setOpen(false)\n    }\n\n    const moveFocus = (next: Date) => {\n      if (isDisabled(next)) return\n      setFocusedDay(next)\n      setCurrentDate((current) =>\n        isSameMonth(current, next) ? current : startOfMonth(next),\n      )\n    }\n\n    const handleGridKeyDown = (event: React.KeyboardEvent) => {\n      const step =\n        event.key === 'ArrowLeft'\n          ? -1\n          : event.key === 'ArrowRight'\n            ? 1\n            : event.key === 'ArrowUp'\n              ? -7\n              : event.key === 'ArrowDown'\n                ? 7\n                : 0\n      if (step !== 0) {\n        event.preventDefault()\n        moveFocus(addDays(focusedDay, step))\n        return\n      }\n      if (event.key === 'PageUp' || event.key === 'PageDown') {\n        event.preventDefault()\n        const direction = event.key === 'PageUp' ? -1 : 1\n        moveFocus(addMonths(focusedDay, direction))\n        return\n      }\n      if (event.key === 'Home') {\n        event.preventDefault()\n        moveFocus(startOfMonth(focusedDay))\n      } else if (event.key === 'End') {\n        event.preventDefault()\n        moveFocus(endOfMonth(focusedDay))\n      }\n    }\n\n    React.useEffect(() => {\n      if (!open || viewMode !== 'days') return\n      const target = gridRef.current?.querySelector<HTMLButtonElement>(\n        `[data-day=\"${dayKey(focusedDay)}\"]`,\n      )\n      target?.focus()\n    }, [open, viewMode, focusedDay])\n\n    const monthStart = startOfMonth(currentDate)\n    const monthEnd = endOfMonth(monthStart)\n    const gridStart = startOfWeek(monthStart, { weekStartsOn })\n    const gridEnd = endOfWeek(monthEnd, { weekStartsOn })\n\n    const weeks: Date[][] = []\n    let cursor = gridStart\n    while (cursor <= gridEnd) {\n      const week: Date[] = []\n      for (let i = 0; i < 7; i++) {\n        week.push(cursor)\n        cursor = addDays(cursor, 1)\n      }\n      weeks.push(week)\n    }\n\n    const today = new Date()\n    const weekdayStart = startOfWeek(new Date(), { weekStartsOn })\n\n    const headerTitle =\n      viewMode === 'days'\n        ? format(currentDate, 'MMMM yyyy')\n        : viewMode === 'months'\n          ? format(currentDate, 'yyyy')\n          : `${Math.floor(yearPage / 12) * 12} – ${Math.floor(yearPage / 12) * 12 + 11}`\n\n    const handlePrev = () => {\n      if (viewMode === 'days') setCurrentDate(subMonths(currentDate, 1))\n      else if (viewMode === 'months') setCurrentDate(subYears(currentDate, 1))\n      else setYearPage(yearPage - 12)\n    }\n\n    const handleNext = () => {\n      if (viewMode === 'days') setCurrentDate(addMonths(currentDate, 1))\n      else if (viewMode === 'months') setCurrentDate(addYears(currentDate, 1))\n      else setYearPage(yearPage + 12)\n    }\n\n    const toggleViewMode = () => {\n      if (viewMode !== 'years') setViewMode('years')\n    }\n\n    const navButtonClass =\n      'cursor-pointer rounded-[var(--as-radius-sm)] p-1.5 text-[var(--as-muted-fg)] transition-colors hover:bg-[var(--as-muted)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]'\n\n    return (\n      <div\n        ref={ref}\n        data-as=\"date-picker\"\n        className={cn('relative w-full', className)}\n      >\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <span className=\"relative inline-flex w-full\">\n            <PopoverTrigger asChild disabled={disabled}>\n              <button\n                type=\"button\"\n                aria-label={label}\n                className={cn(\n                  'disabled:cursor-not-allowed disabled:opacity-50',\n                  variant === 'default'\n                    ? 'flex h-9 w-full items-center gap-2 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2 text-left text-sm text-[var(--as-fg)] transition-colors hover:border-[var(--as-fg)]/30 focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]'\n                    : 'flex items-center gap-1 text-left text-sm text-[var(--as-fg)] outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]',\n                  variant === 'default' &&\n                    allowClear &&\n                    selectedDate &&\n                    !disabled &&\n                    'pr-8',\n                )}\n              >\n                {variant === 'default' ? (\n                  <CalendarIcon\n                    className=\"size-4 shrink-0 text-[var(--as-muted-fg)]\"\n                    aria-hidden\n                  />\n                ) : null}\n                <span\n                  className={cn(\n                    'flex-1 truncate text-left',\n                    !selectedDate &&\n                      (variant === 'default' ? 'text-[var(--as-muted-fg)]' : 'opacity-70'),\n                  )}\n                >\n                  {selectedDate\n                    ? format(selectedDate, displayFormat)\n                    : placeholder}\n                </span>\n              </button>\n            </PopoverTrigger>\n            {allowClear && selectedDate && !disabled ? (\n              <button\n                type=\"button\"\n                aria-label={clearLabel}\n                onClick={handleClear}\n                className=\"absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full p-0.5 text-[var(--as-muted-fg)] transition-colors hover:bg-[var(--as-muted)] hover:text-[var(--as-fg)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]\"\n              >\n                <X className=\"size-3.5\" aria-hidden />\n              </button>\n            ) : null}\n          </span>\n\n          <input\n            type=\"hidden\"\n            id={hiddenId}\n            name={name ?? hiddenId}\n            value={value ?? ''}\n            required={required}\n          />\n\n          <PopoverContent\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={8}\n            aria-label={label}\n            onOpenAutoFocus={(event) => {\n              event.preventDefault()\n              const panel = event.currentTarget as HTMLElement | null\n              const target = panel?.querySelector<HTMLButtonElement>(\n                '[data-day][tabindex=\"0\"]',\n              )\n              target?.focus()\n            }}\n            className={cn(\n              'as-anim-pop z-50 w-[280px] rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-2 text-[var(--as-fg)] shadow-[var(--as-shadow-3)] outline-none',\n              panelClassName,\n            )}\n          >\n            <div className=\"mb-2 flex items-center justify-between px-1 pt-1\">\n              <button\n                type=\"button\"\n                aria-label={prevLabel}\n                onClick={handlePrev}\n                className={navButtonClass}\n              >\n                <ChevronLeft className=\"size-5\" aria-hidden />\n              </button>\n              <button\n                type=\"button\"\n                onClick={toggleViewMode}\n                className=\"flex cursor-pointer items-center rounded-[var(--as-radius-sm)] px-3 py-1.5 text-sm font-semibold transition-colors hover:bg-[var(--as-muted)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]\"\n              >\n                <span>{headerTitle}</span>\n                {viewMode !== 'years' ? (\n                  <ChevronDown className=\"ml-1 size-4\" aria-hidden />\n                ) : null}\n              </button>\n              <button\n                type=\"button\"\n                aria-label={nextLabel}\n                onClick={handleNext}\n                className={navButtonClass}\n              >\n                <ChevronRight className=\"size-5\" aria-hidden />\n              </button>\n            </div>\n\n            {viewMode === 'days' ? (\n              <div className=\"px-2 pb-2\">\n                <div\n                  ref={gridRef}\n                  role=\"grid\"\n                  aria-label={label}\n                  onKeyDown={handleGridKeyDown}\n                >\n                  <div role=\"row\" className=\"mb-2 grid grid-cols-7 gap-1\">\n                    {Array.from({ length: 7 }, (_, i) => (\n                      <div\n                        key={i}\n                        role=\"columnheader\"\n                        className=\"py-1 text-center text-xs font-medium text-[var(--as-muted-fg)]\"\n                      >\n                        {format(addDays(weekdayStart, i), 'EEEEE')}\n                      </div>\n                    ))}\n                  </div>\n                  {weeks.map((week, weekIndex) => (\n                    <div key={weekIndex} role=\"row\" className=\"grid grid-cols-7 gap-1\">\n                      {week.map((day) => {\n                        const isSelected = selectedDate\n                          ? isSameDay(day, selectedDate)\n                          : false\n                        const isFocused = isSameDay(day, focusedDay)\n                        const outside = !isSameMonth(day, monthStart)\n                        const isToday = isSameDay(day, today)\n                        const dayDisabled = isDisabled(day)\n                        return (\n                          <div\n                            key={dayKey(day)}\n                            role=\"gridcell\"\n                            aria-selected={isSelected}\n                            className=\"p-0\"\n                          >\n                            <button\n                              type=\"button\"\n                              data-day={dayKey(day)}\n                              tabIndex={isFocused ? 0 : -1}\n                              disabled={dayDisabled}\n                              aria-current={isToday ? 'date' : undefined}\n                              onClick={() => handleSelect(day)}\n                              className={cn(\n                                'flex size-8 cursor-pointer items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]',\n                                outside\n                                  ? 'text-[var(--as-muted-fg)] opacity-50'\n                                  : 'text-[var(--as-fg)]',\n                                isSelected &&\n                                  'bg-[var(--as-primary)] font-medium text-[var(--as-primary-fg)] hover:brightness-110',\n                                !isSelected &&\n                                  isToday &&\n                                  'bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] font-medium text-[var(--as-primary)]',\n                                !isSelected && !dayDisabled && 'hover:bg-[var(--as-muted)]',\n                                dayDisabled &&\n                                  'cursor-not-allowed opacity-30 hover:bg-transparent',\n                              )}\n                            >\n                              {format(day, 'd')}\n                            </button>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            ) : null}\n\n            {viewMode === 'months' ? (\n              <div className=\"grid grid-cols-3 gap-2 p-2\">\n                {Array.from({ length: 12 }, (_, i) => {\n                  const isSelected =\n                    selectedDate?.getMonth() === i &&\n                    selectedDate?.getFullYear() === currentDate.getFullYear()\n                  return (\n                    <button\n                      key={i}\n                      type=\"button\"\n                      onClick={() => {\n                        setCurrentDate(setMonth(currentDate, i))\n                        setViewMode('days')\n                      }}\n                      className={cn(\n                        'cursor-pointer rounded-[var(--as-radius)] py-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]',\n                        isSelected\n                          ? 'bg-[var(--as-primary)] text-[var(--as-primary-fg)]'\n                          : 'text-[var(--as-fg)] hover:bg-[var(--as-muted)]',\n                      )}\n                    >\n                      {format(setMonth(new Date(), i), 'MMM')}\n                    </button>\n                  )\n                })}\n              </div>\n            ) : null}\n\n            {viewMode === 'years' ? (\n              <div className=\"grid grid-cols-3 gap-2 p-2\">\n                {Array.from({ length: 12 }, (_, i) => {\n                  const year = Math.floor(yearPage / 12) * 12 + i\n                  const isSelected = selectedDate?.getFullYear() === year\n                  return (\n                    <button\n                      key={year}\n                      type=\"button\"\n                      onClick={() => {\n                        setCurrentDate(setYear(currentDate, year))\n                        setFocusedDay((current) => setYear(current, year))\n                        setViewMode('months')\n                      }}\n                      className={cn(\n                        'cursor-pointer rounded-[var(--as-radius)] py-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]',\n                        isSelected\n                          ? 'bg-[var(--as-primary)] text-[var(--as-primary-fg)]'\n                          : 'text-[var(--as-fg)] hover:bg-[var(--as-muted)]',\n                      )}\n                    >\n                      {year}\n                    </button>\n                  )\n                })}\n              </div>\n            ) : null}\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\n"]}

package/dist/chunk-TFS2NUET.js

@@ -0,0 +1,66 @@
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React from 'react';
+import { House, ChevronRight } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var linkClass = "text-[10px] font-bold uppercase tracking-wider text-[var(--as-muted-fg)] transition-colors hover:text-[var(--as-primary)]";
+var Breadcrumbs = React.forwardRef(
+  function Breadcrumbs2({
+    items = [],
+    currentLabel,
+    homeHref,
+    homeLabel = "Home",
+    linkComponent: LinkComponent = "a",
+    className,
+    ...props
+  }, ref) {
+    if (items.length === 0 && !currentLabel && !homeHref) return null;
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "data-as": "breadcrumbs",
+        "aria-label": "Breadcrumb",
+        className: cn(
+          "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 leading-tight",
+          className
+        ),
+        ...props,
+        children: [
+          homeHref ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LinkComponent, { href: homeHref, className: "shrink-0 p-0.5 text-[var(--as-muted-fg)] transition-colors hover:text-[var(--as-primary)]", "aria-label": homeLabel, title: homeLabel, children: /* @__PURE__ */ jsx(House, { className: "size-3", "aria-hidden": true }) }),
+            items.length > 0 || currentLabel ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60", "aria-hidden": true }) : null
+          ] }) : null,
+          items.map((item, index) => {
+            const isLast = index === items.length - 1 && !currentLabel;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              index > 0 || homeHref ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60", "aria-hidden": true }) : null,
+              item.href && !isLast ? /* @__PURE__ */ jsxs(LinkComponent, { href: item.href, className: linkClass, children: [
+                item.icon,
+                item.label
+              ] }) : /* @__PURE__ */ jsxs("span", { className: linkClass, children: [
+                item.icon,
+                item.label
+              ] })
+            ] }, `${item.label}-${index}`);
+          }),
+          currentLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            items.length > 0 || homeHref ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60", "aria-hidden": true }) : null,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-current": "page",
+                className: "text-[10px] font-black uppercase tracking-wider text-[var(--as-fg)]",
+                children: currentLabel
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+
+export { Breadcrumbs };
+//# sourceMappingURL=chunk-TFS2NUET.js.map
+//# sourceMappingURL=chunk-TFS2NUET.js.map

package/dist/chunk-TFS2NUET.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","Fragment"],"mappings":";;;;;AA0BA,IAAM,SAAA,GACJ,2HAAA;AAEK,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EAC/B,SAASA,YAAAA,CACP;AAAA,IACE,QAAQ,EAAC;AAAA,IACT,YAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,GAAY,MAAA;AAAA,IACZ,eAAe,aAAA,GAAgB,GAAA;AAAA,IAC/B,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,IAAI,MAAM,MAAA,KAAW,CAAA,IAAK,CAAC,YAAA,IAAgB,CAAC,UAAU,OAAO,IAAA;AAE7D,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,aAAA;AAAA,QACR,YAAA,EAAW,YAAA;AAAA,QACX,SAAA,EAAW,EAAA;AAAA,UACT,+DAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA,mBACC,IAAA,CAAAC,UAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,QAAA,EAAU,SAAA,EAAU,6FAA4F,YAAA,EAAY,SAAA,EAAW,KAAA,EAAO,SAAA,EACjK,8BAAC,KAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,MAAC,CAAA,EACxC,CAAA;AAAA,YACC,KAAA,CAAM,MAAA,GAAS,CAAA,IAAK,YAAA,mBACnB,GAAA,CAAC,gBAAa,SAAA,EAAU,wDAAA,EAAyD,aAAA,EAAW,IAAA,EAAC,CAAA,GAC3F;AAAA,WAAA,EACN,CAAA,GACE,IAAA;AAAA,UACH,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC1B,YAAA,MAAM,MAAA,GAAS,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,KAAK,CAAC,YAAA;AAC9C,YAAA,uBACE,IAAA,CAAO,gBAAN,EACE,QAAA,EAAA;AAAA,cAAA,KAAA,GAAQ,CAAA,IAAK,2BACZ,GAAA,CAAC,YAAA,EAAA,EAAa,WAAU,wDAAA,EAAyD,aAAA,EAAW,MAAC,CAAA,GAC3F,IAAA;AAAA,cACH,IAAA,CAAK,IAAA,IAAQ,CAAC,MAAA,mBACb,IAAA,CAAC,iBAAc,IAAA,EAAM,IAAA,CAAK,IAAA,EAAM,SAAA,EAAW,SAAA,EACxC,QAAA,EAAA;AAAA,gBAAA,IAAA,CAAK,IAAA;AAAA,gBACL,IAAA,CAAK;AAAA,eAAA,EACR,CAAA,mBAEA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,SAAA,EACd,QAAA,EAAA;AAAA,gBAAA,IAAA,CAAK,IAAA;AAAA,gBACL,IAAA,CAAK;AAAA,eAAA,EACR;AAAA,aAAA,EAAA,EAbiB,CAAA,EAAG,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAe3C,CAAA;AAAA,UAEJ,CAAC,CAAA;AAAA,UACA,YAAA,mBACC,IAAA,CAAAA,QAAAA,EAAA,EACG,QAAA,EAAA;AAAA,YAAA,KAAA,CAAM,MAAA,GAAS,KAAK,QAAA,mBACnB,GAAA,CAAC,gBAAa,SAAA,EAAU,wDAAA,EAAyD,aAAA,EAAW,IAAA,EAAC,CAAA,GAC3F,IAAA;AAAA,4BACJ,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,cAAA,EAAa,MAAA;AAAA,gBACb,SAAA,EAAU,qEAAA;AAAA,gBAET,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EACF,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"chunk-TFS2NUET.js","sourcesContent":["import * as React from 'react'\nimport { ChevronRight, House } from 'lucide-react'\nimport { cn } from '../../lib/utils'\n\nexport interface BreadcrumbItem {\n  label: string\n  href?: string\n  icon?: React.ReactNode\n}\n\nexport interface BreadcrumbLinkProps {\n  href: string\n  className?: string\n  title?: string\n  'aria-label'?: string\n  children: React.ReactNode\n}\n\nexport interface BreadcrumbsProps extends React.ComponentProps<'nav'> {\n  items?: BreadcrumbItem[]\n  currentLabel?: string\n  homeHref?: string\n  homeLabel?: string\n  linkComponent?: React.ComponentType<BreadcrumbLinkProps>\n}\n\nconst linkClass =\n  'text-[10px] font-bold uppercase tracking-wider text-[var(--as-muted-fg)] transition-colors hover:text-[var(--as-primary)]'\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(\n    {\n      items = [],\n      currentLabel,\n      homeHref,\n      homeLabel = 'Home',\n      linkComponent: LinkComponent = 'a',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    if (items.length === 0 && !currentLabel && !homeHref) return null\n\n    return (\n      <nav\n        ref={ref}\n        data-as=\"breadcrumbs\"\n        aria-label=\"Breadcrumb\"\n        className={cn(\n          'flex flex-wrap items-center gap-x-1.5 gap-y-0.5 leading-tight',\n          className,\n        )}\n        {...props}\n      >\n        {homeHref ? (\n          <>\n            <LinkComponent href={homeHref} className=\"shrink-0 p-0.5 text-[var(--as-muted-fg)] transition-colors hover:text-[var(--as-primary)]\" aria-label={homeLabel} title={homeLabel}>\n              <House className=\"size-3\" aria-hidden />\n            </LinkComponent>\n            {items.length > 0 || currentLabel ? (\n              <ChevronRight className=\"size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60\" aria-hidden />\n            ) : null}\n          </>\n        ) : null}\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1 && !currentLabel\n          return (\n            <React.Fragment key={`${item.label}-${index}`}>\n              {index > 0 || homeHref ? (\n                <ChevronRight className=\"size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60\" aria-hidden />\n              ) : null}\n              {item.href && !isLast ? (\n                <LinkComponent href={item.href} className={linkClass}>\n                  {item.icon}\n                  {item.label}\n                </LinkComponent>\n              ) : (\n                <span className={linkClass}>\n                  {item.icon}\n                  {item.label}\n                </span>\n              )}\n            </React.Fragment>\n          )\n        })}\n        {currentLabel ? (\n          <>\n            {items.length > 0 || homeHref ? (\n              <ChevronRight className=\"size-2.5 shrink-0 text-[var(--as-muted-fg)] opacity-60\" aria-hidden />\n            ) : null}\n            <span\n              aria-current=\"page\"\n              className=\"text-[10px] font-black uppercase tracking-wider text-[var(--as-fg)]\"\n            >\n              {currentLabel}\n            </span>\n          </>\n        ) : null}\n      </nav>\n    )\n  },\n)\n"]}

package/dist/chunk-TPLQL62V.js

@@ -0,0 +1,124 @@
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var ChipInput = React.forwardRef(
+  function ChipInput2({
+    value,
+    onChange,
+    placeholder,
+    separators = [","],
+    inputLabel = "Add",
+    removeLabel = "Remove",
+    disabled = false,
+    className,
+    ...props
+  }, ref) {
+    const [draft, setDraft] = React.useState("");
+    const inputRef = React.useRef(null);
+    const commit = (raw) => {
+      const separatorPattern = new RegExp(
+        `[${separators.map(escapeRegex).join("")}\\n\\r]`
+      );
+      const existing = new Set(value.map((chip) => chip.toLowerCase()));
+      const next = [...value];
+      for (const part of raw.split(separatorPattern)) {
+        const trimmed = part.trim();
+        if (trimmed && !existing.has(trimmed.toLowerCase())) {
+          next.push(trimmed);
+          existing.add(trimmed.toLowerCase());
+        }
+      }
+      if (next.length !== value.length) {
+        onChange(next);
+      }
+      setDraft("");
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || separators.includes(event.key)) {
+        event.preventDefault();
+        commit(draft);
+      } else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+        event.preventDefault();
+        onChange(value.slice(0, -1));
+      }
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text");
+      commit(`${draft}${text}`);
+    };
+    const removeAt = (index) => {
+      onChange(value.filter((_, i) => i !== index));
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-as": "chip-input",
+        role: "group",
+        onClick: () => {
+          if (!disabled) inputRef.current?.focus();
+        },
+        className: cn(
+          "flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-2.5 py-1.5 text-sm outline-none transition-colors focus-within:border-[var(--as-focus-ring)] focus-within:ring-2 focus-within:ring-[var(--as-focus-ring)]",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          value.map((chip, index) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-[calc(var(--as-radius-sm)-2px)] bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] py-0.5 pl-2.5 pr-1.5 text-xs font-medium text-[var(--as-primary)]",
+              children: [
+                chip,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled,
+                    "aria-label": `${removeLabel} ${chip}`,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      removeAt(index);
+                    },
+                    className: "cursor-pointer rounded-full opacity-70 transition-colors hover:text-[var(--as-danger)] hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": true })
+                  }
+                )
+              ]
+            },
+            `${chip}-${index}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              "aria-label": inputLabel,
+              disabled,
+              value: draft,
+              onChange: (event) => setDraft(event.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              onBlur: () => {
+                if (draft.trim()) commit(draft);
+              },
+              placeholder: value.length === 0 ? placeholder : "",
+              className: "min-w-24 flex-1 bg-transparent text-sm text-[var(--as-fg)] outline-none placeholder:text-[var(--as-muted-fg)]"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { ChipInput };
+//# sourceMappingURL=chunk-TPLQL62V.js.map
+//# sourceMappingURL=chunk-TPLQL62V.js.map

package/dist/chunk-TPLQL62V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chip-input/ChipInput.tsx"],"names":["ChipInput"],"mappings":"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","file":"chunk-TPLQL62V.js","sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '../../lib/utils'\n\nexport interface ChipInputProps\n  extends Omit<React.ComponentProps<'div'>, 'onChange'> {\n  value: string[]\n  onChange: (value: string[]) => void\n  placeholder?: string\n  separators?: string[]\n  inputLabel?: string\n  removeLabel?: string\n  disabled?: boolean\n}\n\nfunction escapeRegex(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\nexport const ChipInput = React.forwardRef<HTMLDivElement, ChipInputProps>(\n  function ChipInput(\n    {\n      value,\n      onChange,\n      placeholder,\n      separators = [','],\n      inputLabel = 'Add',\n      removeLabel = 'Remove',\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [draft, setDraft] = React.useState('')\n    const inputRef = React.useRef<HTMLInputElement>(null)\n\n    const commit = (raw: string) => {\n      const separatorPattern = new RegExp(\n        `[${separators.map(escapeRegex).join('')}\\\\n\\\\r]`,\n      )\n      const existing = new Set(value.map((chip) => chip.toLowerCase()))\n      const next = [...value]\n      for (const part of raw.split(separatorPattern)) {\n        const trimmed = part.trim()\n        if (trimmed && !existing.has(trimmed.toLowerCase())) {\n          next.push(trimmed)\n          existing.add(trimmed.toLowerCase())\n        }\n      }\n      if (next.length !== value.length) {\n        onChange(next)\n      }\n      setDraft('')\n    }\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' || separators.includes(event.key)) {\n        event.preventDefault()\n        commit(draft)\n      } else if (event.key === 'Backspace' && draft === '' && value.length > 0) {\n        event.preventDefault()\n        onChange(value.slice(0, -1))\n      }\n    }\n\n    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n      event.preventDefault()\n      const text = event.clipboardData.getData('text')\n      commit(`${draft}${text}`)\n    }\n\n    const removeAt = (index: number) => {\n      onChange(value.filter((_, i) => i !== index))\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-as=\"chip-input\"\n        role=\"group\"\n        onClick={() => {\n          if (!disabled) inputRef.current?.focus()\n        }}\n        className={cn(\n          'flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-2.5 py-1.5 text-sm outline-none transition-colors focus-within:border-[var(--as-focus-ring)] focus-within:ring-2 focus-within:ring-[var(--as-focus-ring)]',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {value.map((chip, index) => (\n          <span\n            key={`${chip}-${index}`}\n            className=\"inline-flex items-center gap-1 rounded-[calc(var(--as-radius-sm)-2px)] bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] py-0.5 pl-2.5 pr-1.5 text-xs font-medium text-[var(--as-primary)]\"\n          >\n            {chip}\n            <button\n              type=\"button\"\n              disabled={disabled}\n              aria-label={`${removeLabel} ${chip}`}\n              onClick={(event) => {\n                event.stopPropagation()\n                removeAt(index)\n              }}\n              className=\"cursor-pointer rounded-full opacity-70 transition-colors hover:text-[var(--as-danger)] hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none\"\n            >\n              <X className=\"size-3\" aria-hidden />\n            </button>\n          </span>\n        ))}\n        <input\n          ref={inputRef}\n          type=\"text\"\n          aria-label={inputLabel}\n          disabled={disabled}\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onBlur={() => {\n            if (draft.trim()) commit(draft)\n          }}\n          placeholder={value.length === 0 ? placeholder : ''}\n          className=\"min-w-24 flex-1 bg-transparent text-sm text-[var(--as-fg)] outline-none placeholder:text-[var(--as-muted-fg)]\"\n        />\n      </div>\n    )\n  },\n)\n"]}