@neuronection/assistant-ui 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# @neuronection/assistant-ui
+
+## 0.3.0
+
+### Minor Changes
+
+- [`e8a56d3`](https://github.com/neuronection/assistant-ui/commit/e8a56d33427fc2e8e03784fe7959037f24efb95a) Thanks [@constLiakos](https://github.com/constLiakos)! - Add the six components career-assistant's Phase-2 adoption needs, all shared
+  with health-assistant (catalog T1): `ChipInput`, `ChipList` (superset with
+  variants + clickable chips), `Table` (tokenized, with empty state), `RangeBar`
+  (with optional `label`/`valueLabel`), `ScaleSlider` (+ `scaleColorForValue`),
+  and `DatePicker` (Radix popover calendar with days/months/years views, min/max,
+  allowClear, and a roving-tabindex arrow-key day grid — an a11y upgrade over
+  both app copies). New dependency: `date-fns`.
+
+### Patch Changes
+
+- [`e5252f2`](https://github.com/neuronection/assistant-ui/commit/e5252f26d6f8732a2f5ba4a3fe849b4df50b30c2) Thanks [@constLiakos](https://github.com/constLiakos)! - Ship CHANGELOG.md inside the published package so consuming apps (and their agents) can read what changed without visiting GitHub.
+
+## 0.2.0
+
+### Minor Changes
+
+- [`ec2a8bf`](https://github.com/neuronection/assistant-ui/commit/ec2a8bf7d49bb96435990e9b8cca4d74fc31748b) Thanks [@constLiakos](https://github.com/constLiakos)! - Phase 1: 16 new modules for study-assistant full adoption
+
+  - PopoverButton: self-contained trigger+panel popover on Radix (hover-open, lazy children, closeSignal, controlled mode)
+  - InfoButton + FieldLabel: info affordances with popover help
+  - Menu: Radix DropdownMenu primitives (Menu, MenuItem, MenuContent…) + items-driven ActionMenu
+  - ContextMenu: coordinate-anchored menu with full Radix keyboard/typeahead semantics
+  - Combobox + ComboboxMulti: WAI-ARIA listbox pattern, grouping, async mode (onSearchChange + loading), multi-select, clearable
+  - FormModal: form-in-modal shell (submit/cancel/busy/disabled) on Modal primitives
+  - Wizard + Stepper: wizard state machine with per-step validation gates, modal and drawer variants; dots/labels steppers
+  - Ported from study-assistant ui/: CheckIndicator, SearchInput, ExpandableSearch, SelectionBar, ViewToggle, ErrorBanner, UndoNotice, Marquee (useMarquee/MarqueeBand/MarqueeSurface)
+
+  All components: forwardRef where DOM-emitting, semantic --as-\* tokens only, data-as hooks, English-default label props, keyboard-nav + axe tests.
+
+## 0.1.0
+
+### Minor Changes
+
+- [`a211003`](https://github.com/neuronection/assistant-ui/commit/a211003348a5248f65a7995806500325408b6f92) Thanks [@constLiakos](https://github.com/constLiakos)! - Initial release (Phase 0): Button, Badge, Card, Modal, Popover, Tooltip + InfoTooltip, Input, Spinner, EmptyState, ConfirmationModal, Portal, ThemeScope and `cn()` — CSS-variable design tokens, precompiled `styles.css`, React 18/19 and Tailwind 3/4 compatible.

package/README.md

@@ -55,13 +55,41 @@ Tailwind is **not** required — but if your app uses Tailwind 3 or 4, both work
 without configuration. Do **not** add this package to your Tailwind
 `content`/`@source`.
 
+## Documentation
+
+- [Local development](./docs/local-development.md) — live-test library changes in the family apps without publishing
+- [Adopting in an app](./docs/adoption.md) — the install/switchover recipe each family app follows
+- [Theming](./docs/theming.md) — tokens, app themes, styling hooks
+- [Publishing](./docs/publishing.md) — the Changesets release flow and CI setup
+- [Adding a component](./docs/adding-a-component.md) — rules, checklist, required companions
+
 ## Components
 
-Button, Badge, Card (+Header/Title/Description/Content/Footer), Modal
-(+Trigger/Header/Title/Description/Footer/Close), Popover, Tooltip +
-InfoTooltip, Input, Spinner, EmptyState, ConfirmationModal, Portal,
-ThemeScope, `cn()`. Full props in the
-[gallery](https://neuronection.github.io/assistant-ui/) (Ladle build).
+Every module has its own entry point (`import { Menu } from
+'@neuronection/assistant-ui/menu'`) and everything is re-exported from the
+package root. Authoritative props for your installed version: the `.d.ts`
+files in the package's `dist/`. Visual reference:
+[gallery](https://neuronection.github.io/assistant-ui/).
+
+| Module | Exports |
+|---|---|
+| `button` / `badge` / `card` | `Button`, `buttonVariants` · `Badge`, `badgeVariants` · `Card`, `CardHeader/Title/Description/Content/Footer` |
+| `modal` / `confirmation-modal` / `form-modal` | `Modal` + parts, `modalContentVariants` · `ConfirmationModal` · `FormModal` (form-in-modal shell) |
+| `popover` / `popover-button` | compound Radix `Popover` + parts · `PopoverButton` (self-contained trigger + panel, hover-open, lazy children, `closeSignal`) |
+| `menu` / `context-menu` | `Menu`, `MenuTrigger/Content/Item/Separator/Label`, `ActionMenu` (items-driven) · `ContextMenu` (coordinate-anchored, `{x, y, items, onClose}`) |
+| `combobox` | `Combobox`, `ComboboxMulti` — async mode (`onSearchChange` + `loading`), grouping, full keyboard nav |
+| `tooltip` | `Tooltip` + parts, `InfoTooltip` |
+| `wizard` | `Wizard` (steps config + `renderStep`, per-step validation gates, modal/drawer variants), `Stepper` (dots/labels) |
+| `input` / `search-input` / `expandable-search` | `Input` (label/hint/error wiring) · `SearchInput` · `ExpandableSearch` |
+| `chip-input` / `chip-list` | `ChipInput` (Enter/comma commit, paste-splits, Backspace-removes) · `ChipList` (variant pills, clickable, removable) |
+| `date-picker` | `DatePicker` (popover calendar: days/months/years views, min/max, `allowClear`, arrow-key day grid) |
+| `range-bar` / `scale-slider` | `RangeBar` (low–high band + value dot) · `ScaleSlider` (+ `scaleColorForValue`) |
+| `table` | `Table` (headers/rows, built-in empty state) |
+| `check-indicator` / `selection-bar` / `view-toggle` | `CheckIndicator` (tri-state) · `SelectionBar` (bulk-select bar) · `ViewToggle` (grid/list) |
+| `error-banner` / `undo-notice` / `empty-state` / `spinner` | presentational feedback: alert banner with `action` slot · undo toast · `EmptyState` · `Spinner` |
+| `info-button` / `field-label` | `InfoButton` (info popover) · `FieldLabel` (label + info affordance) |
+| `marquee` | `useMarquee`, `MarqueeSurface`, `MarqueeBand` (rubber-band selection) |
+| `portal` / `theme-scope` / `tokens` | `Portal` · `ThemeScope` · token name lists + types |
 
 API rules: controlled-first, `className` merges (never replaces), `asChild`
 where it makes sense, refs forwarded everywhere, English label props with
@@ -77,11 +105,14 @@ pnpm test --watch
 pnpm verify       # lint + typecheck + test + build
 ```
 
-Testing library changes inside a real app (temporary, never commit):
+Testing library changes inside a real app (no publishing needed) — full
+guide in [docs/local-development.md](./docs/local-development.md):
 
-```jsonc
-// app package.json pnpm.overrides
-{ "@neuronection/assistant-ui": "link:../assistant-ui/dist" }
+```bash
+pnpm watch                                  # library: rebuild TS + CSS on change
+node scripts/dev-link.mjs link <app-dir>    # wire app (pnpm override / npm file:)
+# ...run the app dev server; reload picks up library changes
+node scripts/dev-link.mjs unlink <app-dir>  # restore before committing in the app
 ```
 
 Releases happen via [Changesets](./CONTRIBUTING.md) — CI publishes, never a

package/dist/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from './chunk-NQQNTK6L.js';
+export { Badge, badgeVariants } from './chunk-SKTLC2XY.js';
 //# sourceMappingURL=badge.js.map
 //# sourceMappingURL=badge.js.map

package/dist/button.js

@@ -1,3 +1,3 @@
-export { Button, buttonVariants } from './chunk-56VRWCLJ.js';
+export { Button, buttonVariants } from './chunk-GTXGTQ6F.js';
 //# sourceMappingURL=button.js.map
 //# sourceMappingURL=button.js.map

package/dist/check-indicator.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface CheckIndicatorProps {
+    checked: boolean;
+    label: string;
+    onToggle: () => void;
+    mixed?: boolean;
+    className?: string;
+}
+declare const CheckIndicator: React.ForwardRefExoticComponent<CheckIndicatorProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { CheckIndicator, type CheckIndicatorProps };

package/dist/check-indicator.js

@@ -0,0 +1,3 @@
+export { CheckIndicator } from './chunk-XE4TFW63.js';
+//# sourceMappingURL=check-indicator.js.map
+//# sourceMappingURL=check-indicator.js.map

package/dist/check-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"check-indicator.js"}

package/dist/chip-input.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface ChipInputProps extends Omit<React.ComponentProps<'div'>, 'onChange'> {
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    separators?: string[];
+    inputLabel?: string;
+    removeLabel?: string;
+    disabled?: boolean;
+}
+declare const ChipInput: React.ForwardRefExoticComponent<Omit<ChipInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ChipInput, type ChipInputProps };

package/dist/chip-input.js

@@ -0,0 +1,3 @@
+export { ChipInput } from './chunk-TPLQL62V.js';
+//# sourceMappingURL=chip-input.js.map
+//# sourceMappingURL=chip-input.js.map

package/dist/chip-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chip-input.js"}

package/dist/chip-list.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type ChipVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+interface ChipListProps extends React.ComponentProps<'div'> {
+    items: ReadonlyArray<string | null | undefined>;
+    onRemove?: (item: string) => void;
+    onItemClick?: (value: string, index: number) => void;
+    variant?: ChipVariant;
+    emptyText?: string;
+    showChevron?: boolean;
+    removeLabel?: string;
+}
+declare const ChipList: React.ForwardRefExoticComponent<Omit<ChipListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ChipList, type ChipListProps, type ChipVariant };

package/dist/chip-list.js

@@ -0,0 +1,3 @@
+export { ChipList } from './chunk-XLD2BPTT.js';
+//# sourceMappingURL=chip-list.js.map
+//# sourceMappingURL=chip-list.js.map

package/dist/chip-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chip-list.js"}

package/dist/chunk-2KO2YIZN.js

@@ -0,0 +1,357 @@
+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,
+    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(
+                  "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)] disabled:cursor-not-allowed disabled:opacity-50",
+                  allowClear && selectedDate && !disabled && "pr-8"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      className: "size-4 shrink-0 text-[var(--as-muted-fg)]",
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 truncate text-left",
+                        !selectedDate && "text-[var(--as-muted-fg)]"
+                      ),
+                      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-2KO2YIZN.js.map
+//# sourceMappingURL=chunk-2KO2YIZN.js.map

package/dist/chunk-2KO2YIZN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/date-picker/DatePicker.tsx"],"names":["DatePicker","CalendarIcon"],"mappings":"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","file":"chunk-2KO2YIZN.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  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      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                  '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)] disabled:cursor-not-allowed disabled:opacity-50',\n                  allowClear && selectedDate && !disabled && 'pr-8',\n                )}\n              >\n                <CalendarIcon\n                  className=\"size-4 shrink-0 text-[var(--as-muted-fg)]\"\n                  aria-hidden\n                />\n                <span\n                  className={cn(\n                    'flex-1 truncate text-left',\n                    !selectedDate && 'text-[var(--as-muted-fg)]',\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"]}