@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/split-sheet.js

@@ -0,0 +1,239 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SplitSheet — a sheet that takes a column of the layout instead of floating
+ * above it.
+ *
+ * `Sheet` portals a fixed panel over the page and dims everything behind it.
+ * `SplitSheet` does neither. The root is a CSS grid, the page is its first
+ * column, and opening the sheet adds a second column on the right. The page
+ * narrows to make room. Nothing is `absolute` or `fixed`.
+ *
+ * Layout follows the width of the root, not the viewport (`@container`):
+ * - Root ≥ 48rem: page and sheet sit side by side, split by a hairline. The
+ *   sheet column is `size` wide, capped at half the root.
+ * - Root < 48rem: the sheet fills the same grid cell as the page. The page stays
+ *   mounted but `invisible`, so it keeps its scroll position and leaves the tab
+ *   order and the accessibility tree until the sheet closes.
+ *
+ * Non-modal: no overlay, no focus trap, no scroll lock. A trigger moves focus
+ * into the sheet. Closing returns focus to that trigger when focus was inside
+ * the sheet. Escape inside the sheet closes it.
+ *
+ * The root needs a bounded height (`h-full` in a sized parent, or `h-dvh`).
+ * The page and the sheet each scroll inside their own column.
+ *
+ * @example
+ * ```tsx
+ * <SplitSheet>
+ *   <SplitSheetMain>
+ *     <SplitSheetTrigger asChild>
+ *       <Button size="sm" variant="secondary">Details</Button>
+ *     </SplitSheetTrigger>
+ *   </SplitSheetMain>
+ *   <SplitSheetContent>
+ *     <SplitSheetHeader>
+ *       <SplitSheetTitle>Title</SplitSheetTitle>
+ *       <SplitSheetDescription>Description</SplitSheetDescription>
+ *     </SplitSheetHeader>
+ *     <SplitSheetBody>{children}</SplitSheetBody>
+ *     <SplitSheetFooter>
+ *       <SplitSheetClose asChild>
+ *         <Button variant="outline-ghost" size="sm">Cancel</Button>
+ *       </SplitSheetClose>
+ *       <Button size="sm">Save</Button>
+ *     </SplitSheetFooter>
+ *   </SplitSheetContent>
+ * </SplitSheet>
+ * ```
+ *
+ * Controlled:
+ * ```tsx
+ * <SplitSheet open={open} onOpenChange={setOpen}>...</SplitSheet>
+ * ```
+ */
+import { XIcon } from '@phosphor-icons/react';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { hasOpenFloatingLayer } from '../../lib/z-stack.js';
+import { Button } from './button.js';
+import Hint from './hint.js';
+import { triggerVariants } from './trigger-variants.js';
+/** Sheet column width, from Tailwind's container scale. The grid caps it at
+ *  `--split-sheet-max` (default 50%) of the root — a caller whose sheet IS
+ *  the main content may raise the cap (`[--split-sheet-max:60%]`). */
+const SIZE_CLASS = {
+    xs: '[--split-sheet-width:var(--container-2xs)]', // 18rem
+    sm: '[--split-sheet-width:var(--container-xs)]', // 20rem
+    md: '[--split-sheet-width:var(--container-sm)]', // 24rem
+    lg: '[--split-sheet-width:var(--container-md)]', // 28rem
+};
+/**
+ * The one decision every open/close request goes through. A controlled sheet
+ * writes no state of its own: the parent's `open` prop is the only source of
+ * truth. Same contract `Disclosure` adopted after its mirrored-state bug.
+ */
+export function resolveSplitSheetChange(state) {
+    const changed = state.open !== state.nextOpen;
+    return { changed, writesInternalState: changed && !state.isControlled };
+}
+const SplitSheetContext = React.createContext(null);
+function useSplitSheetContext(component) {
+    const context = React.useContext(SplitSheetContext);
+    if (!context)
+        throw new Error(`${component} must be rendered inside <SplitSheet>.`);
+    return context;
+}
+/** Read or set the nearest sheet's open state from anywhere inside it. */
+function useSplitSheet() {
+    const { open, requestOpen } = useSplitSheetContext('useSplitSheet');
+    return React.useMemo(() => ({ open, setOpen: (nextOpen) => requestOpen(nextOpen) }), [open, requestOpen]);
+}
+function SplitSheet({ open: openProp, defaultOpen = false, onOpenChange, size = 'md', cover = false, className, children, ...props }) {
+    const isControlled = openProp !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const [instant, setInstant] = React.useState(false);
+    const baseId = React.useId();
+    const returnFocusRef = React.useRef(null);
+    const focusOnOpenRef = React.useRef(false);
+    const restoreFocusRef = React.useRef(false);
+    const requestOpen = React.useCallback((nextOpen, request = {}) => {
+        const { changed, writesInternalState } = resolveSplitSheetChange({
+            open,
+            nextOpen,
+            isControlled,
+        });
+        if (!changed)
+            return;
+        if (request.from)
+            returnFocusRef.current = request.from;
+        if (nextOpen) {
+            focusOnOpenRef.current = request.moveFocus ?? false;
+            setInstant(request.instant ?? false);
+        }
+        if (writesInternalState)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [open, isControlled, onOpenChange]);
+    // The panel flags `restoreFocusRef` as it unmounts with focus inside it.
+    // Without this, focus falls to <body> and the next Tab starts from the top.
+    React.useEffect(() => {
+        if (open || !restoreFocusRef.current)
+            return;
+        restoreFocusRef.current = false;
+        const target = returnFocusRef.current;
+        if (target?.isConnected)
+            target.focus({ preventScroll: true });
+    }, [open]);
+    const context = React.useMemo(() => ({
+        open,
+        instant,
+        cover,
+        contentId: `${baseId}-content`,
+        titleId: `${baseId}-title`,
+        requestOpen,
+        returnFocusRef,
+        focusOnOpenRef,
+        restoreFocusRef,
+    }), [open, instant, cover, baseId, requestOpen]);
+    return (_jsx(SplitSheetContext.Provider, { value: context, children: _jsx("div", { "data-slot": "split-sheet", "data-state": open ? 'open' : 'closed', className: cn('@container/split-sheet h-full min-h-0 w-full', SIZE_CLASS[size], className), ...props, children: _jsx("div", { "data-slot": "split-sheet-grid", className: cn('grid h-full min-h-0 grid-cols-1 grid-rows-1', open &&
+                    !cover &&
+                    '@3xl/split-sheet:grid-cols-[minmax(0,1fr)_min(var(--split-sheet-width),var(--split-sheet-max,50%))]'), children: children }) }) }));
+}
+/** The page. Always the first column; it scrolls on its own. */
+function SplitSheetMain({ className, ...props }) {
+    const { open, cover } = useSplitSheetContext('SplitSheetMain');
+    return (_jsx("div", { "data-slot": "split-sheet-main", className: cn('col-start-1 row-start-1 min-h-0 min-w-0 overflow-y-auto', 
+        // Narrow root (or `cover`): the sheet covers this cell. `invisible`
+        // keeps the page mounted with its scroll position and hides it from
+        // keyboard and AT.
+        open && (cover ? 'invisible' : '@max-3xl/split-sheet:invisible'), className), ...props }));
+}
+/** Toggles the sheet. Call `event.preventDefault()` in `onClick` to handle the click yourself. */
+function SplitSheetTrigger({ asChild = false, variant, size, className, type, onClick, ...props }) {
+    const { open, contentId, requestOpen } = useSplitSheetContext('SplitSheetTrigger');
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { ...props, type: asChild ? type : (type ?? 'button'), "data-slot": "split-sheet-trigger", "data-state": open ? 'open' : 'closed', "aria-expanded": open, "aria-controls": open ? contentId : undefined, 
+        // With `asChild` the child owns its styling — merging ours would double it.
+        className: asChild ? className : cn(triggerVariants({ variant, size }), className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            requestOpen(!open, {
+                from: event.currentTarget,
+                // `detail === 0` is an Enter/Space activation. Keyboard is never animated.
+                instant: event.detail === 0,
+                moveFocus: true,
+            });
+        } }));
+}
+function SplitSheetClose({ asChild = false, type, onClick, ...props }) {
+    const { requestOpen } = useSplitSheetContext('SplitSheetClose');
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { "data-slot": "split-sheet-close", ...props, type: asChild ? type : (type ?? 'button'), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            requestOpen(false);
+        } }));
+}
+/** The sheet column. Renders nothing while closed. Always include a `SplitSheetTitle`. */
+function SplitSheetContent(props) {
+    const { open } = useSplitSheetContext('SplitSheetContent');
+    return open ? _jsx(SplitSheetPanel, { ...props }) : null;
+}
+function SplitSheetPanel({ className, onKeyDown, ...props }) {
+    const { instant, cover, contentId, titleId, requestOpen, focusOnOpenRef, restoreFocusRef } = useSplitSheetContext('SplitSheetContent');
+    const panelRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const panel = panelRef.current;
+        restoreFocusRef.current = false;
+        if (panel && focusOnOpenRef.current) {
+            focusOnOpenRef.current = false;
+            panel.focus({ preventScroll: true });
+        }
+        return () => {
+            // Layout cleanup runs before React detaches the panel, so focus is still readable.
+            if (panel?.contains(document.activeElement))
+                restoreFocusRef.current = true;
+        };
+    }, [focusOnOpenRef, restoreFocusRef]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== 'Escape')
+            return;
+        // Escape inside a portaled menu or select bubbles here through the React
+        // tree. That Escape belongs to the menu, not the sheet — the guard `Modal` uses.
+        if (!event.currentTarget.contains(event.target) || hasOpenFloatingLayer())
+            return;
+        event.preventDefault();
+        requestOpen(false);
+    };
+    return (_jsx("aside", { "aria-labelledby": titleId, ...props, ref: panelRef, id: contentId, tabIndex: -1, "data-slot": "split-sheet-content", "data-state": "open", "data-instant": instant ? '' : undefined, onKeyDown: handleKeyDown, className: cn('bg-surface  col-start-1 row-start-1 flex min-h-0 min-w-0 flex-col outline-none', 
+        // `cover` keeps the panel on the page's own cell at every width.
+        !cover && '@3xl/split-sheet:col-start-2 @3xl/split-sheet:border-l', 
+        // Enter only. The column itself snaps: animating grid tracks re-wraps
+        // the page on every frame. Reduced motion keeps the fade, drops the slide.
+        // `duration-(--duration-moderate)`, not `duration-moderate`: Tailwind 4 has
+        // no `--duration-*` theme namespace, so the bare token class emits no CSS.
+        'transition-[opacity,translate] duration-(--duration-moderate) ease-out starting:opacity-0 motion-safe:starting:translate-x-2', 'data-instant:transition-none', className) }));
+}
+function SplitSheetHeader({ className, children, showCloseButton = true, closeLabel = 'Close', ...props }) {
+    return (_jsxs("div", { "data-slot": "split-sheet-header", className: cn('flex shrink-0 items-start gap-3 border-b px-4 py-3', className), ...props, children: [_jsx("div", { className: "flex min-h-8 min-w-0 flex-1 flex-col justify-center gap-0.5 pointer-coarse:min-h-11", children: children }), showCloseButton ? (_jsx(Hint, { label: closeLabel, side: "bottom", sideOffset: 4, children: _jsx(SplitSheetClose, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-base", "aria-label": closeLabel, className: "-mr-1.5 shrink-0 pointer-coarse:size-11", children: _jsx(XIcon, { className: "size-4" }) }) }) })) : null] }));
+}
+function SplitSheetTitle({ className, ...props }) {
+    const { titleId } = useSplitSheetContext('SplitSheetTitle');
+    return (_jsx("h2", { id: titleId, "data-slot": "split-sheet-title", className: cn('text-foreground text-sm font-medium text-pretty wrap-break-word', className), ...props }));
+}
+function SplitSheetDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "split-sheet-description", className: cn('text-muted-foreground text-xs text-pretty wrap-break-word', className), ...props }));
+}
+function SplitSheetBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "split-sheet-body", className: cn('min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-5', className), ...props }));
+}
+function SplitSheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "split-sheet-footer", className: cn('flex shrink-0 flex-wrap items-center justify-end gap-2 border-t px-4 py-3', className), ...props }));
+}
+export { SplitSheet, SplitSheetBody, SplitSheetClose, SplitSheetContent, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetMain, SplitSheetTitle, SplitSheetTrigger, useSplitSheet, };

package/dist/components/ui/spotlight-card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SpotlightCardProps {
+    children: React.ReactNode;
+    className?: string;
+    spotlightColor?: string;
+}
+export declare function SpotlightCard({ children, className, spotlightColor }: SpotlightCardProps): React.JSX.Element;
+export {};

package/dist/components/ui/spotlight-card.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { useRef, useState } from 'react';
+export function SpotlightCard({ children, className, spotlightColor }) {
+    const cardRef = useRef(null);
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseMove = (e) => {
+        if (!cardRef.current)
+            return;
+        const rect = cardRef.current.getBoundingClientRect();
+        setMousePosition({
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        });
+    };
+    // Use custom color if provided, otherwise use CSS variables for light/dark mode
+    const spotlightBg = spotlightColor
+        ? `radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), ${spotlightColor}, transparent 40%)`
+        : undefined;
+    const borderGlowBg = spotlightColor
+        ? `radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), ${spotlightColor.replace('0.1', '0.2')}, transparent 40%)`
+        : undefined;
+    return (_jsxs("div", { ref: cardRef, onMouseMove: handleMouseMove, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: cn('relative overflow-hidden rounded-2xl', className), style: {
+            // @ts-expect-error - CSS custom properties are not in CSSProperties type
+            '--mouse-x': `${mousePosition.x}px`,
+            '--mouse-y': `${mousePosition.y}px`,
+        }, children: [isHovered && (_jsx("div", { className: cn('pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300', !spotlightColor &&
+                    'bg-[radial-gradient(600px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(0,0,0,0.06),transparent_40%)] dark:bg-[radial-gradient(600px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.1),transparent_40%)]'), style: {
+                    opacity: isHovered ? 1 : 0,
+                    ...(spotlightBg && { background: spotlightBg }),
+                } })), isHovered && (_jsx("div", { className: cn('pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300', !spotlightColor &&
+                    'bg-[radial-gradient(400px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(0,0,0,0.1),transparent_40%)] dark:bg-[radial-gradient(400px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.2),transparent_40%)]'), style: {
+                    opacity: isHovered ? 1 : 0,
+                    ...(borderGlowBg && { background: borderGlowBg }),
+                    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                    WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                    maskComposite: 'exclude',
+                    WebkitMaskComposite: 'xor',
+                    padding: '1px',
+                } })), _jsx("div", { className: "relative z-10", children: children })] }));
+}

package/dist/components/ui/status-ring.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The one circle every status glyph in the app is drawn on.
+ *
+ * Three components render this ring — `Loading` (`variant="ring"`),
+ * `TodoStatusIcon`, and `PlanRing` — and they used to disagree about it. All
+ * three were nominally `size-4`, and all three painted something different:
+ *
+ *   pending todo   viewBox 16   r 6.3  stroke 1.5   → 14.1px disc, 1.50px stroke
+ *   completed todo viewBox 256  r 104  (filled)     → 13.0px disc  (Phosphor)
+ *   spinner        viewBox 24   r 10   stroke 4     → 16.0px disc, 2.67px stroke
+ *   plan ring      viewBox 24   r 9.9  stroke 2     → 15.8px disc, 1.33px stroke
+ *
+ * Same class, four sizes, three weights. That is why the check read small and
+ * the spinner read fat next to each other. Sharing these numbers is what makes
+ * the states interchangeable: swap one glyph for another and only the *meaning*
+ * changes — the ink never moves.
+ *
+ * Lives in `components/ui` rather than beside the todo code because `Loading`
+ * is a ui primitive and a primitive must not import from a feature.
+ */
+export declare const STATUS_RING: {
+    /** Square viewBox. 16 so one user unit is one CSS pixel at `size-4`. */
+    readonly BOX: 16;
+    readonly CENTER: 8;
+    /** Ring centreline. */
+    readonly RADIUS: 6.3;
+    readonly STROKE: 1.5;
+    /** Dash pattern of the `pending` ring, in user units: a 3-long tick against a
+     *  6.4 pitch. This is also the plan ring's texture — see `plan-card.tsx`. */
+    readonly DASH: 3;
+    readonly GAP: 3.4;
+};
+/** Where the ring's ink actually ends: centreline + half the stroke. A filled
+ *  state uses this as its radius, so a disc and a ring occupy the same circle
+ *  rather than the disc sitting visibly inside it. */
+export declare const STATUS_RING_OUTER_RADIUS: number;
+/** Dash pitch, in user units. */
+export declare const STATUS_RING_PITCH: number;

package/dist/components/ui/status-ring.js

@@ -0,0 +1,38 @@
+/**
+ * The one circle every status glyph in the app is drawn on.
+ *
+ * Three components render this ring — `Loading` (`variant="ring"`),
+ * `TodoStatusIcon`, and `PlanRing` — and they used to disagree about it. All
+ * three were nominally `size-4`, and all three painted something different:
+ *
+ *   pending todo   viewBox 16   r 6.3  stroke 1.5   → 14.1px disc, 1.50px stroke
+ *   completed todo viewBox 256  r 104  (filled)     → 13.0px disc  (Phosphor)
+ *   spinner        viewBox 24   r 10   stroke 4     → 16.0px disc, 2.67px stroke
+ *   plan ring      viewBox 24   r 9.9  stroke 2     → 15.8px disc, 1.33px stroke
+ *
+ * Same class, four sizes, three weights. That is why the check read small and
+ * the spinner read fat next to each other. Sharing these numbers is what makes
+ * the states interchangeable: swap one glyph for another and only the *meaning*
+ * changes — the ink never moves.
+ *
+ * Lives in `components/ui` rather than beside the todo code because `Loading`
+ * is a ui primitive and a primitive must not import from a feature.
+ */
+export const STATUS_RING = {
+    /** Square viewBox. 16 so one user unit is one CSS pixel at `size-4`. */
+    BOX: 16,
+    CENTER: 8,
+    /** Ring centreline. */
+    RADIUS: 6.3,
+    STROKE: 1.5,
+    /** Dash pattern of the `pending` ring, in user units: a 3-long tick against a
+     *  6.4 pitch. This is also the plan ring's texture — see `plan-card.tsx`. */
+    DASH: 3,
+    GAP: 3.4,
+};
+/** Where the ring's ink actually ends: centreline + half the stroke. A filled
+ *  state uses this as its radius, so a disc and a ring occupy the same circle
+ *  rather than the disc sitting visibly inside it. */
+export const STATUS_RING_OUTER_RADIUS = STATUS_RING.RADIUS + STATUS_RING.STROKE / 2; // 7.05
+/** Dash pitch, in user units. */
+export const STATUS_RING_PITCH = STATUS_RING.DASH + STATUS_RING.GAP; // 6.4

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

@@ -0,0 +1,58 @@
+import type * as React from 'react';
+/**
+ * Kortix status palette — the SINGLE source of truth for "this means
+ * success / warning / error / info" coloring.
+ *
+ * The design system already encapsulates this palette inside `<Badge>` and
+ * `<InfoBanner>`. Use those whenever the surface is a chip or a box. But for
+ * the cases a component can't cover — a lone status icon, a diff +/- counter,
+ * a live activity dot — reach for these maps instead of re-inlining a palette
+ * class by hand (which is how shade drift creeps in).
+ *
+ * Hues follow D5 (kortix-brand color.md): success = kortix-green, warning =
+ * kortix-orange, destructive = kortix-red, info = kortix-blue. Accents fail AA
+ * as body text on white, so STATUS_TEXT paints glyphs and counters only; a
+ * label beside the glyph stays foreground.
+ */
+export type StatusTone = 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+/** Foreground (text / icon) color per tone. */
+export declare const STATUS_TEXT: Record<StatusTone, string>;
+/** Faint tinted background per tone (for chips / fills). */
+export declare const STATUS_BG: Record<StatusTone, string>;
+/** Solid hairline border per tone. */
+export declare const STATUS_BORDER: Record<StatusTone, string>;
+/** Solid dot fill per tone (for the live activity indicator). */
+export declare const STATUS_DOT: Record<StatusTone, string>;
+export declare function statusText(tone: StatusTone): string;
+/**
+ * A faint, tone-based status chip — the member of the status family for
+ * "this row/item is success/warning/error/info" labels.
+ *
+ * Use this (not `<Badge variant="destructive">`) for INFORMATIONAL status,
+ * because Badge's `destructive` variant is a SOLID red pill meant for
+ * actions — and "red is the brake, not the paint". StatusBadge keeps red
+ * faint and consistent with its success/warning/info siblings, sharing the
+ * same tone vocabulary as StatusDot / InfoBanner / DiffStat. Geometry matches
+ * `<Badge size="sm">` so the two are visually interchangeable for non-red tones.
+ */
+export declare function StatusBadge({ tone, className, children, ...props }: React.ComponentProps<'span'> & {
+    tone?: StatusTone;
+}): React.JSX.Element;
+/**
+ * A small solid status dot — the canonical replacement for hand-rolled
+ * `bg-emerald-500 animate-pulse` indicators.
+ */
+export declare function StatusDot({ tone, pulse, className, }: {
+    tone?: StatusTone;
+    pulse?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Diff line-count summary — `+12 −3` in the DS success / destructive colors.
+ * Renders nothing when both counts are zero/absent.
+ */
+export declare function DiffStat({ additions, deletions, className, }: {
+    additions?: number;
+    deletions?: number;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/components/ui/status.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** Foreground (text / icon) color per tone. */
+export const STATUS_TEXT = {
+    success: 'text-kortix-green',
+    warning: 'text-kortix-orange',
+    destructive: 'text-kortix-red',
+    info: 'text-kortix-blue',
+    neutral: 'text-muted-foreground',
+};
+/** Faint tinted background per tone (for chips / fills). */
+export const STATUS_BG = {
+    success: 'bg-kortix-green/15',
+    warning: 'bg-kortix-orange/15',
+    destructive: 'bg-kortix-red/15',
+    info: 'bg-kortix-blue/15',
+    neutral: 'bg-popover',
+};
+/** Solid hairline border per tone. */
+export const STATUS_BORDER = {
+    success: 'border-kortix-green',
+    warning: 'border-kortix-orange',
+    destructive: 'border-kortix-red',
+    info: 'border-kortix-blue',
+    neutral: 'border-border',
+};
+/** Solid dot fill per tone (for the live activity indicator). */
+export const STATUS_DOT = {
+    success: 'bg-kortix-green',
+    warning: 'bg-kortix-orange',
+    destructive: 'bg-kortix-red',
+    info: 'bg-kortix-blue',
+    neutral: 'bg-muted-foreground',
+};
+/** Tone color for an svg glyph inside a chip. The chip label stays foreground. */
+const STATUS_CHIP_GLYPH = {
+    success: '[&>svg]:text-kortix-green',
+    warning: '[&>svg]:text-kortix-orange',
+    destructive: '[&>svg]:text-kortix-red',
+    info: '[&>svg]:text-kortix-blue',
+    neutral: '[&>svg]:text-muted-foreground',
+};
+export function statusText(tone) {
+    return STATUS_TEXT[tone];
+}
+/**
+ * A faint, tone-based status chip — the member of the status family for
+ * "this row/item is success/warning/error/info" labels.
+ *
+ * Use this (not `<Badge variant="destructive">`) for INFORMATIONAL status,
+ * because Badge's `destructive` variant is a SOLID red pill meant for
+ * actions — and "red is the brake, not the paint". StatusBadge keeps red
+ * faint and consistent with its success/warning/info siblings, sharing the
+ * same tone vocabulary as StatusDot / InfoBanner / DiffStat. Geometry matches
+ * `<Badge size="sm">` so the two are visually interchangeable for non-red tones.
+ */
+export function StatusBadge({ tone = 'neutral', className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "status-badge", className: cn('text-foreground inline-flex w-fit items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap', STATUS_BG[tone], STATUS_CHIP_GLYPH[tone], className), ...props, children: children }));
+}
+/**
+ * A small solid status dot — the canonical replacement for hand-rolled
+ * `bg-emerald-500 animate-pulse` indicators.
+ */
+export function StatusDot({ tone = 'neutral', pulse = false, className, }) {
+    return (_jsx("span", { "data-slot": "status-dot", className: cn('inline-block size-2 shrink-0 rounded-full', STATUS_DOT[tone], pulse && 'animate-pulse', className) }));
+}
+/**
+ * Diff line-count summary — `+12 −3` in the DS success / destructive colors.
+ * Renders nothing when both counts are zero/absent.
+ */
+export function DiffStat({ additions, deletions, className, }) {
+    if (!additions && !deletions)
+        return null;
+    return (_jsxs("span", { "data-slot": "diff-stat", className: cn('inline-flex items-center gap-1.5 font-mono tabular-nums', className), children: [additions ? _jsxs("span", { className: STATUS_TEXT.success, children: ["+", additions] }) : null, deletions ? _jsx("span", { className: STATUS_TEXT.destructive, children: `−${deletions}` }) : null] }));
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    /** Total step count — lets StepperSeparator hide after the last step. */
+    count?: number;
+}
+declare function Stepper({ defaultValue, value, onValueChange, orientation, count, className, ...props }: StepperProps): React.JSX.Element;
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    step: number;
+    completed?: boolean;
+    disabled?: boolean;
+}
+declare function StepperItem({ step, completed, disabled, className, children, ...props }: StepperItemProps): React.JSX.Element;
+interface StepperTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare function StepperTrigger({ asChild, className, children, ...props }: StepperTriggerProps): React.JSX.Element;
+interface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+declare function StepperIndicator({ asChild, className, children, ...props }: StepperIndicatorProps): React.JSX.Element;
+declare function StepperTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function StepperDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+declare function StepperSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, };

package/dist/components/ui/stepper.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { cn } from '../../lib/utils.js';
+const StepperContext = createContext(undefined);
+const StepItemContext = createContext(undefined);
+const useStepper = () => {
+    const context = useContext(StepperContext);
+    if (!context) {
+        throw new Error('useStepper must be used within a Stepper');
+    }
+    return context;
+};
+const useStepItem = () => {
+    const context = useContext(StepItemContext);
+    if (!context) {
+        throw new Error('useStepItem must be used within a StepperItem');
+    }
+    return context;
+};
+function Stepper({ defaultValue = 0, value, onValueChange, orientation = 'horizontal', count, className, ...props }) {
+    const [activeStep, setInternalStep] = React.useState(defaultValue);
+    const setActiveStep = React.useCallback((step) => {
+        if (value === undefined) {
+            setInternalStep(step);
+        }
+        onValueChange?.(step);
+    }, [value, onValueChange]);
+    const currentStep = value ?? activeStep;
+    const contextValue = React.useMemo(() => ({
+        activeStep: currentStep,
+        setActiveStep,
+        orientation,
+        count,
+    }), [currentStep, setActiveStep, orientation, count]);
+    return (_jsx(StepperContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "stepper", className: cn('group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col', className), "data-orientation": orientation, ...props }) }));
+}
+function StepperItem({ step, completed = false, disabled = false, className, children, ...props }) {
+    const { activeStep } = useStepper();
+    const state = completed || step < activeStep ? 'completed' : activeStep === step ? 'active' : 'inactive';
+    const itemContextValue = React.useMemo(() => ({ step, state, isDisabled: disabled }), [step, state, disabled]);
+    return (_jsx(StepItemContext.Provider, { value: itemContextValue, children: _jsx("div", { "data-slot": "stepper-item", className: cn('group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col group-data-[orientation=vertical]/stepper:justify-start group-data-[orientation=vertical]/stepper:self-stretch', className), "data-state": state, ...props, children: children }) }));
+}
+function StepperTrigger({ asChild = false, className, children, ...props }) {
+    const { setActiveStep } = useStepper();
+    const { step, isDisabled } = useStepItem();
+    if (asChild) {
+        const Comp = asChild ? Slot : 'span';
+        return (_jsx(Comp, { "data-slot": "stepper-trigger", className: className, children: children }));
+    }
+    return (_jsx("button", { "data-slot": "stepper-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50', className), onClick: () => setActiveStep(step), disabled: isDisabled, ...props, children: children }));
+}
+function StepperIndicator({ asChild = false, className, children, ...props }) {
+    const { state } = useStepItem();
+    return (_jsx("span", { "data-slot": "stepper-indicator", className: cn('bg-muted text-muted-foreground data-[state=active]:bg-secondary data-[state=completed]:bg-secondary data-[state=active]:text-secondary-foreground data-[state=completed]:text-secondary-foreground relative flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium', className), "data-state": state, ...props, children: asChild ? children : children }));
+}
+function StepperTitle({ className, ...props }) {
+    return (_jsx("h3", { "data-slot": "stepper-title", className: cn('text-sm font-medium', className), ...props }));
+}
+function StepperDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "stepper-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+function StepperSeparator({ className, ...props }) {
+    const { count } = useStepper();
+    const stepItem = useContext(StepItemContext);
+    if (stepItem && count !== undefined && stepItem.step >= count) {
+        return null;
+    }
+    return (_jsx("div", { "data-slot": "stepper-separator", className: cn('bg-secondary group-data-[state=completed]/step:bg-secondary m-0.5 group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=horizontal]/stepper:flex-1 group-data-[orientation=vertical]/stepper:min-h-4 group-data-[orientation=vertical]/stepper:w-0.5 group-data-[orientation=vertical]/stepper:flex-1', className), ...props }));
+}
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, };

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

@@ -0,0 +1,8 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { type ComponentProps } from 'react';
+type SwitchProps = Omit<ComponentProps<typeof SwitchPrimitive.Root>, 'asChild'> & {
+    label?: string;
+};
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Switch };
+export type { SwitchProps };