@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/chain-of-thought.d.ts

@@ -0,0 +1,75 @@
+/**
+ * ChainOfThought — a vertical list of steps, each opening independently.
+ *
+ * Adapted from prompt-kit (https://prompt-kit.com/c/chain-of-thought.json),
+ * then reduced to the two parts that are actually used: the list and the step.
+ * Upstream's `ChainOfThoughtItem`, `ChainOfThoughtTrigger` and
+ * `ChainOfThoughtContent` are gone — nothing imported them, and
+ * `ChainOfThoughtContent` carried a SECOND rail implementation that contradicted
+ * the one below.
+ */
+import * as React from 'react';
+import { Disclosure } from './disclosure.js';
+export type ChainOfThoughtStepProps = React.ComponentProps<typeof Disclosure>;
+/**
+ * One step. It owns no spacing — the list does.
+ *
+ * A step used to carry `pb-3` (and `pb-2` when last), which made the gap a
+ * property of the ROW rather than of the list. Two costs, both visible: the
+ * final step left trailing padding that no following gap balanced, so a chain
+ * sitting between two paragraphs was 12px from the one above and 20px from the
+ * one below; and a chain of exactly one step — a single tool call — was a row
+ * with 8px hanging off the bottom for no reason at all. `space-y` on the list
+ * puts the gap BETWEEN rows, which is where a gap belongs: even everywhere,
+ * absent at both ends.
+ *
+ * The rail draws only while the step is OPEN.
+ *
+ * It used to connect every step to the next, running the whole height of the
+ * chain — a spine down a list of independent rows. That is not what the line
+ * means. The line means "this content belongs to the row above it", which is
+ * only true when there IS content, i.e. when the step is open. Drawn always, it
+ * asserts a sequence the rows do not have, and it turns a quiet list into a
+ * diagram.
+ *
+ * "Open" has to be asked TWO ways, because a step's content is not always
+ * behind the step's own disclosure. A thought, a group and a file-chip row all
+ * bind to this `Disclosure`, so `data-state` on the step answers for them. A
+ * plain tool row does not: `ToolPartRenderer` brings its own nested
+ * `Disclosure`, so expanding a `bash` row leaves the step reading `closed` and
+ * the first rule silently never fires — which is exactly how a expanded command
+ * ended up as the one row in the chain with no rail beside it. The `has-`
+ * clause asks the descendants instead: if anything inside this step is open,
+ * there is content, and content is what the line is for.
+ *
+ * Positioning: the rail is absolute so `bottom-0` stretches it to whatever the
+ * step currently is — a search card, a command block, a paragraph of reasoning.
+ * A fixed-height spacer cannot know how tall its sibling is, which is how the
+ * old version visibly broke the moment a step expanded. `left-2` puts the
+ * hairline on the 8px centre of the 16px leading icon, the column every step's
+ * icon occupies; `top-[1.6rem]` clears that icon so the rail reads as hanging
+ * from it rather than striking through it.
+ *
+ * A row that leads with no icon — the bare single-step burst — still draws it.
+ * The rail's job is to tie content to the row above it, and that is true whether
+ * or not the row happens to show a glyph. What such a row must NOT do is let its
+ * content start at the margin: the hairline then lands 8px INSIDE the content
+ * and strikes through the left edge of the file chip. The indent is what gives
+ * the rail its lane, so bare rows keep it (`pl-7` / `--tool-indent`) even though
+ * they drop the icon that indent was originally measured from.
+ */
+export declare function ChainOfThoughtStep({ children, className, ...props }: ChainOfThoughtStepProps): React.JSX.Element;
+export type ChainOfThoughtProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * The list. One `space-y` and nothing else.
+ *
+ * This used to `React.cloneElement` every child to inject `isLast`, which the
+ * step needed to decide its own padding and whether to draw a rail. Both
+ * questions are gone — spacing lives here, and the rail follows open state — so
+ * the clone went with them. A `map` + `cloneElement` on every render, for a list
+ * that re-renders on every SSE frame, bought nothing.
+ */
+export declare function ChainOfThought({ children, className }: ChainOfThoughtProps): React.JSX.Element;

package/dist/components/ui/chain-of-thought.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclosure } from './disclosure.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * One step. It owns no spacing — the list does.
+ *
+ * A step used to carry `pb-3` (and `pb-2` when last), which made the gap a
+ * property of the ROW rather than of the list. Two costs, both visible: the
+ * final step left trailing padding that no following gap balanced, so a chain
+ * sitting between two paragraphs was 12px from the one above and 20px from the
+ * one below; and a chain of exactly one step — a single tool call — was a row
+ * with 8px hanging off the bottom for no reason at all. `space-y` on the list
+ * puts the gap BETWEEN rows, which is where a gap belongs: even everywhere,
+ * absent at both ends.
+ *
+ * The rail draws only while the step is OPEN.
+ *
+ * It used to connect every step to the next, running the whole height of the
+ * chain — a spine down a list of independent rows. That is not what the line
+ * means. The line means "this content belongs to the row above it", which is
+ * only true when there IS content, i.e. when the step is open. Drawn always, it
+ * asserts a sequence the rows do not have, and it turns a quiet list into a
+ * diagram.
+ *
+ * "Open" has to be asked TWO ways, because a step's content is not always
+ * behind the step's own disclosure. A thought, a group and a file-chip row all
+ * bind to this `Disclosure`, so `data-state` on the step answers for them. A
+ * plain tool row does not: `ToolPartRenderer` brings its own nested
+ * `Disclosure`, so expanding a `bash` row leaves the step reading `closed` and
+ * the first rule silently never fires — which is exactly how a expanded command
+ * ended up as the one row in the chain with no rail beside it. The `has-`
+ * clause asks the descendants instead: if anything inside this step is open,
+ * there is content, and content is what the line is for.
+ *
+ * Positioning: the rail is absolute so `bottom-0` stretches it to whatever the
+ * step currently is — a search card, a command block, a paragraph of reasoning.
+ * A fixed-height spacer cannot know how tall its sibling is, which is how the
+ * old version visibly broke the moment a step expanded. `left-2` puts the
+ * hairline on the 8px centre of the 16px leading icon, the column every step's
+ * icon occupies; `top-[1.6rem]` clears that icon so the rail reads as hanging
+ * from it rather than striking through it.
+ *
+ * A row that leads with no icon — the bare single-step burst — still draws it.
+ * The rail's job is to tie content to the row above it, and that is true whether
+ * or not the row happens to show a glyph. What such a row must NOT do is let its
+ * content start at the margin: the hairline then lands 8px INSIDE the content
+ * and strikes through the left edge of the file chip. The indent is what gives
+ * the rail its lane, so bare rows keep it (`pl-7` / `--tool-indent`) even though
+ * they drop the icon that indent was originally measured from.
+ */
+export function ChainOfThoughtStep({ children, className, ...props }) {
+    return (_jsxs(Disclosure, { className: cn('group/step relative', className), ...props, children: [_jsx("div", { "aria-hidden": true, className: cn('bg-muted-foreground/15 absolute top-[1.6rem] bottom-0 left-2 w-[1px]', 'hidden group-data-[state=open]/step:block', 'group-has-[[data-state=open]]/step:block') }), children] }));
+}
+/**
+ * The list. One `space-y` and nothing else.
+ *
+ * This used to `React.cloneElement` every child to inject `isLast`, which the
+ * step needed to decide its own padding and whether to draw a rail. Both
+ * questions are gone — spacing lives here, and the rail follows open state — so
+ * the clone went with them. A `map` + `cloneElement` on every render, for a list
+ * that re-renders on every SSE frame, bought nothing.
+ */
+export function ChainOfThought({ children, className }) {
+    return _jsx("div", { className: cn('space-y-3', className), children: children });
+}

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+interface ChartTooltipContentProps extends React.ComponentProps<'div'> {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: number | string;
+        payload?: Record<string, unknown>;
+        color?: string;
+        dataKey?: string | number;
+        fill?: string;
+        type?: string;
+    }>;
+    label?: string;
+    labelFormatter?: (value: unknown, payload: unknown[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+}
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+interface ChartLegendContentProps extends React.ComponentProps<'div'> {
+    payload?: Array<{
+        value?: string;
+        type?: string;
+        id?: string;
+        color?: string;
+        dataKey?: string | number;
+    }>;
+    verticalAlign?: 'top' | 'bottom';
+    hideIcon?: boolean;
+    nameKey?: string;
+}
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };

package/dist/components/ui/chart.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '../../lib/utils.js';
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    const contextValue = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join('\n')}
+}
+`)
+                .join('\n'),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const tooltipLabel = (() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === 'string'
+            ? config[label]?.label || label
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    })();
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    const visibleItems = payload.filter((item) => item.type !== 'none');
+    return (_jsxs("div", { className: cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: visibleItems.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const itemPayload = item.payload;
+                    const indicatorColor = color || itemPayload?.fill || item.color;
+                    return (_jsx("div", { className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn('shrink-0 rounded-[2px]', {
+                                        'h-2.5 w-2.5': indicator === 'dot',
+                                        'w-1': indicator === 'line',
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                        'my-0.5': nestLabel && indicator === 'dashed',
+                                    }), style: {
+                                        backgroundColor: indicator !== 'dashed' ? indicatorColor : undefined,
+                                        borderColor: indicator === 'dashed' ? indicatorColor : undefined,
+                                    } }))), _jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value !== undefined && (_jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }))] })] })) }, String(item.dataKey ?? item.name ?? 'value')));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    const visibleItems = payload.filter((item) => item.type !== 'none');
+    return (_jsx("div", { className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: visibleItems.map((item) => {
+            const key = `${nameKey || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, item.value));
+        }) }));
+}
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload && typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type CheckboxGroupProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> & {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    name?: string;
+};
+declare function CheckboxGroup({ className, value, defaultValue, onValueChange, disabled, name, ...props }: CheckboxGroupProps): React.JSX.Element;
+type CheckboxGroupItemProps = {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+};
+declare function CheckboxGroupItem({ value: itemValue, label, disabled: itemDisabled, id, className, }: CheckboxGroupItemProps): React.JSX.Element;
+export { CheckboxGroup, CheckboxGroupItem };
+export type { CheckboxGroupItemProps, CheckboxGroupProps };

package/dist/components/ui/checkbox-group.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Checkbox } from './checkbox.js';
+import { cn } from '../../lib/utils.js';
+const CheckboxGroupContext = React.createContext(null);
+function useCheckboxGroupContext() {
+    const ctx = React.useContext(CheckboxGroupContext);
+    if (!ctx) {
+        throw new Error('CheckboxGroupItem must be used within CheckboxGroup');
+    }
+    return ctx;
+}
+function CheckboxGroup({ className, value, defaultValue, onValueChange, disabled, name, ...props }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
+    const isControlled = value !== undefined;
+    const selected = React.useMemo(() => new Set(isControlled ? value : internalValue), [isControlled, value, internalValue]);
+    const toggle = React.useCallback((itemValue, checked) => {
+        const current = isControlled ? value : internalValue;
+        const next = checked
+            ? current.includes(itemValue)
+                ? current
+                : [...current, itemValue]
+            : current.filter((entry) => entry !== itemValue);
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onValueChange?.(next);
+    }, [isControlled, value, internalValue, onValueChange]);
+    const contextValue = React.useMemo(() => ({ value: selected, toggle, disabled, name }), [selected, toggle, disabled, name]);
+    return (_jsx(CheckboxGroupContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "checkbox-group", role: "group", className: cn('grid gap-1', className), ...props }) }));
+}
+function CheckboxGroupItem({ value: itemValue, label, disabled: itemDisabled, id, className, }) {
+    const { value, toggle, disabled: groupDisabled, name } = useCheckboxGroupContext();
+    const generatedId = React.useId();
+    const itemId = id ?? generatedId;
+    const checked = value.has(itemValue);
+    const disabled = groupDisabled || itemDisabled;
+    return (_jsx(Checkbox, { id: itemId, name: name, label: label, checked: checked, disabled: disabled, onCheckedChange: (next) => toggle(itemValue, next === true), className: className }));
+}
+export { CheckboxGroup, CheckboxGroupItem };

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

@@ -0,0 +1,14 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+type CheckboxVariant = 'blue' | 'black';
+type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    label?: React.ReactNode;
+    /** Fill of the checked box. `black` is the foreground ink, so it inverts in dark mode. */
+    variant?: CheckboxVariant;
+};
+declare function Checkbox({ className, label, id, variant, ...props }: CheckboxProps): React.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string | undefined;
+}
+export { Checkbox };
+export type { CheckboxProps, CheckboxVariant };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+// One size everywhere: an 18px box, 6px corners, a round-capped check.
+const checkboxControlClassName = cn('peer flex size-[18px] shrink-0 items-center justify-center rounded-sm border-[1.5px] border-muted-foreground/60 bg-transparent text-background', 'transition-[border-color,background-color]', 'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:cursor-default disabled:opacity-50', // cursor-default: disabled keeps the default cursor (AGENTS.md → States)
+'aria-invalid:border-destructive');
+const checkboxVariantClassName = {
+    blue: 'data-[state=checked]:border-kortix-blue data-[state=checked]:bg-kortix-blue data-[state=indeterminate]:border-kortix-blue data-[state=indeterminate]:bg-kortix-blue',
+    black: 'data-[state=checked]:border-foreground data-[state=checked]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:bg-foreground',
+};
+function CheckMark({ indeterminate }) {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "size-3", children: _jsx("path", { d: indeterminate ? 'M4 8h8' : 'M3.5 8.5l3 3 6-7', stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function Checkbox({ className, label, id, variant = 'blue', ...props }) {
+    const generatedId = React.useId();
+    const itemId = id ?? generatedId;
+    const control = (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", "data-variant": variant, id: itemId, className: cn(checkboxControlClassName, checkboxVariantClassName[variant], !label && className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center", children: _jsx(CheckMark, { indeterminate: props.checked === 'indeterminate' }) }) }));
+    if (!label) {
+        return control;
+    }
+    return (_jsxs("label", { htmlFor: itemId, className: cn('flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-1.5 transition-colors', 'hover:bg-foreground/3', 'has-data-[state=checked]:bg-foreground/6 has-data-[state=checked]:hover:bg-foreground/6', 'has-focus-visible:ring-ring has-focus-visible:ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-offset-2', props.disabled && 'cursor-default opacity-50', // cursor-default: disabled keeps the default cursor (AGENTS.md → States)
+        className), children: [control, _jsx("span", { className: cn('text-sm transition-[color,font-weight]', 'text-muted-foreground', 'peer-data-[state=checked]:text-foreground peer-data-[state=checked]:font-medium', props.disabled && 'text-muted-foreground'), children: label })] }));
+}
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

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

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react").JSX.Element;
+declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", className: cn('cursor-pointer', className), ...props }));
+}
+function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", className: cn('data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden', className), ...props }));
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

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

@@ -0,0 +1,58 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+import { Dialog } from './dialog.js';
+/**
+ * `data-nav` records which input moved the highlight last: `pointer` or
+ * `keyboard`. `CommandItem` reads it to pick ONE highlight source.
+ *
+ * cmdk 0.2.1 selects a row on every `pointermove` through its store, so
+ * `data-selected` moves only after React re-renders the whole list. In the ⌘K
+ * palette that re-render trails the cursor: the row you left stays lit until
+ * it lands, which reads as a hover transition. In pointer mode the row paints
+ * from CSS `:hover` alone — the same instant highlight the sidebar session
+ * rows use. Keyboard mode keeps `data-selected`, because arrow keys have no
+ * `:hover` to follow.
+ *
+ * Written straight to the DOM node, not React state: a state update here would
+ * re-render the list on every pointer move, which is the lag this removes.
+ * cmdk calls a caller's `onKeyDown` before its own handler and spreads
+ * `onPointerMove` onto the root, so both reach the same element.
+ */
+declare function Command({ className, onKeyDown, onPointerMove, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, compact, leftElement, rightElement, ...props }: React.ComponentProps<typeof CommandPrimitive.Input> & {
+    compact?: boolean;
+    /** Sits before the text field: a search glyph, or a sub-page's back chip. */
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
+}): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function CommandFooter({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CommandPopover({ open, onOpenChange, children, modal, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    modal?: boolean;
+}): React.JSX.Element;
+declare const CommandPopoverTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-popover").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "size"> & import("./trigger-variants.js").TriggerVariantProps, "ref">, "asChild"> & React.RefAttributes<HTMLButtonElement>>;
+declare function CommandPopoverContent({ children, side, align, sideOffset, className, shouldFilter, defaultValue, }: {
+    children: React.ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    className?: string;
+    shouldFilter?: boolean;
+    /** The item value highlighted when the list opens (cmdk `defaultValue`). */
+    defaultValue?: string;
+}): React.JSX.Element;
+export { Command, CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, CommandSeparator, CommandShortcut, };