@nexub/react 6.1.0 → 6.2.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.0",
+  "version": "6.2.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",

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/index.d.ts

@@ -220,6 +220,12 @@ export { Fieldset } from './components/Fieldset/index.js';
 export type { FieldsetProps } from './components/Fieldset/index.js';
 export { InlineEdit } from './components/InlineEdit/index.js';
 export type { InlineEditProps } from './components/InlineEdit/index.js';
+export { TimePicker } from './components/TimePicker/index.js';
+export type { TimePickerProps } from './components/TimePicker/index.js';
+export { DateTimePicker } from './components/DateTimePicker/index.js';
+export type { DateTimePickerProps } from './components/DateTimePicker/index.js';
+export { EventCalendar } from './components/EventCalendar/index.js';
+export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './components/EventCalendar/index.js';
 export type { OTPInputProps } from './components/OTPInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';

package/dist/index.js

@@ -124,6 +124,9 @@ import { OTPInput } from "./components/OTPInput/index.js";
 import { Form, useForm } from "./components/Form/index.js";
 import { Fieldset } from "./components/Fieldset/index.js";
 import { InlineEdit } from "./components/InlineEdit/index.js";
+import { TimePicker } from "./components/TimePicker/index.js";
+import { DateTimePicker } from "./components/DateTimePicker/index.js";
+import { EventCalendar } from "./components/EventCalendar/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -169,6 +172,7 @@ export {
   DataTable,
   DatePicker,
   DateRangePicker,
+  DateTimePicker,
   Dialog,
   DiffView,
   DonutChart,
@@ -177,6 +181,7 @@ export {
   EmptyState,
   EmptyStatePreset,
   ErrorState,
+  EventCalendar,
   EyebrowChip,
   Fade,
   Fieldset,
@@ -266,6 +271,7 @@ export {
   ThemeProvider,
   ThemeScript,
   ThinkingIndicator,
+  TimePicker,
   Toast,
   Toaster,
   Toggle,