atlas-react-kit 0.13.0 → 1.1.0

package/dist/form/toggle-group-field.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, labelIdFor, metaErrorText, } from "./field-shell.js";
+/**
+ * One choice from a few as a joined outline toggle group (a segmented
+ * control), with a visible label and the `form/*` error wiring.
+ */
+export function FormToggleGroupField({ label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size = "sm", className, fieldClassName, }) {
+    const id = useId();
+    const errorText = metaErrorText(meta, { submitted, showError });
+    function handleValueChange(next) {
+        const option = options.find((o) => o.value === next);
+        if (option)
+            onValueChange(option.value);
+    }
+    return (_jsx(FormFieldShell, { id: id, label: label, labelFor: false, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(ToggleGroup, { id: id, type: "single", value: value, onValueChange: handleValueChange, variant: "outline", size: size, spacing: 0, disabled: disabled, "aria-labelledby": labelIdFor(id), "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, description ? descriptionIdFor(id) : undefined), className: className, children: options.map((option) => (_jsx(ToggleGroupItem, { value: option.value, children: option.label }, option.value))) }) }));
+}

package/dist/info-tip.d.ts

@@ -4,15 +4,24 @@ export type InfoTipLayout = "box" | "inline";
 export type InfoTipProps = {
     /** Required name for the icon button (the glyph has no visible text). */
     label: string;
+    /** Panel heading; also names the panel. Without it the panel uses `label`. */
     title?: string;
+    /** Muted text under the title. */
     description?: React.ReactNode;
     /** Extra body after the title and description. */
     children?: React.ReactNode;
-    /** `inline` keeps the surrounding line height; the 44px hit area overflows. */
+    /**
+     * `inline` keeps the surrounding line height; the 44px hit area overflows.
+     * Default `box`.
+     */
     layout?: InfoTipLayout;
+    /** Panel side. Default `top`; Radix still flips on collision. */
     side?: React.ComponentProps<typeof PopoverContent>["side"];
+    /** Panel alignment against the trigger. Default `center`. */
     align?: React.ComponentProps<typeof PopoverContent>["align"];
+    /** Shown beside the title, e.g. a `Badge`. */
     badge?: React.ReactNode;
+    /** Replaces the default question-mark glyph. */
     icon?: React.ReactNode;
     /** Classes for the trigger button. */
     className?: string;

package/dist/internal/as-child.d.ts

@@ -0,0 +1,8 @@
+/** Not a public entry. The Slot prop that Button, Badge, and the links share. */
+export type AsChildProps = {
+    /**
+     * Render the single child (e.g. a router `Link`) with these styles instead
+     * of the default element. Default `false`.
+     */
+    asChild?: boolean;
+};

package/dist/internal/as-child.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/form-control.d.ts

@@ -9,9 +9,10 @@
 export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
 /**
  * Date and date-time picker trigger: the form-control chrome, start-aligned,
- * with muted text while empty (`data-empty`).
+ * with muted text while empty (`data-empty`). Intrinsic padding makes one
+ * line 40px tall while longer values wrap and consumer height classes work.
  */
-export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background justify-start data-[empty=true]:text-muted-foreground";
+export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground";
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export declare const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

package/dist/internal/form-control.js

@@ -9,9 +9,10 @@
 export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
 /**
  * Date and date-time picker trigger: the form-control chrome, start-aligned,
- * with muted text while empty (`data-empty`).
+ * with muted text while empty (`data-empty`). Intrinsic padding makes one
+ * line 40px tall while longer values wrap and consumer height classes work.
  */
-export const pickerTriggerClassName = `${formControlTriggerClassName} justify-start data-[empty=true]:text-muted-foreground`;
+export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground`;
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

package/dist/internal/kanban-layout.d.ts

@@ -0,0 +1,55 @@
+/** Column id → ordered card ids, derived from the consumer's `items`. */
+export type KanbanGroups = Record<string, string[]>;
+/** Drop zone ids for the drag-time action rail. */
+export declare const KANBAN_COMPLETE_ID = "__kanban_complete__";
+export declare const KANBAN_DELETE_ID = "__kanban_delete__";
+export declare function buildKanbanGroups<T extends {
+    id: string;
+}>(columns: {
+    id: string;
+}[], items: T[], getColumnId: (item: T) => string): KanbanGroups;
+/** What dnd-kit reports at drag end, reduced to plain ids. */
+export type KanbanDropInput = {
+    itemId: string;
+    /** Droppable under the pointer: a column, a card, or a rail zone. */
+    targetId: string | null;
+    /** The target card's column, when the target is a card. */
+    targetGroup: string | null;
+    /** Column the card started in. */
+    initialGroup: string | null;
+    /** Column the card is over now. */
+    currentGroup: string | null;
+    /** Sortable index in the target column. */
+    index: number | undefined;
+};
+export type KanbanDrop = {
+    kind: "complete";
+    itemId: string;
+} | {
+    kind: "delete";
+    itemId: string;
+} | {
+    kind: "move";
+    itemId: string;
+    toColumnId: string;
+    beforeId: string | null;
+    afterId: string | null;
+};
+/**
+ * Turn a drop into a complete, delete, or move with the neighbours at the
+ * insertion slot. `null` when the drop changes nothing.
+ */
+export declare function resolveKanbanDrop(input: KanbanDropInput, groups: KanbanGroups): KanbanDrop | null;
+export type KanbanOverflowEdges = {
+    start: boolean;
+    end: boolean;
+};
+/** Whether a horizontal scroller has more content past either edge. */
+export declare function kanbanOverflowEdges(scrollLeft: number, clientWidth: number, scrollWidth: number): KanbanOverflowEdges;
+/** One "page" of columns: most of the viewport, at least one narrow column. */
+export declare function kanbanScrollStepPx(clientWidth: number): number;
+/** Smooth-scroll toward the start (`-1`) or end (`1`); no-op without a scroller. */
+export declare function kanbanScrollBy(scroller: {
+    clientWidth: number;
+    scrollBy: (options: ScrollToOptions) => void;
+} | null, direction: -1 | 1): void;

package/dist/internal/kanban-layout.js

@@ -0,0 +1,80 @@
+/** Drop zone ids for the drag-time action rail. */
+export const KANBAN_COMPLETE_ID = "__kanban_complete__";
+export const KANBAN_DELETE_ID = "__kanban_delete__";
+export function buildKanbanGroups(columns, items, getColumnId) {
+    const groups = {};
+    for (const column of columns)
+        groups[column.id] = [];
+    for (const item of items) {
+        const columnId = getColumnId(item);
+        const group = groups[columnId];
+        if (!group) {
+            console.warn(`[KanbanBoard] item "${item.id}" maps to unknown column "${columnId}" and is not rendered`);
+            continue;
+        }
+        group.push(item.id);
+    }
+    return groups;
+}
+function targetColumn(input, groups) {
+    const { targetId, targetGroup, currentGroup } = input;
+    if (targetId != null) {
+        if (targetId in groups)
+            return targetId;
+        if (targetGroup != null)
+            return targetGroup;
+        for (const [columnId, ids] of Object.entries(groups)) {
+            if (ids.includes(targetId))
+                return columnId;
+        }
+    }
+    return currentGroup;
+}
+/**
+ * Turn a drop into a complete, delete, or move with the neighbours at the
+ * insertion slot. `null` when the drop changes nothing.
+ */
+export function resolveKanbanDrop(input, groups) {
+    const { itemId, targetId, initialGroup, index: rawIndex } = input;
+    if (targetId === KANBAN_COMPLETE_ID)
+        return { kind: "complete", itemId };
+    if (targetId === KANBAN_DELETE_ID)
+        return { kind: "delete", itemId };
+    const toColumnId = targetColumn(input, groups);
+    if (!initialGroup || !toColumnId)
+        return null;
+    const columnItems = groups[toColumnId] ?? [];
+    const remaining = columnItems.filter((id) => id !== itemId);
+    const index = Math.max(0, Math.min(rawIndex ?? remaining.length, remaining.length));
+    if (initialGroup === toColumnId && index === columnItems.indexOf(itemId)) {
+        return null;
+    }
+    return {
+        kind: "move",
+        itemId,
+        toColumnId,
+        beforeId: index > 0 ? (remaining[index - 1] ?? null) : null,
+        afterId: remaining[index] ?? null,
+    };
+}
+/** Pixel slop so sub-pixel scrollWidth vs clientWidth does not flicker cues. */
+const OVERFLOW_EDGE_PX = 8;
+/** Whether a horizontal scroller has more content past either edge. */
+export function kanbanOverflowEdges(scrollLeft, clientWidth, scrollWidth) {
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    return {
+        start: scrollLeft > OVERFLOW_EDGE_PX,
+        end: scrollLeft < maxScroll - OVERFLOW_EDGE_PX,
+    };
+}
+/** One "page" of columns: most of the viewport, at least one narrow column. */
+export function kanbanScrollStepPx(clientWidth) {
+    return Math.max(140, Math.round(clientWidth * 0.75));
+}
+/** Smooth-scroll toward the start (`-1`) or end (`1`); no-op without a scroller. */
+export function kanbanScrollBy(scroller, direction) {
+    scroller?.scrollBy({
+        left: direction * kanbanScrollStepPx(scroller.clientWidth),
+        behavior: "smooth",
+    });
+}

package/dist/internal/kanban-plugins.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import type { DragDropProvider } from "@dnd-kit/react";
+type PluginsProp = NonNullable<ComponentProps<typeof DragDropProvider>["plugins"]>;
+/**
+ * Board plugins. AutoScroller stays (edge scroll while dragging). Feedback
+ * stays because it positions and sizes `DragOverlay`; `feedback: "none"`
+ * would leave the overlay behind. The drop animation is off so it does not
+ * snap twice against an optimistic update.
+ */
+export declare const configureKanbanPlugins: Extract<PluginsProp, (...args: never[]) => unknown>;
+/**
+ * Cards leave out OptimisticSortingPlugin: it moves DOM nodes under React and
+ * throws `removeChild` on re-render (dnd-kit #1747). Column layout comes from
+ * the consumer's `items`.
+ */
+export declare function configureCardSortablePlugins<T>(defaults: readonly T[]): T[];
+export {};

package/dist/internal/kanban-plugins.js

@@ -0,0 +1,17 @@
+import { Feedback } from "@dnd-kit/dom";
+import { OptimisticSortingPlugin } from "@dnd-kit/dom/sortable";
+/**
+ * Board plugins. AutoScroller stays (edge scroll while dragging). Feedback
+ * stays because it positions and sizes `DragOverlay`; `feedback: "none"`
+ * would leave the overlay behind. The drop animation is off so it does not
+ * snap twice against an optimistic update.
+ */
+export const configureKanbanPlugins = (defaults) => defaults.map((plugin) => plugin === Feedback ? Feedback.configure({ dropAnimation: null }) : plugin);
+/**
+ * Cards leave out OptimisticSortingPlugin: it moves DOM nodes under React and
+ * throws `removeChild` on re-render (dnd-kit #1747). Column layout comes from
+ * the consumer's `items`.
+ */
+export function configureCardSortablePlugins(defaults) {
+    return defaults.filter((plugin) => plugin !== OptimisticSortingPlugin);
+}

package/dist/internal/listbox-navigation.d.ts

@@ -1,5 +1,3 @@
-/** Return the next highlighted index for a listbox navigation key. */
-export declare function moveListboxHighlight(key: string, index: number, length: number): number | undefined;
 /**
  * Option id for `aria-activedescendant`. Index-based because option values
  * may contain spaces, which are not valid in an id reference.
@@ -12,15 +10,6 @@ export declare function listboxOptionId(listId: string, index: number): string;
  * so the ref is stable without `useCallback`.
  */
 export declare function scrollOptionIntoView(node: HTMLElement | null): void;
-/**
- * True while an IME is composing (Japanese, Chinese, Korean input). Enter
- * then commits the composition and must not select an option. `keyCode`
- * 229 covers Safari, which ends composition before the keydown.
- */
-export declare function isComposingKey(event: {
-    nativeEvent: KeyboardEvent;
-    keyCode: number;
-}): boolean;
 /**
  * Shared keydown for a search input that drives a listbox: navigation keys
  * move the highlight, Enter picks the highlighted index. Returns `true` when

package/dist/internal/listbox-navigation.js

@@ -1,7 +1,7 @@
 /** Page keys move ten rows, a little more than one max-h-60 list viewport. */
 const PAGE_SIZE = 10;
 /** Return the next highlighted index for a listbox navigation key. */
-export function moveListboxHighlight(key, index, length) {
+function moveListboxHighlight(key, index, length) {
     switch (key) {
         case "ArrowDown":
             return length === 0 ? 0 : Math.min(index + 1, length - 1);
@@ -40,7 +40,7 @@ export function scrollOptionIntoView(node) {
  * then commits the composition and must not select an option. `keyCode`
  * 229 covers Safari, which ends composition before the keydown.
  */
-export function isComposingKey(event) {
+function isComposingKey(event) {
     return event.nativeEvent.isComposing || event.keyCode === 229;
 }
 /**

package/dist/internal/listbox-option.d.ts

@@ -1,19 +1,4 @@
 import * as React from "react";
-type ListboxOptionProps = Omit<React.ComponentProps<"button">, "id" | "role" | "type" | "tabIndex" | "aria-selected"> & {
-    /** The listbox id; the option id derives from it for aria-activedescendant. */
-    listId: string;
-    index: number;
-    /** Keyboard or pointer highlight (tracked in state, not DOM focus). */
-    active: boolean;
-    selected: boolean;
-};
-/**
- * One option of a search-driven listbox (Combobox, SearchPicker): a
- * non-focusable button in a presentational `li`, highlighted by state and
- * scrolled into view while active. Pass `data-slot`, handlers, and the
- * component's right padding and indicator.
- */
-export declare function ListboxOption({ listId, index, active, selected, className, ...props }: ListboxOptionProps): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;

package/dist/internal/listbox-option.js

@@ -11,7 +11,7 @@ import { listboxEmpty, optionState } from "./styles.js";
  * scrolled into view while active. Pass `data-slot`, handlers, and the
  * component's right padding and indicator.
  */
-export function ListboxOption({ listId, index, active, selected, className, ...props }) {
+function ListboxOption({ listId, index, active, selected, className, ...props }) {
     return (_jsx("li", { role: "none", children: _jsx("button", { ref: active ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", tabIndex: -1, "aria-selected": selected, className: cn(optionRow, selected && optionState.selected, active && optionState.active, className), ...props }) }));
 }
 /** Only the old and new active rows rerender during keyboard navigation. */

package/dist/internal/use-drag-scroll.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+/** Pointer travel, in px, before a press on the scroller counts as a drag. */
+export declare const DRAG_THRESHOLD = 4;
+/**
+ * Lets a mouse drag a horizontal scroller sideways, the way touch already
+ * does natively. Mouse only (`pointerType === "mouse"`, left button); touch
+ * and pen keep the browser's own scrolling. A press becomes a drag after
+ * `DRAG_THRESHOLD` px of travel, so a plain click on a tab or link still
+ * activates it; once a drag has moved, the click after pointerup is
+ * swallowed so the drag never also follows a link. (Radix `TabsTrigger`
+ * selects on mousedown, so a drag that starts on an inactive tab still
+ * selects that tab on press.)
+ *
+ * Listens only while `enabled` (the scroller overflows): a row that fits
+ * behaves exactly as before. Keyboard scrolling is untouched.
+ */
+export declare function useDragScroll(ref: React.RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/internal/use-drag-scroll.js

@@ -0,0 +1,98 @@
+"use client";
+import * as React from "react";
+/** Pointer travel, in px, before a press on the scroller counts as a drag. */
+export const DRAG_THRESHOLD = 4;
+/**
+ * Lets a mouse drag a horizontal scroller sideways, the way touch already
+ * does natively. Mouse only (`pointerType === "mouse"`, left button); touch
+ * and pen keep the browser's own scrolling. A press becomes a drag after
+ * `DRAG_THRESHOLD` px of travel, so a plain click on a tab or link still
+ * activates it; once a drag has moved, the click after pointerup is
+ * swallowed so the drag never also follows a link. (Radix `TabsTrigger`
+ * selects on mousedown, so a drag that starts on an inactive tab still
+ * selects that tab on press.)
+ *
+ * Listens only while `enabled` (the scroller overflows): a row that fits
+ * behaves exactly as before. Keyboard scrolling is untouched.
+ */
+export function useDragScroll(ref, enabled) {
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element || !enabled)
+            return;
+        let pointerId = null;
+        let startX = 0;
+        let startScrollLeft = 0;
+        let dragged = false;
+        const onPointerDown = (event) => {
+            if (event.pointerType !== "mouse" || event.button !== 0)
+                return;
+            pointerId = event.pointerId;
+            startX = event.clientX;
+            startScrollLeft = element.scrollLeft;
+            dragged = false;
+        };
+        const onPointerMove = (event) => {
+            if (pointerId === null || event.pointerId !== pointerId)
+                return;
+            if ((event.buttons & 1) === 0) {
+                // The button came up outside the scroller before capture.
+                pointerId = null;
+                return;
+            }
+            const delta = event.clientX - startX;
+            if (!dragged) {
+                if (Math.abs(delta) < DRAG_THRESHOLD)
+                    return;
+                dragged = true;
+                // Keep the moves and the up when the pointer leaves the box. The
+                // browser releases capture on pointerup and pointercancel.
+                element.setPointerCapture(event.pointerId);
+            }
+            element.scrollLeft = startScrollLeft - delta;
+        };
+        const onPointerUp = (event) => {
+            if (event.pointerId !== pointerId)
+                return;
+            pointerId = null;
+            // `dragged` stays set so the click that follows is swallowed.
+        };
+        const onPointerCancel = (event) => {
+            if (event.pointerId !== pointerId)
+                return;
+            pointerId = null;
+            // No click follows a cancel, so the next real click must go through.
+            dragged = false;
+        };
+        // Capture phase, so it runs before the link's or trigger's own handler.
+        const onClick = (event) => {
+            if (!dragged)
+                return;
+            dragged = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // Links are draggable by default: a native drag would cancel the pointer.
+        // A text selection started in the row would smear across the labels.
+        const onDragOrSelectStart = (event) => {
+            if (pointerId !== null)
+                event.preventDefault();
+        };
+        element.addEventListener("pointerdown", onPointerDown);
+        element.addEventListener("pointermove", onPointerMove);
+        element.addEventListener("pointerup", onPointerUp);
+        element.addEventListener("pointercancel", onPointerCancel);
+        element.addEventListener("click", onClick, true);
+        element.addEventListener("dragstart", onDragOrSelectStart);
+        element.addEventListener("selectstart", onDragOrSelectStart);
+        return () => {
+            element.removeEventListener("pointerdown", onPointerDown);
+            element.removeEventListener("pointermove", onPointerMove);
+            element.removeEventListener("pointerup", onPointerUp);
+            element.removeEventListener("pointercancel", onPointerCancel);
+            element.removeEventListener("click", onClick, true);
+            element.removeEventListener("dragstart", onDragOrSelectStart);
+            element.removeEventListener("selectstart", onDragOrSelectStart);
+        };
+    }, [ref, enabled]);
+}

package/dist/internal/use-media-query.d.ts

@@ -1,7 +1,9 @@
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export declare const MD_MEDIA_QUERY = "(min-width: 768px)";
 /**
- * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
- * without `matchMedia` (jsdom unless the test stubs it).
+ * Subscribe to a CSS media query with `useSyncExternalStore`. The server
+ * render and hydration use `defaultMatches`, so the markup always agrees;
+ * React then re-renders with the real value. `defaultMatches` also covers
+ * environments without `matchMedia` (jsdom unless the test stubs it).
  */
 export declare function useMediaQuery(query: string, defaultMatches?: boolean): boolean;

package/dist/internal/use-media-query.js

@@ -2,26 +2,22 @@
 import * as React from "react";
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export const MD_MEDIA_QUERY = "(min-width: 768px)";
+function hasMatchMedia() {
+    return (typeof window !== "undefined" && typeof window.matchMedia === "function");
+}
 /**
- * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
- * without `matchMedia` (jsdom unless the test stubs it).
+ * Subscribe to a CSS media query with `useSyncExternalStore`. The server
+ * render and hydration use `defaultMatches`, so the markup always agrees;
+ * React then re-renders with the real value. `defaultMatches` also covers
+ * environments without `matchMedia` (jsdom unless the test stubs it).
  */
 export function useMediaQuery(query, defaultMatches = false) {
-    const [matches, setMatches] = React.useState(() => {
-        if (typeof window === "undefined" ||
-            typeof window.matchMedia !== "function") {
-            return defaultMatches;
-        }
-        return window.matchMedia(query).matches;
-    });
-    React.useEffect(() => {
-        if (typeof window.matchMedia !== "function")
-            return;
+    const subscribe = React.useCallback((onChange) => {
+        if (!hasMatchMedia())
+            return () => { };
         const media = window.matchMedia(query);
-        const onChange = () => setMatches(media.matches);
-        onChange();
         media.addEventListener("change", onChange);
         return () => media.removeEventListener("change", onChange);
     }, [query]);
-    return matches;
+    return React.useSyncExternalStore(subscribe, () => (hasMatchMedia() ? window.matchMedia(query).matches : defaultMatches), () => defaultMatches);
 }

package/dist/kanban.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+/**
+ * One board column. Columns render in the order given. `color` (any CSS
+ * color) draws a status dot; `badge` is trailing header meta such as a total.
+ */
+export type KanbanColumn = {
+    /** Matches what `getColumnId` returns for the column's cards. */
+    id: string;
+    /** Header text. */
+    label: string;
+    /** Any CSS color; draws a status dot before the label. No dot when omitted. */
+    color?: string;
+    /** Trailing header meta under the card count, such as a total. */
+    badge?: React.ReactNode;
+    /** Replaces the board's `emptyLabel` for this column. */
+    emptyLabel?: string;
+};
+/**
+ * Positions of the cards on either side of the drop slot (`undefined` at a
+ * column edge). Feed them to a fractional-index helper to store the order.
+ */
+export type KanbanDropTarget = {
+    /** `position` of the card above the drop slot; `undefined` at the top. */
+    beforePosition: number | undefined;
+    /** `position` of the card below the drop slot; `undefined` at the bottom. */
+    afterPosition: number | undefined;
+};
+export type KanbanBoardProps<T extends {
+    id: string;
+    position: number;
+}> = {
+    /** The board's columns, in display order. */
+    columns: KanbanColumn[];
+    /** Every card, in display order; sort by `position` first. A card whose column id is unknown is not shown. */
+    items: T[];
+    /** The id of the column a card belongs in. */
+    getColumnId: (item: T) => string;
+    /** Every drop that changes a column or the order, including same-column reorders. */
+    onMove: (item: T, toColumnId: string, target: KanbanDropTarget) => void;
+    /** Shows a Finish zone while dragging. */
+    onComplete?: (itemId: string) => void;
+    /** Shows a Remove zone while dragging. */
+    onDelete?: (itemId: string) => void;
+    /**
+     * Card body; the board adds the grip, chrome, and sorting. Cards re-render
+     * only when their item changes while this and `onCardClick` keep their
+     * identity, so define them outside the render or wrap them in `useCallback`.
+     */
+    renderCard: (item: T) => React.ReactNode;
+    /** Makes the card body a button. */
+    onCardClick?: (item: T) => void;
+    /** Skeleton cards on a first load with no items; dims the board on a refetch. */
+    isLoading?: boolean;
+    /** Text in a column with no cards. Default `"Drop here"`. */
+    emptyLabel?: string;
+    /** Text on the Finish zone. Default `"Finish"`. */
+    completeLabel?: string;
+    /** Text on the Remove zone. Default `"Remove"`. */
+    deleteLabel?: string;
+    /** Classes for the horizontal scroller that holds the columns. */
+    scrollerClassName?: string;
+    /** Classes for every column, e.g. its width. */
+    columnClassName?: string;
+    /** Classes for every card, including the one under the pointer while dragging. */
+    cardClassName?: string;
+} & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * Drag-and-drop board built on dnd-kit. The consumer owns `items` and maps
+ * each to a column; the board derives its layout from them, so an optimistic
+ * cache update is the only state. Cards drag by their grip, the body stays
+ * clickable, and off-screen columns get edge fades and scroll buttons.
+ */
+declare function KanbanBoard<T extends {
+    id: string;
+    position: number;
+}>({ columns, items, getColumnId, onMove, onComplete, onDelete, renderCard, onCardClick, isLoading, emptyLabel, completeLabel, deleteLabel, className, scrollerClassName, columnClassName, cardClassName, ...props }: KanbanBoardProps<T>): React.JSX.Element;
+/** Board-shaped placeholder for a route `loading` file. */
+declare function KanbanSkeleton({ columnCount, className, columnClassName, ...props }: {
+    /** How many placeholder columns to draw. Default 4. */
+    columnCount?: number;
+    /** Classes for every placeholder column, e.g. to match the board's width. */
+    columnClassName?: string;
+} & Omit<React.ComponentProps<"div">, "children">): React.JSX.Element;
+export { KanbanBoard, KanbanSkeleton };