@kortix/ui 0.14.3 → 0.14.4

package/dist/components/ui/switch.js

@@ -1,131 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { spring } from '../../lib/springs.js';
-import { cn } from '../../lib/utils.js';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { animate, m, useMotionValue } from 'motion/react';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-// Track is `w-[34px] h-[20px]` in the className — keep it in sync with these.
-const TRACK_WIDTH = 34;
-const THUMB_SIZE = 16;
-const THUMB_OFFSET = 2;
-const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
-const PILL_EXTEND = 2;
-const PRESS_EXTEND = 4;
-const PRESS_SHRINK = 4;
-const DRAG_DEAD_ZONE = 2;
-const Switch = forwardRef(({ label, checked, onCheckedChange, disabled = false, className, id, ...props }, ref) => {
-    const hasMounted = useRef(false);
-    const [hovered, setHovered] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const isChecked = checked ?? false;
-    const dragging = useRef(false);
-    const didDrag = useRef(false);
-    const pointerStart = useRef(null);
-    const motionX = useMotionValue(isChecked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET);
-    useEffect(() => {
-        hasMounted.current = true;
-    }, []);
-    const thumbWidth = pressed
-        ? THUMB_SIZE + PRESS_EXTEND
-        : hovered
-            ? THUMB_SIZE + PILL_EXTEND
-            : THUMB_SIZE;
-    const thumbHeight = pressed ? THUMB_SIZE - PRESS_SHRINK : THUMB_SIZE;
-    const thumbY = pressed ? THUMB_OFFSET + PRESS_SHRINK / 2 : THUMB_OFFSET;
-    const extraWidth = thumbWidth - THUMB_SIZE;
-    const thumbX = isChecked ? THUMB_OFFSET + THUMB_TRAVEL - extraWidth : THUMB_OFFSET;
-    useEffect(() => {
-        if (dragging.current)
-            return;
-        if (!hasMounted.current) {
-            motionX.set(thumbX);
-        }
-        else {
-            animate(motionX, thumbX, spring.moderate);
-        }
-    }, [thumbX, motionX]);
-    const handlePointerDown = useCallback((e) => {
-        if (disabled)
-            return;
-        if (e.pointerType === 'mouse' && e.button !== 0)
-            return;
-        setPressed(true);
-        dragging.current = false;
-        didDrag.current = false;
-        pointerStart.current = {
-            clientX: e.clientX,
-            originX: motionX.get(),
-        };
-        e.currentTarget.setPointerCapture(e.pointerId);
-    }, [disabled, motionX]);
-    const handlePointerMove = useCallback((e) => {
-        if (!pointerStart.current)
-            return;
-        const delta = e.clientX - pointerStart.current.clientX;
-        if (!dragging.current) {
-            if (Math.abs(delta) < DRAG_DEAD_ZONE)
-                return;
-            dragging.current = true;
-        }
-        const dragMin = THUMB_OFFSET;
-        const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND;
-        const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth;
-        const rawX = pointerStart.current.originX + delta;
-        motionX.set(Math.max(dragMin, Math.min(dragMax, rawX)));
-    }, [motionX]);
-    const handlePointerUp = useCallback(() => {
-        if (!pointerStart.current)
-            return;
-        setPressed(false);
-        if (dragging.current) {
-            didDrag.current = true;
-            dragging.current = false;
-            const currentX = motionX.get();
-            const dragMin = THUMB_OFFSET;
-            const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND;
-            const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth;
-            const midpoint = (dragMin + dragMax) / 2;
-            const shouldBeOn = currentX > midpoint;
-            if (shouldBeOn !== isChecked) {
-                onCheckedChange?.(shouldBeOn);
-            }
-            else {
-                const snapTarget = isChecked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET;
-                animate(motionX, snapTarget, spring.moderate);
-            }
-            requestAnimationFrame(() => {
-                didDrag.current = false;
-            });
-        }
-        pointerStart.current = null;
-    }, [isChecked, onCheckedChange, motionX]);
-    const switchControl = (_jsx(SwitchPrimitive.Root, { ref: ref, id: id, checked: checked, disabled: disabled, tabIndex: 0, className: cn('group/switch relative h-[20px] w-[34px] shrink-0 touch-none rounded-full outline-none', // pointer comes from the global rule; disabled keeps the default cursor
-        'transition-colors duration-80', 'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-1 focus-visible:ring-offset-2', 
-        // Colours come from Radix's `data-state`, never from JS state.
-        // Off is translucent ink, so one class reads in both themes and on
-        // any panel. Thumb vs track (WCAG 1.4.11, 3:1), worst of page /
-        // card / muted: rest 3.13:1, hover 4.13:1. On: white thumb 3.23:1.
-        'data-[state=checked]:bg-kortix-blue', 'data-[state=unchecked]:bg-foreground/10 data-[state=unchecked]:hover:bg-foreground/15', !label && className), onPointerEnter: (e) => {
-            if (e.pointerType === 'mouse')
-                setHovered(true);
-        }, onPointerLeave: () => setHovered(false), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onCheckedChange: (nextChecked) => {
-            if (didDrag.current)
-                return;
-            onCheckedChange?.(nextChecked);
-        }, ...props, children: _jsx(SwitchPrimitive.Thumb, { asChild: true, children: _jsx(m.span, { className: cn('duration-fast absolute top-0 left-0 rounded-full shadow-sm transition-colors', 'data-[state=checked]:bg-white', 
-                // A white thumb on the light off track would be ~1.25:1.
-                'data-[state=unchecked]:bg-foreground/45 group-hover/switch:data-[state=unchecked]:bg-foreground/55'), initial: false, 
-                // Motion value binding for drag, not a colour or layout style.
-                style: { x: motionX }, animate: {
-                    y: thumbY,
-                    width: thumbWidth,
-                    height: thumbHeight,
-                }, transition: hasMounted.current ? spring.moderate : { duration: 0 } }) }) }));
-    if (!label) {
-        return switchControl;
-    }
-    return (_jsxs("div", { className: cn('relative z-10 flex cursor-pointer items-center gap-2.5 px-3 py-2 select-none', disabled && 'pointer-events-none opacity-50', className), children: [switchControl, _jsx("span", { className: cn('text-sm transition-[color] duration-80', isChecked ? 'text-foreground' : 'text-muted-foreground'), children: label })] }));
-});
-Switch.displayName = 'Switch';
-export { Switch };

package/dist/components/ui/system-message.js

@@ -1,51 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from './button.js';
-import { cn } from '../../lib/utils.js';
-import { InfoIcon, WarningCircleIcon, WarningIcon } from '@phosphor-icons/react';
-import { cva } from 'class-variance-authority';
-const systemMessageVariants = cva('flex flex-row items-center gap-3 rounded-md border py-2 pr-2 pl-3', {
-    variants: {
-        variant: {
-            action: 'text-muted-foreground',
-            error: 'text-kortix-red',
-            warning: 'text-kortix-orange',
-        },
-        fill: {
-            true: 'border-transparent',
-            false: '',
-        },
-    },
-    compoundVariants: [
-        { variant: 'action', fill: true, class: 'bg-muted' },
-        { variant: 'error', fill: true, class: 'bg-kortix-red/10' },
-        { variant: 'warning', fill: true, class: 'bg-kortix-orange/10' },
-        { variant: 'action', fill: false, class: 'border-border' },
-        { variant: 'error', fill: false, class: 'border-kortix-red/30' },
-        { variant: 'warning', fill: false, class: 'border-kortix-orange/30' },
-    ],
-    defaultVariants: {
-        variant: 'action',
-        fill: false,
-    },
-});
-/** `cta.variant` is the caller-facing name; this maps it to a Button variant. */
-const CTA_BUTTON_VARIANT = {
-    solid: 'default',
-    outline: 'outline',
-    ghost: 'ghost',
-};
-function defaultIcon(variant) {
-    switch (variant) {
-        case 'error':
-            return _jsx(WarningCircleIcon, { className: "size-4" });
-        case 'warning':
-            return _jsx(WarningIcon, { className: "size-4" });
-        default:
-            return _jsx(InfoIcon, { className: "size-4" });
-    }
-}
-export function SystemMessage({ children, variant = 'action', fill = false, icon, isIconHidden = false, cta, className, ...props }) {
-    const iconToShow = isIconHidden ? null : (icon ?? defaultIcon(variant));
-    return (_jsxs("div", { className: cn(systemMessageVariants({ variant, fill }), className), ...props, children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-3 leading-normal", children: [iconToShow !== null && (_jsx("div", { className: "flex h-[1lh] shrink-0 items-center justify-center self-start", children: iconToShow })), _jsx("div", { className: "min-w-0 flex-1 text-sm", children: children })] }), cta && (_jsx(Button, { variant: CTA_BUTTON_VARIANT[cta.variant ?? 'solid'], size: "sm", onClick: cta.onClick, children: cta.label }))] }));
-}

package/dist/components/ui/table.js

@@ -1,28 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils.js';
-function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "border-border bg-popover relative w-full overflow-hidden rounded-md border", children: _jsx("div", { className: "overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn('w-full caption-bottom text-sm', className), ...props }) }) }));
-}
-function TableHeader({ className, ...props }) {
-    return (_jsx("thead", { "data-slot": "table-header", className: cn('bg-accent [&_tr]:border-b', className), ...props }));
-}
-function TableBody({ className, ...props }) {
-    return (_jsx("tbody", { "data-slot": "table-body", className: cn('[&_tr:last-child]:border-0', className), ...props }));
-}
-function TableFooter({ className, ...props }) {
-    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn('bg-popover-foreground/5 border-t font-medium [&>tr]:last:border-b-0', className), ...props }));
-}
-function TableRow({ className, ...props }) {
-    return (_jsx("tr", { "data-slot": "table-row", className: cn('hover:bg-popover-foreground/5 data-[state=selected]:bg-popover-foreground/5 border-b transition-colors', className), ...props }));
-}
-function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn('text-muted-foreground px-5 py-2 text-left align-middle text-sm font-normal whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props }));
-}
-function TableCell({ className, ...props }) {
-    return (_jsx("td", { "data-slot": "table-cell", className: cn('px-5 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props }));
-}
-function TableCaption({ className, ...props }) {
-    return (_jsx("caption", { "data-slot": "table-caption", className: cn('text-muted-foreground mt-4 text-sm', className), ...props }));
-}
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/ui/tabs.js

@@ -1,207 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cva } from 'class-variance-authority';
-import * as React from 'react';
-import { SlidingTabIndicator } from './sliding-tab-indicator.js';
-import { cn } from '../../lib/utils.js';
-const tabsTriggerPaddingVariants = cva('', {
-    variants: {
-        size: {
-            default: 'gap-2 px-4 py-2 has-[>svg]:px-3',
-            xs: 'gap-1.5 px-2.5 has-[>svg]:px-2',
-            sm: 'gap-1.5 px-3 has-[>svg]:px-2.5',
-            md: 'gap-2 px-5 has-[>svg]:px-4',
-            lg: 'gap-2 px-6 has-[>svg]:px-4',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-const tabsTriggerHeightVariants = cva('', {
-    variants: {
-        size: {
-            default: 'h-8',
-            xs: 'h-7',
-            sm: 'h-8',
-            md: 'h-10',
-            lg: 'h-10',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-/** Shared tab typography for web and desktop. */
-const tabsTriggerTextVariants = cva('font-medium', {
-    variants: {
-        size: {
-            default: 'text-sm',
-            xs: 'text-xs rounded-sm',
-            sm: 'text-xs',
-            md: 'text-sm',
-            lg: 'text-sm',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-const tabsListHeightClasses = {
-    default: 'h-9',
-    xs: 'h-6',
-    sm: 'h-8',
-    md: 'h-10',
-    lg: 'h-10',
-};
-const tabsUnderlineBorderClasses = {
-    xs: '**:data-[slot=tabs-trigger]:after:h-px',
-    sm: '**:data-[slot=tabs-trigger]:after:h-[1.5px]',
-    md: '**:data-[slot=tabs-trigger]:after:h-0.5',
-    lg: '**:data-[slot=tabs-trigger]:after:h-[3px]',
-};
-/** Shared underline-list chrome; indicator height comes from `underlineSize`. */
-const tabsListUnderlineBaseClasses = "border-border **:data-[slot=tabs-trigger]:data-[state=inactive]:text-muted-foreground text-muted-foreground **:data-[slot=tabs-trigger]:data-[state=active]:text-foreground inline-flex w-fit items-center justify-center gap-0 rounded-none border-b **:data-[slot=tabs-trigger]:relative **:data-[slot=tabs-trigger]:h-full **:data-[slot=tabs-trigger]:rounded-none **:data-[slot=tabs-trigger]:border-0 **:data-[slot=tabs-trigger]:bg-transparent **:data-[slot=tabs-trigger]:shadow-none **:data-[slot=tabs-trigger]:after:pointer-events-none **:data-[slot=tabs-trigger]:after:absolute **:data-[slot=tabs-trigger]:after:inset-x-0 **:data-[slot=tabs-trigger]:after:bottom-0 **:data-[slot=tabs-trigger]:after:rounded-full **:data-[slot=tabs-trigger]:after:bg-transparent **:data-[slot=tabs-trigger]:after:content-[''] **:data-[slot=tabs-trigger]:data-[state=active]:bg-transparent **:data-[slot=tabs-trigger]:data-[state=active]:shadow-none **:data-[slot=tabs-trigger]:data-[state=active]:after:bg-foreground **:data-[slot=tabs-trigger]:data-[state=inactive]:bg-transparent";
-/**
- * Segmented track + chip. Radii are concentric: the track is `rounded-md` (8px)
- * with 2px of padding, so the chip is `rounded-sm` (6px). The chip lifts with a
- * hairline ring plus `shadow-xs` — raised, not bordered, so it reads as the
- * selected thing in both themes.
- *
- * The padding is `p-[2px]`, not `p-0.5`: `--spacing` is 0.23rem, so `p-0.5` is
- * 1.84px. The chip's 1px ring leaves 0.84px of track showing, and a fraction of
- * a pixel rounds differently on each side — 1px of track on one end and none on
- * the other at 1x. A whole 2px leaves exactly 1px on every side.
- */
-const tabsSegmentedTrackClasses = 'bg-muted rounded-md p-[2px]';
-const tabsSegmentedChipClasses = 'bg-popover ring-border rounded-sm shadow-xs ring-1';
-function resolveTabsTriggerSize(sizeProp, listSize) {
-    if (sizeProp)
-        return sizeProp;
-    if (listSize === 'xs')
-        return 'xs';
-    if (listSize === 'lg')
-        return 'md';
-    return listSize;
-}
-const TabsActiveValueContext = React.createContext('');
-const TabsListTypeContext = React.createContext('default');
-const TabsAnimateContext = React.createContext('none');
-const TabsSizeContext = React.createContext('default');
-/** Lets `TabsTrigger` adapt to a vertical `TabsList` without every caller re-passing orientation. */
-const TabsOrientationContext = React.createContext('horizontal');
-function Tabs({ className, value, defaultValue, onValueChange, ...props }) {
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
-    const activeValue = value !== undefined ? value : uncontrolledValue;
-    const handleValueChange = React.useCallback((next) => {
-        if (value === undefined) {
-            setUncontrolledValue(next);
-        }
-        onValueChange?.(next);
-    }, [onValueChange, value]);
-    return (_jsx(TabsActiveValueContext.Provider, { value: activeValue, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn('flex flex-col gap-2', className), value: value, defaultValue: defaultValue, onValueChange: handleValueChange, ...props }) }));
-}
-function TabsList(props) {
-    return _jsx(TabsListRenderer, { ...props, orientation: props.orientation ?? 'horizontal' });
-}
-function TabsListRenderer({ className, type: typeProp = 'default', variant, size = 'default', underlineSize = 'sm', animate = 'none', orientation, compact = false, children, ...props }) {
-    const activeValue = React.useContext(TabsActiveValueContext);
-    const isVertical = !compact && orientation === 'vertical';
-    const requested = variant === 'segmented' ? 'segmented' : typeProp;
-    // Every horizontal list that is not `underline` is the segmented control.
-    // Triggers read the resolved type from context, so a vertical rail keeps its
-    // own row styling.
-    const type = requested === 'underline' ? 'underline' : isVertical ? 'default' : 'segmented';
-    const isSegmented = type === 'segmented';
-    const useSlidingIndicator = isSegmented && animate === 'fluid';
-    const trackClassName = cn(compact
-        ? 'text-muted-foreground inline-flex h-7 w-fit items-center justify-center'
-        : 'text-muted-foreground inline-flex w-fit items-center justify-center', !compact && tabsListHeightClasses[size], tabsSegmentedTrackClasses, className);
-    const list = (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(isSegmented && 'relative z-10 flex h-full w-full items-stretch justify-center gap-0.5', !isVertical && type === 'underline' && tabsListUnderlineBaseClasses, compact && type === 'underline' && 'h-7', !isVertical && type === 'underline' && tabsUnderlineBorderClasses[underlineSize], !compact && !isVertical && type === 'underline' && tabsListHeightClasses[size], isVertical && 'flex h-auto w-full flex-col items-stretch gap-0.5 rounded-none bg-transparent p-0', (!compact || type === 'underline') && className), ...props, children: children }));
-    // The sliding pill indicator only measures the x-axis (see
-    // SlidingTabIndicator) — in a column it would collapse to a
-    // zero-width bar, so vertical lists render without it.
-    const content = isVertical || type === 'underline' ? list : useSlidingIndicator ? (_jsx(SlidingTabIndicator, { activeId: activeValue, className: trackClassName, indicatorClassName: tabsSegmentedChipClasses, children: list })) : _jsx("div", { className: trackClassName, children: list });
-    return (_jsx(TabsListTypeContext.Provider, { value: type, children: _jsx(TabsAnimateContext.Provider, { value: animate, children: _jsx(TabsSizeContext.Provider, { value: size, children: compact ? content : (_jsx(TabsOrientationContext.Provider, { value: orientation ?? 'horizontal', children: content })) }) }) }));
-}
-function TabsTrigger({ className, size: sizeProp, variant = 'default', value, ...props }) {
-    const listType = React.useContext(TabsListTypeContext);
-    const animate = React.useContext(TabsAnimateContext);
-    const listSize = React.useContext(TabsSizeContext);
-    const listOrientation = React.useContext(TabsOrientationContext);
-    const size = resolveTabsTriggerSize(sizeProp, listSize);
-    const isUnderlineList = listType === 'underline';
-    // A segmented trigger either sits in a segmented list (the list's sliding
-    // chip paints the active state) or asks for it alone with
-    // `variant="segmented"` (it paints its own chip — there is no track to slide in).
-    const isSegmentedList = listType === 'segmented';
-    // An explicit `variant="outline"` keeps its bordered chip even in a segmented list.
-    const isOutline = !isUnderlineList && variant === 'outline';
-    const isSegmented = !isUnderlineList && !isOutline && (isSegmentedList || variant === 'segmented');
-    // Outline paints its own border; the sliding pill fill would fight it.
-    const useSlidingIndicator = !isUnderlineList &&
-        !isOutline &&
-        (!isSegmented || isSegmentedList) &&
-        animate === 'fluid';
-    const isVertical = listOrientation === 'vertical';
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", "data-sliding-tab": useSlidingIndicator ? value : undefined, "data-variant": variant, value: value, className: cn("focus-visible:ring-kortix-blue duration-normal ease-default inline-flex flex-1 cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2.5px)] border border-transparent whitespace-nowrap transition-[color,background-color,border-color,box-shadow] focus-visible:ring-[0.6px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", tabsTriggerTextVariants({ size }), tabsTriggerPaddingVariants({ size }), isUnderlineList || isSegmentedList ? 'h-full' : tabsTriggerHeightVariants({ size }), 
-        // Segmented: the chip sits inside the track's padding, so the trigger
-        // fills the track and takes the chip's concentric radius.
-        isSegmented && 'rounded-sm', 
-        // Without the sliding indicator the active trigger paints the chip itself.
-        isSegmented &&
-            !useSlidingIndicator &&
-            'data-[state=active]:bg-popover data-[state=active]:ring-border data-[state=active]:shadow-xs data-[state=active]:ring-1', isUnderlineList &&
-            'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground rounded-none bg-transparent shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=inactive]:bg-transparent', 
-        // Default: a secondary-coloured pill. With animate="fluid" the sliding
-        // indicator paints the pill behind the trigger, so the trigger itself
-        // stays transparent; otherwise the trigger paints its own.
-        !isUnderlineList &&
-            !isOutline &&
-            'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground relative z-10 data-[state=inactive]:bg-transparent', !isUnderlineList &&
-            !isOutline &&
-            !isSegmented &&
-            (useSlidingIndicator
-                ? 'data-[state=active]:bg-transparent'
-                : 'data-[state=active]:bg-input'), isSegmented && useSlidingIndicator && 'data-[state=active]:bg-transparent', 
-        // Outline: bordered active chip — matches Button `outline` (border + transparent fill).
-        isOutline &&
-            'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:bg-foreground/5 hover:data-[state=inactive]:text-foreground data-[state=active]:border-border relative z-10 bg-transparent data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent', isVertical && 'w-full justify-start text-left', className), ...props }));
-}
-function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));
-}
-function TabsListCompact(props) {
-    // Same rule as `TabsList`: anything that is not `underline` is segmented.
-    return _jsx(TabsListRenderer, { ...props, size: "xs", compact: true });
-}
-/** Compact Radix TabsTrigger — use inside <Tabs> root for smaller contexts. */
-function TabsTriggerCompact({ className, variant = 'default', value, ...props }) {
-    const listType = React.useContext(TabsListTypeContext);
-    const animate = React.useContext(TabsAnimateContext);
-    const isUnderlineList = listType === 'underline';
-    const isOutline = !isUnderlineList && variant === 'outline';
-    const isSegmented = !isUnderlineList && !isOutline;
-    const useSlidingIndicator = isSegmented && animate === 'fluid';
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", "data-sliding-tab": useSlidingIndicator ? value : undefined, "data-variant": variant, value: value, className: cn('focus-visible:ring-kortix-blue relative z-10 inline-flex flex-1 cursor-pointer items-center justify-center border border-transparent text-xs font-medium whitespace-nowrap focus-visible:ring-[0.6px] focus-visible:outline-none', tabsTriggerPaddingVariants({ size: 'xs' }), isUnderlineList || isSegmented
-            ? 'h-full'
-            : tabsTriggerHeightVariants({ size: 'xs' }), isUnderlineList && 'rounded-none', isUnderlineList &&
-            'duration-normal ease-default data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground rounded-none bg-transparent shadow-none transition-[color,background-color,border-color,box-shadow] data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=inactive]:bg-transparent motion-reduce:transition-none', 
-        // Segmented (the default) — see TabsTrigger: the sliding chip paints the
-        // active state, or the trigger paints it when there is no slide.
-        isSegmented &&
-            'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground rounded-sm bg-transparent transition-colors duration-150', isSegmented &&
-            !useSlidingIndicator &&
-            'data-[state=active]:bg-popover data-[state=active]:ring-border data-[state=active]:shadow-xs data-[state=active]:ring-1', isOutline &&
-            'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:bg-foreground/5 hover:data-[state=inactive]:text-foreground data-[state=active]:border-border rounded-[calc(var(--radius)-3px)] bg-transparent transition-[color,background-color,border-color] duration-150 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent', 'disabled:pointer-events-none disabled:opacity-50', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props }));
-}
-/** Standalone filter pill bar — works WITHOUT a <Tabs> root. Use for filter bars, mode toggles. */
-function FilterBar({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "filter-bar", role: "tablist", className: cn('bg-foreground/5 text-muted-foreground inline-flex h-9 w-fit items-center justify-center gap-0.5 p-0.5', className), ...props }));
-}
-/** Standalone filter pill — works WITHOUT a <Tabs> root. Pair with FilterBar. */
-function FilterBarItem({ className, ...props }) {
-    return (_jsx("button", { "data-slot": "filter-bar-item", role: "tab", type: "button", className: cn('inline-flex h-[calc(100%-4px)] flex-1 cursor-pointer items-center justify-center gap-1.5 border border-transparent px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-150', 'text-muted-foreground/60 hover:text-foreground/80', 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-foreground/6 data-[state=active]:shadow-sm data-[state=active]:ring-1', 'disabled:pointer-events-none disabled:opacity-50', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props }));
-}
-export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };

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

@@ -1,7 +0,0 @@
-import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-declare const tagVariants: (props?: ({
-    variant?: "default" | "warning" | "new" | "custom" | "free" | "latest" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Tag({ className, variant, ...props }: React.ComponentProps<'span'> & VariantProps<typeof tagVariants>): React.JSX.Element;
-export { Tag, tagVariants };

package/dist/components/ui/tag.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils.js';
-const tagVariants = cva('px-1.5 py-0.5 rounded text-xs font-medium leading-none shrink-0 inline-flex items-center', {
-    variants: {
-        variant: {
-            default: 'bg-muted text-muted-foreground',
-            free: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
-            latest: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
-            custom: 'bg-muted text-muted-foreground',
-            new: 'bg-primary/10 text-primary',
-            warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-function Tag({ className, variant, ...props }) {
-    return _jsx("span", { "data-slot": "tag", className: cn(tagVariants({ variant }), className), ...props });
-}
-export { Tag, tagVariants };

package/dist/components/ui/text-shimmer.js

@@ -1,91 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils.js';
-import React from 'react';
-/**
- * The sweep, as native CSS `@keyframes` rather than a per-frame Motion
- * (`motion/react`) animation.
- *
- * `backgroundPosition` is not compositor-animatable — every frame forces a
- * style recalc and a `bg-clip-text` repaint either way, JS-driven or not.
- * The cost this removes is the JS side of it: the old version drove the
- * sweep with `animate={{ backgroundPosition }}` + `repeat: Infinity`, which
- * is a `requestAnimationFrame` loop running Motion's interpolation and a
- * React-visible style write on every single frame, for as long as the
- * shimmer stays mounted. A running burst mounts several at once (the
- * summary line, every running group row, every live "Thinking" row, the
- * chat's own busy line) — that is several rAF loops competing with the
- * turn's own SSE-driven re-renders for the same main-thread frame budget,
- * forever, while nothing about the text is even changing.
- *
- * A CSS animation is scheduled by the browser's style/animation engine, not
- * by application JS: no rAF callback, no Motion interpolation, no
- * React-visible write, on every frame this component is visible. Steady
- * state (nothing streaming, a burst just sitting open) goes from N
- * `requestAnimationFrame` callbacks per shimmer per frame to zero JS.
- *
- * `kx-shimmer-sweep-hold` reproduces the old `repeatDelay: 0.5` pause
- * between loops (infinite case) as an 80/20 split of the animation's own
- * duration — the sweep finishes at the 80% mark, then holds until 100%.
- * Driving `animation-duration` at `duration / 0.8` puts the sweep itself at
- * exactly `duration` seconds (80% of `duration / 0.8` is `duration`), and
- * the hold scales proportionally with it (`duration * 0.25`). For the
- * default `duration={2}` every caller but two uses, that hold is 0.5s —
- * an exact match. CSS keyframe percentages cannot express a duration-
- * independent flat 0.5s without a separate stylesheet per `duration` value,
- * and a hold that scales with sweep speed reads the same as a fixed one at
- * the 1s/2.2s durations this component is actually called with.
- * `kx-shimmer-sweep` (no hold) backs the finite-`repeat` case, matching the
- * old transition's `repeatDelay: 0` there.
- *
- * These keyframes are scoped to this file via an inline `<style>` — the
- * same technique `components/ui/chart.tsx` already uses for component-local
- * CSS — because `globals.css` is out of scope for this change and this
- * codebase has no CSS Modules precedent (`bun test` has no loader for
- * `.css` imports, so a `.module.css` file would break every test that
- * imports this component). The tag is a static string, so every instance
- * renders the identical bytes; the DOM tolerates duplicate `<style>`
- * content fine, and it costs a one-time parse per mount, not a per-frame
- * cost — nothing like the loop it replaces.
- */
-const SHIMMER_STYLE = `
-@keyframes kx-shimmer-sweep {
-  from { background-position: 100% center; }
-  to { background-position: 0% center; }
-}
-@keyframes kx-shimmer-sweep-hold {
-  0% { background-position: 100% center; }
-  80% { background-position: 0% center; }
-  100% { background-position: 0% center; }
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-kx-text-shimmer] {
-    animation: none !important;
-    background-image: none !important;
-    color: var(--base-color) !important;
-    -webkit-text-fill-color: var(--base-color) !important;
-  }
-}
-`;
-function TextShimmerComponent({ children, as: Component = 'span', className, duration = 2, spread = 2, repeat = Infinity, }) {
-    const dynamicSpread = children.length * spread;
-    const infinite = repeat === Infinity;
-    // `React.ElementType` resolves too broadly for JSX to infer a concrete
-    // props type from (TS collapses `children`/`style` to `never`) — the old
-    // code sidestepped this by handing `Component` to `m.create`, which returns
-    // a properly-typed Motion component. There is no Motion component to ask
-    // for that anymore, so the tag itself is cast to accept the fixed, known
-    // set of props this file actually passes it.
-    const Tag = Component;
-    return (_jsxs(Tag, { "data-kx-text-shimmer": "", className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text', 'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]', '[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]', 'text-sm dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]', className), style: {
-            '--spread': `${dynamicSpread}px`,
-            backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
-            backgroundPosition: '100% center',
-            animationName: infinite ? 'kx-shimmer-sweep-hold' : 'kx-shimmer-sweep',
-            animationDuration: `${infinite ? duration / 0.8 : duration}s`,
-            animationTimingFunction: 'linear',
-            animationIterationCount: infinite ? 'infinite' : repeat,
-            animationFillMode: infinite ? 'none' : 'forwards',
-        }, children: [children, _jsx("style", { children: SHIMMER_STYLE })] }));
-}
-export const TextShimmer = React.memo(TextShimmerComponent);

package/dist/components/ui/textarea.js

@@ -1,87 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, } from './input.js';
-import { cn } from '../../lib/utils.js';
-import * as React from 'react';
-import { useImperativeHandle } from 'react';
-export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0, }) => {
-    const [init, setInit] = React.useState(true);
-    const [currentHeight, setCurrentHeight] = React.useState(minHeight);
-    const previousContentRef = React.useRef(triggerAutoSize);
-    const resizeTimeoutRef = React.useRef(null);
-    React.useEffect(() => {
-        const offsetBorder = 6;
-        const textAreaElement = textAreaRef.current;
-        if (!textAreaElement)
-            return;
-        if (init) {
-            textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
-            if (maxHeight > minHeight) {
-                textAreaElement.style.maxHeight = `${maxHeight}px`;
-            }
-            setInit(false);
-        }
-        if (resizeTimeoutRef.current) {
-            clearTimeout(resizeTimeoutRef.current);
-        }
-        resizeTimeoutRef.current = setTimeout(() => {
-            const contentLengthChanged = Math.abs(previousContentRef.current.length - triggerAutoSize.length) > 5;
-            const contentIsEmpty = triggerAutoSize.trim() === '';
-            if (!contentLengthChanged && !contentIsEmpty && !init) {
-                return;
-            }
-            const scrollTop = textAreaElement.scrollTop;
-            textAreaElement.style.height = `${minHeight + offsetBorder}px`;
-            const isEmpty = triggerAutoSize.trim() === '';
-            const scrollHeight = textAreaElement.scrollHeight;
-            let newHeight;
-            if (isEmpty) {
-                newHeight = minHeight + offsetBorder;
-            }
-            else if (scrollHeight > maxHeight) {
-                newHeight = maxHeight;
-            }
-            else {
-                newHeight = scrollHeight + offsetBorder;
-            }
-            if (Math.abs(newHeight - currentHeight) > 10) {
-                textAreaElement.style.height = `${newHeight}px`;
-                setCurrentHeight(newHeight);
-            }
-            else {
-                textAreaElement.style.height = `${currentHeight}px`;
-            }
-            textAreaElement.scrollTop = scrollTop;
-            previousContentRef.current = triggerAutoSize;
-        }, 100);
-        return () => {
-            if (resizeTimeoutRef.current) {
-                clearTimeout(resizeTimeoutRef.current);
-            }
-        };
-    }, [textAreaRef.current, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
-};
-export const Textarea = React.forwardRef(({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 52, className, onChange, value, variant: _variant, ...props }, ref) => {
-    const textAreaRef = React.useRef(null);
-    const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
-    useAutosizeTextArea({
-        textAreaRef,
-        triggerAutoSize: triggerAutoSize,
-        maxHeight,
-        minHeight,
-    });
-    useImperativeHandle(ref, () => ({
-        textArea: textAreaRef.current,
-        focus: () => textAreaRef?.current?.focus(),
-        maxHeight,
-        minHeight,
-    }));
-    React.useEffect(() => {
-        setTriggerAutoSize(value || '');
-    }, [props?.defaultValue, value]);
-    return (_jsx("textarea", { ...props, value: value, ref: textAreaRef, className: cn(inputSurfaceClasses, inputFocusClasses, inputInvalidClasses, inputTransitionClasses, 'text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex w-full resize-none px-3 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50', className), onChange: (e) => {
-            setTriggerAutoSize(e.target.value);
-            onChange?.(e);
-        } }));
-});
-Textarea.displayName = 'Textarea';