atlas-react-kit 0.13.0 → 1.1.0

package/dist/picker-shell.js

@@ -5,7 +5,7 @@ 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 { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
 /**
@@ -13,7 +13,7 @@ import { cn } from "./utils.js";
  * any `disabled` matchers, and they bound paging unless `startMonth` /
  * `endMonth` are set.
  */
-export function limitCalendarProps(calendarProps, minDate, maxDate) {
+function limitCalendarProps(calendarProps, minDate, maxDate) {
     const min = toDate(minDate);
     const max = toDate(maxDate);
     if (!min && !max)
@@ -35,15 +35,17 @@ export function limitCalendarProps(calendarProps, minDate, maxDate) {
         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, 
+/**
+ * Form-control trigger plus the viewport-clamped popover holding the
+ * calendar, any extra rows, and an optional Clear row.
+ */
+export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled = false, 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", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsxs(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.
-                onOpenAutoFocus: (event) => event.preventDefault(), onInteractOutside: onInteractOutside, className: cn("w-auto min-w-0", pickerContentClassName, contentClassName), children: children })] }));
-}
-/** Clear button row under the calendar. */
-export function PickerClearFooter({ disabled, onClear, }) {
-    return (_jsx("div", { "data-slot": "date-picker-footer", className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: disabled, onClick: onClear, children: "Clear" }) }));
+                onOpenAutoFocus: (event) => event.preventDefault(), className: cn("w-auto min-w-0", pickerContentClassName, contentClassName), children: [_jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), ...calendar, autoFocus: true, defaultMonth: defaultMonth }), children, onClear ? (_jsx("div", { "data-slot": "date-picker-footer", className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: clearDisabled, onClick: () => {
+                                onClear();
+                                onOpenChange(false);
+                            }, children: "Clear" }) })) : null] })] }));
 }

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

@@ -1,36 +1,51 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
+import type { AsChildProps } from "./internal/as-child.js";
 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;
+/**
+ * Tab-styled link for `TabsNav`. Pass `active` from the route: the active
+ * link gets the trigger's selected chrome (`data-state="active"`) and
+ * `aria-current="page"`. `asChild` wraps a router `Link` with these styles,
+ * like `NavLink`; Next apps can import `next/tabs-nav-link` instead.
+ */
+declare function TabsNavLink({ asChild, active, className, ...props }: React.ComponentProps<"a"> & AsChildProps & {
+    /** This link is the current view: `aria-current="page"` and the active chrome. */
+    active: boolean;
+}): React.JSX.Element;
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist. Style each link
- * with `tabsTriggerVariants()` and mark the active one with
- * `data-state="active"` and `aria-current="page"` (the Next adapter
- * `TabsNavLink` does this for you).
+ * tabs would point assistive tech at panels that don't exist. Each link is
+ * a `TabsNavLink` with `active` from the app (`asChild` for a router link,
+ * or the Next adapter `next/tabs-nav-link`).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
  * for active borders and focus rings counted in the scroller height (so the
- * list cannot overflow on y), an edge fade while it overflows, and the
- * active link scrolled into view on mount. Do not wrap it in
+ * list cannot overflow on y), an edge fade while it overflows, the
+ * active link scrolled into view on mount, and a mouse drag that scrolls
+ * the row (a plain click still follows the link). Do not wrap it in
  * `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, };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsNavLink, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import {} from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
+import { Slot, Tabs as TabsPrimitive } from "radix-ui";
 import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
+import { useDragScroll } from "./internal/use-drag-scroll.js";
 import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
 /**
@@ -22,12 +23,14 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
  * active tab's border and focus ring grow a vertical scrollbar. Pad for
  * those strokes *inside* the box (`h-13` = `h-11` list + `p-1`), clip the
  * y axis as a backstop, and fade the edges while the row overflows —
- * same cue as `Table`.
+ * same cue as `Table`. While it overflows, a mouse can also drag the row
+ * sideways (`useDragScroll`); touch, wheel and keyboard scroll as before.
  */
 function TabsScroller({ variant = "default", orientation = "horizontal", className, children, }) {
     const ref = React.useRef(null);
     const revealed = React.useRef(null);
     const overflowing = useHorizontalOverflow(ref);
+    useDragScroll(ref, overflowing);
     // Runs after every render, not just mount: TabsNav usually sits in a
     // persistent layout, so a route change updates the active link in place.
     React.useLayoutEffect(() => {
@@ -61,24 +64,34 @@ 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 link for `TabsNav`. Pass `active` from the route: the active
+ * link gets the trigger's selected chrome (`data-state="active"`) and
+ * `aria-current="page"`. `asChild` wraps a router `Link` with these styles,
+ * like `NavLink`; Next apps can import `next/tabs-nav-link` instead.
+ */
+function TabsNavLink({ asChild, active, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "tabs-nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(tabsTriggerVariants(), className), ...props }));
 }
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist. Style each link
- * with `tabsTriggerVariants()` and mark the active one with
- * `data-state="active"` and `aria-current="page"` (the Next adapter
- * `TabsNavLink` does this for you).
+ * tabs would point assistive tech at panels that don't exist. Each link is
+ * a `TabsNavLink` with `active` from the app (`asChild` for a router link,
+ * or the Next adapter `next/tabs-nav-link`).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
  * for active borders and focus rings counted in the scroller height (so the
- * list cannot overflow on y), an edge fade while it overflows, and the
- * active link scrolled into view on mount. Do not wrap it in
+ * list cannot overflow on y), an edge fade while it overflows, the
+ * active link scrolled into view on mount, and a mouse drag that scrolls
+ * the row (a plain click still follows the link). Do not wrap it in
  * `overflow-x-auto`. `scrollerClassName` styles that scroller and
  * `listClassName` the row of links inside it.
  */
 function TabsNav({ className, scrollerClassName, listClassName, children, ...props }) {
     return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 max-w-full", className), ...props, children: _jsx(TabsScroller, { className: scrollerClassName, children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants({ orientation: "horizontal" }), "bg-transparent", listClassName), children: children }) }) }));
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsNavLink, tabsListVariants, tabsTriggerVariants, };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.13.0",
+  "version": "1.1.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -52,6 +52,10 @@
       "types": "./dist/card.d.ts",
       "default": "./dist/card.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
     "./checkbox": {
       "types": "./dist/checkbox.d.ts",
       "default": "./dist/checkbox.js"
@@ -100,6 +104,10 @@
       "types": "./dist/input.d.ts",
       "default": "./dist/input.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban.d.ts",
+      "default": "./dist/kanban.js"
+    },
     "./label": {
       "types": "./dist/label.d.ts",
       "default": "./dist/label.js"
@@ -116,10 +124,18 @@
       "types": "./dist/nav-link.d.ts",
       "default": "./dist/nav-link.js"
     },
+    "./page-header": {
+      "types": "./dist/page-header.d.ts",
+      "default": "./dist/page-header.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "default": "./dist/pagination.js"
     },
+    "./period-stepper": {
+      "types": "./dist/period-stepper.d.ts",
+      "default": "./dist/period-stepper.js"
+    },
     "./popover": {
       "types": "./dist/popover.d.ts",
       "default": "./dist/popover.js"
@@ -148,6 +164,10 @@
       "types": "./dist/skeleton.d.ts",
       "default": "./dist/skeleton.js"
     },
+    "./skip-link": {
+      "types": "./dist/skip-link.d.ts",
+      "default": "./dist/skip-link.js"
+    },
     "./slider": {
       "types": "./dist/slider.d.ts",
       "default": "./dist/slider.js"
@@ -204,6 +224,14 @@
       "types": "./dist/tooltip.d.ts",
       "default": "./dist/tooltip.js"
     },
+    "./form/checkbox-field": {
+      "types": "./dist/form/checkbox-field.d.ts",
+      "default": "./dist/form/checkbox-field.js"
+    },
+    "./form/combobox-field": {
+      "types": "./dist/form/combobox-field.d.ts",
+      "default": "./dist/form/combobox-field.js"
+    },
     "./form/control-field": {
       "types": "./dist/form/control-field.d.ts",
       "default": "./dist/form/control-field.js"
@@ -216,13 +244,17 @@
       "types": "./dist/form/date-time-picker-field.d.ts",
       "default": "./dist/form/date-time-picker-field.js"
     },
+    "./form/feedback-field": {
+      "types": "./dist/form/feedback-field.d.ts",
+      "default": "./dist/form/feedback-field.js"
+    },
     "./form/field-error": {
       "types": "./dist/form/field-error.d.ts",
       "default": "./dist/form/field-error.js"
     },
-    "./form/feedback-field": {
-      "types": "./dist/form/feedback-field.d.ts",
-      "default": "./dist/form/feedback-field.js"
+    "./form/focus-first-invalid": {
+      "types": "./dist/form/focus-first-invalid.d.ts",
+      "default": "./dist/form/focus-first-invalid.js"
     },
     "./form/markdown-field": {
       "types": "./dist/form/markdown-field.d.ts",
@@ -236,10 +268,18 @@
       "types": "./dist/form/text-field.d.ts",
       "default": "./dist/form/text-field.js"
     },
+    "./form/toggle-group-field": {
+      "types": "./dist/form/toggle-group-field.d.ts",
+      "default": "./dist/form/toggle-group-field.js"
+    },
     "./next/nav-link": {
       "types": "./dist/next/nav-link.d.ts",
       "default": "./dist/next/nav-link.js"
     },
+    "./next/period-stepper": {
+      "types": "./dist/next/period-stepper.d.ts",
+      "default": "./dist/next/period-stepper.js"
+    },
     "./next/tabs-nav-link": {
       "types": "./dist/next/tabs-nav-link.d.ts",
       "default": "./dist/next/tabs-nav-link.js"
@@ -257,9 +297,17 @@
     "build": "tsc",
     "check": "npm run build && npm run docs:check && prettier --check .",
     "docs:check": "node scripts/check-doc-links.mjs",
+    "lint": "oxlint --type-aware --deny-warnings",
+    "knip": "knip",
+    "sast": "semgrep scan --config .semgrep.yml --metrics=off --disable-version-check --error --quiet src",
+    "secrets": "secretlint \"**/*\"",
+    "size": "size-limit",
+    "gate:static": "npm run lint && npm run knip && npm run sast && npm run secrets",
+    "gate": "npm run check && npm run gate:static && npm run size && vitest run --coverage",
     "test": "npm run build && vitest run",
     "test:coverage": "npm run build && vitest run --coverage",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "prepare": "lefthook install"
   },
   "engines": {
     "node": ">=20.19.0"
@@ -268,6 +316,8 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@dnd-kit/dom": "^0.4.0",
+    "@dnd-kit/react": "^0.4.0",
     "date-fns": "^4.4.0",
     "next": "^16.0.0",
     "next-themes": "^0.4.6",
@@ -276,11 +326,16 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/dom": {
+      "optional": true
+    },
+    "@dnd-kit/react": {
+      "optional": true
+    },
     "date-fns": {
       "optional": true
     },
@@ -312,6 +367,10 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@dnd-kit/dom": "^0.4.0",
+    "@dnd-kit/react": "^0.4.0",
+    "@secretlint/secretlint-rule-preset-recommend": "^13.0.7",
+    "@size-limit/file": "^14.2.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -322,14 +381,21 @@
     "@vitest/coverage-v8": "5.0.5",
     "date-fns": "^4.4.0",
     "jsdom": "^29.1.1",
+    "knip": "^6.41.0",
+    "lefthook": "^2.2.2",
     "next": "16.4.2",
     "next-themes": "^0.4.6",
+    "oxlint": "^1.88.0",
+    "oxlint-tsgolint": "^7.0.2004",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "secretlint": "^13.0.7",
+    "size-limit": "^14.2.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.1",
     "typescript": "^7.0.2",