atlas-react-kit 1.2.0 → 1.2.2

package/dist/internal/listbox-navigation.js

@@ -1,23 +1,21 @@
+import { clamp } from "./math.js";
 /** Page keys move ten rows, a little more than one max-h-60 list viewport. */
 const PAGE_SIZE = 10;
+/** Rows each key moves the highlight; Home and End jump to the ends. */
+const keySteps = new Map([
+    ["ArrowDown", 1],
+    ["ArrowUp", -1],
+    ["PageDown", PAGE_SIZE],
+    ["PageUp", -PAGE_SIZE],
+    ["Home", -Infinity],
+    ["End", Infinity],
+]);
 /** Return the next highlighted index for a listbox navigation key. */
 function moveListboxHighlight(key, index, length) {
-    switch (key) {
-        case "ArrowDown":
-            return length === 0 ? 0 : Math.min(index + 1, length - 1);
-        case "ArrowUp":
-            return Math.max(index - 1, 0);
-        case "Home":
-            return 0;
-        case "End":
-            return length === 0 ? 0 : length - 1;
-        case "PageDown":
-            return length === 0 ? 0 : Math.min(index + PAGE_SIZE, length - 1);
-        case "PageUp":
-            return Math.max(index - PAGE_SIZE, 0);
-        default:
-            return undefined;
-    }
+    const step = keySteps.get(key);
+    if (step === undefined)
+        return undefined;
+    return clamp(index + step, 0, Math.max(length - 1, 0));
 }
 /**
  * Option id for `aria-activedescendant`. Index-based because option values
@@ -45,15 +43,15 @@ function isComposingKey(event) {
 }
 /**
  * Shared keydown for a search input that drives a listbox: navigation keys
- * move the highlight, Enter picks the highlighted index. Returns `true` when
- * the key is handled (or an IME is composing, when every key belongs to the
- * IME), so the caller can stop; `false` leaves the key to the caller (for
- * example SearchPicker's Escape).
+ * move the highlight over `items`, Enter picks the highlighted item. Returns
+ * `true` when the key is handled (or an IME is composing, when every key
+ * belongs to the IME), so the caller can stop; `false` leaves the key to the
+ * caller (for example SearchPicker's Escape).
  */
-export function handleListboxKey(event, { highlight, length, setHighlight, onEnter, }) {
+export function handleListboxKey(event, { items, highlight, setHighlight, onPick, }) {
     if (isComposingKey(event))
         return true;
-    const next = moveListboxHighlight(event.key, highlight, length);
+    const next = moveListboxHighlight(event.key, highlight, items.length);
     if (next !== undefined) {
         event.preventDefault();
         setHighlight(next);
@@ -61,7 +59,9 @@ export function handleListboxKey(event, { highlight, length, setHighlight, onEnt
     }
     if (event.key === "Enter") {
         event.preventDefault();
-        onEnter(highlight);
+        const item = items[highlight];
+        if (item !== undefined)
+            onPick(item);
         return true;
     }
     return false;

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

@@ -1,4 +1,16 @@
 import * as React from "react";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export declare function listboxInputAria(listId: string, activeIndex: number | undefined): {
+    "aria-autocomplete": "list";
+    "aria-activedescendant": string | undefined;
+};
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export declare function Listbox({ empty, className, ...props }: Omit<React.ComponentProps<"ul">, "role"> & {
+    empty: boolean;
+}): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;
@@ -16,9 +28,10 @@ type PickerOptionProps<T> = {
 declare function PickerOptionInner<T>({ item, getLabel, onSelect, onHighlight, showCheck, ...props }: PickerOptionProps<T>): React.JSX.Element;
 export declare const PickerOption: typeof PickerOptionInner;
 /**
- * The "No results" status. It sits outside the listbox, which may own only
- * options, and stays mounted (sr-only when not empty) so screen readers
- * announce the empty state as the query changes.
+ * The "No results" status (`children`, default "No results"). It sits
+ * outside the listbox, which may own only options, and stays mounted
+ * (sr-only when not empty) so screen readers announce the empty state as
+ * the query changes.
  */
 export declare function ListboxEmptyStatus({ empty, className, children, ...props }: Omit<React.ComponentProps<"div">, "role"> & {
     empty: boolean;

package/dist/internal/listbox-option.js

@@ -4,7 +4,23 @@ import { CheckIcon } from "lucide-react";
 import { cn } from "../utils.js";
 import { listboxOptionId, scrollOptionIntoView } from "./listbox-navigation.js";
 import { optionRow } from "./overlay-styles.js";
-import { listboxEmpty, optionState } from "./styles.js";
+import { listboxEmpty, listboxScroll, optionState } from "./styles.js";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export function listboxInputAria(listId, activeIndex) {
+    return {
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex === undefined
+            ? undefined
+            : listboxOptionId(listId, activeIndex),
+    };
+}
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export function Listbox({ empty, className, ...props }) {
+    return (_jsx("ul", { role: "listbox", className: empty ? "sr-only" : cn(listboxScroll, className), ...props }));
+}
 /**
  * One option of a search-driven listbox (Combobox, SearchPicker): a
  * non-focusable button in a presentational `li`, highlighted by state and
@@ -20,10 +36,11 @@ function PickerOptionInner({ item, getLabel, onSelect, onHighlight, showCheck, .
 }
 export const PickerOption = React.memo(PickerOptionInner);
 /**
- * The "No results" status. It sits outside the listbox, which may own only
- * options, and stays mounted (sr-only when not empty) so screen readers
- * announce the empty state as the query changes.
+ * The "No results" status (`children`, default "No results"). It sits
+ * outside the listbox, which may own only options, and stays mounted
+ * (sr-only when not empty) so screen readers announce the empty state as
+ * the query changes.
  */
-export function ListboxEmptyStatus({ empty, className, children, ...props }) {
+export function ListboxEmptyStatus({ empty, className, children = "No results", ...props }) {
     return (_jsx("div", { role: "status", className: empty ? cn(listboxEmpty, className) : "sr-only", ...props, children: empty ? children : null }));
 }

package/dist/internal/overlay-styles.d.ts

@@ -1,9 +1,10 @@
 /**
- * Classes shared by the kit's floating surfaces (Popover, DropdownMenu,
- * Select, Dialog, Tooltip) and the option rows inside them. Components add
- * these with `cn()` instead of retyping them, so the panels and rows look
- * and move the same everywhere. Tailwind only generates class names it
- * finds as literals, so every class appears here in full.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, and move the same everywhere. Tailwind only
+ * generates class names it finds as literals, so every class appears here
+ * in full.
  */
 /** The panel: square corners, popover colors, shadow, and a hairline ring. */
 export declare const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
@@ -16,6 +17,11 @@ export declare const overlaySideSlide = "data-[side=bottom]:slide-in-from-top-2
 export declare const overlayFade = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
 /** Fade plus a slight zoom, for panels (the backdrop only fades). */
 export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-open:zoom-in-95 data-closed:zoom-out-95";
+/**
+ * A panel opened from a trigger (Popover, Select, DropdownMenu): the
+ * surface, sliding in from the trigger's side with a fade and zoom.
+ */
+export declare const anchoredPanel = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-open:zoom-in-95 data-closed:zoom-out-95";
 /**
  * Base of a menu or listbox row (SelectItem, DropdownMenuItem, Combobox and
  * SearchPicker options). Each component adds its own right padding and
@@ -24,3 +30,7 @@ export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-o
 export declare const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export declare const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export declare const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export declare const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/overlay-styles.js

@@ -1,9 +1,10 @@
 /**
- * Classes shared by the kit's floating surfaces (Popover, DropdownMenu,
- * Select, Dialog, Tooltip) and the option rows inside them. Components add
- * these with `cn()` instead of retyping them, so the panels and rows look
- * and move the same everywhere. Tailwind only generates class names it
- * finds as literals, so every class appears here in full.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, and move the same everywhere. Tailwind only
+ * generates class names it finds as literals, so every class appears here
+ * in full.
  */
 /** The panel: square corners, popover colors, shadow, and a hairline ring. */
 export const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
@@ -16,6 +17,11 @@ export const overlaySideSlide = "data-[side=bottom]:slide-in-from-top-2 data-[si
 export const overlayFade = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
 /** Fade plus a slight zoom, for panels (the backdrop only fades). */
 export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:zoom-out-95`;
+/**
+ * A panel opened from a trigger (Popover, Select, DropdownMenu): the
+ * surface, sliding in from the trigger's side with a fade and zoom.
+ */
+export const anchoredPanel = `${overlaySurface} ${overlaySideSlide} ${overlayFadeZoom}`;
 /**
  * Base of a menu or listbox row (SelectItem, DropdownMenuItem, Combobox and
  * SearchPicker options). Each component adds its own right padding and
@@ -24,3 +30,7 @@ export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:
 export const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/search.d.ts

@@ -9,4 +9,8 @@ export declare function createSearchIndex<T>(items: T[], getLabel: (item: T) =>
     item: T;
     label: string;
 }[];
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export declare function filterSearchIndex<T>(index: ReturnType<typeof createSearchIndex<T>>, needle: string): T[];

package/dist/internal/search.js

@@ -12,7 +12,13 @@ export function normalizeSearchQuery(query) {
 export function createSearchIndex(items, getLabel) {
     return items.map((item) => ({ item, label: foldSearchText(getLabel(item)) }));
 }
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export function filterSearchIndex(index, needle) {
+    if (!needle)
+        return index.map(({ item }) => item);
     return index
         .filter(({ label }) => label.includes(needle))
         .map(({ item }) => item);

package/dist/internal/styles.d.ts

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export declare const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export declare const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export declare const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export declare const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export declare const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,6 +41,16 @@ export declare const selectedState: {
     /** Quiet buttons and toggles on hover. */
     hover: string;
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export declare const statusTone: {
+    neutral: string;
+    success: string;
+    warning: string;
+    destructive: string;
+};
 /** The "No results" row of a listbox. */
 export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /**
@@ -83,6 +97,13 @@ export declare const controlSize: {
  * tailwind-merge then drops the `text-xs`.
  */
 export declare const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Secondary text under a title (CardDescription, PopoverDescription,
+ * DialogDescription, AlertDescription).
+ */
+export declare const descriptionText = "text-sm leading-relaxed text-muted-foreground";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export declare const labelText = "text-xs font-semibold tracking-wide uppercase";
 /**
  * Icons inside a control or row: no pointer events, no shrinking, 14px
  * unless the icon sets its own `size-*`. `sm` lowers that default to 12px

package/dist/internal/styles.js

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,6 +41,16 @@ export const selectedState = {
     /** Quiet buttons and toggles on hover. */
     hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export const statusTone = {
+    neutral: "[--status-tone:initial]",
+    success: "border-success/40 [--status-tone:var(--color-success)]",
+    warning: "border-warning/40 [--status-tone:var(--color-warning)]",
+    destructive: "border-destructive/40 [--status-tone:var(--color-destructive)]",
+};
 /** The "No results" row of a listbox. */
 export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /**
@@ -83,6 +97,13 @@ export const controlSize = {
  * tailwind-merge then drops the `text-xs`.
  */
 export const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Secondary text under a title (CardDescription, PopoverDescription,
+ * DialogDescription, AlertDescription).
+ */
+export const descriptionText = "text-sm leading-relaxed text-muted-foreground";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export const labelText = "text-xs font-semibold tracking-wide uppercase";
 /**
  * Icons inside a control or row: no pointer events, no shrinking, 14px
  * unless the icon sets its own `size-*`. `sm` lowers that default to 12px

package/dist/kanban.js

@@ -7,6 +7,7 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
+import { focusRingWithin } from "./internal/styles.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
 /** Column droppables lose to cards, so a drop lands between cards. */
@@ -124,7 +125,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
         collisionPriority: COLUMN_DROP_PRIORITY,
     });
     const empty = count === 0;
-    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex flex-wrap items-start justify-between gap-x-2 gap-y-0.5", children: [_jsxs("span", { className: "flex max-w-full min-w-0 items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "truncate leading-tight", title: column.label, children: column.label })] }), _jsxs("span", { className: "ml-auto flex max-w-full min-w-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "max-w-full truncate text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "-m-1 mr-0 flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto p-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
 }
 const cardChrome = cn("flex border border-border bg-card text-card-foreground");
 const handleChrome = cn("flex shrink-0 items-center self-stretch border-r border-border", "bg-muted/30 px-1.5 text-muted-foreground");
@@ -146,7 +147,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
         // The overlay moves; the source keeps its slot.
         "data-dragging:pointer-events-none data-dragging:invisible", 
         // One ring on the card for the grip and the body alike.
-        "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or

package/dist/label.js

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

package/dist/lazy-calendar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { calendarSize } from "./internal/calendar-size.js";
 import { Spinner } from "./spinner.js";
 import { cn } from "./utils.js";
 /**
@@ -16,11 +17,11 @@ export function preloadCalendar() {
 const LazyCalendarInner = React.lazy(() => loadCalendar().then((module) => ({ default: module.Calendar })));
 /**
  * While loading, a placeholder the size of a one-month calendar, measured in
- * the calendar's own `--cell-size` (7 columns plus `p-3`; about 9 cells
+ * the calendar's own `calendarSize` (7 columns plus padding; about 9 cells
  * tall), so the popover does not jump. It takes the calendar's `className`,
  * so a `--cell-size` override sizes both.
  */
-const fallbackClassName = "flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+--spacing(6))] items-center justify-center [--cell-size:--spacing(8)]";
+const fallbackClassName = cn("flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+var(--calendar-padding)*2)] items-center justify-center", calendarSize);
 export function LazyCalendar(props) {
     return (_jsx(React.Suspense, { fallback: _jsx("div", { className: cn(fallbackClassName, props.className), children: _jsx(Spinner, { "aria-label": "Loading calendar" }) }), children: _jsx(LazyCalendarInner, { ...props }) }));
 }

package/dist/nav-link.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { activeLinkAttributes } from "./internal/active-link.js";
 import { focusRing, selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
@@ -36,6 +37,6 @@ function isNavActive(pathname, href) {
  */
 function NavLink({ asChild, active, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(navLinkVariants(), className), ...props }));
+    return (_jsx(Comp, { "data-slot": "nav-link", ...activeLinkAttributes(active), className: cn(navLinkVariants(), className), ...props }));
 }
 export { NavLink, isNavActive, navLinkVariants };

package/dist/picker-shell.d.ts

@@ -64,6 +64,8 @@ export type PickerTriggerProps = {
     "aria-labelledby"?: string;
     /** Forwarded to the trigger, e.g. the id of a hint or error text. */
     "aria-describedby"?: string;
+    /** Forwarded to the trigger; a form field sets it for `focusFirstInvalid`. */
+    "data-field-name"?: string;
     /** Popover side. Defaults to `bottom`; Radix still flips on collision. */
     side?: React.ComponentProps<typeof PopoverContent>["side"];
     /** Month shown when the popover opens; falls back to the selected date. */
@@ -112,5 +114,5 @@ type PickerShellProps = Omit<PickerTriggerProps, "placeholder"> & {
  * Form-control trigger plus the viewport-clamped popover holding the
  * calendar, any extra rows, and an optional Clear row.
  */
-export declare 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, children, }: PickerShellProps): React.JSX.Element;
+export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-field-name": fieldName, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled, children, }: PickerShellProps): React.JSX.Element;
 export {};

package/dist/picker-shell.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { toDate, } from "./internal/date-like.js";
-import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
+import { fieldNameProps, PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
 import { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
@@ -39,8 +39,8 @@ function limitCalendarProps(calendarProps, minDate, maxDate) {
  * 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, 
+export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-field-name": fieldName, 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, ...fieldNameProps(fieldName), "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.

package/dist/popover.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { anchoredPanel, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, } from "./internal/overlay-styles.js";
+import { descriptionText, labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
@@ -10,8 +11,8 @@ function Popover({ ...props }) {
 function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "z-50 flex max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 p-4 text-sm outline-hidden", className), ...props }) }));
+function PopoverContent({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(anchoredPanel, "z-50 flex max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 p-4 text-sm outline-hidden", className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
@@ -20,9 +21,9 @@ function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
-    return (_jsx("h2", { "data-slot": "popover-title", className: cn("text-xs font-semibold uppercase", className), ...props }));
+    return (_jsx("h2", { "data-slot": "popover-title", className: cn(labelText, className), ...props }));
 }
 function PopoverDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "popover-description", className: cn("mt-0.5 text-sm leading-relaxed text-muted-foreground", className), ...props }));
+    return (_jsx("p", { "data-slot": "popover-description", className: cn("mt-0.5", descriptionText, className), ...props }));
 }
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/search-picker.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
-import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
+import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
-import { listboxScroll } from "./internal/styles.js";
-import { cn } from "./utils.js";
+import { cn, onInputChange } from "./utils.js";
 export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.
@@ -25,7 +24,7 @@ const listFrame = "border border-input bg-background";
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, listClassName, ...props }) {
+function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText, listLabel, disabled, className, listClassName, ...props }) {
     const [query, setQuery] = React.useState("");
     const listId = React.useId();
     const inputId = React.useId();
@@ -34,11 +33,8 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         : null, [filter, getLabel, items]);
     const foldedQuery = filter === defaultSearchFilter ? normalizeSearchQuery(query) : "";
     const filtered = React.useMemo(() => {
-        if (normalizedItems) {
-            if (!foldedQuery)
-                return items;
+        if (normalizedItems)
             return filterSearchIndex(normalizedItems, foldedQuery);
-        }
         return items.filter((item) => filter(item, query, getLabel));
     }, [items, filter, foldedQuery, getLabel, normalizedItems, query]);
     const selectedIndex = React.useMemo(() => {
@@ -67,14 +63,10 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
     }, [onSelect]);
     const onKeyDown = (event) => {
         const handled = handleListboxKey(event, {
+            items: filtered,
             highlight,
-            length: filtered.length,
             setHighlight,
-            onEnter: (index) => {
-                const item = filtered[index];
-                if (item)
-                    selectItem(item);
-            },
+            onPick: selectItem,
         });
         if (handled || event.key !== "Escape")
             return;
@@ -85,6 +77,6 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         }
         event.currentTarget.blur();
     };
-    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty ? "sr-only" : cn(listboxScroll, listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, ...listboxInputAria(listId, active ? highlight : undefined), value: query, disabled: disabled, placeholder: placeholder, onChange: onInputChange(setQuery), onKeyDown: onKeyDown }), _jsx(Listbox, { id: listId, empty: empty, "aria-label": listLabel ?? label, className: cn(listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
 }
 export { SearchPicker };

package/dist/select.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
-import { dataDisabledState, disabledState, fieldSurface, focusRing, inlineIcon, invalidState, optionState, } from "./internal/styles.js";
-import { menuLabel, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, disabledState, emptyValueText, fieldSurface, focusRing, inlineIcon, invalidState, optionState, } from "./internal/styles.js";
+import { anchoredPanel, menuLabel, optionRow, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 /**
@@ -22,10 +22,10 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, inlineIcon.default, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, emptyValueText, inlineIcon.default, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
-function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" &&
+function SelectContent({ className, children, position = "popper", align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(anchoredPanel, "relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", "data-position": position, className: "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {

package/dist/skip-link.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRing } from "./internal/styles.js";
 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 }));
+    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", focusRing, className), ...props, children: children }));
 }
 export { SkipLink };