atlas-react-kit 0.11.2 → 0.13.0

package/dist/internal/date-like.js

@@ -0,0 +1,33 @@
+import { parseISO } from "date-fns";
+/**
+ * Coerce a date-like value to a local `Date`.
+ * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
+ * shift when the runtime timezone is behind UTC.
+ */
+export function toDate(value) {
+    if (value == null || value === "")
+        return undefined;
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? undefined : value;
+    }
+    if (typeof value === "number") {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    const trimmed = value.trim();
+    const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    if (ymd) {
+        const year = Number(ymd[1]);
+        const month = Number(ymd[2]);
+        const day = Number(ymd[3]);
+        const date = new Date(year, month - 1, day);
+        if (date.getFullYear() !== year ||
+            date.getMonth() !== month - 1 ||
+            date.getDate() !== day) {
+            return undefined;
+        }
+        return date;
+    }
+    const parsed = parseISO(trimmed);
+    return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+}

package/dist/label.d.ts

@@ -1,4 +1,19 @@
 import * as React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
+    /**
+     * Shows a visible required marker after the text. The marker is hidden
+     * from assistive tech, so set `required` (or `aria-required`) on the
+     * control too; screen readers announce it from there.
+     */
+    required?: boolean;
+    /** Classes for the required marker (`data-slot="label-required"`). */
+    requiredClassName?: string;
+};
+/**
+ * Form label. `required` adds a visible marker; style it with
+ * `requiredClassName` or the `label-required` slot.
+ */
+declare function Label({ className, required, requiredClassName, children, ...props }: LabelProps): React.JSX.Element;
 export { Label };
+export type { LabelProps };

package/dist/label.js

@@ -1,9 +1,13 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
-function Label({ className, ...props }) {
-    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-xs font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props }));
+/**
+ * Form label. `required` adds a visible marker; style it with
+ * `requiredClassName` or the `label-required` slot.
+ */
+function Label({ className, required, requiredClassName, children, ...props }) {
+    return (_jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-xs font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: cn("-ml-1.5 text-destructive", requiredClassName), children: "*" })) : null] }));
 }
 export { Label };

package/dist/nav-link.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * Pill chrome for app-shell navigation. Inactive is muted text with an
+ * accent hover; active uses the shared selected wash, text, and border
+ * (`selectedState.active`) so the current page meets non-text contrast.
+ * Apps pass `active` — the kit has no router.
+ */
+declare const navLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Pill link for app-shell destinations (Calendar, Tasks, Settings). Pass
+ * `active` from the route; the kit does not read the URL. `asChild` wraps a
+ * router `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
+ *
+ * Not a tab: in-page view switches that belong in the URL use `TabsNav`
+ * and `tabsTriggerVariants()`. Next apps can import the optional adapter
+ * from `atlas-react-kit/next/nav-link` instead of composing `asChild`.
+ */
+declare function NavLink({ asChild, active, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    active: boolean;
+}): React.JSX.Element;
+export { NavLink, navLinkVariants };

package/dist/nav-link.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { focusRing, selectedState } from "./internal/styles.js";
+import { cn } from "./utils.js";
+/**
+ * Pill chrome for app-shell navigation. Inactive is muted text with an
+ * accent hover; active uses the shared selected wash, text, and border
+ * (`selectedState.active`) so the current page meets non-text contrast.
+ * Apps pass `active` — the kit has no router.
+ */
+const navLinkVariants = cva([
+    focusRing,
+    selectedState.active,
+    "inline-flex items-center gap-1.5 rounded-none border border-transparent px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent data-[state=active]:font-medium",
+]);
+/**
+ * Pill link for app-shell destinations (Calendar, Tasks, Settings). Pass
+ * `active` from the route; the kit does not read the URL. `asChild` wraps a
+ * router `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
+ *
+ * Not a tab: in-page view switches that belong in the URL use `TabsNav`
+ * and `tabsTriggerVariants()`. Next apps can import the optional adapter
+ * from `atlas-react-kit/next/nav-link` instead of composing `asChild`.
+ */
+function NavLink({ asChild, active, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(navLinkVariants(), className), ...props }));
+}
+export { NavLink, navLinkVariants };

package/dist/next/nav-link.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import Link from "next/link.js";
+/**
+ * Next.js adapter for the shell `NavLink` pill. Same contract as
+ * `TabsNavLink`: Next `Link` props plus a required `active` boolean. The
+ * kit still does not read the router; the app passes `active`.
+ */
+declare function NavLink({ active, className, ...props }: React.ComponentProps<typeof Link> & {
+    active: boolean;
+}): React.JSX.Element;
+export { NavLink };

package/dist/next/nav-link.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from "next/link.js";
+import { navLinkVariants } from "../nav-link.js";
+import { cn } from "../utils.js";
+/**
+ * Next.js adapter for the shell `NavLink` pill. Same contract as
+ * `TabsNavLink`: Next `Link` props plus a required `active` boolean. The
+ * kit still does not read the router; the app passes `active`.
+ */
+function NavLink({ active, className, ...props }) {
+    return (_jsx(Link, { "data-slot": "nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(navLinkVariants(), className), ...props }));
+}
+export { NavLink };

package/dist/picker-shell.d.ts

@@ -1,16 +1,42 @@
 import * as React from "react";
-import type { PropsBase } from "react-day-picker";
+import type { Locale } from "date-fns";
+import { type DateLike, type DateMatcher } from "./internal/date-like.js";
 import { PopoverContent } from "./popover.js";
 /**
  * Not a public entry. The trigger, popover, and Clear footer that
  * `DatePickerButton` and `DateTimePickerButton` share.
  */
 /**
- * Day Picker options for the picker's calendar: disabled matchers,
- * `startMonth` / `endMonth`, `weekStartsOn`, `locale`, `className`, and so on.
- * The picker owns the selection, focus, and month props.
+ * Options for the picker's calendar. The picker owns the selection, focus,
+ * and month props; these are the kit's own types, so a Day Picker upgrade
+ * does not change them.
  */
-export type PickerCalendarProps = Omit<PropsBase, "mode" | "required" | "autoFocus" | "defaultMonth" | "numberOfMonths">;
+export type PickerCalendarProps = {
+    /** Days that cannot be picked. */
+    disabled?: DateMatcher | DateMatcher[];
+    /** Days left out of the grid. */
+    hidden?: DateMatcher | DateMatcher[];
+    /** Earliest month the calendar pages to. */
+    startMonth?: Date;
+    /** Latest month the calendar pages to. */
+    endMonth?: Date;
+    /** First day of the week, `0` (Sunday) to `6`. Defaults to the locale's. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** A date-fns locale for month and weekday names. */
+    locale?: Locale;
+    /** Show the leading and trailing days of the neighbouring months. Default `true`. */
+    showOutsideDays?: boolean;
+    /** Always show six weeks, so the popover height does not change. */
+    fixedWeeks?: boolean;
+    /** Show ISO or locale week numbers in a first column. */
+    showWeekNumber?: boolean;
+    /** Month and year as text (`label`, default) or as dropdowns. */
+    captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    /** The day marked as today. Defaults to the current date. */
+    today?: Date;
+    /** Classes for the calendar root. */
+    className?: string;
+};
 /** Props both pickers take for their trigger and popover. */
 export type PickerTriggerProps = {
     id?: string;
@@ -34,10 +60,26 @@ export type PickerTriggerProps = {
     side?: React.ComponentProps<typeof PopoverContent>["side"];
     /** Month shown when the popover opens; falls back to the selected date. */
     defaultMonth?: Date;
+    /**
+     * Earliest day that can be picked. Earlier days are disabled and the
+     * calendar does not page before its month.
+     */
+    minDate?: DateLike;
+    /**
+     * Latest day that can be picked. Later days are disabled and the calendar
+     * does not page past its month.
+     */
+    maxDate?: DateLike;
     /** Day Picker options passed through to the calendar. */
     calendarProps?: PickerCalendarProps;
 };
-type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth" | "calendarProps"> & {
+/**
+ * `calendarProps` with `minDate` / `maxDate` applied: days outside them join
+ * any `disabled` matchers, and they bound paging unless `startMonth` /
+ * `endMonth` are set.
+ */
+export declare function limitCalendarProps(calendarProps: PickerCalendarProps | undefined, minDate: DateLike, maxDate: DateLike): PickerCalendarProps | undefined;
+type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth" | "calendarProps" | "minDate" | "maxDate"> & {
     /** Muted trigger text while nothing is picked. */
     empty: boolean;
     /** Trigger text: the formatted value or the placeholder. */

package/dist/picker-shell.js

@@ -3,10 +3,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
+import { toDate, } from "./internal/date-like.js";
 import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
 import { preloadCalendar } from "./lazy-calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
+/**
+ * `calendarProps` with `minDate` / `maxDate` applied: days outside them join
+ * any `disabled` matchers, and they bound paging unless `startMonth` /
+ * `endMonth` are set.
+ */
+export function limitCalendarProps(calendarProps, minDate, maxDate) {
+    const min = toDate(minDate);
+    const max = toDate(maxDate);
+    if (!min && !max)
+        return calendarProps;
+    const disabled = calendarProps?.disabled;
+    const matchers = [
+        ...(disabled === undefined
+            ? []
+            : Array.isArray(disabled)
+                ? disabled
+                : [disabled]),
+        ...(min ? [{ before: min }] : []),
+        ...(max ? [{ after: max }] : []),
+    ];
+    return {
+        ...calendarProps,
+        disabled: matchers,
+        startMonth: calendarProps?.startMonth ?? min,
+        endMonth: calendarProps?.endMonth ?? max,
+    };
+}
 /** Form-control trigger plus the viewport-clamped calendar popover. */
 export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, empty, label, dialogLabel, open, onOpenChange, onInteractOutside, children, }) {
     return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), _jsx("span", { "data-slot": "date-picker-value", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 

package/dist/toast.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /** Identifies a toast, to replace it in place or dismiss it. */
 type ToastId = string | number;
 /** A button in a toast. Clicking it runs `onClick`, then closes the toast. */
@@ -50,7 +50,9 @@ interface ToasterProps {
 declare const toast: Toast;
 /**
  * Mount one near the app root, and show toasts with `toast()` from this
- * module. Only the props declared here reach the library.
+ * module. Only the props declared here reach the library. The stack
+ * expands while keyboard focus is inside it, as it does on hover, so every
+ * toast's buttons are visible and reachable.
  */
 declare const Toaster: ({ position, closeButton, expand, visibleToasts, duration, }: ToasterProps) => import("react").JSX.Element;
 export { Toaster, toast };

package/dist/toast.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, XIcon, } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, toast as sonnerToast, } from "sonner";
@@ -52,12 +53,18 @@ const toast = Object.assign(show(sonnerToast), {
  * is the badge itself; the X is 12px. `overflow-visible` on the toast and
  * toaster keeps stacked badges from being clipped.
  *
+ * Stacking: while the stack is collapsed, every part of the toasts behind
+ * the front one is `invisible`. Their badges would otherwise peek out above
+ * the front toast, closer together than the 24px target spacing, and their
+ * buttons would stay in the tab order unseen. Hovering or focusing the stack
+ * expands it (see `Toaster`), which shows them again.
+ *
  * Padding is asymmetric: `pl-4` matches Alert; `pr-6` clears the badge
  * (about 16px of it sits inside the border). Icon-to-text is `gap-x-2.5`
  * so the status icon and copy read as one unit.
  */
 const classNames = {
-    toast: "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-6 text-sm text-popover-foreground shadow-md",
+    toast: "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-6 text-sm text-popover-foreground shadow-md data-[expanded=false]:data-[front=false]:*:invisible",
     // Fills the row beside the icon, so action buttons wrap to their own row
     // (aligned right by the toast's justify-end). Without an icon the basis
     // falls back to the title's width, so a one-word toast stays compact.
@@ -84,10 +91,18 @@ const icons = {
 };
 /**
  * Mount one near the app root, and show toasts with `toast()` from this
- * module. Only the props declared here reach the library.
+ * module. Only the props declared here reach the library. The stack
+ * expands while keyboard focus is inside it, as it does on hover, so every
+ * toast's buttons are visible and reachable.
  */
 const Toaster = ({ position, closeButton = true, expand, visibleToasts, duration, }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", position: position, closeButton: closeButton, expand: expand, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }));
+    const [focusWithin, setFocusWithin] = useState(false);
+    const onBlur = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            setFocusWithin(false);
+        }
+    };
+    return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
 };
 export { Toaster, toast };

package/dist/toggle.d.ts

@@ -9,7 +9,7 @@ import { Toggle as TogglePrimitive } from "radix-ui";
 declare const selectedToggleChrome: string;
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { Toggle, toggleVariants, selectedToggleChrome };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.11.2",
+  "version": "0.13.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -112,6 +112,10 @@
       "types": "./dist/meter.d.ts",
       "default": "./dist/meter.js"
     },
+    "./nav-link": {
+      "types": "./dist/nav-link.d.ts",
+      "default": "./dist/nav-link.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "default": "./dist/pagination.js"
@@ -200,6 +204,10 @@
       "types": "./dist/tooltip.d.ts",
       "default": "./dist/tooltip.js"
     },
+    "./form/control-field": {
+      "types": "./dist/form/control-field.d.ts",
+      "default": "./dist/form/control-field.js"
+    },
     "./form/date-picker-field": {
       "types": "./dist/form/date-picker-field.d.ts",
       "default": "./dist/form/date-picker-field.js"
@@ -228,6 +236,10 @@
       "types": "./dist/form/text-field.d.ts",
       "default": "./dist/form/text-field.js"
     },
+    "./next/nav-link": {
+      "types": "./dist/next/nav-link.d.ts",
+      "default": "./dist/next/nav-link.js"
+    },
     "./next/tabs-nav-link": {
       "types": "./dist/next/tabs-nav-link.d.ts",
       "default": "./dist/next/tabs-nav-link.js"
@@ -307,10 +319,10 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/coverage-v8": "5.0.5",
     "date-fns": "^4.4.0",
     "jsdom": "^29.1.1",
-    "next": "16.2.6",
+    "next": "16.4.2",
     "next-themes": "^0.4.6",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
@@ -320,8 +332,8 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.1",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "unified": "^11.0.5",
-    "vitest": "^4.1.9"
+    "vitest": "^5.0.5"
   }
 }

package/skills/atlas-react-kit/SKILL.md

@@ -61,9 +61,11 @@ Import each component from its subpath, e.g.
 | One date, or a from/to range                    | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
 | Date and time (not `datetime-local`)            | `DateTimePickerButton` from `date-time-picker`                                                                          |
 | Labelled field with error text                  | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
+| Labelled custom control (combobox) in a form    | `FormControlField` from `form/control-field`                                                                            |
 | Form-level error (save failed)                  | `FormFeedbackField` from `form/feedback-field`                                                                          |
 | Content panels on one page                      | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
 | View switch that changes the URL                | `TabsNav` with links: `TabsNavLink` from `next/tabs-nav-link` in Next, else `tabsTriggerVariants()`                     |
+| App shell nav (Calendar, Tasks, Settings)       | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`                                          |
 | Status chip (paid, pending, failed)             | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
 | Data table                                      | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
 | Nothing to show yet                             | `EmptyPanel` from `empty-panel`                                                                                         |