atlas-react-kit 0.12.0 → 1.0.0

package/dist/next/period-stepper.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from "next/link.js";
+import { PeriodStepperFrame, } from "../period-stepper.js";
+/**
+ * Next.js `PeriodStepper`: each step is a prefetched link, so the period
+ * lives in the URL. Leave out `todayHref` to drop the Today link.
+ */
+function PeriodStepper({ previousHref, todayHref, nextHref, ...props }) {
+    const hrefs = { previous: previousHref, today: todayHref, next: nextHref };
+    return (_jsx(PeriodStepperFrame, { ...props, control: (step, content) => {
+            const href = hrefs[step];
+            return href ? (_jsx(Link, { href: href, prefetch: true, children: content })) : null;
+        } }));
+}
+export { PeriodStepper };

package/dist/page-header.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+/**
+ * A page's title row: the heading, an optional hint, anything else that
+ * belongs under them (badges, meta), and actions on the right. Stacks on
+ * small screens.
+ */
+declare function PageHeader({ title, description, actions, titleAs: Title, titleClassName, className, children, ...props }: {
+    /** The page heading. */
+    title: React.ReactNode;
+    /** Muted hint under the title. */
+    description?: React.ReactNode;
+    /** Buttons or links on the right (stacked below on small screens). */
+    actions?: React.ReactNode;
+    /** Heading level. Default `h1`. */
+    titleAs?: "h1" | "h2" | "h3";
+    /** Classes for the heading. */
+    titleClassName?: string;
+} & Omit<React.ComponentProps<"header">, "title">): React.JSX.Element;
+export { PageHeader };

package/dist/page-header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * A page's title row: the heading, an optional hint, anything else that
+ * belongs under them (badges, meta), and actions on the right. Stacks on
+ * small screens.
+ */
+function PageHeader({ title, description, actions, titleAs: Title = "h1", titleClassName, className, children, ...props }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between", className), ...props, children: [_jsxs("div", { "data-slot": "page-header-heading", className: "flex min-w-0 flex-col gap-1", children: [_jsx(Title, { "data-slot": "page-header-title", className: cn("text-2xl font-semibold tracking-tight", titleClassName), children: title }), description ? (_jsx("p", { "data-slot": "page-header-description", className: "text-sm text-muted-foreground", children: description })) : null, children] }), actions ? (_jsx("div", { "data-slot": "page-header-actions", className: "flex flex-wrap items-center gap-2", children: actions })) : null] }));
+}
+export { PageHeader };

package/dist/pagination.d.ts

@@ -9,7 +9,9 @@ declare function Pagination({ className, ...props }: React.ComponentProps<"nav">
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
 type PaginationLinkProps = {
+    /** This link is the current page: `aria-current="page"` and the selected wash. */
     isActive?: boolean;
+    /** `icon` (default) is a square page number; `default` fits text such as Previous. */
     size?: "default" | "icon";
     /**
      * No page to go to, such as Previous on the first page. Renders without

package/dist/period-stepper.d.ts

@@ -0,0 +1,32 @@
+import type * as React from "react";
+type PeriodStepperFrameProps = {
+    /** The range shown, announced when it changes. */
+    label: React.ReactNode;
+    /** What one step moves ("month", "week"), for the button names. */
+    stepLabel: string;
+    /** Classes for the range heading. */
+    labelClassName?: string;
+} & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * Layout under both steppers. `control` renders each step as the element a
+ * `Button` wraps (`asChild`), such as another router's link; returning
+ * `null` for "today" drops that button.
+ */
+declare function PeriodStepperFrame({ label, stepLabel, labelClassName, className, control, ...props }: PeriodStepperFrameProps & {
+    /** Renders the element for each step; return `null` for "today" to drop it. */
+    control: (step: "previous" | "today" | "next", content: React.ReactNode) => React.ReactElement | null;
+}): React.JSX.Element;
+/**
+ * Previous / Today / Next buttons and the range they show (a month, a
+ * week). The app owns the period; for URL-driven periods in Next use
+ * `next/period-stepper`. Leave out `onToday` to drop the Today button.
+ */
+declare function PeriodStepper({ onPrevious, onToday, onNext, ...props }: PeriodStepperFrameProps & {
+    /** Called when Previous is pressed. */
+    onPrevious: () => void;
+    /** Called when Today is pressed. Leave out to drop the Today button. */
+    onToday?: () => void;
+    /** Called when Next is pressed. */
+    onNext: () => void;
+}): React.JSX.Element;
+export { PeriodStepper, PeriodStepperFrame, type PeriodStepperFrameProps };

package/dist/period-stepper.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./button.js";
+import { cn } from "./utils.js";
+/**
+ * Layout under both steppers. `control` renders each step as the element a
+ * `Button` wraps (`asChild`), such as another router's link; returning
+ * `null` for "today" drops that button.
+ */
+function PeriodStepperFrame({ label, stepLabel, labelClassName, className, control, ...props }) {
+    const today = control("today", "Today");
+    return (_jsxs("div", { "data-slot": "period-stepper", className: cn("flex flex-wrap items-center gap-2", className), ...props, children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": `Previous ${stepLabel}`, asChild: true, children: control("previous", _jsx(ChevronLeft, {})) }), today ? (_jsx(Button, { variant: "outline", size: "sm", asChild: true, children: today })) : null, _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": `Next ${stepLabel}`, asChild: true, children: control("next", _jsx(ChevronRight, {})) }), _jsx("h2", { "aria-live": "polite", "data-slot": "period-stepper-label", className: cn("text-base font-semibold tabular-nums", labelClassName), children: label })] }));
+}
+/**
+ * Previous / Today / Next buttons and the range they show (a month, a
+ * week). The app owns the period; for URL-driven periods in Next use
+ * `next/period-stepper`. Leave out `onToday` to drop the Today button.
+ */
+function PeriodStepper({ onPrevious, onToday, onNext, ...props }) {
+    const handlers = { previous: onPrevious, today: onToday, next: onNext };
+    return (_jsx(PeriodStepperFrame, { ...props, control: (step, content) => {
+            const onClick = handlers[step];
+            return onClick ? (_jsx("button", { type: "button", onClick: onClick, children: content })) : null;
+        } }));
+}
+export { PeriodStepper, PeriodStepperFrame };

package/dist/picker-shell.d.ts

@@ -1,26 +1,58 @@
 import * as React from "react";
-import type { PropsBase } from "react-day-picker";
-import { type DateLike } from "./internal/date-like.js";
+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 of the trigger button; the trigger text gets `${id}-value`. */
     id?: string;
+    /**
+     * Trigger text while nothing is picked. Defaults to "Pick a date", "Pick a
+     * date range", or "Pick a date and time" depending on the picker.
+     */
     placeholder?: string;
+    /** Disable the trigger so the popover cannot open. */
     disabled?: boolean;
     /** Classes for the trigger button. */
     className?: string;
     /** Classes for the popover content, e.g. a width such as `w-80`. */
     contentClassName?: string;
+    /** Mark the trigger invalid, e.g. when its field has an error. */
     "aria-invalid"?: boolean;
     /**
      * Forwarded to the trigger. To name it from a visible label while still
@@ -61,8 +93,11 @@ type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth"
     label: string;
     /** Accessible name of the popover dialog. */
     dialogLabel: string;
+    /** Whether the popover is open. */
     open: boolean;
+    /** Called when the popover opens or closes. */
     onOpenChange: (open: boolean) => void;
+    /** Called on a pointer down or focus outside the popover; can prevent the dismiss. */
     onInteractOutside?: React.ComponentProps<typeof PopoverContent>["onInteractOutside"];
     children: React.ReactNode;
 };
@@ -70,7 +105,9 @@ type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth"
 export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, empty, label, dialogLabel, open, onOpenChange, onInteractOutside, children, }: PickerShellProps): React.JSX.Element;
 /** Clear button row under the calendar. */
 export declare function PickerClearFooter({ disabled, onClear, }: {
+    /** Disable the Clear button, e.g. while nothing is picked. */
     disabled: boolean;
+    /** Called when Clear is pressed. */
     onClear: () => void;
 }): React.JSX.Element;
 export {};

package/dist/picker-shell.js

@@ -3,7 +3,7 @@ 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 { 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";
@@ -37,7 +37,7 @@ export function limitCalendarProps(calendarProps, minDate, maxDate) {
 }
 /** 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, 
+    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", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 
                 // The calendar's `autoFocus` puts focus on the selected day (or
                 // today) once it loads, as the APG date picker dialog does; Radix
                 // focusing the popover first would leave it on the container.

package/dist/progress.d.ts

@@ -7,6 +7,7 @@ import { Progress as ProgressPrimitive } from "radix-ui";
  * label. `indicatorClassName` styles the fill (default `bg-primary`).
  */
 declare function Progress({ className, indicatorClassName, value, max, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    /** Classes for the fill, e.g. a status color. Defaults to `bg-primary`. */
     indicatorClassName?: string;
 }): React.JSX.Element;
 export { Progress };

package/dist/search-picker.d.ts

@@ -6,17 +6,29 @@ export { foldSearchText };
  */
 export declare function defaultSearchFilter<T>(item: T, query: string, getLabel: (item: T) => string): boolean;
 export type SearchPickerProps<T> = {
+    /** Every choice, in display order. */
     items: T[];
+    /** A unique, stable value for an item; matched against `value`. */
     getValue: (item: T) => string;
+    /** The item's visible text, also what the default filter searches. */
     getLabel: (item: T) => string;
+    /** Whether an item matches the query. Default `defaultSearchFilter` (label contains query, ignoring case and accents). */
     filter?: (item: T, query: string, getLabel: (item: T) => string) => boolean;
+    /** The selected item's value, marked in the list. */
     value?: string;
+    /** Called with the item picked by click or Enter; the query then clears. */
     onSelect: (item: T) => void;
+    /** Visible label for the search input. */
     label: string;
+    /** Placeholder for the search input. Default `"Search"`. */
     placeholder?: string;
+    /** Text shown when nothing matches the query. Default `"No results"`. */
     emptyText?: string;
+    /** Accessible name for the listbox. Defaults to `label`. */
     listLabel?: string;
+    /** Disables the input and every option. */
     disabled?: boolean;
+    /** Classes for the wrapper, e.g. its width. */
     className?: string;
     /** Classes for the listbox, e.g. its height. Defaults to `max-h-60`. */
     listClassName?: string;

package/dist/select.d.ts

@@ -4,6 +4,7 @@ declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitiv
 declare function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    /** Trigger height: `default` (`h-10`) or `sm` (`h-9`). Default `default`. */
     size?: "sm" | "default";
 }): React.JSX.Element;
 declare function SelectContent({ className, children, position, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;

package/dist/skip-link.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * First focusable link on the page: hidden until a keyboard user tabs to
+ * it, then it jumps past the navigation to `href` (the main landmark's id).
+ */
+declare function SkipLink({ href, className, children, ...props }: React.ComponentProps<"a">): React.JSX.Element;
+export { SkipLink };

package/dist/skip-link.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * First focusable link on the page: hidden until a keyboard user tabs to
+ * it, then it jumps past the navigation to `href` (the main landmark's id).
+ */
+function SkipLink({ href = "#main-content", className, children = "Skip to content", ...props }) {
+    return (_jsx("a", { "data-slot": "skip-link", href: href, className: cn("sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:ring-2 focus:ring-ring", className), ...props, children: children }));
+}
+export { SkipLink };

package/dist/slider.d.ts

@@ -1,18 +1,29 @@
 import type * as React from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
 export type SliderProps = Omit<React.ComponentProps<typeof SliderPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "onValueCommit" | "children"> & {
+    /** The current value; the slider is always controlled. */
     value: number;
+    /** Called with the new value on every move while dragging or on a key press. */
     onValueChange: (value: number) => void;
+    /** Called with the final value when a drag ends or a key press settles. */
     onValueCommit?: (value: number) => void;
+    /** The lowest value. Default 0. */
     min?: number;
+    /** The highest value. Default 100. */
     max?: number;
+    /** The amount each move snaps to. Default 1. */
     step?: number;
+    /** Dims the slider and ignores pointer and keyboard input. */
     disabled?: boolean;
     /** Goes on the thumb, so a `<Label htmlFor>` names the slider. */
     id?: string;
+    /** Form field name, so the value submits with a surrounding `<form>`. */
     name?: string;
+    /** Classes for the root, e.g. its width. */
     className?: string;
+    /** Names the slider when there is no `<Label htmlFor={id}>`. Goes on the thumb. */
     "aria-label"?: string;
+    /** Id of the element that names the slider. Goes on the thumb. */
     "aria-labelledby"?: string;
 };
 /**

package/dist/sortable-table-head.d.ts

@@ -4,7 +4,9 @@ export type SortDirection = "asc" | "desc";
 type SortableTableHeadProps = ComponentProps<typeof TableHead> & {
     /** Whether this column is the active sort key. */
     sorted?: boolean;
+    /** Sort order shown while `sorted`. Default `asc`. */
     direction?: SortDirection;
+    /** Called when the header button is pressed, e.g. to toggle the sort. */
     onClick?: () => void;
     /** Classes for the inner sort button (`data-slot="sortable-table-head-button"`). */
     buttonClassName?: string;

package/dist/stat-tile.d.ts

@@ -8,10 +8,15 @@ export { sectionLabel };
 /** Row of tiles: stacked on phones, divided columns from `sm`. */
 export declare const statTileGrid = "grid ring-1 ring-foreground/5 sm:divide-x";
 export type StatTileProps = Omit<React.ComponentProps<"div">, "children" | "title"> & {
+    /** Small uppercase label above the figure. */
     label: string;
+    /** The big figure, already formatted. */
     value: string;
+    /** Muted line under the figure; hidden when empty. */
     sub?: React.ReactNode;
+    /** Extra content between the figure and `sub`, e.g. a `Meter`. */
     children?: React.ReactNode;
+    /** Classes for the root `div`. */
     className?: string;
 };
 /**

package/dist/table-body-skeleton.d.ts

@@ -1,5 +1,7 @@
 type Props = {
+    /** Placeholder cells per row; match the table's column count. */
     columns: number;
+    /** Placeholder rows. Default `5`. */
     rows?: number;
     /** Classes for the `tbody`. */
     className?: string;

package/dist/table.d.ts

@@ -11,6 +11,7 @@ import * as React from "react";
  * cap (`max-h-96 overflow-y-auto`) or a border.
  */
 declare function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & {
+    /** Classes for the scroller around the table, e.g. a height cap or border. */
     containerClassName?: string;
 }): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;

package/dist/tabs.d.ts

@@ -2,15 +2,18 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { tabsListVariants, tabsTriggerVariants } from "./internal/tabs-styles.js";
+/** Props `TabsList` and `TabsNav` share for the scroller around their row. */
+type TabsScrollerClassNameProps = {
+    /** Classes for the scroller around the tab row (`h-13` with `p-1` by default). */
+    scrollerClassName?: string;
+};
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 /**
  * The tab row inside its scroller. `className` styles the list (its `h-11`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
  * (`h-13` with `p-1` for the active border and focus ring).
  */
-declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & {
-    scrollerClassName?: string;
-}): React.JSX.Element;
+declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & TabsScrollerClassNameProps): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 /**
@@ -28,9 +31,10 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  * `overflow-x-auto`. `scrollerClassName` styles that scroller and
  * `listClassName` the row of links inside it.
  */
-declare function TabsNav({ className, scrollerClassName, listClassName, children, ...props }: React.ComponentProps<"nav"> & {
+declare function TabsNav({ className, scrollerClassName, listClassName, children, ...props }: React.ComponentProps<"nav"> & TabsScrollerClassNameProps & {
+    /** Required accessible name for the nav landmark. */
     "aria-label": string;
-    scrollerClassName?: string;
+    /** Classes for the row of links inside the scroller. */
     listClassName?: string;
 }): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -61,7 +61,7 @@ function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants(), className), ...props }));
 }
 function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm", focusRing, className), ...props }));
 }
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not

package/dist/toast.d.ts

@@ -3,7 +3,9 @@ import { type ReactNode } from "react";
 type ToastId = string | number;
 /** A button in a toast. Clicking it runs `onClick`, then closes the toast. */
 interface ToastAction {
+    /** The button's text. */
     label: string;
+    /** Runs when the button is clicked, before the toast closes. */
     onClick: () => void;
 }
 interface ToastOptions {
@@ -21,9 +23,13 @@ interface ToastOptions {
 /** Shows a toast and returns its id. */
 type ShowToast = (message: ReactNode, options?: ToastOptions) => ToastId;
 type Toast = ShowToast & {
+    /** A toast with a check icon and a success-toned title and border. */
     success: ShowToast;
+    /** A toast with an info icon. */
     info: ShowToast;
+    /** A toast with an alert icon and a warning-toned title and border. */
     warning: ShowToast;
+    /** A toast with an alert icon and a destructive-toned title and border. */
     error: ShowToast;
     /** A spinner toast that stays until it is replaced (same `id`) or dismissed. */
     loading: ShowToast;
@@ -36,7 +42,7 @@ interface ToasterProps {
     position?: ToastPosition;
     /** A labelled close button on every toast. Default `true`. */
     closeButton?: boolean;
-    /** Keep the stack expanded instead of collapsed behind the newest toast. */
+    /** Keep the stack expanded instead of collapsed behind the newest toast. Default `false`. */
     expand?: boolean;
     /** How many toasts show at once. Default 3. */
     visibleToasts?: number;

package/dist/toggle-group.d.ts

@@ -2,9 +2,16 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { toggleVariants } from "./toggle.js";
-declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+/** Layout props a `ToggleGroup` shares with its items. */
+type ToggleGroupLayoutProps = {
+    /**
+     * Gap between items, in spacing units. `0` joins them into one segmented
+     * control. Default `2`.
+     */
     spacing?: number;
+    /** Lay items out in a row or a column. Default `horizontal`. */
     orientation?: "horizontal" | "vertical";
-}): React.JSX.Element;
+};
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle-group.js

@@ -12,7 +12,8 @@ const ToggleGroupContext = React.createContext({
     orientation: "horizontal",
 });
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+    const context = React.useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);

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 };