@kortix/ui 0.0.0-stage → 0.14.4

package/dist/primitives/histogram-bars.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The bar strip and hover card of a time histogram, shared by the Models page
+ * Logs histogram (`LogHistogram`) and the trigger Runs histogram
+ * (`RunHistogram`). The caller draws each bar and the card's content; this
+ * owns the hover behaviour:
+ *
+ * - The bar highlight follows the pointer at once (CSS `group-hover/bar`).
+ * - The hovered bucket is debounced (70 ms), so a sweep across the bars does
+ *   not rebuild the card on every bar it crosses.
+ * - The card is ONE element. It moves between buckets by `translateX`,
+ *   clamped so it never leaves the strip, and fades in with a 4 px y nudge.
+ *   Opening from hidden does not slide from the last bucket. Reduced motion:
+ *   opacity only.
+ * - The card hides only when the pointer leaves the chart (or focus leaves
+ *   it). Moving between bars never hides it: it slides by `translateX` (+X
+ *   right, −X left), and a CSS transition retargets mid-slide. Re-entering
+ *   fades it in at the bar, with no slide from the old spot.
+ * - A first hover on an empty bucket opens nothing; an open card passing over
+ *   one stays and shows the caller's one-line empty content.
+ * - Keyboard focus on a bar opens the same card.
+ *
+ * Motion: 150 ms (`--duration-normal`) on `--ease-default`, transform and
+ * opacity only (animations-dev: tooltips 125–200 ms, ease-out family).
+ */
+import { useDebounce } from '../hooks/use-debounce.js';
+import { cn } from '../lib/utils.js';
+import { useEffect, useRef, useState } from 'react';
+/** How long the pointer has to rest on a bucket before the card follows it. */
+const HOVER_DEBOUNCE_MS = 70;
+/**
+ * The card's left offset in px: centred on bar `index` of `count` equal bars,
+ * clamped to `[0, stripWidth - cardWidth]` so it never clips at an edge.
+ */
+export function histogramCardOffset(index, count, stripWidth, cardWidth) {
+    if (count < 1 || stripWidth <= 0)
+        return 0;
+    const centre = ((index + 0.5) / count) * stripWidth;
+    const max = Math.max(0, stripWidth - cardWidth);
+    return Math.min(max, Math.max(0, centre - cardWidth / 2));
+}
+export const HIDDEN_CARD = { visible: false, index: null, sliding: false };
+/**
+ * The card's next state when the (debounced) hovered bucket changes:
+ * - pointer gone (`null`): hide, keep the last bucket for the fade-out;
+ * - card out: slide to the new bucket, an empty one too (it then reads "no runs");
+ * - card hidden: open on a bucket with data, in place, with no slide;
+ *   a first hover on an empty bucket opens nothing.
+ */
+export function nextCardState(prev, shown, isEmpty) {
+    if (shown === null)
+        return { ...prev, visible: false, sliding: false };
+    if (prev.visible)
+        return { visible: true, index: shown, sliding: true };
+    if (isEmpty(shown))
+        return prev;
+    return { visible: true, index: shown, sliding: false };
+}
+export function HistogramBars({ bars, onSelect, renderCard, className, }) {
+    const [active, setActive] = useState(null);
+    const { debouncedValue: shown } = useDebounce(active, HOVER_DEBOUNCE_MS);
+    // Derived from the previous render (React's "adjust state while rendering"):
+    // the card follows the debounced bucket through `nextCardState`.
+    const [card, setCard] = useState(HIDDEN_CARD);
+    const [prevShown, setPrevShown] = useState(null);
+    if (shown !== prevShown) {
+        setPrevShown(shown);
+        setCard(nextCardState(card, shown, (i) => bars[i]?.empty ?? true));
+    }
+    const cardIndex = card.index;
+    const sliding = card.sliding;
+    // Widths come from a ResizeObserver, so the clamp follows a resized column.
+    const [widths, setWidths] = useState({ strip: 0, card: 0 });
+    const stripRef = useRef(null);
+    const cardRef = useRef(null);
+    useEffect(() => {
+        const strip = stripRef.current;
+        const card = cardRef.current;
+        if (!strip || !card || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => setWidths({ strip: strip.offsetWidth, card: card.offsetWidth });
+        const observer = new ResizeObserver(measure);
+        observer.observe(strip);
+        observer.observe(card);
+        return () => observer.disconnect();
+    }, []);
+    const x = cardIndex === null ? 0 : histogramCardOffset(cardIndex, bars.length, widths.strip, widths.card);
+    const visible = card.visible;
+    return (_jsxs("div", { className: "relative", onPointerLeave: () => setActive(null), children: [_jsx("div", { ref: stripRef, className: className, children: bars.map((b, i) => (_jsx("button", { type: "button", "aria-label": b.ariaLabel, onClick: () => onSelect?.(i), onPointerEnter: () => setActive(i), onFocus: () => setActive(i), onBlur: () => setActive(null), className: "group/bar flex h-full min-w-0 flex-1 cursor-pointer items-end outline-none", children: b.bar }, b.key))) }), _jsx("div", { ref: cardRef, "aria-hidden": true, style: { transform: `translateX(${x}px)` }, className: cn('pointer-events-none absolute top-full left-0 z-20 mt-1.5 w-60', 'bg-popover text-popover-foreground border-border rounded-lg border p-3 shadow-md', 'ease-default duration-(--duration-normal)', sliding ? 'transition-[transform,opacity,translate]' : 'transition-[opacity,translate]', 'motion-reduce:transition-opacity', visible
+                    ? 'translate-y-0 opacity-100'
+                    : '-translate-y-1 opacity-0 motion-reduce:translate-y-0'), children: cardIndex !== null && cardIndex < bars.length ? renderCard(cardIndex) : null })] }));
+}

package/dist/primitives/hover-card.d.ts

@@ -0,0 +1,28 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
+/**
+ * The fifth panel to join `FLOATING_PANEL`.
+ *
+ * `menu-recipe.ts` reconciled the dropdown, context menu, select and popover
+ * surfaces onto one description of "a hairline-bordered card lifted off the
+ * canvas". This one was missed and kept its own `rounded-md` + `shadow-sm`,
+ * so a hover card sat a step flatter and 2px tighter than every other floating
+ * panel — which is why `token-progress.tsx` had to patch `shadow-md` back on at
+ * its call site. The recipe owns the surface and the enter/exit now.
+ *
+ * Two things stay local because they are this primitive's own: the transform
+ * origin (the Radix variable is named per primitive) and the `motion-reduce`
+ * guard, which no other panel ships and which must survive the move.
+ *
+ * `animated={false}` takes `FLOATING_PANEL_SURFACE` instead, the same split
+ * `MENU_PANEL_STATIC` makes for submenus, and for the same reason: a panel that
+ * opens INTO the path the pointer is already travelling spends its enter
+ * animation moving content away from the cursor, which reads as the card
+ * lagging behind the hand rather than as polish.
+ */
+declare function HoverCardContent({ className, align, sideOffset, animated, style, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content> & {
+    animated?: boolean;
+}): React.JSX.Element;
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/hover-card.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import { withPortalContainer } from '../lib/portal-container.js';
+import { cn } from '../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../lib/z-stack.js';
+import { FLOATING_PANEL, FLOATING_PANEL_SURFACE } from './menu-recipe.js';
+const HoverCardPortal = withPortalContainer(HoverCardPrimitive.Portal);
+function HoverCard({ ...props }) {
+    return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return _jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+/**
+ * The fifth panel to join `FLOATING_PANEL`.
+ *
+ * `menu-recipe.ts` reconciled the dropdown, context menu, select and popover
+ * surfaces onto one description of "a hairline-bordered card lifted off the
+ * canvas". This one was missed and kept its own `rounded-md` + `shadow-sm`,
+ * so a hover card sat a step flatter and 2px tighter than every other floating
+ * panel — which is why `token-progress.tsx` had to patch `shadow-md` back on at
+ * its call site. The recipe owns the surface and the enter/exit now.
+ *
+ * Two things stay local because they are this primitive's own: the transform
+ * origin (the Radix variable is named per primitive) and the `motion-reduce`
+ * guard, which no other panel ships and which must survive the move.
+ *
+ * `animated={false}` takes `FLOATING_PANEL_SURFACE` instead, the same split
+ * `MENU_PANEL_STATIC` makes for submenus, and for the same reason: a panel that
+ * opens INTO the path the pointer is already travelling spends its enter
+ * animation moving content away from the cursor, which reads as the card
+ * lagging behind the hand rather than as polish.
+ */
+function HoverCardContent({ className, align = 'center', sideOffset = 4, animated = true, style, ...props }) {
+    // Inside a dialog the card stacks above it, as a popover does (`floatingZ`).
+    const depth = useDialogDepth();
+    return (_jsx(HoverCardPortal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn(animated ? FLOATING_PANEL : FLOATING_PANEL_SURFACE, 'w-64 origin-(--radix-hover-card-content-transform-origin) p-4 outline-hidden motion-reduce:animate-none motion-reduce:transition-none', className), style: { zIndex: floatingZ(depth), ...style }, ...props }) }));
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/icon-provider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The size a class-less icon renders at. Tailwind size classes and an explicit
+ * `size` prop both still win, so this only reaches icons that ask for nothing.
+ *
+ * Exported because the provider's tests have to rebuild the exact markup this
+ * context produces. They previously hard-coded the number, so changing it here
+ * failed them from a file that never mentions icons — the failure named the
+ * weight, which was not what had moved.
+ */
+export declare const DEFAULT_ICON_SIZE = 32;
+/**
+ * Applies the app-wide icon weight (packages/ui/src/lib/icon-config.ts; the
+ * apps/web path src/lib/icons/icon-config.ts is a shim) to every
+ * Phosphor icon in the client tree — identically in development and
+ * production. Icons never need a weight prop; the only intentional override
+ * is weight="fill" on solid/status icons.
+ *
+ * Server components can't read context — they import pre-bound icons from
+ * '@/lib/icons/ssr' instead.
+ */
+export declare function IconProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/primitives/icon-provider.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconContext } from '@phosphor-icons/react';
+import { DEFAULT_ICON_WEIGHT } from '../lib/icon-config.js';
+/**
+ * The size a class-less icon renders at. Tailwind size classes and an explicit
+ * `size` prop both still win, so this only reaches icons that ask for nothing.
+ *
+ * Exported because the provider's tests have to rebuild the exact markup this
+ * context produces. They previously hard-coded the number, so changing it here
+ * failed them from a file that never mentions icons — the failure named the
+ * weight, which was not what had moved.
+ */
+export const DEFAULT_ICON_SIZE = 32;
+/* Frozen at module scope: the value never changes at runtime, so the provider
+   never re-renders its subtree and the identity stays stable across renders. */
+const ICON_DEFAULTS = { weight: DEFAULT_ICON_WEIGHT, size: DEFAULT_ICON_SIZE };
+/**
+ * Applies the app-wide icon weight (packages/ui/src/lib/icon-config.ts; the
+ * apps/web path src/lib/icons/icon-config.ts is a shim) to every
+ * Phosphor icon in the client tree — identically in development and
+ * production. Icons never need a weight prop; the only intentional override
+ * is weight="fill" on solid/status icons.
+ *
+ * Server components can't read context — they import pre-bound icons from
+ * '@/lib/icons/ssr' instead.
+ */
+export function IconProvider({ children }) {
+    return _jsx(IconContext.Provider, { value: ICON_DEFAULTS, children: children });
+}

package/dist/primitives/info-banner.d.ts

@@ -0,0 +1,14 @@
+import { type StatusTone } from './status.js';
+import * as React from 'react';
+export type InfoBannerIcon = React.ComponentType<{
+    className?: string;
+}> | React.ReactElement<{
+    className?: string;
+}>;
+export interface InfoBannerProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    tone?: StatusTone;
+    icon?: InfoBannerIcon;
+    title?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare function InfoBanner({ tone, icon, title, action, className, children, ...props }: InfoBannerProps): React.JSX.Element;

package/dist/primitives/info-banner.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertActions, AlertDescription, AlertMedia, AlertTitle, } from './alert.js';
+import { cn } from '../lib/utils.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Tone is carried by a /15 fill and the icon, never by the text. The 25% fill
+ * with a solid-tone title it replaced (Marko, 2026-09-03: "never readable on
+ * the core component") put orange type on a beige ground at ~2:1. Text is
+ * foreground on every tone. A filled banner has no border color: one boundary,
+ * a fill or a hairline, never both (color.md). Hues follow D5: info = blue,
+ * success = green, warning = orange, destructive = red.
+ */
+const infoBannerVariants = cva('group/item flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-2 text-sm [&_[data-slot=alert-content]]:gap-1', {
+    variants: {
+        tone: {
+            neutral: 'border-border bg-popover',
+            info: 'bg-kortix-blue/15 border-transparent',
+            success: 'bg-kortix-green/15 border-transparent',
+            warning: 'bg-kortix-orange/15 border-transparent',
+            destructive: 'bg-kortix-red/15 border-transparent',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+/** The title is always foreground — the tone is the fill and the icon. */
+const infoBannerTitleVariants = cva('text-foreground w-full max-w-full font-medium', {
+    variants: {
+        tone: {
+            neutral: '',
+            info: '',
+            success: '',
+            warning: '',
+            destructive: '',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+/** Status icon tile — mirrors the sandbox template state indicator. */
+const infoBannerMediaVariants = cva('mt-0 group-has-[[data-slot=item-description]]/item:translate-y-0.5 inline-flex size-7 shrink-0 items-center justify-center self-start [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0', {
+    variants: {
+        tone: {
+            neutral: 'text-muted-foreground border-border',
+            info: 'text-kortix-blue',
+            success: 'text-kortix-green',
+            warning: 'text-kortix-orange',
+            destructive: 'text-kortix-red',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+const infoBannerIconVariants = cva('size-6 shrink-0');
+function renderBannerIcon(icon, className) {
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            className: cn(className, icon.props.className),
+        });
+    }
+    const IconComponent = icon;
+    return _jsx(IconComponent, { className: className });
+}
+export function InfoBanner({ tone = 'neutral', icon, title, action, className, children, ...props }) {
+    const safeTone = tone ?? 'neutral';
+    return (_jsxs(Alert, { variant: "default", className: cn(infoBannerVariants({ tone: safeTone }), className), ...props, children: [icon != null && (_jsx(AlertMedia, { className: infoBannerMediaVariants({ tone: safeTone }), children: renderBannerIcon(icon, infoBannerIconVariants()) })), title != null && (_jsx(AlertTitle, { className: cn(infoBannerTitleVariants({ tone: safeTone }), 'line-clamp-1 min-h-4 leading-snug font-medium tracking-tight'), children: title })), children != null && (_jsx(AlertDescription, { className: "text-muted-foreground leading-normal font-medium [&_p]:leading-relaxed", children: children })), action != null && _jsx(AlertActions, { children: action })] }));
+}

package/dist/primitives/inline-meta.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export interface InlineMetaProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function InlineMeta({ className, children }: InlineMetaProps): import("react").JSX.Element;

package/dist/primitives/inline-meta.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { Children, Fragment, isValidElement } from 'react';
+export function InlineMeta({ className, children }) {
+    const items = Children.toArray(children).filter((c) => c !== null && c !== undefined && c !== '');
+    return (_jsx("div", { className: cn('text-muted-foreground/70 flex items-center gap-2 text-xs', 'min-w-0', className), children: items.map((child, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { className: "text-muted-foreground/30", children: "\u00B7" }), _jsx("span", { className: "truncate", children: child })] }, isValidElement(child) ? (child.key ?? i) : i))) }));
+}

package/dist/primitives/input-group.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Button } from './button.js';
+import { InputProps } from './input.js';
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: InputProps): React.JSX.Element;
+declare function InputGroupSearch({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputGroupSearchIcon({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputGroupSearchInput({ className, variant, size, ...props }: InputProps): React.JSX.Element;
+declare function InputGroupSearchClear({ className, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'children'>): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, };

package/dist/primitives/input-group.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Button } from './button.js';
+import { Input, inputSurfaceClasses, inputTransitionClasses, } from './input.js';
+import { Close } from '../icons/close.js';
+import { cn } from '../lib/utils.js';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex w-full items-center outline-none', inputSurfaceClasses, inputTransitionClasses, 'h-9 min-w-0 has-[>textarea]:h-auto', 
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', 
+        // Focus state.
+        // Focus state — the same border + halo as `Input`, drawn on the group
+        // so addons sit inside the ring rather than beside it.
+        'has-[[data-slot=input-group-control]:focus]:border-ring has-[[data-slot=input-group-control]:focus]:ring-ring/15 has-[[data-slot=input-group-control]:focus]:ring-3', 
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/15 has-[[data-slot][aria-invalid=true]]:ring-3', className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+            'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+            'block-start': 'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+            'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn(
+        // The group paints the surface, border and ring; the control is bare.
+        'flex-1 rounded-none border-0 bg-transparent shadow-none', 'focus:ring-0 focus:outline-none aria-invalid:ring-0', className), ...props }));
+}
+function InputGroupSearch({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group-search", className: cn('relative w-full', className), ...props }));
+}
+function InputGroupSearchIcon({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group-search-icon", "aria-hidden": "true", className: cn('text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 [&_svg:not([class*="size-"])]:size-4', className), ...props }));
+}
+function InputGroupSearchInput({ className, variant = 'transparent', size = 'md', ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-search-control", variant: variant, size: size, className: cn('peer placeholder:text-muted-foreground/60 pl-9', className), ...props }));
+}
+function InputGroupSearchClear({ className, variant = 'ghost', size = 'icon', ...props }) {
+    return (_jsx(Button, { type: "button", variant: variant, size: size, "aria-label": "Clear", "data-slot": "input-group-search-clear", className: cn('absolute top-1/2 right-2 size-6 -translate-y-1/2 rounded-sm opacity-0 peer-focus:opacity-100', className), ...props, children: _jsx(Close, { className: "text-muted-foreground size-4" }) }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, };

package/dist/primitives/input.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * The one field surface every text input on the web shares — `Input`,
+ * `InputGroup`, `Textarea`, and the search field all read these, so a field
+ * looks the same on a white page, a gray card, or inside a modal.
+ *
+ * `bg-popover` is the top surface in both themes (white / #141414), so the well
+ * lifts off any substrate instead of sinking into a `bg-card` panel the way the
+ * old `bg-input` fill did. Focus is the `ring` token twice: a solid 1px border
+ * plus a 3px 15% halo.
+ */
+declare const inputSurfaceClasses = "bg-popover border-border rounded-md border";
+declare const inputFocusClasses = "focus:border-ring focus:ring-ring/15 focus:ring-3 focus:outline-none";
+declare const inputInvalidClasses = "aria-invalid:border-destructive aria-invalid:ring-destructive/15 aria-invalid:ring-3 aria-invalid:motion-safe:animate-shake";
+/** Border and halo change on every focus move, so they swap fast and never move layout. */
+declare const inputTransitionClasses = "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none";
+export type InputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+    /**
+     * @deprecated Every input renders the same surface. Kept so existing
+     * callers compile; the value is ignored.
+     */
+    variant?: 'default' | 'secondary' | 'transparent' | 'popover';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+declare function Input({ className, type, variant: _variant, size, ...props }: InputProps): React.JSX.Element;
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, };

package/dist/primitives/input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * The one field surface every text input on the web shares — `Input`,
+ * `InputGroup`, `Textarea`, and the search field all read these, so a field
+ * looks the same on a white page, a gray card, or inside a modal.
+ *
+ * `bg-popover` is the top surface in both themes (white / #141414), so the well
+ * lifts off any substrate instead of sinking into a `bg-card` panel the way the
+ * old `bg-input` fill did. Focus is the `ring` token twice: a solid 1px border
+ * plus a 3px 15% halo.
+ */
+const inputSurfaceClasses = 'bg-popover border-border rounded-md border';
+const inputFocusClasses = 'focus:border-ring focus:ring-ring/15 focus:ring-3 focus:outline-none';
+const inputInvalidClasses = 'aria-invalid:border-destructive aria-invalid:ring-destructive/15 aria-invalid:ring-3 aria-invalid:motion-safe:animate-shake';
+/** Border and halo change on every focus move, so they swap fast and never move layout. */
+const inputTransitionClasses = 'transition-[border-color,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none';
+function Input({ className, type, variant: _variant, size = 'sm', ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn(inputSurfaceClasses, inputFocusClasses, inputInvalidClasses, inputTransitionClasses, 'text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 px-3 py-1 text-sm font-medium file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', type === 'search' &&
+            '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none', type === 'file' &&
+            'text-muted-foreground file:border-border file:text-foreground p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic', size === 'xs' && 'h-8 text-xs', size === 'sm' && 'h-9 text-sm', size === 'md' && 'h-10 text-sm', size === 'lg' && 'h-11 text-sm', size === 'xl' && 'h-12 text-base', className), ...props }));
+}
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, };

package/dist/primitives/item.d.ts

@@ -0,0 +1,23 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Separator } from './separator.js';
+declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "outline" | "warning" | "default" | "muted" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, };

package/dist/primitives/item.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { Separator } from './separator.js';
+import { cn } from '../lib/utils.js';
+function ItemGroup({ className, ...props }) {
+    return (_jsx("div", { role: "list", "data-slot": "item-group", className: cn('group/item-group flex flex-col', className), ...props }));
+}
+function ItemSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn('my-0', className), ...props }));
+}
+const itemVariants = cva('group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-fast outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-border',
+            muted: 'bg-muted/50',
+            warning: 'border-kortix-orange bg-kortix-orange/20',
+        },
+        size: {
+            default: 'gap-4 p-4',
+            sm: 'gap-2.5 px-4 py-3',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Item({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'div';
+    return (_jsx(Comp, { "data-slot": "item", "data-variant": variant, "data-size": size, className: cn(itemVariants({ variant, size, className })), ...props }));
+}
+const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function ItemMedia({ className, variant = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props }));
+}
+function ItemContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-content", className: cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className), ...props }));
+}
+function ItemTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-title", className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className), ...props }));
+}
+function ItemDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "item-description", className: cn('text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function ItemActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-actions", className: cn('flex items-center gap-2', className), ...props }));
+}
+function ItemHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-header", className: cn('flex basis-full items-center justify-between gap-2', className), ...props }));
+}
+function ItemFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-footer", className: cn('flex basis-full items-center justify-between gap-2', className), ...props }));
+}
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, };

package/dist/primitives/kbd.d.ts

@@ -0,0 +1,3 @@
+declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<'kbd'>): import("react").JSX.Element;
+export { Kbd, KbdGroup };

package/dist/primitives/kbd.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('text-muted-foreground pointer-events-none inline-flex size-4 items-center justify-center gap-1 rounded px-1 font-sans text-xs font-medium select-none', "[&_svg:not([class*='size-'])]:size-3", 
+        // A tooltip is an INVERTED surface (`bg-foreground text-background`), so
+        // the default light `bg-muted` chip lands on it as a bright white blob.
+        // Tint from the tooltip's own text color instead: one rule that reads
+        // as a recessed key in both themes. This is the ONLY place the
+        // in-tooltip look is defined — `tooltip-content` must not restyle keys
+        // with a descendant `[&_kbd]` rule, or it also hits `KbdGroup`.
+        // '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background',
+        '[[data-slot=tooltip-content]_&]:text-background', className), ...props }));
+}
+// Renders a `<kbd>` on purpose: nested `<kbd>` is the HTML idiom for one key
+// COMBINATION made of individual keys. It carries no chrome of its own — it is
+// spacing only, so ancestors must never style it as if it were a key.
+function KbdGroup({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-0', className), ...props }));
+}
+export { Kbd, KbdGroup };

package/dist/primitives/kortix-asterisk.d.ts

@@ -0,0 +1,6 @@
+export declare const KORTIX_BULLET_GRADIENT = "linear-gradient(to bottom, var(--kortix-red), var(--kortix-green), var(--kortix-blue), var(--kortix-yellow), var(--kortix-purple), var(--kortix-red))";
+export declare function KortixAsterisk({ index, parentClass, variant, }: {
+    index: number;
+    parentClass?: string;
+    variant?: 'gradient' | 'solid';
+}): import("react").JSX.Element;

package/dist/primitives/kortix-asterisk.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export const KORTIX_BULLET_GRADIENT = 'linear-gradient(to bottom, var(--kortix-red), var(--kortix-green), var(--kortix-blue), var(--kortix-yellow), var(--kortix-purple), var(--kortix-red))';
+const ASTERISK_ARMS = [
+    { className: 'z-10' },
+    { className: 'z-20 rotate-90' },
+    { className: 'z-30 rotate-45' },
+    { className: 'z-40 -rotate-45' },
+];
+export function KortixAsterisk({ index, parentClass, variant = 'gradient', }) {
+    return (_jsx("div", { className: cn('relative mt-1 flex size-6 shrink-0 items-center justify-center', parentClass), children: ASTERISK_ARMS.map(({ className }, armIndex) => (_jsx("div", { className: cn('absolute h-3.5 w-px shrink-0 rounded-full', variant === 'gradient' && 'animate-kortix-bullet-flow bg-[length:100%_300%]', className), style: variant === 'gradient'
+                ? {
+                    backgroundImage: KORTIX_BULLET_GRADIENT,
+                    animationDelay: `${index * 0.4 + armIndex * 0.08}s`,
+                }
+                : { backgroundColor: 'var(--foreground)' } }, armIndex))) }));
+}

package/dist/primitives/kortix-icons.d.ts

@@ -0,0 +1,2 @@
+export { PlusIcon as IconAdd, CpuIcon as IconAgent, WarningCircleIcon as IconAlert, AppWindowIcon as IconApp, ArrowUpRightIcon as IconArrowUpRight, ArrowLeftIcon as IconBack, CircleDashedIcon as IconBacklog, RobotIcon as IconBot, CalendarIcon as IconCalendar, XCircleIcon as IconCancelled, CheckIcon as IconCheck, CaretDownIcon as IconChevronDown, CaretLeftIcon as IconChevronLeft, CaretRightIcon as IconChevronRight, CaretUpIcon as IconChevronUp, CaretUpDownIcon as IconChevronsUpDown, ClockIcon as IconClock, XIcon as IconClose, CodeSimpleIcon as IconCode, ChatCircleIcon as IconComment, CopyIcon as IconCopy, TrashIcon as IconDelete, RocketIcon as IconDeploy, CheckCircleIcon as IconDone, PencilIcon as IconEdit, ArrowSquareOutIcon as IconExternal, WarningOctagonIcon as IconFailed, FileIcon as IconFile, FileTextIcon as IconFileText, FunnelIcon as IconFilter, FolderIcon as IconFolder, FolderOpenIcon as IconFolderOpen, ArrowRightIcon as IconForward, SquaresFourIcon as IconGrid, HashIcon as IconHash, RadioButtonIcon as IconInProgress, CircleDashedIcon as IconInReview, TrayIcon as IconInbox, InfoIcon as IconInfo, QuestionIcon as IconInfoNeeded, UserPlusIcon as IconInvite, LinkSimpleIcon as IconLink, ListIcon as IconList, EnvelopeIcon as IconMail, ListIcon as IconMenu, ChatIcon as IconMessage, MicrophoneIcon as IconMic, MicrophoneSlashIcon as IconMicOff, DotsThreeIcon as IconMore, DotsThreeVerticalIcon as IconMoreVertical, BellIcon as IconNotification, PauseIcon as IconPause, PhoneDisconnectIcon as IconPhoneOff, PlayIcon as IconPlay, GitBranchIcon as IconProject, ArrowClockwiseIcon as IconRefresh, MinusIcon as IconRemove, MagnifyingGlassIcon as IconSearch, PaperPlaneTiltIcon as IconSend, GearSixIcon as IconSettings, ArrowsDownUpIcon as IconSort, StarIcon as IconStar, SquareIcon as IconStop, TagIcon as IconTag, TerminalIcon as IconTerminal, CircleIcon as IconTodo, LightningIcon as IconTrigger, StarIcon as IconUnstar, UploadIcon as IconUpload, UserIcon as IconUser, UsersIcon as IconUsers, SpeakerHighIcon as IconVolume, WarningIcon as IconWarning, } from '@phosphor-icons/react';
+export type { Icon } from '@phosphor-icons/react';