@sole-ui/react 0.0.0-stage → 0.2.0

package/dist/components/sole/pill.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+const TONES = {
+    success: 'border-success-border bg-success-soft text-success-text',
+    warning: 'border-warning-border bg-warning-soft text-warning-text',
+    neutral: 'border-transparent bg-neutral-soft text-neutral-text',
+    info: 'border-transparent bg-accent text-accent-foreground',
+};
+export const Pill = React.forwardRef(function Pill({ tone = 'neutral', icon, children, className, ...props }, ref) {
+    return (_jsxs("span", { ref: ref, "data-pill": tone, className: cn('inline-flex h-[22px] max-w-full shrink-0 items-center gap-[5px] rounded-md border px-2 text-label whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0', TONES[tone], className), ...props, children: [icon, _jsx("span", { className: "truncate", children: children })] }));
+});
+Pill.displayName = 'Pill';

package/dist/components/sole/states.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { type LucideIcon } from 'lucide-react';
+export interface CenteredStateProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+}
+export declare const CenteredState: React.ForwardRefExoticComponent<CenteredStateProps & React.RefAttributes<HTMLDivElement>>;
+export interface EmptyStateProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
+    icon?: LucideIcon;
+    /** A fact, as a sentence: "Nothing is assigned to you right now." */
+    title: string;
+    body?: React.ReactNode;
+    /** The next move: one secondary button or link. */
+    action?: React.ReactNode;
+    framed?: boolean;
+}
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export interface ErrorStateProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
+    /** "Could not load the wiki". */
+    title: string;
+    body?: React.ReactNode;
+    /** Shows the Try again button. */
+    onRetry?: () => void;
+    framed?: boolean;
+}
+export declare const ErrorState: React.ForwardRefExoticComponent<ErrorStateProps & React.RefAttributes<HTMLDivElement>>;
+export interface NoAccessProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** What they cannot open, finishing "You do not have access to ...": "the Payroll board". */
+    what: string;
+    body?: React.ReactNode;
+    framed?: boolean;
+}
+export declare const NoAccess: React.ForwardRefExoticComponent<NoAccessProps & React.RefAttributes<HTMLDivElement>>;
+/** True once `ms` have passed. Loading states wait 300ms so quick loads never flash. */
+export declare function useDelayed(ms?: number): boolean;
+export interface SkeletonRowsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    rows?: number;
+    /** row: a 36px work item row. page: a 52px two-line row. */
+    variant?: 'row' | 'page';
+    /** Milliseconds to show nothing for, so a quick load never flashes. */
+    delay?: number;
+    /** What screen readers hear while it loads. */
+    label?: string;
+}
+/**
+ * Skeleton rows shaped like the real rows. Shows nothing for the first 300ms, then
+ * 12px bars pulsing at 1.4s. One loading state per screen (U20).
+ */
+export declare const SkeletonRows: React.ForwardRefExoticComponent<SkeletonRowsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sole/states.js

@@ -0,0 +1,53 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Lock, RotateCw, TriangleAlert } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+import { Button } from '../ui/button.js';
+import { Skeleton } from '../ui/skeleton.js';
+// Empty, error, no access and loading (brand-and-ux 5.15). Error and empty are never
+// the same screen: a failed load does not claim there is nothing there (U51).
+// The designed states (02-components.png, 99.1 to 99.3): a 24px icon, a 14/500 title,
+// one or two 13px lines, and at most one secondary button. `framed` puts them in the
+// 420px bordered card a whole screen uses; bare, they sit inside a list or a card.
+// CenteredState places a framed state a little above the middle of the page body.
+const stateBox = (framed, className) => cn('flex flex-col items-center text-center', framed ? 'w-full max-w-[420px] rounded-xl border border-border bg-card px-6 py-12' : 'px-4 py-16', className);
+export const CenteredState = React.forwardRef(function CenteredState({ children, className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn('flex min-h-full items-center justify-center px-6 pt-10 pb-20', className), ...props, children: children }));
+});
+CenteredState.displayName = 'CenteredState';
+export const EmptyState = React.forwardRef(function EmptyState({ icon: Icon, title, body, action, framed, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, role: "status", className: stateBox(framed, className), ...props, children: [Icon && _jsx(Icon, { size: 24, strokeWidth: 1.8, "aria-hidden": "true", className: "mb-1.5 text-subtle-foreground" }), _jsx("p", { className: "text-strong font-medium text-muted-foreground", children: title }), body && _jsx("p", { className: "mt-1.5 max-w-96 text-body text-subtle-foreground", children: body }), action && _jsx("div", { className: "mt-5", children: action })] }));
+});
+EmptyState.displayName = 'EmptyState';
+export const ErrorState = React.forwardRef(function ErrorState({ title, body = 'The server did not answer. Try again in a moment.', onRetry, framed, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, role: "alert", className: stateBox(framed, className), ...props, children: [_jsx(TriangleAlert, { size: 24, strokeWidth: 1.8, "aria-hidden": "true", className: "mb-1.5 text-warning" }), _jsx("p", { className: "text-strong font-medium text-muted-foreground", children: title }), body && _jsx("p", { className: "mt-1.5 max-w-96 text-body text-subtle-foreground", children: body }), onRetry && (_jsxs(Button, { variant: "secondary", className: "mt-5", onClick: onRetry, children: [_jsx(RotateCw, { "aria-hidden": "true" }), "Try again"] }))] }));
+});
+ErrorState.displayName = 'ErrorState';
+export const NoAccess = React.forwardRef(function NoAccess({ what, body = 'Ask an admin to add you.', framed, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, role: "status", className: stateBox(framed, className), ...props, children: [_jsx(Lock, { size: 24, strokeWidth: 1.8, "aria-hidden": "true", className: "mb-1.5 text-subtle-foreground" }), _jsxs("p", { className: "text-strong font-medium text-muted-foreground", children: ["You do not have access to ", what, "."] }), body && _jsx("p", { className: "mt-1.5 max-w-96 text-body text-subtle-foreground", children: body })] }));
+});
+NoAccess.displayName = 'NoAccess';
+/** True once `ms` have passed. Loading states wait 300ms so quick loads never flash. */
+export function useDelayed(ms = 300) {
+    const [ready, setReady] = React.useState(ms <= 0);
+    React.useEffect(() => {
+        if (ms <= 0)
+            return;
+        const t = setTimeout(() => setReady(true), ms);
+        return () => clearTimeout(t);
+    }, [ms]);
+    return ready;
+}
+const WIDTHS = ['62%', '48%', '71%', '55%', '66%', '44%', '58%', '69%'];
+/**
+ * Skeleton rows shaped like the real rows. Shows nothing for the first 300ms, then
+ * 12px bars pulsing at 1.4s. One loading state per screen (U20).
+ */
+export const SkeletonRows = React.forwardRef(function SkeletonRows({ rows = 6, variant = 'row', delay = 300, label = 'Loading', className, ...props }, ref) {
+    const visible = useDelayed(delay);
+    if (!visible)
+        return _jsx("div", { ref: ref, "aria-busy": "true", "aria-label": label, className: className, ...props });
+    return (_jsx("div", { ref: ref, "aria-busy": "true", "aria-label": label, className: cn('flex flex-col', className), ...props, children: Array.from({ length: rows }, (_, i) => (_jsx("div", { className: cn('flex items-center gap-3 border-b border-hairline px-3', variant === 'row' ? 'h-9' : 'h-[52px]'), children: variant === 'row' ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "w-4" }), _jsx(Skeleton, { className: "w-12" }), _jsx(Skeleton, { style: { width: WIDTHS[i % WIDTHS.length] } }), _jsx(Skeleton, { className: "ml-auto w-12" })] })) : (_jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Skeleton, { style: { width: WIDTHS[i % WIDTHS.length] } }), _jsx(Skeleton, { className: "h-2.5 w-40" })] })) }, i))) }));
+});
+SkeletonRows.displayName = 'SkeletonRows';

package/dist/components/sole/table.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { SolePerson } from '../../lib/person.ts';
+/** The card around a table. `label` names it for screen readers ("People"). */
+export declare const Table: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "aria-label" | "role"> & {
+    label: string;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A row: 52px (People row), or pass `min-h-14` for the 56px Access row. */
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The person in a row (People row, Access row): the 32px avatar, the name at 13/500 with
+ * an Admin pill, and a 12px line under it (their title, or their email).
+ */
+export declare const PersonCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+    person: SolePerson;
+    admin?: boolean;
+    /** "Founder", "ava@example.com". */
+    detail?: React.ReactNode;
+    /** A switched-off person: the name in the subtle grey. */
+    muted?: boolean;
+    /** Replaces the plain name, e.g. with a link to their page. */
+    name?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sole/table.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { personName } from '../../lib/person.js';
+import { Avatar } from './avatar.js';
+import { Pill } from './pill.js';
+// Tables (02-components.png 02.9; 80.1 People, 90.1 Access): a 12px card, the
+// TableHeader (layout.tsx), then rows with a hairline between them. Give the header and
+// every row the same grid template, e.g. `grid-cols-[1fr_240px_96px]`, so the columns line up.
+/** The card around a table. `label` names it for screen readers ("People"). */
+export const Table = React.forwardRef(function Table({ label, className, ...props }, ref) {
+    return _jsx("div", { ref: ref, ...props, role: "table", "aria-label": label, className: cn('overflow-hidden rounded-xl border border-border bg-card', className) });
+});
+Table.displayName = 'Table';
+/** A row: 52px (People row), or pass `min-h-14` for the 56px Access row. */
+export const TableRow = React.forwardRef(function TableRow({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, role: "row", className: cn('grid min-h-[52px] items-center gap-4 border-t border-hairline px-4 py-1', className), ...props });
+});
+TableRow.displayName = 'TableRow';
+export const TableCell = React.forwardRef(function TableCell({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, role: "cell", className: cn('min-w-0 truncate text-body text-foreground', className), ...props });
+});
+TableCell.displayName = 'TableCell';
+/**
+ * The person in a row (People row, Access row): the 32px avatar, the name at 13/500 with
+ * an Admin pill, and a 12px line under it (their title, or their email).
+ */
+export const PersonCell = React.forwardRef(function PersonCell({ person, admin = false, detail, muted = false, name, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn('flex min-w-0 items-center gap-2.5', className), ...props, children: [_jsx(Avatar, { person: person, size: 32 }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex h-[18px] min-w-0 items-center gap-[7px]", children: [_jsx("span", { className: cn('truncate text-body leading-[18px] font-medium', muted ? 'text-subtle-foreground' : 'text-foreground'), children: name ?? personName(person) }), admin && _jsx(Pill, { tone: "neutral", children: "Admin" })] }), detail && _jsx("p", { className: "truncate text-label font-normal text-subtle-foreground", children: detail })] })] }));
+});
+PersonCell.displayName = 'PersonCell';

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: 'default' | 'sm';
+} & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogMedia: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Pick<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>, "ref">, "size" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Pick<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>, "ref">, "size" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { cn } from '../../lib/cn.js';
+import { Button } from './button.js';
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+const AlertDialogTrigger = React.forwardRef((props, ref) => _jsx(AlertDialogPrimitive.Trigger, { ref: ref, "data-slot": "alert-dialog-trigger", ...props }));
+AlertDialogTrigger.displayName = 'AlertDialogTrigger';
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { ref: ref, "data-slot": "alert-dialog-overlay", className: cn('fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', className), ...props })));
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
+const AlertDialogContent = React.forwardRef(({ className, size = 'default', ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, "data-slot": "alert-dialog-content", "data-size": size, className: cn('group/alert-dialog-content fixed top-[38%] left-[50%] z-50 grid max-h-[calc(76dvh-32px)] w-[calc(100%-2rem)] overflow-y-auto max-w-[400px] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border bg-popover p-5 text-popover-foreground shadow-lg duration-200 ease-rise outline-none data-[size=sm]:max-w-xs 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 })] })));
+AlertDialogContent.displayName = 'AlertDialogContent';
+const AlertDialogHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "alert-dialog-header", className: cn('grid grid-rows-[auto_1fr] place-items-start gap-1 text-left has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4', className), ...props })));
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+const AlertDialogFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "alert-dialog-footer", className: cn('flex flex-row justify-end gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2', className), ...props })));
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, "data-slot": "alert-dialog-title", className: cn('text-title group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2', className), ...props })));
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, "data-slot": "alert-dialog-description", className: cn('text-body text-muted-foreground', className), ...props })));
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+const AlertDialogMedia = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "alert-dialog-media", className: cn("inline-flex size-10 items-center justify-center rounded-lg bg-muted row-span-2 *:[svg:not([class*='size-'])]:size-5", className), ...props })));
+AlertDialogMedia.displayName = 'AlertDialogMedia';
+const AlertDialogAction = React.forwardRef(({ className, variant = 'default', size = 'default', ...props }, ref) => (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Action, { ref: ref, "data-slot": "alert-dialog-action", className: cn(className), ...props }) })));
+AlertDialogAction.displayName = 'AlertDialogAction';
+const AlertDialogCancel = React.forwardRef(({ className, variant = 'outline', size = 'default', ...props }, ref) => (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Cancel, { ref: ref, "data-slot": "alert-dialog-cancel", className: cn(className), ...props }) })));
+AlertDialogCancel.displayName = 'AlertDialogCancel';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "accent" | "danger" | "default" | "outline" | "overdue" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "accent" | "danger" | "default" | "outline" | "overdue" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,30 @@
+'use client';
+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 { cn } from '../../lib/cn.js';
+// A badge is the 22px chip (brand-and-ux 5.5): 6px corners, 12/500, so it reads as a
+// data label and never as a button. Colour follows the four meanings in 5.3.
+const badgeVariants = cva('inline-flex h-[22px] w-fit shrink-0 items-center justify-center gap-[5px] overflow-hidden rounded-md border px-2 text-label whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-neutral-soft text-neutral-text',
+            outline: 'border-border bg-transparent text-muted-foreground',
+            accent: 'border-transparent bg-accent text-accent-foreground',
+            danger: 'border-danger-border bg-danger-soft text-danger-text',
+            warning: 'border-warning-border bg-warning-soft text-warning-text',
+            success: 'border-success-border bg-success-soft text-success-text',
+            overdue: 'border-transparent bg-overdue text-overdue-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const Badge = React.forwardRef(function Badge({ className, variant = 'default', asChild = false, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : 'span';
+    return (_jsx(Comp, { ref: ref, "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+});
+Badge.displayName = 'Badge';
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,49 @@
+'use client';
+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 { cn } from '../../lib/cn.js';
+// Sole sizes (brand-and-ux 5.5): sm 28px, default 32px, lg 36px, icon 32x32. Desktop
+// only (D32), so there are no touch sizes. Press moves the button down half a pixel.
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] duration-[120ms] outline-none select-none active:translate-y-[0.5px] focus-visible:border-ring focus-visible:shadow-[var(--focus-ring)] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+    variants: {
+        variant: {
+            default: 'border border-transparent bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover',
+            destructive: 'border border-transparent bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+            // The design's outline button sits on the canvas grey (60.5 Change date, 60.10
+            // Cancel); an outline icon button is white (90.1 row menu), set below.
+            outline: 'border border-border bg-background text-foreground shadow-xs hover:bg-sidebar-hover',
+            secondary: 'border border-transparent bg-secondary text-secondary-foreground hover:bg-sidebar-hover',
+            ghost: 'border border-transparent text-muted-foreground hover:bg-sidebar-hover hover:text-foreground',
+            link: 'border border-transparent px-0 text-link underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-8 px-3 text-body',
+            xs: "h-6 gap-1 rounded-md px-2 text-label [&_svg:not([class*='size-'])]:size-3",
+            sm: 'h-7 px-2.5 text-label',
+            lg: 'h-9 px-3.5 text-strong font-semibold',
+            icon: 'size-8',
+            'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-7 rounded-md',
+            'icon-lg': 'size-9',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'outline',
+            size: ['icon', 'icon-xs', 'icon-sm', 'icon-lg'],
+            class: 'bg-card text-muted-foreground hover:bg-row-hover hover:text-foreground',
+        },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Button = React.forwardRef(function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { ref: ref, "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+});
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/dist/components/ui/calendar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import type { DayButton } from 'react-day-picker';
+import { Button } from './button.tsx';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/ui/calendar.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { cn } from '../../lib/cn.js';
+import { Button, buttonVariants } from './button.js';
+// DayPicker's custom parts live out here, not inside Calendar's render: a component defined
+// inline is a new type on every render, so the whole month would remount whenever the
+// parent re-rendered (on each selection in a controlled calendar).
+function CalendarRoot({ className, rootRef, ...props }) {
+    return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
+}
+function CalendarChevron({ className, orientation, ...props }) {
+    if (orientation === 'left') {
+        return _jsx(ChevronLeftIcon, { className: cn('size-4', className), ...props });
+    }
+    if (orientation === 'right') {
+        return _jsx(ChevronRightIcon, { className: cn('size-4', className), ...props });
+    }
+    return _jsx(ChevronDownIcon, { className: cn('size-4', className), ...props });
+}
+function CalendarWeekNumber({ children, week: _week, ...props }) {
+    return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+}
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            ...formatters,
+        }, classNames: {
+            root: cn('w-fit', defaultClassNames.root),
+            months: cn('relative flex flex-row gap-4', defaultClassNames.months),
+            month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+            nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_next),
+            month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-body font-medium', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50', defaultClassNames.dropdown_root),
+            dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+            caption_label: cn('font-medium select-none', captionLayout === 'label'
+                ? 'text-body'
+                : 'flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-body [&>svg]:size-3.5 [&>svg]:text-muted-foreground', defaultClassNames.caption_label),
+            month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
+            weekdays: cn('flex', defaultClassNames.weekdays),
+            weekday: cn('flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),
+            week: cn('mt-2 flex w-full', defaultClassNames.week),
+            week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
+            week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
+            day: cn('group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md', props.showWeekNumber
+                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
+                : '[&:first-child[data-selected=true]_button]:rounded-l-md', defaultClassNames.day),
+            range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+            range_middle: cn('rounded-none', defaultClassNames.range_middle),
+            range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+            today: cn('rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none', defaultClassNames.today),
+            outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+            disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+            hidden: cn('invisible', defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: CalendarRoot,
+            Chevron: CalendarChevron,
+            DayButton: CalendarDayButton,
+            WeekNumber: CalendarWeekNumber,
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:shadow-[var(--focus-ring)] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-label [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { cn } from '../../lib/cn.js';
+const Checkbox = React.forwardRef(function Checkbox({ className, ...props }, ref) {
+    return (_jsx(CheckboxPrimitive.Root, { ref: ref, "data-slot": "checkbox", className: cn('peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:shadow-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+});
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };

package/dist/components/ui/command.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Dialog } from './dialog.tsx';
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CommandDialog({ title, description, children, className, showCloseButton, footer, shouldFilter, commandValue, onCommandValueChange, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    footer?: React.ReactNode;
+    /** false when the caller filters and ranks the items itself (server search results). */
+    shouldFilter?: boolean;
+    /** The highlighted item's value, when the caller controls it. */
+    commandValue?: string;
+    onCommandValueChange?: (value: string) => void;
+}): React.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & {
+    trailing?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/ui/command.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.js';
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, "data-slot": "command", className: cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', className), ...props })));
+Command.displayName = 'Command';
+// Cmd+K (20.2-command-palette-cmd-k.png): 640px, anchored near the top so it does not
+// jump as results change, on a lighter overlay than a dialog's, with a footer that
+// names the keys. Pass `footer` to replace the default Move and Open hints.
+// A dialog root renders no element, so CommandDialog takes no ref.
+function CommandDialog({ title = 'Command palette', description = 'Search, or jump to a screen', children, className, showCloseButton = false, footer, shouldFilter, commandValue, onCommandValueChange, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsxs(DialogContent, { overlayClassName: "bg-black/20", className: cn('top-[12dvh] max-h-[calc(88dvh-32px)] max-w-[640px] translate-y-0 gap-0 overflow-hidden rounded-xl p-0', className), showCloseButton: showCloseButton, children: [_jsx(Command, { shouldFilter: shouldFilter, value: commandValue, onValueChange: onCommandValueChange, className: "rounded-xl [&_[cmdk-group]]:px-1.5 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", children: children }), footer ?? (_jsxs("div", { "data-slot": "command-footer", className: "flex h-9 shrink-0 items-center gap-2 border-t border-border bg-muted px-3.5 text-label font-normal text-subtle-foreground", children: [_jsx(CommandKey, { children: "\u2191\u2193" }), _jsx("span", { className: "mr-2", children: "Move" }), _jsx(CommandKey, { children: "Enter" }), _jsx("span", { children: "Open" })] }))] })] }));
+}
+/** A key in the palette's own chrome: the same box as Kbd, without its import. */
+function CommandKey({ children }) {
+    return (_jsx("kbd", { className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-sm border border-border bg-card px-1 font-sans text-[11px] leading-none font-medium text-muted-foreground", children: children }));
+}
+// The ref goes to the input; the search icon and `trailing` sit in a wrapper around it.
+const CommandInput = React.forwardRef(({ className, trailing, ...props }, ref) => (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-12 shrink-0 items-center gap-2.5 border-b border-border px-4", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 text-subtle-foreground" }), _jsx(CommandPrimitive.Input, { ref: ref, "data-slot": "command-input", className: cn('flex h-full w-full bg-transparent text-[15px] outline-hidden placeholder:text-subtle-foreground disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), trailing] })));
+CommandInput.displayName = 'CommandInput';
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, "data-slot": "command-list", className: cn('max-h-[min(400px,calc(88dvh-120px))] scroll-py-1.5 overflow-x-hidden overflow-y-auto py-1.5', className), ...props })));
+CommandList.displayName = 'CommandList';
+const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, "data-slot": "command-empty", className: "py-6 text-center text-body text-muted-foreground", ...props })));
+CommandEmpty.displayName = 'CommandEmpty';
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, "data-slot": "command-group", className: cn('overflow-hidden text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-1.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:leading-4 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:text-subtle-foreground', className), ...props })));
+CommandGroup.displayName = 'CommandGroup';
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props })));
+CommandSeparator.displayName = 'CommandSeparator';
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, "data-slot": "command-item", className: cn("group/item relative flex h-8 cursor-default items-center gap-2 rounded-md px-2.5 text-body outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg:not([class*='text-'])]:text-accent-foreground", className), ...props })));
+CommandItem.displayName = 'CommandItem';
+const CommandShortcut = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, "data-slot": "command-shortcut", className: cn('ml-auto shrink-0 text-label font-normal text-subtle-foreground', className), ...props })));
+CommandShortcut.displayName = 'CommandShortcut';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };