@kortix/ui 0.0.0-stage → 0.14.3

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

@@ -0,0 +1,20 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Bubble: the surface of one conversational message. The default variant is
+ * the Kortix user bubble (`bg-muted`, `rounded-lg`, the session transcript's
+ * BUBBLE_SURFACE). `align` pulls it to the row edge and squares the corner
+ * that points at the speaker.
+ */
+declare const bubbleVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    align?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Bubble({ className, variant, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof bubbleVariants>): React.JSX.Element;
+declare function BubbleContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function BubbleReactions({ className, side, align, ...props }: React.ComponentProps<'div'> & {
+    side?: 'top' | 'bottom';
+    align?: 'start' | 'end';
+}): React.JSX.Element;
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleVariants };

package/dist/components/ui/bubble.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+/**
+ * Bubble: the surface of one conversational message. The default variant is
+ * the Kortix user bubble (`bg-muted`, `rounded-lg`, the session transcript's
+ * BUBBLE_SURFACE). `align` pulls it to the row edge and squares the corner
+ * that points at the speaker.
+ */
+const bubbleVariants = cva('relative w-fit max-w-[85%] rounded-lg px-3.5 py-2.5 text-sm', {
+    variants: {
+        variant: {
+            default: 'bg-muted text-foreground',
+            secondary: 'bg-secondary text-secondary-foreground',
+            outline: 'border border-border bg-transparent text-foreground',
+            ghost: 'bg-transparent px-0 py-0 text-foreground',
+            destructive: 'bg-destructive/10 text-foreground',
+        },
+        align: {
+            start: 'mr-auto rounded-bl-sm',
+            end: 'ml-auto rounded-br-sm',
+        },
+    },
+    defaultVariants: { variant: 'default', align: 'start' },
+});
+function Bubble({ className, variant, align, ...props }) {
+    return (_jsx("div", { "data-slot": "bubble", "data-align": align ?? 'start', className: cn(bubbleVariants({ variant, align }), className), ...props }));
+}
+function BubbleContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "bubble-content", className: cn('font-medium wrap-break-word whitespace-pre-wrap select-text', className), ...props }));
+}
+function BubbleReactions({ className, side = 'bottom', align = 'end', ...props }) {
+    return (_jsx("div", { "data-slot": "bubble-reactions", "data-side": side, className: cn('flex flex-wrap gap-1', side === 'top' ? '-mt-1 mb-1' : '-mb-1 mt-1', align === 'end' ? 'justify-end' : 'justify-start', className), ...props }));
+}
+function BubbleGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "bubble-group", className: cn('flex flex-col gap-1', className), ...props });
+}
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleVariants };

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Separator } from './separator.js';
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): React.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator };

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// This file must import the `react` module namespace rather than rely on the
+// ambient UMD `React` global. Two `@types/react` copies are in this program
+// (19.2.18 for apps/web, 19.1.17 pulled in by `next` and `@sentry/react`), and
+// the UMD global binds to 19.1.17 — which still types `DOMAttributes.onChange`
+// as `FormEventHandler<T>` instead of 19.2.18's `ChangeEventHandler<T>`. That
+// version skew, not any real prop incompatibility, is what made the props bag
+// below fail against `Slot.Root`. The explicit import pins every `React.*` type
+// here to the same copy the JSX checker and `radix-ui` use.
+import { cva } from 'class-variance-authority';
+import { Separator } from './separator.js';
+import { cn } from '../../lib/utils.js';
+// Members sit 1px apart. Outer corners keep the member's own radius; the
+// corners that face a neighbour shrink to `--radius - 6px` (4px).
+const buttonGroupVariants = cva("flex w-fit items-stretch gap-px has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: '[&>*:not(:first-child)]:rounded-l-[calc(var(--radius)-6px)] [&>*:not(:last-child)]:rounded-r-[calc(var(--radius)-6px)]',
+            vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-[calc(var(--radius)-6px)] [&>*:not(:last-child)]:rounded-b-[calc(var(--radius)-6px)]',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn('bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto', className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator };

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "popover" | "link" | "text" | "default" | "brand" | "blue" | "blue-ghost" | "blue-secondary" | "danger" | "destructive" | "outline" | "outline-ghost" | "secondary" | "secondary-outline" | "sidebar" | "background" | "input" | "accent" | "ghost" | "muted" | "foreground" | "outline-foreground" | "inverse" | "invert-outline-foreground" | "transparent" | "ghost-input" | "ghost-sidebar" | "outline-sidebar" | "success" | "error" | "info" | "warning" | null | undefined;
+    size?: "toolbar" | "default" | "xs" | "base" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-base" | "icon-md" | "icon-lg" | "magic-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const buttonVariants = cva("flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity,scale,translate] disabled:pointer-events-none disabled:opacity-50  [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-center shadow-none data-[state=open]:ring-0 focus-visible:outline-none focus-visible:ring-kortix-base focus-visible:ring-[0.6px]", {
+    variants: {
+        variant: {
+            default: 'bg-foreground text-background hover:bg-foreground/90',
+            brand: 'bg-kortix-blue/90 dark:bg-kortix-blue/60 text-background dark:text-foreground shadow-xs hover:bg-kortix-blue/85 dark:hover:bg-kortix-blue/50 transition-colors duration-200 ease-out',
+            blue: 'bg-kortix-blue text-background dark:text-foreground shadow-xs hover:bg-kortix-blue/90',
+            'blue-ghost': 'hover:bg-sidebar-accent/40 text-kortix-blue',
+            'blue-secondary': 'bg-kortix-blue/10 text-kortix-blue hover:bg-kortix-blue/20',
+            danger: 'bg-destructive text-background hover:bg-destructive/90 focus-visible:ring-destructive/35 focus-visible:ring-offset-4 focus-visible:ring-2',
+            destructive: 'bg-destructive/80 text-background hover:bg-destructive/85 focus-visible:ring-destructive/35 focus-visible:ring-offset-1 focus-visible:ring-2',
+            outline: 'border border-border bg-transparent text-foreground hover:bg-foreground/5 hover:text-foreground',
+            'outline-ghost': 'border border-primary/10 hover:bg-background/50 hover:text-foreground',
+            secondary: 'bg-secondary  hover:bg-secondary/90    text-foreground ',
+            'secondary-outline': 'bg-secondary hover:bg-secondary border border-border text-foreground',
+            sidebar: 'text-sidebar-foreground hover:bg-sidebar-accent/80 ',
+            background: 'bg-background hover:bg-background/90  text-foreground ',
+            input: 'bg-input dark:bg-input/30  text-foreground hover:bg-input/95 dark:hover:bg-input/235',
+            accent: 'bg-foreground/5 text-accent-foreground hover:bg-foreground/8 rounded-md',
+            ghost: 'bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground',
+            muted: 'bg-muted text-foreground hover:bg-muted/90',
+            link: 'text-foreground underline-offset-4 hover:underline bg-transparent',
+            foreground: 'bg-foreground text-foreground-foreground hover:bg-foreground/90',
+            'outline-foreground': 'border border-foreground/10 bg-foreground/80 hover:bg-foreground/90 text-foreground/80 hover:text-foreground',
+            inverse: 'w-fit dark:bg-[#0a0a0a] dark:hover:bg-[#0a0a0a]/95 dark:text-[#fafafa] bg-[#fafafa] hover:bg-[#fafafa]/95 text-[#0a0a0a]',
+            'invert-outline-foreground': 'border border-background/10 bg-foreground/90 hover:bg-foreground text-background hover:text-background',
+            transparent: 'bg-transparent hover:bg-transparent text-foreground',
+            text: 'text-muted-foreground hover:text-primary',
+            'ghost-input': 'bg-transparent hover:bg-input ',
+            'ghost-sidebar': 'bg-transparent hover:bg-sidebar hover:text-sidebar-accent-foreground',
+            'outline-sidebar': 'border border-border bg-transparent hover:bg-sidebar hover:text-sidebar-accent-foreground',
+            success: 'bg-kortix-green/80 text-background hover:bg-kortix-green/85',
+            error: 'bg-kortix-red/80 text-background hover:bg-kortix-red/85',
+            info: 'bg-kortix-blue/80 text-background hover:bg-kortix-blue/85',
+            warning: 'bg-kortix-orange/80 text-background hover:bg-kortix-orange/85',
+            popover: 'bg-popover text-foreground',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            xs: 'h-7  gap-1.5 px-2.5 rounded-sm has-[>svg]:px-2',
+            base: "h-7 gap-1 px-2.5   in-data-[slot=button-group]:rounded-2xl has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            sm: 'h-8  gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-10  px-6 has-[>svg]:px-4',
+            xl: 'h-12  px-8 has-[>svg]:px-6',
+            icon: 'size-7 ',
+            'icon-xs': 'size-6 rounded-sm',
+            'icon-sm': 'size-7',
+            'icon-base': 'size-8 rounded-md',
+            'icon-md': 'size-9',
+            'icon-lg': 'size-10 rounded-md',
+            'magic-sm': 'h-9 px-4 py-2 has-[>svg]:px-3  sm:h-8 sm:gap-1.5 sm:px-3 sm:has-[>svg]:px-2.5',
+            toolbar: "h-7 gap-1.5 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+declare function Calendar({ className, classNames, showOutsideDays, fixedWeeks, ...props }: React.ComponentProps<typeof DayPicker>): React.JSX.Element;
+export { Calendar };

package/dist/components/ui/calendar.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, } from '@phosphor-icons/react';
+import { DayPicker } from 'react-day-picker';
+import { buttonVariants } from './button.js';
+import { cn } from '../../lib/utils.js';
+function Calendar({ className, classNames, showOutsideDays = true, fixedWeeks = true, ...props }) {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: cn('p-3', className), classNames: {
+            months: 'flex flex-col sm:flex-row gap-2',
+            month: 'flex flex-col gap-4',
+            caption: 'flex justify-center pt-1 relative items-center w-full',
+            caption_label: 'text-sm font-medium',
+            nav: 'flex items-center gap-1',
+            nav_button: cn(buttonVariants({ variant: 'outline' }), 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
+            nav_button_previous: 'absolute left-1',
+            nav_button_next: 'absolute right-1',
+            table: 'w-full border-collapse space-x-1',
+            head_row: 'flex',
+            head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-xs',
+            row: 'flex w-full mt-2',
+            cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md', props.mode === 'range'
+                ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+                : '[&:has([aria-selected])]:rounded-md'),
+            day: cn(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100'),
+            day_range_start: 'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
+            day_range_end: 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
+            day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+            day_today: 'bg-accent text-accent-foreground',
+            day_outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+            day_disabled: 'text-muted-foreground opacity-50',
+            day_range_middle: 'aria-selected:bg-transparent aria-selected:text-accent-foreground',
+            day_hidden: 'invisible',
+            ...classNames,
+        }, components: {
+            IconLeft: ({ className, ...props }) => (_jsx(ChevronLeft, { className: cn('size-4', className), ...props })),
+            IconRight: ({ className, ...props }) => (_jsx(ChevronRight, { className: cn('size-4', className), ...props })),
+        }, ...props }));
+}
+export { Calendar };

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

@@ -0,0 +1,96 @@
+import { Button } from './button.js';
+import { type IconComponent } from '../../lib/icon-context.js';
+import { type ComponentProps, type HTMLAttributes } from 'react';
+type CardOrientation = 'card' | 'inline';
+type CardBorder = 'none' | 'outlined';
+interface CardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onDrag'> {
+    /** How each card lays its own content out.
+     *  "card" — stacked vertically (media/header on top). "inline" — a
+     *  horizontal row (leading media, trailing footer), like a Table row.
+     *  @default "card" */
+    orientation?: CardOrientation;
+    /** Number of grid columns. >1 enables 2-D proximity across rows and columns.
+     *  @default 1 */
+    columns?: number;
+    /** "none" — borderless (default), separated only by subtle dividers.
+     *  "outlined" — draws a border: one shared frame when grouped, or one per
+     *  card when `separated`. @default "none" */
+    border?: CardBorder;
+    /** Split the group into individually-shaped cards with a gap between them
+     *  (a grid of tiles) instead of one continuous divided block. @default false */
+    separated?: boolean;
+    /** Enable the magnetic proximity-hover highlight. @default true */
+    proximityHover?: boolean;
+}
+declare const CardGroup: import("react").ForwardRefExoticComponent<CardGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Makes the whole card an interactive target; proximity hover previews it.
+     *  Renders a stretched link when `href` is set, else a stretched button. */
+    onClick?: () => void;
+    href?: string;
+    external?: boolean;
+    /** Accessible name for the stretched link/button when the whole card is
+     *  clickable (the card's visible title isn't wired up automatically). */
+    label?: string;
+    /** Persistent selected state, on top of the transient proximity hover. */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Shows a dismiss (✕) button in the corner. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Injected by CardGroup — do not set by hand. */
+    index?: number;
+}
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const CardAction: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+type CardLogo = string | [string, string];
+interface CardMediaProps {
+    logo?: CardLogo;
+    logoAlt?: string;
+    icon?: IconComponent;
+    size?: number;
+    className?: string;
+}
+declare function CardMedia({ logo, logoAlt, icon: Icon, size, className }: CardMediaProps): import("react").JSX.Element | null;
+interface CardImageProps {
+    src: string;
+    alt?: string;
+    className?: string;
+}
+declare function CardImage({ src, alt, className }: CardImageProps): import("react").JSX.Element;
+declare namespace CardImage {
+    var displayName: string;
+}
+declare const CardEyebrow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+interface CardFeatureProps {
+    icon?: IconComponent;
+    title: string;
+    description?: string;
+}
+declare function CardFeature({ icon: Icon, title, description }: CardFeatureProps): import("react").JSX.Element;
+/** Button's own variant and size unions, verbatim. Card defines neither of its
+ *  own: everything Button ships is available here, and stays available as
+ *  Button grows. Both props are left undefined by default, so Button's
+ *  `defaultVariants` decide — `default` / `default`. */
+type CardButtonVariant = ComponentProps<typeof Button>['variant'];
+type CardButtonSize = ComponentProps<typeof Button>['size'];
+interface CardButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    variant?: CardButtonVariant;
+    size?: CardButtonSize;
+    icon?: IconComponent;
+    iconPosition?: 'start' | 'end';
+    /** Opens the href in a new tab and appends an outward arrow glyph. */
+    external?: boolean;
+    disabled?: boolean;
+}
+declare function CardButton({ children, onClick, href, variant, size, icon: Icon, iconPosition, external, disabled, }: CardButtonProps): import("react").JSX.Element;
+export { Card, CardAction, CardButton, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardHeader, CardImage, CardMedia, CardTitle, };
+export type { CardButtonProps, CardButtonSize, CardButtonVariant, CardGroupProps, CardLogo, CardProps, };

package/dist/components/ui/card.js

@@ -0,0 +1,291 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from './button.js';
+import { useProximityHover } from '../../hooks/use-proximity-hover.js';
+import { fontWeights } from '../../lib/font-weight.js';
+import { useIcon } from '../../lib/icon-context.js';
+import { useUiLink } from '../../providers/ui-provider.js';
+import { spring } from '../../lib/springs.js';
+import { cn } from '../../lib/utils.js';
+import { AnimatePresence, m } from 'motion/react';
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useMemo, useRef, } from 'react';
+const CardGroupContext = createContext(null);
+const CardContext = createContext({
+    emphasized: false,
+    orientation: 'card',
+    clickable: false,
+    hasImage: false,
+});
+const CardGroup = forwardRef(({ orientation = 'card', columns = 1, border = 'none', separated = false, proximityHover = true, className, children, ...props }, ref) => {
+    const containerRef = useRef(null);
+    // >1 column wraps into a grid, where nearest-item must be resolved in two
+    // dimensions; a single column is a plain vertical list.
+    const axis = columns > 1 ? 'xy' : 'y';
+    const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } = useProximityHover(containerRef, { axis });
+    // Assign each valid child a stable proximity index so callers never thread
+    // one through by hand (Table asks for it; here the group owns it).
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const count = childArray.length;
+    const indexed = childArray.map((child, i) => cloneElement(child, { index: i }));
+    // Which card is selected — so its neighbours can drop the divider that
+    // would otherwise slice through the selection fill.
+    const selectedIndex = childArray.findIndex((child) => child.props.selected);
+    useEffect(() => {
+        measureItems();
+    }, [measureItems, count, columns, orientation, separated, border]);
+    const outlined = border === 'outlined';
+    const divided = !separated;
+    const contextValue = useMemo(() => ({
+        registerItem,
+        activeIndex,
+        selectedIndex,
+        orientation,
+        columns,
+        count,
+        separated,
+        divided,
+        outlined,
+    }), [
+        registerItem,
+        activeIndex,
+        selectedIndex,
+        orientation,
+        columns,
+        count,
+        separated,
+        divided,
+        outlined,
+    ]);
+    const activeRect = proximityHover && activeIndex !== null ? itemRects[activeIndex] : null;
+    return (_jsx(CardGroupContext.Provider, { value: contextValue, children: _jsxs("div", { ref: (node) => {
+                containerRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, ...props, "data-slot": "card-group", "data-orientation": orientation, className: cn('relative grid', 
+            // A shared frame clips the highlight + dividers to its rounded
+            // corners; separated tiles clip themselves.
+            outlined && !separated && 'border-border/60 overflow-hidden rounded-xl border', separated ? 'gap-2' : 'gap-0', className), style: {
+                gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`,
+            }, onMouseEnter: proximityHover ? handlers.onMouseEnter : undefined, onMouseMove: proximityHover ? handlers.onMouseMove : undefined, onMouseLeave: proximityHover ? handlers.onMouseLeave : undefined, children: [_jsx(AnimatePresence, { children: activeRect && (_jsx(m.div, { "aria-hidden": true, layout: true, className: "bg-hover pointer-events-none absolute z-0 rounded-xl", style: {
+                            top: activeRect.top,
+                            left: activeRect.left,
+                            width: activeRect.width,
+                            height: activeRect.height,
+                        }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: spring.fast.exit }, transition: { ...spring.fast, opacity: { duration: 0.08 } } }, sessionRef.current)) }), indexed] }) }));
+});
+CardGroup.displayName = 'CardGroup';
+const Card = forwardRef(({ onClick, href, external, label, selected = false, disabled = false, dismissible = false, onDismiss, index, className, children, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const group = useContext(CardGroupContext);
+    const XIcon = useIcon('x');
+    const Link = useUiLink();
+    const orientation = group?.orientation ?? 'card';
+    const columns = group?.columns ?? 1;
+    const count = group?.count ?? 1;
+    const separated = group?.separated ?? true;
+    const divided = group?.divided ?? false;
+    const outlined = group?.outlined ?? false;
+    const activeIndex = group?.activeIndex ?? null;
+    const selectedIndex = group?.selectedIndex ?? -1;
+    // Depend on the stable registerItem callback, not the whole group context —
+    // the context object's identity changes on every proximity/selection frame,
+    // which would otherwise re-register every card each frame.
+    const registerItem = group?.registerItem;
+    useEffect(() => {
+        if (index === undefined || !registerItem)
+            return;
+        registerItem(index, internalRef.current);
+        return () => registerItem(index, null);
+    }, [index, registerItem]);
+    // Divider geometry: draw a hairline toward the neighbour below / to the
+    // right, but drop it next to the active OR selected card so the highlight
+    // and selection fill read clean (the same trick Table uses on row borders).
+    const col = index !== undefined ? index % columns : 0;
+    const hasBelow = index !== undefined && index + columns < count;
+    const hasRight = index !== undefined && col < columns - 1 && index + 1 < count;
+    const self = index ?? -1;
+    const touchesBelow = (i) => i === self || i === self + columns;
+    const touchesRight = (i) => i === self || i === self + 1;
+    const showBottom = divided && hasBelow && !(touchesBelow(activeIndex ?? -1) || touchesBelow(selectedIndex));
+    const showRight = divided && hasRight && !(touchesRight(activeIndex ?? -1) || touchesRight(selectedIndex));
+    const isInline = orientation === 'inline';
+    // An inline card with a full-bleed image reflows so its actions stack under
+    // the text (see the body wrapper below + CardHeader/CardFooter). Match the
+    // image child by identity OR displayName so detection and the split below
+    // agree even when module identity drifts (e.g. HMR duplication).
+    const isCardImage = (child) => isValidElement(child) &&
+        (child.type === CardImage ||
+            child.type?.displayName === 'CardImage');
+    const hasImage = Children.toArray(children).some(isCardImage);
+    const inlineImage = isInline && hasImage;
+    const clickable = !!href || !!onClick;
+    // Title weight follows the persistent selected state only — proximity hover
+    // previews via the highlight fill, not by bolding the label.
+    const emphasized = selected;
+    // A standalone card (no group) is its own tile — always rounded + clipped.
+    // Inside a group, a separated tile carries its own rounding + clip only when
+    // it draws a visible frame; a borderless separated tile has no surface to
+    // hug, so it stays unclipped and its media reads as a plain square, and a
+    // card in a continuous block leans on the shared group frame for both.
+    const tileShape = !group
+        ? 'rounded-xl overflow-hidden'
+        : separated && outlined
+            ? 'rounded-xl overflow-hidden border border-border/60'
+            : '';
+    // Stretched overlay makes the whole card the click target while keeping
+    // action buttons (higher z) independently clickable — the accessible
+    // alternative to nesting interactive elements inside a button/anchor. A
+    // disabled card drops the overlay entirely so it can't be tabbed to or
+    // activated by keyboard (pointer-events-none only blocks the mouse).
+    const overlay = clickable && !disabled ? (href ? (_jsx(Link, { href: href, onClick: onClick, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, "aria-label": label, className: "absolute inset-0 z-20 rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]" })) : (_jsx("button", { type: "button", onClick: onClick, "aria-label": label, "aria-pressed": selected || undefined, className: "absolute inset-0 z-20 rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]" }))) : null;
+    const cardContext = useMemo(() => ({ emphasized, orientation, clickable, hasImage }), [emphasized, orientation, clickable, hasImage]);
+    // Inline image cards wrap their non-image parts in a centred column so the
+    // title, description, and actions hug together and sit vertically centred
+    // against the image instead of stretching to its full height.
+    let body = children;
+    if (inlineImage) {
+        const parts = Children.toArray(children);
+        const image = parts.find(isCardImage);
+        const rest = parts.filter((part) => part !== image);
+        body = (_jsxs(_Fragment, { children: [image, _jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-3.5 pr-4", children: rest })] }));
+    }
+    return (_jsx(CardContext.Provider, { value: cardContext, children: _jsxs("div", { ref: (node) => {
+                internalRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, "data-slot": "card", "data-proximity-index": index, "data-selected": selected || undefined, "data-orientation": orientation, "aria-disabled": disabled || undefined, className: cn('group/card relative z-10 min-h-[60px] min-w-0', inlineImage
+                ? // Image on the left; the text + actions ride in a centred
+                    // column beside it (see the wrapper in the body below).
+                    'flex flex-row items-center gap-3'
+                : isInline
+                    ? 'flex flex-row items-center gap-3 pl-4'
+                    : 'flex flex-col pb-4', 
+            // Standalone (no group) cards can't lean on the group highlight, so
+            // they carry their own hover tint when interactive.
+            !group && clickable && !disabled && 'hover:bg-hover transition-colors duration-80', tileShape, disabled && 'pointer-events-none opacity-50', className), ...props, children: [selected && (_jsx("span", { "aria-hidden": true, className: "bg-active pointer-events-none absolute inset-0 -z-10 rounded-xl" })), showBottom && (_jsx("span", { "aria-hidden": true, className: "bg-border/60 pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-px" })), showRight && (_jsx("span", { "aria-hidden": true, className: cn('bg-border/60 pointer-events-none absolute top-0 right-0 -z-10 w-px', showBottom ? 'bottom-px' : 'bottom-0') })), overlay, body, dismissible && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onDismiss, "aria-label": "Dismiss", className: "text-muted-foreground hover:text-foreground absolute top-2 right-2 z-30", children: _jsx(XIcon, { size: 15, strokeWidth: 1.5, className: "size-[15px]" }) }))] }) }));
+});
+Card.displayName = 'Card';
+// ── CardHeader ───────────────────────────────────────────
+// shadcn's header grid: title + description stack, with CardAction pinned to
+// the top-right column. In an inline card it becomes the flexible text column
+// between the leading media and trailing footer.
+const CardHeader = forwardRef(({ className, ...props }, ref) => {
+    const { orientation, hasImage } = useContext(CardContext);
+    const inlineImage = orientation === 'inline' && hasImage;
+    return (_jsx("div", { ref: ref, "data-slot": "card-header", className: cn('grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]', 
+        // With an action present the header is two columns, but only the
+        // action belongs in the second one. Auto-placement would otherwise
+        // flow a third sibling (media, eyebrow…) into the free right-hand
+        // cell and park the description beside the title.
+        '[&>*:not([data-slot=card-action])]:col-start-1', inlineImage
+            ? 'min-w-0'
+            : orientation === 'inline'
+                ? 'min-w-0 flex-1 py-3.5'
+                : 'px-4 pt-4', className), ...props }));
+});
+CardHeader.displayName = 'CardHeader';
+// ── CardTitle ────────────────────────────────────────────
+const CardTitle = forwardRef(({ className, children, ...props }, ref) => {
+    const { emphasized, orientation } = useContext(CardContext);
+    // Inline rows trim the title to cap height so it centres tightly against
+    // the media/actions; stacked cards keep the natural line box.
+    const trim = orientation === 'inline' ? '[text-box:trim-both_cap_alphabetic]' : '';
+    // Ghost-span pattern: an invisible semibold copy reserves the width so the
+    // resting→active weight animation never reflows the row.
+    return (_jsxs("span", { ref: ref, "data-slot": "card-title", className: cn('inline-grid text-[14px] leading-snug', className), ...props, children: [_jsx("span", { className: cn('invisible col-start-1 row-start-1', trim), style: { fontVariationSettings: fontWeights.semibold }, "aria-hidden": "true", children: children }), _jsx("span", { className: cn('text-foreground col-start-1 row-start-1 transition-[font-variation-settings] duration-80', trim), style: {
+                    // normal → semibold on emphasis, matching nav-item / menu-item /
+                    // table (the opsz-paired tokens keep the advance width ~constant).
+                    fontVariationSettings: emphasized ? fontWeights.semibold : fontWeights.normal,
+                }, children: children })] }));
+});
+CardTitle.displayName = 'CardTitle';
+// ── CardDescription ──────────────────────────────────────
+const CardDescription = forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, "data-slot": "card-description", className: cn('text-muted-foreground text-[14px] leading-normal', className), ...props })));
+CardDescription.displayName = 'CardDescription';
+// ── CardAction ───────────────────────────────────────────
+// Pinned to the header's top-right column (shadcn's slot). Sits above the
+// stretched overlay so any control inside stays independently clickable.
+const CardAction = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "card-action", className: cn('relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props })));
+CardAction.displayName = 'CardAction';
+// ── CardContent ──────────────────────────────────────────
+const CardContent = forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useContext(CardContext);
+    return (_jsx("div", { ref: ref, "data-slot": "card-content", className: cn(orientation === 'inline' ? '' : 'px-4 pt-3', className), ...props }));
+});
+CardContent.displayName = 'CardContent';
+// ── CardFooter ───────────────────────────────────────────
+// Actions row. Rises above the stretched overlay (z-30) so buttons stay
+// clickable. In an inline card it becomes the trailing, right-aligned slot.
+const CardFooter = forwardRef(({ className, ...props }, ref) => {
+    const { orientation, hasImage } = useContext(CardContext);
+    const inlineImage = orientation === 'inline' && hasImage;
+    return (_jsx("div", { ref: ref, "data-slot": "card-footer", className: cn('relative z-30 flex items-center gap-1', inlineImage
+            ? // Under the text, left-aligned in natural order (the inline
+                // wrapper owns the spacing).
+                'flex-wrap'
+            : orientation === 'inline'
+                ? 'ml-auto shrink-0 pr-4'
+                : 'flex-wrap px-4 pt-3', className), ...props }));
+});
+CardFooter.displayName = 'CardFooter';
+function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
+    const { orientation } = useContext(CardContext);
+    // Stacked: sits in the header grid; add an extra 8px so the gap below the
+    // icon reads 12px (header gap-1 + mb-2). Inline: leading slot — the card owns
+    // the left inset, so no extra padding here.
+    const wrap = cn(orientation === 'inline' ? '' : 'mb-2', className);
+    if (logo) {
+        const logos = Array.isArray(logo) ? logo : [logo];
+        return (_jsx("span", { "data-slot": "card-media", className: cn('inline-flex shrink-0 items-center gap-1.5', wrap), children: logos.map((src, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [i > 0 && _jsx("span", { "aria-hidden": true, className: "bg-border h-px w-2" }), _jsx("img", { src: src, alt: logoAlt ?? '', width: size, height: size, className: "rounded-lg object-contain", style: { width: size, height: size } })] }, src))) }));
+    }
+    if (Icon) {
+        // The icon sits in a 32×32 tinted tile so it reads as a media slot rather
+        // than a bare glyph. The tile is an overlay tint (not a solid surface) so it
+        // blends over whatever is behind it — the substrate or the hover highlight.
+        return (_jsx("span", { "data-slot": "card-media", className: cn('bg-hover inline-flex size-8 shrink-0 items-center justify-center rounded-lg', wrap), children: _jsx(Icon, { size: 18, strokeWidth: 1.5, className: "text-muted-foreground" }) }));
+    }
+    return null;
+}
+function CardImage({ src, alt, className }) {
+    const { orientation } = useContext(CardContext);
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { src: src, alt: alt ?? '', "data-slot": "card-image", 
+        // The image keeps a fixed 2px corner radius in every state — stacked or
+        // inline, framed or borderless — rather than inheriting a frame's larger
+        // clip. (A framed tile still clips the surrounding surface as before.)
+        className: cn('rounded-[2px] object-cover', orientation === 'inline' ? 'size-40 shrink-0' : 'aspect-[16/9] w-full', className) }));
+}
+// A stable marker so the Card can recognise an image child by name, surviving
+// module-identity mismatches (e.g. HMR duplication) that break `type ===`.
+CardImage.displayName = 'CardImage';
+// ── CardEyebrow ──────────────────────────────────────────
+// Small uppercase label above the title (e.g. "New Model").
+const CardEyebrow = forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, "data-slot": "card-eyebrow", className: cn('text-muted-foreground text-[11px] tracking-wide uppercase', className), style: { fontVariationSettings: fontWeights.semibold }, ...props })));
+CardEyebrow.displayName = 'CardEyebrow';
+function CardFeature({ icon: Icon, title, description }) {
+    return (_jsxs("div", { "data-slot": "card-feature", className: "flex items-start gap-2.5", children: [Icon && (_jsx(Icon, { size: 16, strokeWidth: 1.5, className: "text-muted-foreground mt-0.5 shrink-0" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground text-[13px] [text-box:trim-both_cap_alphabetic]", style: { fontVariationSettings: fontWeights.medium }, children: title }), description && (_jsx("span", { className: "text-muted-foreground text-[12px] leading-relaxed", children: description }))] })] }));
+}
+function CardButton({ children, onClick, href, variant, size = 'sm', icon: Icon, iconPosition, external = false, disabled = false, }) {
+    const ArrowRight = useIcon('arrow-right');
+    const Link = useUiLink();
+    const position = iconPosition ?? (external ? 'end' : 'start');
+    // No size class on either glyph: Button's own svg rules own the scale, so an
+    // icon tracks whichever `size` the caller picked instead of being pinned.
+    const glyph = Icon ? (_jsx(Icon, { strokeWidth: 1.5, className: "shrink-0 transition-[stroke-width] duration-80 group-hover/action:stroke-[2]" })) : null;
+    const externalGlyph = external ? (_jsx(ArrowRight, { strokeWidth: 1.5, className: "shrink-0 -rotate-45 transition-[stroke-width] duration-80 group-hover/action:stroke-[2]" })) : null;
+    const inner = (_jsxs(_Fragment, { children: [position === 'start' && glyph, _jsx("span", { className: "[text-box:trim-both_cap_alphabetic]", children: children }), position === 'end' && glyph, externalGlyph] }));
+    // Button owns the whole box — height, padding, radius, type scale. The card
+    // adds only what the surface needs: a hover group for the glyph, a lift above
+    // the stretched overlay, and `link`'s bare-text box.
+    const classes = cn('group/action relative z-30', variant === 'link' && 'h-auto px-0');
+    if (href) {
+        return (_jsx(Button, { asChild: true, variant: variant, size: size, className: classes, children: _jsx(Link, { href: href, onClick: onClick, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: inner }) }));
+    }
+    return (_jsx(Button, { type: "button", variant: variant, size: size, onClick: onClick, disabled: disabled, className: classes, children: inner }));
+}
+export { Card, CardAction, CardButton, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardHeader, CardImage, CardMedia, CardTitle, };