@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/switch.js

@@ -0,0 +1,131 @@
+'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.d.ts

@@ -0,0 +1,23 @@
+import { type VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const systemMessageVariants: (props?: ({
+    variant?: "error" | "warning" | "action" | null | undefined;
+    fill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** `cta.variant` is the caller-facing name; this maps it to a Button variant. */
+declare const CTA_BUTTON_VARIANT: {
+    readonly solid: "default";
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+};
+export type SystemMessageProps = React.ComponentProps<'div'> & VariantProps<typeof systemMessageVariants> & {
+    icon?: React.ReactNode;
+    isIconHidden?: boolean;
+    cta?: {
+        label: string;
+        onClick?: () => void;
+        variant?: keyof typeof CTA_BUTTON_VARIANT;
+    };
+};
+export declare function SystemMessage({ children, variant, fill, icon, isIconHidden, cta, className, ...props }: SystemMessageProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,51 @@
+'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.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Table({ className, ...props }: React.ComponentProps<'table'>): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/ui/table.js

@@ -0,0 +1,28 @@
+'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.d.ts

@@ -0,0 +1,73 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+declare const tabsTriggerPaddingVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tabsTriggerHeightVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Shared tab typography for web and desktop. */
+declare const tabsTriggerTextVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsTriggerSize = 'xs' | 'sm' | 'default' | 'md';
+type TabsSize = TabsTriggerSize | 'lg';
+/**
+ * `default` is the filled pill; `outline` is a bordered active chip;
+ * `segmented` is the raised surface chip of a segmented control.
+ */
+type TabsTriggerVariant = 'default' | 'outline' | 'segmented';
+/** Stroke thickness of the active underline rule (`type="underline"` only). */
+type TabsUnderlineSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * `default` is the segmented control: a recessed track whose active tab is a
+ * raised surface chip. `segmented` is the same control, kept as an explicit
+ * name. `underline` is the flat rule. A vertical list (a settings rail) is
+ * never segmented.
+ */
+type TabsListType = 'default' | 'underline' | 'segmented';
+declare function Tabs({ className, value, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+interface TabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
+    type?: TabsListType;
+    /**
+     * `segmented` renders the segmented control (recessed track + raised chip):
+     * `<TabsList variant="segmented">`. Same as `type="segmented"`; `variant`
+     * wins when both are set.
+     */
+    variant?: 'default' | 'segmented';
+    size?: TabsSize;
+    /** Active underline stroke. Only applies when `type="underline"`. Default `sm`. */
+    underlineSize?: TabsUnderlineSize;
+    animate?: 'fluid' | 'none';
+    /**
+     * `vertical` stacks triggers full-width in a column (e.g. a settings
+     * rail) instead of laying them out inline. This is a styling switch only —
+     * `aria-orientation` still comes from `orientation` on the `Tabs` root, per
+     * Radix. Default `horizontal`.
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare function TabsList(props: TabsListProps): React.JSX.Element;
+declare function TabsTrigger({ className, size: sizeProp, variant, value, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    size?: TabsTriggerSize;
+    variant?: TabsTriggerVariant;
+}): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+/** Compact Radix TabsList — use inside <Tabs> root for smaller contexts. */
+interface TabsListCompactProps extends React.ComponentProps<typeof TabsPrimitive.List> {
+    type?: Exclude<TabsListType, 'segmented'>;
+    /** Active underline stroke. Only applies when `type="underline"`. Default `sm`. */
+    underlineSize?: TabsUnderlineSize;
+    animate?: 'fluid' | 'none';
+}
+declare function TabsListCompact(props: TabsListCompactProps): React.JSX.Element;
+/** Compact Radix TabsTrigger — use inside <Tabs> root for smaller contexts. */
+declare function TabsTriggerCompact({ className, variant, value, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    variant?: Exclude<TabsTriggerVariant, 'segmented'>;
+}): React.JSX.Element;
+/** Standalone filter pill bar — works WITHOUT a <Tabs> root. Use for filter bars, mode toggles. */
+declare function FilterBar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/** Standalone filter pill — works WITHOUT a <Tabs> root. Pair with FilterBar. */
+declare function FilterBarItem({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
+export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
+export type { TabsListType, TabsSize, TabsTriggerSize, TabsTriggerVariant, TabsUnderlineSize };

package/dist/components/ui/tabs.js

@@ -0,0 +1,207 @@
+'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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,22 @@
+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.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type TextShimmerProps = {
+    children: string;
+    as?: React.ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+    /** Number of times to play. Defaults to Infinity (loop forever). Use 1 for a single sweep. */
+    repeat?: number;
+};
+declare function TextShimmerComponent({ children, as: Component, className, duration, spread, repeat, }: TextShimmerProps): React.JSX.Element;
+export declare const TextShimmer: React.MemoExoticComponent<typeof TextShimmerComponent>;
+export {};