atlas-react-kit 0.10.0 → 0.11.0

package/dist/internal/overlay-styles.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+/** 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";
+/** Slide in from the trigger, on whichever side Radix placed the panel. */
+export const overlaySideSlide = "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";
+/**
+ * Fade on open and close. `data-open` and `data-closed` (theme.css) match
+ * Radix's `data-state="open"` and `"closed"`.
+ */
+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`;
+/**
+ * Base of a menu or listbox row (SelectItem, DropdownMenuItem, Combobox and
+ * SearchPicker options). Each component adds its own right padding and
+ * indicator, plus the highlight from `optionState`.
+ */
+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";
+/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
+export const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+/** 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";

package/dist/internal/styles.d.ts

@@ -50,3 +50,30 @@ export declare const optionState: {
     /** The chosen value in lists that track selection in state. */
     selected: string;
 };
+/** `aria-disabled` (links and cells that cannot be `disabled`): dimmed, with no hover or click. */
+export declare const ariaDisabledState = "aria-disabled:pointer-events-none aria-disabled:opacity-50";
+/**
+ * Larger click target for a small choice control (checkbox, radio, switch):
+ * an invisible `::after` 12px wider each side and 8px taller each side. The
+ * control needs `relative`.
+ */
+export declare const choiceHitArea = "after:absolute after:-inset-x-3 after:-inset-y-2";
+/**
+ * 44×44px invisible `::after` centred on a small control (slider thumb,
+ * icon trigger), the WCAG 2.5.5 target size. The control needs `relative`.
+ */
+export declare const hitArea44 = "after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2";
+/**
+ * Height and horizontal padding for text controls, shared by Button and
+ * Toggle so a toolbar of both lines up. Padding tightens on the icon side.
+ */
+export declare const controlSize: {
+    default: string;
+    sm: string;
+    lg: string;
+};
+/**
+ * Uppercase muted label used on tiles, legends, and thin section chrome.
+ * Re-exported publicly from `atlas-react-kit/stat-tile`.
+ */
+export declare const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";

package/dist/internal/styles.js

@@ -50,3 +50,30 @@ export const optionState = {
     /** The chosen value in lists that track selection in state. */
     selected: "bg-selected text-selected-foreground",
 };
+/** `aria-disabled` (links and cells that cannot be `disabled`): dimmed, with no hover or click. */
+export const ariaDisabledState = "aria-disabled:pointer-events-none aria-disabled:opacity-50";
+/**
+ * Larger click target for a small choice control (checkbox, radio, switch):
+ * an invisible `::after` 12px wider each side and 8px taller each side. The
+ * control needs `relative`.
+ */
+export const choiceHitArea = "after:absolute after:-inset-x-3 after:-inset-y-2";
+/**
+ * 44×44px invisible `::after` centred on a small control (slider thumb,
+ * icon trigger), the WCAG 2.5.5 target size. The control needs `relative`.
+ */
+export const hitArea44 = "after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2";
+/**
+ * Height and horizontal padding for text controls, shared by Button and
+ * Toggle so a toolbar of both lines up. Padding tightens on the icon side.
+ */
+export const controlSize = {
+    default: "h-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+    sm: "h-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+    lg: "h-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+};
+/**
+ * Uppercase muted label used on tiles, legends, and thin section chrome.
+ * Re-exported publicly from `atlas-react-kit/stat-tile`.
+ */
+export const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";

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

@@ -1,5 +1,12 @@
+/**
+ * Tab row. `TabsList` and `TabsNav` pass `orientation`, which picks plain
+ * size classes so a consumer `className` (`h-9`) replaces them. Called
+ * without it (`auto`), the row reads the orientation from the `group/tabs`
+ * root instead, as it always has for apps building their own list.
+ */
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
+    orientation?: "auto" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Horizontal scroller around a tab row. `p-1` leaves room for the active
@@ -8,10 +15,12 @@ declare const tabsListVariants: (props?: ({
  * on an overflow box without this height makes `scrollHeight` 4px taller
  * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
  * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px).
+ * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
+ * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
  */
 declare const tabsScrollerVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

package/dist/internal/tabs-styles.js

@@ -1,14 +1,26 @@
 import { cva } from "class-variance-authority";
 import { disabledState, focusRing, selectedState } from "./styles.js";
-const tabsListVariants = cva('group/tabs-list inline-flex w-max min-w-full items-stretch justify-start p-0 text-muted-foreground group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col', {
+/**
+ * Tab row. `TabsList` and `TabsNav` pass `orientation`, which picks plain
+ * size classes so a consumer `className` (`h-9`) replaces them. Called
+ * without it (`auto`), the row reads the orientation from the `group/tabs`
+ * root instead, as it always has for apps building their own list.
+ */
+const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items-stretch justify-start p-0 text-muted-foreground", {
     variants: {
         variant: {
             default: "bg-muted",
             line: "gap-1 bg-transparent",
         },
+        orientation: {
+            auto: 'group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col',
+            horizontal: "h-11",
+            vertical: "h-fit flex-col",
+        },
     },
     defaultVariants: {
         variant: "default",
+        orientation: "auto",
     },
 });
 /**
@@ -18,17 +30,27 @@ const tabsListVariants = cva('group/tabs-list inline-flex w-max min-w-full items
  * on an overflow box without this height makes `scrollHeight` 4px taller
  * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
  * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px).
+ * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
+ * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
  */
-const tabsScrollerVariants = cva("relative box-border w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", {
+const tabsScrollerVariants = cva("relative box-border min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1", {
     variants: {
         variant: {
-            default: 'group-data-[orientation="horizontal"]/tabs:h-13',
-            line: 'group-data-[orientation="horizontal"]/tabs:h-14 pb-2',
+            default: "",
+            line: "pb-2",
+        },
+        orientation: {
+            horizontal: "",
+            vertical: "",
         },
     },
+    compoundVariants: [
+        { variant: "default", orientation: "horizontal", className: "h-13" },
+        { variant: "line", orientation: "horizontal", className: "h-14" },
+    ],
     defaultVariants: {
         variant: "default",
+        orientation: "horizontal",
     },
 });
 const tabsTriggerVariants = cva([

package/dist/lazy-calendar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Spinner } from "./spinner.js";
+import { cn } from "./utils.js";
 /**
  * Calendar for the picker popovers, fetched on first use so a page that only
  * shows the trigger does not download Day Picker. Not a public entry: apps
@@ -13,6 +14,13 @@ export function preloadCalendar() {
     void loadCalendar();
 }
 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
+ * 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)]";
 export function LazyCalendar(props) {
-    return (_jsx(React.Suspense, { fallback: _jsx("div", { className: "flex h-72 w-64 items-center justify-center", children: _jsx(Spinner, { "aria-label": "Loading calendar" }) }), children: _jsx(LazyCalendarInner, { ...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/markdown.js

@@ -13,8 +13,11 @@ export function safeMarkdownUrl(url) {
     const value = url.trim();
     if (!value)
         return "";
-    if (value.startsWith("#") || value.startsWith("/"))
+    if (value.startsWith("#"))
         return value;
+    // `//host` and `/\host` are protocol-relative: they leave the site.
+    if (value.startsWith("/"))
+        return /^\/[/\\]/.test(value) ? "" : value;
     try {
         const parsed = new URL(value);
         return SAFE_PROTOCOLS.has(parsed.protocol) ? value : "";
@@ -45,9 +48,12 @@ const markdownComponents = {
     pre: ({ children }) => (_jsx("pre", { className: "overflow-x-auto bg-muted p-3 text-xs", children: children })),
     hr: () => _jsx("hr", { className: "border-border" }),
     table: ({ children }) => (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { className: "w-full text-left text-sm", children: children }) })),
-    th: ({ children }) => (_jsx("th", { className: "border-b border-input py-1.5 pr-3 font-medium", children: children })),
-    td: ({ children }) => (_jsx("td", { className: "border-b border-border py-1.5 pr-3", children: children })),
-    img: ({ src, alt }) => (_jsx("img", { src: src, alt: alt ?? "", className: "max-w-full" })),
+    // remark-gfm sets column alignment as an inline text-align style.
+    th: ({ children, style }) => (_jsx("th", { style: style, className: "border-b border-input py-1.5 pr-3 font-medium", children: children })),
+    td: ({ children, style }) => (_jsx("td", { style: style, className: "border-b border-border py-1.5 pr-3", children: children })),
+    img: ({ src, alt }) => 
+    // src already passed through safeMarkdownUrl; an unsafe one is now empty.
+    src ? (_jsx("img", { src: src, alt: alt ?? "", className: "max-w-full" })) : alt ? (_jsx("span", { children: alt })) : null,
 };
 /**
  * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw

package/dist/meter.d.ts

@@ -1,9 +1,10 @@
+import type * as React from "react";
 export type MeterMarker = {
     /** Same scale as `value` / `min` / `max` (not a 0–1 fraction). */
     position: number;
     className?: string;
 };
-export type MeterProps = {
+export type MeterProps = Omit<React.ComponentProps<"div">, "children" | "role" | "aria-label"> & {
     value: number;
     min?: number;
     max: number;
@@ -18,5 +19,5 @@ export type MeterProps = {
  * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
  * marker positions (80% of a cap, 1.0× typical, and so on).
  */
-declare function Meter({ value, min, max, fillClassName, markers, "aria-label": ariaLabel, className, }: MeterProps): import("react").JSX.Element;
+declare function Meter({ value, min, max, fillClassName, markers, "aria-label": ariaLabel, className, ...props }: MeterProps): React.JSX.Element;
 export { Meter };

package/dist/meter.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp } from "./internal/math.js";
 import { cn } from "./utils.js";
 /**
  * Track, fill, and optional ticks for a current value against a scale.
  * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
  * marker positions (80% of a cap, 1.0× typical, and so on).
  */
-function Meter({ value, min = 0, max, fillClassName = "bg-primary", markers, "aria-label": ariaLabel, className, }) {
+function Meter({ value, min = 0, max, fillClassName = "bg-primary", markers, "aria-label": ariaLabel, className, ...props }) {
     const span = max - min;
+    // A NaN reading (missing data upstream) draws and announces as empty.
+    const current = Number.isFinite(value) ? value : min;
     const toPercent = (amount) => {
         if (span === 0)
             return 0;
-        return Math.min(100, Math.max(0, ((amount - min) / span) * 100));
+        return clamp(((amount - min) / span) * 100, 0, 100);
     };
-    return (_jsxs("div", { role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-muted", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(value)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
+    return (_jsxs("div", { ...props, role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clamp(current, min, max), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-muted", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(current)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
 }
 export { Meter };

package/dist/pagination.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
  * lives in the URL; pass `onClick` with `href` for client-side routing.
+ * The nav is a plain flex row: place it with `className` (`justify-center`,
+ * `justify-end`, `mx-auto`) to suit the layout.
  */
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
@@ -9,9 +11,14 @@ declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React
 type PaginationLinkProps = {
     isActive?: boolean;
     size?: "default" | "icon";
+    /**
+     * No page to go to, such as Previous on the first page. Renders without
+     * `href`, announced as a disabled link and dimmed.
+     */
+    disabled?: boolean;
 } & React.ComponentProps<"a">;
 /** The current page gets `aria-current="page"` and the selected wash. */
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationLink({ className, isActive, size, disabled, href, ...props }: PaginationLinkProps): React.JSX.Element;
 declare function PaginationPrevious({ className, children, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
 declare function PaginationNext({ className, children, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/dist/pagination.js

@@ -2,14 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
 import { buttonVariants } from "./button.js";
-import { selectedState } from "./internal/styles.js";
+import { ariaDisabledState, selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
  * lives in the URL; pass `onClick` with `href` for client-side routing.
+ * The nav is a plain flex row: place it with `className` (`justify-center`,
+ * `justify-end`, `mx-auto`) to suit the layout.
  */
 function Pagination({ className, ...props }) {
-    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("flex", className), ...props }));
 }
 function PaginationContent({ className, ...props }) {
     return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
@@ -18,17 +20,21 @@ function PaginationItem({ ...props }) {
     return _jsx("li", { "data-slot": "pagination-item", ...props });
 }
 /** The current page gets `aria-current="page"` and the selected wash. */
-function PaginationLink({ className, isActive, size = "icon", ...props }) {
-    return (_jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
+function PaginationLink({ className, isActive, size = "icon", disabled, href, ...props }) {
+    return (_jsx("a", { href: disabled ? undefined : href, role: disabled ? "link" : undefined, "aria-disabled": disabled || undefined, "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
             variant: isActive ? "outline" : "ghost",
             size: size === "icon" ? "icon-sm" : "sm",
-        }), selectedState.current, "font-medium tracking-normal normal-case tabular-nums", className), ...props }));
+        }), selectedState.current, ariaDisabledState, "font-medium tracking-normal normal-case tabular-nums", className), ...props }));
 }
-function PaginationPrevious({ className, children = "Previous", ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: children })] }));
+function PaginationPrevious({ className, children, ...props }) {
+    return (_jsxs(PaginationLink
+    // Custom (e.g. translated) text names the link itself (WCAG 2.5.3).
+    , { "aria-label": children == null ? "Go to previous page" : undefined, size: "default", className: cn("gap-1 px-2.5 sm:pl-2", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "sr-only sm:not-sr-only", children: children ?? "Previous" })] }));
 }
-function PaginationNext({ className, children = "Next", ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: children }), _jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
+function PaginationNext({ className, children, ...props }) {
+    return (_jsxs(PaginationLink
+    // Custom (e.g. translated) text names the link itself (WCAG 2.5.3).
+    , { "aria-label": children == null ? "Go to next page" : undefined, size: "default", className: cn("gap-1 px-2.5 sm:pr-2", className), ...props, children: [_jsx("span", { className: "sr-only sm:not-sr-only", children: children ?? "Next" }), _jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
 }
 function PaginationEllipsis({ className, ...props }) {
     return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center text-muted-foreground", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));

package/dist/picker-shell.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import type { PropsBase } from "react-day-picker";
+import { PopoverContent } from "./popover.js";
+/**
+ * Not a public entry. The trigger, popover, and Clear footer that
+ * `DatePickerButton` and `DateTimePickerButton` share.
+ */
+/**
+ * Day Picker options for the picker's calendar: disabled matchers,
+ * `startMonth` / `endMonth`, `weekStartsOn`, `locale`, `className`, and so on.
+ * The picker owns the selection, focus, and month props.
+ */
+export type PickerCalendarProps = Omit<PropsBase, "mode" | "required" | "autoFocus" | "defaultMonth" | "numberOfMonths">;
+/** Props both pickers take for their trigger and popover. */
+export type PickerTriggerProps = {
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Classes for the trigger button. */
+    className?: string;
+    /** Classes for the popover content, e.g. a width such as `w-80`. */
+    contentClassName?: string;
+    "aria-invalid"?: boolean;
+    /**
+     * Forwarded to the trigger. To name it from a visible label while still
+     * reading the picked value, list the label's id and then `${id}-value`
+     * (the trigger text). A `<label for>` alone names the button by the label
+     * and drops the value; it can stay for click-to-open.
+     */
+    "aria-labelledby"?: string;
+    /** Forwarded to the trigger, e.g. the id of a hint or error text. */
+    "aria-describedby"?: 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. */
+    defaultMonth?: Date;
+    /** Day Picker options passed through to the calendar. */
+    calendarProps?: PickerCalendarProps;
+};
+type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth" | "calendarProps"> & {
+    /** Muted trigger text while nothing is picked. */
+    empty: boolean;
+    /** Trigger text: the formatted value or the placeholder. */
+    label: string;
+    /** Accessible name of the popover dialog. */
+    dialogLabel: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onInteractOutside?: React.ComponentProps<typeof PopoverContent>["onInteractOutside"];
+    children: React.ReactNode;
+};
+/** Form-control trigger plus the viewport-clamped calendar popover. */
+export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, empty, label, dialogLabel, open, onOpenChange, onInteractOutside, children, }: PickerShellProps): React.JSX.Element;
+/** Clear button row under the calendar. */
+export declare function PickerClearFooter({ disabled, onClear, }: {
+    disabled: boolean;
+    onClear: () => void;
+}): React.JSX.Element;
+export {};

package/dist/picker-shell.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
+import { preloadCalendar } from "./lazy-calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { cn } from "./utils.js";
+/** 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, 
+                // 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" }) }));
+}

package/dist/popover.js

@@ -2,6 +2,7 @@
 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 { cn } from "./utils.js";
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
@@ -10,7 +11,7 @@ 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("z-50 flex max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...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 PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/dist/progress.d.ts

@@ -1,8 +1,12 @@
 import * as React from "react";
 import { Progress as ProgressPrimitive } from "radix-ui";
 /**
- * Determinate progress (uploads, multi-step jobs). `value` is 0–100; omit
- * it for an indeterminate state and pair the bar with a visible label.
+ * Determinate progress (uploads, multi-step jobs). `value` runs from 0 to
+ * `max` (default 100) and is clamped to that range; omit it (or pass a
+ * non-number) for an indeterminate state and pair the bar with a visible
+ * label. `indicatorClassName` styles the fill (default `bg-primary`).
  */
-declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+declare function Progress({ className, indicatorClassName, value, max, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
 export { Progress };

package/dist/progress.js

@@ -2,12 +2,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Progress as ProgressPrimitive } from "radix-ui";
+import { clamp } from "./internal/math.js";
 import { cn } from "./utils.js";
 /**
- * Determinate progress (uploads, multi-step jobs). `value` is 0–100; omit
- * it for an indeterminate state and pair the bar with a visible label.
+ * Determinate progress (uploads, multi-step jobs). `value` runs from 0 to
+ * `max` (default 100) and is clamped to that range; omit it (or pass a
+ * non-number) for an indeterminate state and pair the bar with a visible
+ * label. `indicatorClassName` styles the fill (default `bg-primary`).
  */
-function Progress({ className, value, ...props }) {
-    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: value, className: cn("relative h-2 w-full overflow-hidden rounded-none bg-primary/15", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-full flex-1 bg-primary transition-transform", style: { transform: `translateX(-${100 - (value ?? 0)}%)` } }) }));
+function Progress({ className, indicatorClassName, value, max = 100, ...props }) {
+    const scale = Number.isFinite(max) && max > 0 ? max : 100;
+    const current = value != null && Number.isFinite(value) ? clamp(value, 0, scale) : null;
+    const filled = current == null ? 0 : (current / scale) * 100;
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: current, max: scale, className: cn("relative h-2 w-full overflow-hidden rounded-none bg-primary/15", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full w-full flex-1 bg-primary transition-transform", indicatorClassName), style: { transform: `translateX(-${100 - filled}%)` } }) }));
 }
 export { Progress };

package/dist/radio-group.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { disabledState, focusRing, invalidState } from "./internal/styles.js";
+import { choiceHitArea, disabledState, focusRing, invalidState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * One choice from a short, visible list. Arrow keys move the selection.
@@ -16,6 +16,6 @@ function RadioGroup({ className, ...props }) {
  * differently from square checkboxes.
  */
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn(focusRing, invalidState, disabledState, "peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow after:absolute after:-inset-x-3 after:-inset-y-2 data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { "data-slot": "radio-group-dot", className: "size-2 rounded-full bg-primary" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/search-picker.d.ts

@@ -1,8 +1,6 @@
 import * as React from "react";
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño".
- */
-export declare function foldSearchText(value: string): string;
+import { foldSearchText } from "./internal/listbox-navigation.js";
+export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.
  */
@@ -22,11 +20,11 @@ export type SearchPickerProps<T> = {
     className?: string;
     /** Classes for the listbox, e.g. its height. Defaults to `max-h-60`. */
     listClassName?: string;
-};
+} & Omit<React.ComponentProps<"div">, "children" | "onSelect" | "defaultValue">;
 /**
  * Always-visible combobox: a labelled input and a listbox. Unlike Combobox,
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, listClassName, }: SearchPickerProps<T>): React.JSX.Element;
+declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, listClassName, ...props }: SearchPickerProps<T>): React.JSX.Element;
 export { SearchPicker };