@nexub/react 6.1.0 → 6.3.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.0",
+  "version": "6.3.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
@@ -342,6 +342,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "date-time-picker",
+      "name": "Date Time Picker",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "dialog",
       "name": "Dialog",
@@ -401,6 +410,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "event-calendar",
+      "name": "Event Calendar",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "eyebrow-chip",
       "name": "Eyebrow Chip",
@@ -1127,6 +1145,18 @@
         "Render it only while waiting and remove it when tokens start, so it is not announced again."
       ]
     },
+    {
+      "slug": "time-picker",
+      "name": "Time Picker",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "ArrowUp / ArrowDown: Changes the focused segment (hour, minute, AM/PM).",
+        "ArrowLeft / ArrowRight: Moves between segments."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "toast",
       "name": "Toast",
@@ -1174,6 +1204,24 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "tree-view",
+      "name": "Tree View",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "ArrowDown / ArrowUp: Next or previous visible item.",
+        "ArrowRight: Opens a closed item, or moves to its first child. Mirrored in RTL.",
+        "ArrowLeft: Closes an open item, or moves to its parent. Mirrored in RTL.",
+        "Home / End: First or last visible item.",
+        "Enter / Space: Selects the item, or toggles its checkbox.",
+        "Type a letter: Moves to the next item starting with the typed text."
+      ],
+      "screenReader": [
+        "The tree is one tab stop (roving tabindex); it returns to the last focused or the selected item."
+      ]
+    },
     {
       "slug": "activity-feed",
       "name": "ActivityFeed",

package/dist/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState } from '@tanstack/react-table';
+import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -75,5 +75,14 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     pagination?: {
         pageSize?: number;
     };
+    /**
+     * Nested rows (a tree table): return a row's children. The first column gets
+     * an expand toggle and indents each level. Sorting sorts within each level.
+     */
+    getSubRows?: (row: TData, index: number) => TData[] | undefined;
+    /** Expanded rows by id, or `true` for all. */
+    expanded?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    onExpandedChange?: (expanded: ExpandedState) => void;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -7,9 +7,10 @@ import {
   getSortedRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
+  getExpandedRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowUp, ArrowDown, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
+import { ArrowUp, ArrowDown, ChevronDown, ChevronRight, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, pressable } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
@@ -102,6 +103,34 @@ const useAllRows = (count) => ({
   before: 0,
   after: 0
 });
+function TreeCell({
+  row,
+  expandLabel,
+  collapseLabel,
+  children
+}) {
+  const open = row.getIsExpanded();
+  const ref = React.useCallback(
+    (el) => {
+      if (el) el.style.paddingInlineStart = `${row.depth * 1.5}rem`;
+    },
+    [row.depth]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, className: "flex items-center gap-1", children: [
+    row.getCanExpand() ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-label": open ? collapseLabel : expandLabel,
+        onClick: row.toggleExpanded,
+        className: "-ms-1 inline-flex size-6 shrink-0 items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)] hover:bg-[var(--color-surface-container-high)]",
+        children: open ? /* @__PURE__ */ jsx(ChevronDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", className: "rtl:-scale-x-100" })
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "-ms-1 size-6 shrink-0", "aria-hidden": "true" }),
+    children
+  ] });
+}
 const px = (n) => typeof n === "number" ? `${n}px` : n;
 const apply = (u, prev) => typeof u === "function" ? u(prev) : u;
 const columnLabel = (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id;
@@ -134,6 +163,10 @@ function DataTable({
   grid = false,
   rowWindow,
   pagination,
+  getSubRows,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
   caption,
   captionHidden = false,
   className,
@@ -174,6 +207,11 @@ function DataTable({
     defaultValue: {},
     onChange: onColumnPinningChange
   });
+  const [expanded = {}, setExpanded] = useControllableState({
+    value: expandedProp,
+    defaultValue: defaultExpanded ?? {},
+    onChange: onExpandedChange
+  });
   const [announcement, setAnnouncement] = React.useState("");
   const tableRef = React.useRef(null);
   const gridNav = React.useMemo(() => createGridNavigation(dir), [dir]);
@@ -223,9 +261,12 @@ function DataTable({
       columnVisibility,
       columnSizing,
       columnOrder,
-      columnPinning
+      columnPinning,
+      expanded: getSubRows ? expanded : void 0
     }),
     [
+      getSubRows,
+      expanded,
       enableSorting,
       sorting,
       enableRowSelection,
@@ -257,6 +298,12 @@ function DataTable({
     getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    getSubRows,
+    getExpandedRowModel: getSubRows ? getExpandedRowModel() : void 0,
+    onExpandedChange: getSubRows ? (u) => setExpanded(apply(u, expanded)) : void 0,
+    // With pages, count top-level rows so a parent and its children stay together
+    // (TanStack then expands inside the page model; without pages it must not).
+    paginateExpandedRows: !pagination,
     enableRowSelection,
     manualPagination: false
   });
@@ -466,7 +513,7 @@ function DataTable({
                   "data-index": i,
                   "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
                   "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
-                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                  children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
                     TableCell,
                     {
                       ref: pinned || enableColumnResizing ? placeCell(cell.column) : void 0,
@@ -476,7 +523,7 @@ function DataTable({
                         pinClass(cell.column),
                         enableColumnResizing && "truncate"
                       ),
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      children: getSubRows && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel: messages.expandRow, collapseLabel: messages.collapseRow, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
                     },
                     cell.id
                   ))

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Locale } from 'date-fns';
+export interface DateTimePickerProps {
+    /** Date and time in the reader's local time. */
+    value?: Date;
+    onChange?: (value: Date | undefined) => void;
+    /** Time used when a date is picked first. @default '09:00' */
+    defaultTime?: string;
+    minuteStep?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    /** IANA zone to name next to the fields (label only; the value stays local). */
+    timeZone?: string;
+    'aria-label'?: string;
+    className?: string;
+    locale?: Locale;
+}
+/** A DatePicker and a TimePicker that edit one `Date` together. */
+export declare function DateTimePicker({ value, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { TimePicker } from "../TimePicker/TimePicker.js";
+import { useIntlLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const pad = (n) => String(n).padStart(2, "0");
+const timeOf = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+const withTime = (d, time) => {
+  const [h = 0, m = 0] = time.split(":").map(Number);
+  const next = new Date(d);
+  next.setHours(h, m, 0, 0);
+  return next;
+};
+function DateTimePicker({
+  value,
+  onChange,
+  defaultTime = "09:00",
+  minuteStep,
+  minDate,
+  maxDate,
+  disabled,
+  timeZone,
+  "aria-label": ariaLabel,
+  className,
+  locale
+}) {
+  const messages = useNexubMessages();
+  const intlLocale = useIntlLocale();
+  const [pendingTime, setPendingTime] = React.useState(defaultTime);
+  const time = value ? timeOf(value) : pendingTime;
+  const zoneName = timeZone ? new Intl.DateTimeFormat(intlLocale, { timeZone, timeZoneName: "shortOffset" }).formatToParts(value ?? /* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value ?? timeZone : void 0;
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": ariaLabel, className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-40 flex-1", children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        "aria-label": messages.dateLabel,
+        value,
+        onChange: (date) => onChange?.(date ? withTime(date, time) : void 0),
+        minDate,
+        maxDate,
+        disabled,
+        locale
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        "aria-label": messages.timeLabel,
+        wrapperClassName: "w-36",
+        value: time,
+        minuteStep,
+        disabled,
+        onValueChange: (next) => {
+          if (!next) return;
+          if (value) onChange?.(withTime(value, next));
+          else setPendingTime(next);
+        }
+      }
+    ),
+    zoneName && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-muted)]", children: messages.timeZoneLabel(`${zoneName} (${timeZone})`) })
+  ] });
+}
+export {
+  DateTimePicker
+};

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker } from './DateTimePicker.js';
+export type { DateTimePickerProps } from './DateTimePicker.js';

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,4 @@
+import { DateTimePicker } from "./DateTimePicker.js";
+export {
+  DateTimePicker
+};

package/dist/components/EventCalendar/EventCalendar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { type Day } from 'date-fns';
+export type EventCalendarView = 'month' | 'week';
+export type EventTone = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    /** Inclusive end; events spanning days show on each of them. */
+    end?: Date;
+    /** Hides the start time. */
+    allDay?: boolean;
+    /** @default 'primary' */
+    tone?: EventTone;
+}
+export interface EventCalendarProps {
+    events: CalendarEvent[];
+    /** Any day inside the shown month or week. */
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    view?: EventCalendarView;
+    defaultView?: EventCalendarView;
+    onViewChange?: (view: EventCalendarView) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    /** A day's number, or its "N more" link in month view. */
+    onDayClick?: (date: Date) => void;
+    /** Events shown per day in month view before "N more". @default 3 */
+    maxEventsPerDay?: number;
+    /** 0 = Sunday. Defaults to the locale's first day of the week. */
+    weekStartsOn?: Day;
+    className?: string;
+}
+/**
+ * A month or week grid of events. Display only: your app owns the events and
+ * decides what a click on an event or a day does.
+ */
+export declare function EventCalendar({ events, date: dateProp, defaultDate, onDateChange, view: viewProp, defaultView, onViewChange, onEventClick, onDayClick, maxEventsPerDay, weekStartsOn: weekStartsOnProp, className, }: EventCalendarProps): React.JSX.Element;

package/dist/components/EventCalendar/EventCalendar.js

@@ -0,0 +1,204 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek
+} from "date-fns";
+import { ChevronLeft, ChevronRight } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useIntlLocale, useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const tones = {
+  primary: "bg-[var(--color-primary-container)] text-[var(--color-on-primary-container)]",
+  success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
+  warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
+  error: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+  info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]"
+};
+function localeWeekStart(locale) {
+  try {
+    const loc = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+    const firstDay = loc.getWeekInfo?.().firstDay ?? loc.weekInfo?.firstDay;
+    return firstDay ? firstDay % 7 : 0;
+  } catch {
+    return 0;
+  }
+}
+function EventCalendar({
+  events,
+  date: dateProp,
+  defaultDate,
+  onDateChange,
+  view: viewProp,
+  defaultView = "month",
+  onViewChange,
+  onEventClick,
+  onDayClick,
+  maxEventsPerDay = 3,
+  weekStartsOn: weekStartsOnProp,
+  className
+}) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const intlLocale = useIntlLocale();
+  const [date = /* @__PURE__ */ new Date(), setDate] = useControllableState({
+    value: dateProp,
+    defaultValue: defaultDate ?? /* @__PURE__ */ new Date(),
+    onChange: onDateChange
+  });
+  const [view = "month", setView] = useControllableState({
+    value: viewProp,
+    defaultValue: defaultView,
+    onChange: onViewChange
+  });
+  const weekStartsOn = weekStartsOnProp ?? localeWeekStart(intlLocale);
+  const opts = { weekStartsOn };
+  const month = view === "month";
+  const first = startOfWeek(month ? startOfMonth(date) : date, opts);
+  const last = endOfWeek(month ? endOfMonth(date) : date, opts);
+  const days = [];
+  for (let d = first; d <= last; d = addDays(d, 1)) days.push(d);
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+  const sorted = React.useMemo(
+    () => [...events].sort((a, b) => a.start.getTime() - b.start.getTime()),
+    [events]
+  );
+  const eventsOn = (day) => sorted.filter((e) => e.start <= endOfDay(day) && (e.end ?? e.start) >= startOfDay(day));
+  const fmt = (o) => new Intl.DateTimeFormat(intlLocale, o);
+  const title = month ? fmt({ month: "long", year: "numeric" }).format(date) : fmt({ month: "short", day: "numeric", year: "numeric" }).formatRange(days[0], days[6]);
+  const timeFmt = fmt({ timeStyle: "short" });
+  const fullFmt = fmt({ dateStyle: "full" });
+  const today = /* @__PURE__ */ new Date();
+  const step = (n) => setDate(month ? addMonths(date, n) : addWeeks(date, n));
+  const [Back, Forward] = dir === "rtl" ? [ChevronRight, ChevronLeft] : [ChevronLeft, ChevronRight];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: "me-auto text-title-lg font-semibold text-[var(--color-on-surface)]", children: title }),
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: () => setDate(/* @__PURE__ */ new Date()), children: t.today }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", label: month ? t.previousMonth : t.previousWeek, onClick: () => step(-1), children: /* @__PURE__ */ jsx(Back, { size: "sm", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", label: month ? t.nextMonth : t.nextWeek, onClick: () => step(1), children: /* @__PURE__ */ jsx(Forward, { size: "sm", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs(
+        SegmentedControl.Root,
+        {
+          size: "sm",
+          "aria-label": t.calendarView,
+          value: view,
+          onValueChange: (v) => v && setView(v),
+          children: [
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "month", children: t.monthView }),
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "week", children: t.weekView })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed border-collapse text-body-sm", children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weeks[0].map((d) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          abbr: fmt({ weekday: "long" }).format(d),
+          className: "pb-2 text-label-md font-medium text-[var(--color-on-surface-muted)]",
+          children: fmt({ weekday: "short" }).format(d)
+        },
+        d.getDay()
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((day) => {
+        const list = eventsOn(day);
+        const shown = month ? list.slice(0, maxEventsPerDay) : list;
+        const hidden = list.length - shown.length;
+        const isToday = isSameDay(day, today);
+        const outside = month && !isSameMonth(day, date);
+        return /* @__PURE__ */ jsxs(
+          "td",
+          {
+            "aria-current": isToday ? "date" : void 0,
+            className: cn(
+              "border border-[var(--color-outline-variant)] p-1 align-top",
+              month ? "h-28" : "h-80",
+              outside && "bg-[var(--color-surface-container-low)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                DayNumber,
+                {
+                  day,
+                  label: fullFmt.format(day),
+                  isToday,
+                  muted: outside,
+                  onClick: onDayClick
+                }
+              ),
+              /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col gap-0.5", children: shown.map((e) => {
+                const time = e.allDay || !isSameDay(e.start, day) ? "" : timeFmt.format(e.start);
+                const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                  time && /* @__PURE__ */ jsx("span", { className: "me-1 tabular-nums opacity-80", children: time }),
+                  e.title
+                ] });
+                const cls = cn(
+                  "block w-full truncate rounded-shape-min px-1.5 py-0.5 text-start text-label-md",
+                  tones[e.tone ?? "primary"]
+                );
+                return /* @__PURE__ */ jsx("li", { children: onEventClick ? /* @__PURE__ */ jsx("button", { type: "button", className: cn(cls, "hover:opacity-90"), onClick: () => onEventClick(e), children: body }) : /* @__PURE__ */ jsx("span", { className: cls, children: body }) }, e.id);
+              }) }),
+              hidden > 0 && (onDayClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "min-h-6 px-1.5 text-label-md text-[var(--color-on-surface-variant)] hover:underline",
+                  onClick: () => onDayClick(day),
+                  children: t.moreCount(hidden)
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 block px-1.5 text-label-md text-[var(--color-on-surface-variant)]", children: t.moreCount(hidden) }))
+            ]
+          },
+          day.toISOString()
+        );
+      }) }, week[0].toISOString())) })
+    ] })
+  ] });
+}
+function DayNumber({
+  day,
+  label,
+  isToday,
+  muted,
+  onClick
+}) {
+  const cls = cn(
+    "inline-flex size-7 items-center justify-center rounded-full text-label-md tabular-nums",
+    isToday ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : muted ? "text-[var(--color-on-surface-muted)]" : "text-[var(--color-on-surface)]"
+  );
+  const n = day.getDate();
+  return onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: cn(cls, !isToday && "hover:bg-[var(--color-surface-container-high)]"),
+      onClick: () => onClick(day),
+      children: n
+    }
+  ) : /* @__PURE__ */ jsxs("time", { dateTime: format(day, "yyyy-MM-dd"), className: cls, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: n }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+  ] });
+}
+export {
+  EventCalendar
+};

package/dist/components/EventCalendar/index.d.ts

@@ -0,0 +1,2 @@
+export { EventCalendar } from './EventCalendar.js';
+export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './EventCalendar.js';

package/dist/components/EventCalendar/index.js

@@ -0,0 +1,4 @@
+import { EventCalendar } from "./EventCalendar.js";
+export {
+  EventCalendar
+};

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type InputProps } from '../Input/Input.js';
+export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'step'> {
+    /** 24-hour `"HH:mm"`; the field shows 12 or 24 hours from the reader's locale. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Minutes between steps for the arrow keys and the picker. @default 1 */
+    minuteStep?: number;
+}
+/**
+ * A time field built on the native `<input type="time">`: locale-aware 12/24h,
+ * keyboard segments, the platform's picker on phones, and form submission.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "../Input/Input.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+const TimePicker = React.forwardRef(function TimePicker2({ value: valueProp, defaultValue, onValueChange, minuteStep = 1, ...props }, ref) {
+  const [value = "", setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type: "time",
+      step: minuteStep * 60,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      ...props
+    }
+  );
+});
+export {
+  TimePicker
+};

package/dist/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker.js';
+export type { TimePickerProps } from './TimePicker.js';

package/dist/components/TimePicker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker } from "./TimePicker.js";
+export {
+  TimePicker
+};

package/dist/components/TreeView/TreeView.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    /** Text for type-ahead when `label` isn't a string. */
+    textValue?: string;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+    /** Children exist but aren't loaded yet: expanding calls `onLoadChildren`. */
+    hasChildren?: boolean;
+    disabled?: boolean;
+}
+export interface TreeViewProps {
+    nodes: TreeNode[];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Single selection (ignored when `checkable`). */
+    selected?: string | null;
+    defaultSelected?: string | null;
+    onSelectedChange?: (id: string | null) => void;
+    /** Checkboxes with tri-state parents; `checked` lists every checked id, parents included. */
+    checkable?: boolean;
+    checked?: string[];
+    defaultChecked?: string[];
+    onCheckedChange?: (ids: string[]) => void;
+    /** Load a `hasChildren` node's children, then pass them in through `nodes`. */
+    onLoadChildren?: (node: TreeNode) => Promise<unknown>;
+    className?: string;
+}
+/**
+ * A hierarchy people can browse with the keyboard (ARIA tree): Arrow keys move
+ * and expand, Home/End jump, typing finds an item. Optional lazy children and
+ * tri-state checkboxes.
+ */
+export declare function TreeView({ nodes, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, checkable, checked: checkedProp, defaultChecked, onCheckedChange, onLoadChildren, className, ...aria }: TreeViewProps): React.JSX.Element;