entangle-ui 0.6.3 → 0.8.0

package/dist/esm/components/primitives/Avatar/Avatar.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useCallback } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { avatarFallbackStyle, avatarImageInheritRadius, avatarImageStyle, avatarStatusRecipe, avatarRecipe, avatarBgVar, avatarStatusVar } from './Avatar.css.js';
+
+const NAMED_COLOR_MAP = {
+    neutral: vars.colors.text.muted,
+    primary: vars.colors.accent.primary,
+    info: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+};
+const AUTO_PALETTE = [
+    vars.colors.accent.primary,
+    vars.colors.accent.secondary,
+    vars.colors.accent.success,
+    vars.colors.accent.warning,
+    vars.colors.accent.error,
+];
+const STATUS_COLOR_MAP = {
+    online: vars.colors.accent.success,
+    away: vars.colors.accent.warning,
+    busy: vars.colors.accent.error,
+    offline: vars.colors.text.muted,
+};
+const STATUS_LABEL_MAP = {
+    online: 'Online',
+    away: 'Away',
+    busy: 'Busy',
+    offline: 'Offline',
+};
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i += 1) {
+        hash = (hash * 31 + str.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+}
+/**
+ * Derive 1- or 2-letter initials from a display name.
+ *
+ * Single-word names contribute their first two characters; multi-word names
+ * contribute the first character of the first and last word.
+ */
+function getAvatarInitials(name) {
+    const trimmed = name.trim();
+    if (!trimmed)
+        return '';
+    const parts = trimmed.split(/\s+/);
+    const firstWord = parts[0] ?? '';
+    if (parts.length === 1) {
+        return firstWord.slice(0, 2).toUpperCase();
+    }
+    const lastWord = parts[parts.length - 1] ?? '';
+    const first = firstWord[0] ?? '';
+    const last = lastWord[0] ?? '';
+    return (first + last).toUpperCase();
+}
+function resolveBackgroundColor(color, name) {
+    if (color === 'auto') {
+        if (!name?.trim()) {
+            return vars.colors.text.muted;
+        }
+        const index = hashString(name) % AUTO_PALETTE.length;
+        return AUTO_PALETTE[index] ?? vars.colors.text.muted;
+    }
+    const named = NAMED_COLOR_MAP[color];
+    if (named)
+        return named;
+    return color;
+}
+const DefaultUserIcon = () => (jsx("svg", { viewBox: "0 0 24 24", width: "60%", height: "60%", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: jsx("path", { d: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3.314 0-8 1.657-8 4.5V20h16v-1.5c0-2.843-4.686-4.5-8-4.5Z" }) }));
+/**
+ * Display a person, agent, or named entity.
+ *
+ * Renders an image when `src` is provided; if it fails to load (or no `src`
+ * was given) falls back to initials derived from `name`, then to a generic
+ * user icon. A deterministic auto color keeps a given `name` looking the
+ * same across renders while different names look distinct.
+ *
+ * Provide `onClick` to render the avatar as an interactive button (focusable,
+ * Enter/Space-activatable, hover affordance).
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/users/alice.png" name="Alice Wong" />
+ * <Avatar name="Sebastian Kowalski" status="online" />
+ * <Avatar name="Bot" color="primary" shape="rounded" />
+ * <Avatar name="Owner" size="xl" onClick={openProfile} />
+ * ```
+ */
+const Avatar = /*#__PURE__*/ React.memo(({ src, alt, name, initials, fallbackIcon, size = 'md', shape = 'circle', color = 'auto', status, onClick, bordered = false, className, style, testId, 'aria-label': ariaLabelProp, ref, ...rest }) => {
+    const [imageOk, setImageOk] = useState(true);
+    const handleImageError = useCallback(() => {
+        setImageOk(false);
+    }, []);
+    const handleImageLoad = useCallback(() => {
+        setImageOk(true);
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        if (!onClick)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick(event);
+        }
+    }, [onClick]);
+    const resolvedInitials = initials !== undefined && initials !== null && initials !== ''
+        ? initials.slice(0, 2).toUpperCase()
+        : name
+            ? getAvatarInitials(name)
+            : '';
+    const hasInitials = resolvedInitials.length > 0;
+    const showImage = Boolean(src) && imageOk;
+    const bg = resolveBackgroundColor(color, name);
+    const accessibleName = ariaLabelProp ?? name ?? alt;
+    const inlineVars = {
+        [avatarBgVar]: bg,
+    };
+    if (status) {
+        inlineVars[avatarStatusVar] = STATUS_COLOR_MAP[status];
+    }
+    const interactive = Boolean(onClick);
+    return (jsxs("span", { ref: ref, className: cx(avatarRecipe({
+            size,
+            shape,
+            bordered: bordered || undefined,
+            interactive: interactive || undefined,
+        }), className), style: { ...assignInlineVars(inlineVars), ...style }, "data-testid": testId, "data-size": size, "data-shape": shape, role: interactive ? 'button' : 'img', tabIndex: interactive ? 0 : undefined, onClick: onClick, onKeyDown: interactive ? handleKeyDown : undefined, "aria-label": accessibleName, ...rest, children: [jsx("span", { className: avatarFallbackStyle, "aria-hidden": showImage, children: hasInitials ? (resolvedInitials) : fallbackIcon !== undefined ? (fallbackIcon) : (jsx(DefaultUserIcon, {})) }), src && (jsx("img", { src: src, alt: alt ?? name ?? '', className: cx(avatarImageStyle, avatarImageInheritRadius), "data-loaded": imageOk ? 'true' : 'false', onError: handleImageError, onLoad: handleImageLoad, draggable: false })), status && (jsx("span", { className: avatarStatusRecipe({ size }), "data-status": status, role: "status", "aria-label": `Status: ${STATUS_LABEL_MAP[status]}` }))] }));
+});
+Avatar.displayName = 'Avatar';
+
+export { Avatar, getAvatarInitials };
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/primitives/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAiBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;;AAEE;AACE;;AAEF;AACF;AAEA;;;;;AAKG;AACG;AACJ;AACA;AAAc;;;AAGd;;;AAGA;;;;AAIF;AAEA;AAIE;AACE;AACE;;;AAGF;;AAEF;AACA;AAAW;AACX;AACF;AAEA;AAaA;;;;;;;;;;;;;;;;;;AAkBG;AACI;;AAsBH;;;AAIA;;;AAIA;AAEI;;AACA;;;;AAIF;AAIF;;AAGI;AACE;;AAGN;;;AAIA;AAEA;;;;;;AAOA;;;;;;AAWO;AA8CT;AAGF;;"}

package/dist/esm/components/primitives/Avatar/AvatarGroup.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Avatar } from './Avatar.js';
+import { avatarGroupSpacingVar, avatarGroupItemStyle, avatarGroupRootStyle, avatarBgVar, avatarRecipe } from './Avatar.css.js';
+
+const DEFAULT_MAX = 4;
+const DEFAULT_SPACING = -8;
+function resolveSpacing(spacing) {
+    return typeof spacing === 'number' ? `${spacing}px` : spacing;
+}
+function isAvatarElement(node) {
+    return React.isValidElement(node) && node.type === Avatar;
+}
+/**
+ * Display a row of `Avatar`s with optional overlap and overflow handling.
+ *
+ * Children are rendered in order, with negative margin (controlled via the
+ * `spacing` prop) creating the classic overlapping cluster. When the number
+ * of children exceeds `max`, the remainder collapses into a `+N` indicator;
+ * hovering it reveals the names of the hidden avatars.
+ *
+ * `size` and `bordered` are applied to every child — the group always wins
+ * over per-avatar values to keep the visual treatment uniform.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={4}>
+ *   <Avatar name="Alice" />
+ *   <Avatar name="Bob" />
+ *   <Avatar name="Carol" />
+ *   <Avatar name="Dave" />
+ *   <Avatar name="Eve" />
+ * </AvatarGroup>
+ * ```
+ */
+const AvatarGroup = /*#__PURE__*/ React.memo(({ max = DEFAULT_MAX, spacing = DEFAULT_SPACING, size = 'md', bordered = true, showOverflowTooltip = true, children, className, style, testId, ref, ...rest }) => {
+    const items = useMemo(() => React.Children.toArray(children).filter(isAvatarElement), [children]);
+    const visibleCount = Math.min(items.length, max);
+    const visibleItems = items.slice(0, visibleCount);
+    const hiddenItems = items.slice(visibleCount);
+    const overflowCount = hiddenItems.length;
+    const spacingStyle = assignInlineVars({
+        [avatarGroupSpacingVar]: resolveSpacing(spacing),
+    });
+    const hiddenNames = useMemo(() => hiddenItems
+        .map(child => child.props.name ?? child.props.alt)
+        .filter((value) => Boolean(value)), [hiddenItems]);
+    const renderOverflow = () => {
+        if (overflowCount <= 0)
+            return null;
+        const overflowEl = (jsx("span", { className: avatarRecipe({
+                size,
+                shape: 'circle',
+                bordered: bordered || undefined,
+            }), style: assignInlineVars({
+                [avatarBgVar]: vars.colors.surface.active,
+            }), "data-overflow": "true", "aria-label": `${overflowCount} more`, children: `+${overflowCount}` }));
+        const wrapped = showOverflowTooltip && hiddenNames.length > 0 ? (jsx(Tooltip, { title: hiddenNames.join(', '), placement: "top", children: overflowEl })) : (overflowEl);
+        // The wrapper span owns the spacing rule (`:not(:first-child)`), so the
+        // overlap stays correct whether or not Tooltip injects its own trigger
+        // div between this wrapper and the +N span.
+        return (jsx("span", { className: avatarGroupItemStyle, style: { zIndex: 0 }, children: wrapped }));
+    };
+    return (jsxs("div", { ref: ref, className: cx(avatarGroupRootStyle, className), style: { ...spacingStyle, ...style }, "data-testid": testId, ...rest, children: [visibleItems.map((child, index) => {
+                const childKey = child.key ?? index;
+                const itemZIndex = visibleItems.length - index;
+                return (jsx("span", { className: avatarGroupItemStyle, style: { zIndex: itemZIndex }, children: React.cloneElement(child, {
+                        size,
+                        bordered,
+                    }) }, childKey));
+            }), renderOverflow()] }));
+});
+AvatarGroup.displayName = 'AvatarGroup';
+
+export { AvatarGroup };
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/esm/components/primitives/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../../../src/components/primitives/Avatar/AvatarGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAiBA;AACA;AAEA;AACE;AACF;AAEA;AAGE;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AAoBC;;;AAGA;;AAGE;AACD;AAED;AAGO;AACA;;;AAKmB;AAExB;;AAIM;;AAED;;AAGA;AAQL;;;;AAYA;AAKF;AAEA;AASM;AACA;AACA;;;AASK;AAGP;AAIN;AAGF;;"}

package/dist/esm/components/primitives/Badge/Badge.css.js

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/primitives/Badge/Badge.css.ts.vanilla-DxCUcxYW.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var badgeColorVar = 'var(--badgeColorVar__6943by0)';
+var badgeContrastVar = 'var(--badgeContrastVar__6943by1)';
+var badgeDotStyle = 'Badge_badgeDotStyle__6943byd';
+var badgeIconStyle = 'Badge_badgeIconStyle__6943byc';
+var badgeRecipe = createRuntimeFn({defaultClassName:'Badge_badgeRecipe__6943by2',variantClassNames:{size:{xs:'Badge_badgeRecipe_size_xs__6943by3',sm:'Badge_badgeRecipe_size_sm__6943by4',md:'Badge_badgeRecipe_size_md__6943by5',lg:'Badge_badgeRecipe_size_lg__6943by6'},variant:{subtle:'Badge_badgeRecipe_variant_subtle__6943by7',solid:'Badge_badgeRecipe_variant_solid__6943by8',outline:'Badge_badgeRecipe_variant_outline__6943by9',dot:'Badge_badgeRecipe_variant_dot__6943bya'},uppercase:{true:'Badge_badgeRecipe_uppercase_true__6943byb'}},defaultVariants:{size:'sm',variant:'subtle'},compoundVariants:[]});
+var badgeRemoveButtonStyle = 'Badge_badgeRemoveButtonStyle__6943bye';
+
+export { badgeColorVar, badgeContrastVar, badgeDotStyle, badgeIconStyle, badgeRecipe, badgeRemoveButtonStyle };
+//# sourceMappingURL=Badge.css.js.map

package/dist/esm/components/primitives/Badge/Badge.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/esm/components/primitives/Badge/Badge.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { badgeContrastVar, badgeColorVar, badgeDotStyle, badgeIconStyle, badgeRemoveButtonStyle, badgeRecipe } from './Badge.css.js';
+
+const NAMED_COLOR_MAP = {
+    neutral: vars.colors.text.muted,
+    primary: vars.colors.accent.primary,
+    info: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+};
+/**
+ * Resolve a `BadgeColor` to a CSS color value.
+ *
+ * Named values produce a `var(...)` reference into the theme; everything
+ * else is treated as a raw CSS color string (hex, rgb, hsl, …).
+ */
+function resolveBadgeColor(color) {
+    const named = NAMED_COLOR_MAP[color];
+    if (named) {
+        // For neutral we keep contrast as the text primary so solid reads well.
+        const contrast = color === 'neutral' ? vars.colors.text.primary : vars.colors.text.primary;
+        return { color: named, contrast };
+    }
+    return { color, contrast: '#ffffff' };
+}
+const RemoveIcon = () => (jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", focusable: "false", children: jsx("path", { d: "M2 2 L8 8 M8 2 L2 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+/**
+ * A small inline status indicator / tag.
+ *
+ * Badges are visual labels for status, counts, or tags. Pair with an
+ * editor item to indicate its state (e.g. "DRAFT", "ERROR", "3 NEW").
+ *
+ * @example
+ * ```tsx
+ * <Badge color="success">Saved</Badge>
+ * <Badge variant="outline" color="warning" icon={<WarningIcon />}>
+ *   Warning
+ * </Badge>
+ * <Badge removable onRemove={handleRemove}>feature/foo</Badge>
+ * ```
+ */
+const Badge = /*#__PURE__*/ React.memo(({ variant = 'subtle', size = 'sm', color = 'neutral', uppercase = false, icon, removable = false, onRemove, children, className, style, testId, ref, ...rest }) => {
+    const resolved = resolveBadgeColor(color);
+    const handleRemoveClick = useCallback((event) => {
+        event.stopPropagation();
+        onRemove?.(event);
+    }, [onRemove]);
+    const inlineVars = assignInlineVars({
+        [badgeColorVar]: resolved.color,
+        [badgeContrastVar]: resolved.contrast,
+    });
+    return (jsxs("span", { ref: ref, className: cx(badgeRecipe({
+            variant,
+            size,
+            uppercase: uppercase || undefined,
+        }), className), style: { ...inlineVars, ...style }, "data-testid": testId, ...rest, children: [variant === 'dot' && jsx("span", { className: badgeDotStyle, "aria-hidden": true }), icon && (jsx("span", { className: badgeIconStyle, "aria-hidden": true, children: icon })), children && jsx("span", { children: children }), removable && (jsx("button", { type: "button", className: badgeRemoveButtonStyle, onClick: handleRemoveClick, "aria-label": "Remove", children: jsx(RemoveIcon, {}) }))] }));
+});
+Badge.displayName = 'Badge';
+
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/esm/components/primitives/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAgBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;;;;;AAKG;AACH;AAIE;;;;AAKE;;AAEF;AACF;AAEA;AAiBA;;;;;;;;;;;;;;AAcG;;AAiBC;AAEA;;AAGI;AACF;;AAKA;AACA;AACD;;;;;AAUM;AA0BT;AAGF;;"}

package/dist/esm/components/primitives/Button/Button.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Button/Button.css.ts.vanilla-CT592JL7.css';
+import './../../../assets/src/components/primitives/Button/Button.css.ts.vanilla-DXJcIb94.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var buttonRecipe = createRuntimeFn({defaultClassName:'Button_buttonRecipe__btu0m70',variantClassNames:{variant:{'default':'Button_buttonRecipe_variant_default__btu0m71',ghost:'Button_buttonRecipe_variant_ghost__btu0m72',filled:'Button_buttonRecipe_variant_filled__btu0m73'},size:{sm:'Button_buttonRecipe_size_sm__btu0m74',md:'Button_buttonRecipe_size_md__btu0m75',lg:'Button_buttonRecipe_size_lg__btu0m76'},fullWidth:{true:'Button_buttonRecipe_fullWidth_true__btu0m77'}},defaultVariants:{variant:'default',size:'md'},compoundVariants:[]});

package/dist/esm/components/primitives/Checkbox/Checkbox.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Checkbox/Checkbox.css.ts.vanilla-dvrGPiPs.css';
+import './../../../assets/src/components/primitives/Checkbox/Checkbox.css.ts.vanilla-DNa-Gqto.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var boxSizeVar = 'var(--boxSizeVar__2ajd0p9)';

package/dist/esm/components/primitives/Checkbox/Checkbox.js

@@ -86,6 +86,12 @@ const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate
     const boxInlineVars = assignInlineVars({
         [boxSizeVar]: `${BOX_SIZES[size]}px`,
     });
+    // Respect OS-level reduced-motion preference for the inline check-mark
+    // animation. Stylesheet @media queries cover CSS-driven motion elsewhere;
+    // this style is set inline, so the check has to happen here.
+    const prefersReducedMotion = typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     const checkboxBox = (jsxs("button", { ref: ref, type: "button", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": disabled || undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, disabled: disabled, onClick: handleClick, className: checkboxBoxRecipe({
             active: isActive || undefined,
             variant,
@@ -94,7 +100,9 @@ const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate
         }), style: boxInlineVars, "data-testid": testId, ...rest, children: [indeterminate ? (jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) })) : (jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: {
                     opacity: resolvedChecked ? 1 : 0,
                     transform: resolvedChecked ? 'scale(1)' : 'scale(0)',
-                    transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+                    transition: prefersReducedMotion
+                        ? 'none'
+                        : 'opacity 150ms ease-out, transform 150ms ease-out',
                 }, children: jsx("path", { d: "M2 6L5 9L10 3", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), name && (jsx("input", { type: "hidden", name: name, value: resolvedChecked ? (value ?? 'on') : '' }))] }));
     if (!label && !showHelperText) {
         return checkboxBox;

package/dist/esm/components/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;AAaG;AACI;AAuBL;AACA;AACA;AACA;;;;;;;;AAWA;AAEA;;;;;;;;;;AASA;AACE;;AAEA;AAEA;AACE;;AAGF;;;AAIA;AACF;;;;;;;;AAQC;AAED;AACA;;AAGE;AACA;AACE;;AAGJ;;;AAIC;;;;;;AAmBI;;;AAiCK;;AAsBV;AACE;;AAGF;;;;AAOO;AAYT;AAEA;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;AAaG;AACI;AAuBL;AACA;AACA;AACA;;;;;;;;AAWA;AAEA;;;;;;;;;;AASA;AACE;;AAEA;AAEA;AACE;;AAGF;;;AAIA;AACF;;;;;;;;AAQC;AAED;AACA;;AAGE;AACA;AACE;;AAGJ;;;AAIC;;;;AAKD;AAEE;AACA;;;;;;AAmBG;;;AAiCK;AACE;AACA;;AAsBZ;AACE;;AAGF;;;;AAOO;AAYT;AAEA;;"}

package/dist/esm/components/primitives/Code/Code.css.js

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/Code/Code.css.ts.vanilla-mayBqLDM.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var codeRecipe = createRuntimeFn({defaultClassName:'Code_codeRecipe__13vd650',variantClassNames:{size:{xs:'Code_codeRecipe_size_xs__13vd651',sm:'Code_codeRecipe_size_sm__13vd652',md:'Code_codeRecipe_size_md__13vd653'}},defaultVariants:{size:'sm'},compoundVariants:[]});
+
+export { codeRecipe };
+//# sourceMappingURL=Code.css.js.map

package/dist/esm/components/primitives/Code/Code.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/components/primitives/Code/Code.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { codeRecipe } from './Code.css.js';
+
+/**
+ * Small inline `<code>` primitive with theme-aware background and font.
+ *
+ * Complements `ChatCodeBlock` (block-level) — use `Code` for short inline
+ * snippets inside sentences and markdown renderers.
+ *
+ * @example
+ * ```tsx
+ * <Text>Run <Code>npm install</Code> to add the package.</Text>
+ * ```
+ */
+const Code = /*#__PURE__*/ React.memo(({ children, size = 'sm', className, style, testId, ref, ...rest }) => {
+    return (jsx("code", { ref: ref, className: cx(codeRecipe({ size }), className), style: style, "data-testid": testId, ...rest, children: children }));
+});
+Code.displayName = 'Code';
+
+export { Code };
+//# sourceMappingURL=Code.js.map

package/dist/esm/components/primitives/Code/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sources":["../../../../../../src/components/primitives/Code/Code.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;AAUG;AACI;AAEH;AAWF;AAGF;;"}

package/dist/esm/components/primitives/Collapsible/Collapsible.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Collapsible/Collapsible.css.ts.vanilla-C1rYV-JT.css';
+import './../../../assets/src/components/primitives/Collapsible/Collapsible.css.ts.vanilla-Dz4Vy-ob.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var chevronRecipe = createRuntimeFn({defaultClassName:'Collapsible_chevronRecipe__14aon2g8',variantClassNames:{open:{true:'Collapsible_chevronRecipe_open_true__14aon2g9',false:'Collapsible_chevronRecipe_open_false__14aon2ga'}},defaultVariants:{open:false},compoundVariants:[]});

package/dist/esm/components/primitives/IconButton/IconButton.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/IconButton/IconButton.css.ts.vanilla-C-xAQoR3.css';
+import './../../../assets/src/components/primitives/IconButton/IconButton.css.ts.vanilla-CPkPZJRU.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var iconButtonRecipe = createRuntimeFn({defaultClassName:'IconButton_iconButtonBase__rqqp000',variantClassNames:{size:{sm:'IconButton_iconButtonRecipe_size_sm__rqqp002',md:'IconButton_iconButtonRecipe_size_md__rqqp003',lg:'IconButton_iconButtonRecipe_size_lg__rqqp004'},variant:{'default':'IconButton_iconButtonRecipe_variant_default__rqqp005',ghost:'IconButton_iconButtonRecipe_variant_ghost__rqqp006',filled:'IconButton_iconButtonRecipe_variant_filled__rqqp007'},radius:{none:'IconButton_iconButtonRecipe_radius_none__rqqp008',sm:'IconButton_iconButtonRecipe_radius_sm__rqqp009',md:'IconButton_iconButtonRecipe_radius_md__rqqp00a',lg:'IconButton_iconButtonRecipe_radius_lg__rqqp00b',full:'IconButton_iconButtonRecipe_radius_full__rqqp00c'},pressed:{true:'IconButton_iconButtonRecipe_pressed_true__rqqp00d',false:'IconButton_iconButtonRecipe_pressed_false__rqqp00e'}},defaultVariants:{size:'md',variant:'ghost',radius:'md',pressed:false},compoundVariants:[]});

package/dist/esm/components/primitives/Kbd/Kbd.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Kbd/Kbd.css.ts.vanilla-Co2-Rxgv.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var kbdRoot = 'Kbd_kbdRoot__1o39jzf0';
+var keycapRecipe = createRuntimeFn({defaultClassName:'Kbd_keycapRecipe__1o39jzf1',variantClassNames:{size:{sm:'Kbd_keycapRecipe_size_sm__1o39jzf2',md:'Kbd_keycapRecipe_size_md__1o39jzf3',lg:'Kbd_keycapRecipe_size_lg__1o39jzf4'},variant:{solid:'Kbd_keycapRecipe_variant_solid__1o39jzf5',outline:'Kbd_keycapRecipe_variant_outline__1o39jzf6',ghost:'Kbd_keycapRecipe_variant_ghost__1o39jzf7'}},defaultVariants:{size:'md',variant:'outline'},compoundVariants:[]});
+var separatorStyle = 'Kbd_separatorStyle__1o39jzf8';
+
+export { kbdRoot, keycapRecipe, separatorStyle };
+//# sourceMappingURL=Kbd.css.js.map

package/dist/esm/components/primitives/Kbd/Kbd.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/components/primitives/Kbd/Kbd.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useEffect, useMemo } from 'react';
+import { getPlatform, parseShortcut, getKeyGlyph } from '../../../utils/platform.js';
+import { cx } from '../../../utils/cx.js';
+import { separatorStyle, keycapRecipe, kbdRoot } from './Kbd.css.js';
+
+function getKeys(children) {
+    if (typeof children === 'string') {
+        return parseShortcut(children);
+    }
+    return React.Children.toArray(children);
+}
+/**
+ * Render keyboard shortcuts with consistent keycap styling and platform-aware glyphs.
+ *
+ * Use Kbd for shortcut hints in menus, tooltips, command palettes, help overlays,
+ * and keyboard reference panels.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>Ctrl+S</Kbd>
+ * <Kbd platform="mac" separator={null}>Cmd+S</Kbd>
+ * ```
+ */
+const Kbd = /*#__PURE__*/ React.memo(({ children, size = 'md', variant = 'outline', glyphs = true, platform = 'auto', separator = '+', className, style, testId, ref, ...rest }) => {
+    const [platformDetected, setPlatformDetected] = useState('windows');
+    useEffect(() => {
+        if (platform === 'auto') {
+            setPlatformDetected(getPlatform());
+        }
+    }, [platform]);
+    const platformResolved = platform === 'auto' ? platformDetected : platform;
+    const keys = useMemo(() => getKeys(children), [children]);
+    const renderKey = (key) => {
+        if (glyphs && typeof key === 'string') {
+            return getKeyGlyph(key, platformResolved);
+        }
+        return key;
+    };
+    return (jsx("span", { ref: ref, className: cx(kbdRoot, className), style: style, "data-testid": testId, ...rest, children: keys.map((key, index) => (jsxs(React.Fragment, { children: [index > 0 && separator !== null && (jsx("span", { className: separatorStyle, "aria-hidden": "true", children: separator })), jsx("kbd", { className: keycapRecipe({ size, variant }), children: renderKey(key) })] }, `${typeof key === 'string' ? key : index}-${index}`))) }));
+});
+Kbd.displayName = 'Kbd';
+
+export { Kbd };
+//# sourceMappingURL=Kbd.js.map

package/dist/esm/components/primitives/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sources":["../../../../../../src/components/primitives/Kbd/Kbd.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AASA;AACE;AACE;;;AAIJ;AAEA;;;;;;;;;;;AAWG;;;;AAmBG;AACE;;AAEJ;AAEA;AACA;AAEA;AACE;AACE;;AAGF;AACF;;AA0BF;AAGF;;"}

package/dist/esm/components/primitives/Link/Link.css.js

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/primitives/Link/Link.css.ts.vanilla-q-bqHUOF.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var externalIconStyle = 'Link_externalIconStyle__1ia9aotd';
+var linkColorVar = 'var(--linkColorVar__1ia9aot0)';
+var linkHoverColorVar = 'var(--linkHoverColorVar__1ia9aot1)';
+var linkRecipe = createRuntimeFn({defaultClassName:'Link_linkRecipe__1ia9aot2',variantClassNames:{variant:{'default':'Link_linkRecipe_variant_default__1ia9aot3',subtle:'Link_linkRecipe_variant_subtle__1ia9aot4',inline:'Link_linkRecipe_variant_inline__1ia9aot5'},underline:{always:'Link_linkRecipe_underline_always__1ia9aot6',hover:'Link_linkRecipe_underline_hover__1ia9aot7',never:'Link_linkRecipe_underline_never__1ia9aot8'},size:{sm:'Link_linkRecipe_size_sm__1ia9aot9',md:'Link_linkRecipe_size_md__1ia9aota',lg:'Link_linkRecipe_size_lg__1ia9aotb'},disabled:{true:'Link_linkRecipe_disabled_true__1ia9aotc'}},defaultVariants:{variant:'default',underline:'hover',size:'md'},compoundVariants:[]});
+var srOnlyStyle = 'Link_srOnlyStyle__1ia9aote';
+
+export { externalIconStyle, linkColorVar, linkHoverColorVar, linkRecipe, srOnlyStyle };
+//# sourceMappingURL=Link.css.js.map

package/dist/esm/components/primitives/Link/Link.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}