entangle-ui 0.7.0 → 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/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/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":";;;;;;;;;;;"}

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

@@ -0,0 +1,160 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { linkHoverColorVar, linkColorVar, linkRecipe, srOnlyStyle, externalIconStyle } from './Link.css.js';
+
+const EXTERNAL_PROTOCOL_RE = /^https?:\/\//i;
+/**
+ * Defaults — keep variant and color in sync so consumers can pass either
+ * (or both) without surprising results.
+ */
+const VARIANT_DEFAULT_COLOR = {
+    default: 'primary',
+    subtle: 'secondary',
+    inline: 'inherit',
+};
+const VARIANT_DEFAULT_UNDERLINE = {
+    default: 'hover',
+    subtle: 'hover',
+    inline: 'always',
+};
+const NAMED_COLOR_TOKENS = {
+    primary: {
+        base: vars.colors.accent.primary,
+        hover: vars.colors.accent.secondary,
+    },
+    secondary: {
+        base: vars.colors.text.secondary,
+        hover: vars.colors.accent.primary,
+    },
+    inherit: {
+        base: 'inherit',
+        hover: vars.colors.accent.primary,
+    },
+};
+function resolveLinkColor(color) {
+    const named = NAMED_COLOR_TOKENS[color];
+    if (named)
+        return named;
+    return { base: color, hover: color };
+}
+/**
+ * Props stripped from the rest spread when the link is disabled.
+ *
+ * Without this, `<Link as={RouterLink} disabled to="/x" onClick={fn} />`
+ * would still navigate / fire the handler — `aria-disabled` and CSS
+ * pointer-events alone don't block keyboard activation or programmatic
+ * triggers fired by router libraries.
+ */
+const NAV_PROPS_TO_STRIP_WHEN_DISABLED = [
+    'href',
+    'to',
+    'onClick',
+    'onClickCapture',
+    'onPointerDown',
+    'onPointerDownCapture',
+    'onMouseDown',
+    'onMouseDownCapture',
+    'onKeyDown',
+    'onKeyDownCapture',
+    'onKeyUp',
+    'onKeyUpCapture',
+    'onAuxClick',
+    'replace',
+    'reloadDocument',
+    'preventScrollReset',
+    'state',
+    'relative',
+];
+function stripNavProps(props) {
+    const cleaned = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (NAV_PROPS_TO_STRIP_WHEN_DISABLED.includes(key)) {
+            continue;
+        }
+        cleaned[key] = value;
+    }
+    return cleaned;
+}
+const ExternalIcon = () => (jsxs("svg", { className: externalIconStyle, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsx("path", { d: "M4 2h6v6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M10 2L5 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9 7v3H2V3h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+/**
+ * Styled anchor primitive.
+ *
+ * Standardises link color, underline behavior, hover/focus states, and
+ * external-link affordances. Polymorphic via `as` so it can wrap a
+ * router's link component (react-router, TanStack Router, Next.js).
+ *
+ * Scope: **styling-only**, not router-aware. Pass your router's link
+ * component via `as` for client-side navigation — the router's props
+ * (`to`, `replace`, …) are type-checked automatically.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/docs">Documentation</Link>
+ *
+ * <Link href="https://example.com">External</Link> // auto-detected
+ *
+ * <Link as={RouterLink} to="/profile">
+ *   Profile
+ * </Link>
+ *
+ * <Text>
+ *   Read the <Link variant="inline" href="/guide">guide</Link> first.
+ * </Text>
+ * ```
+ */
+function LinkImpl(props) {
+    const { href, as, variant, color, underline, size, external, disabled, children, className, style, testId, ref, 'aria-label': ariaLabel, ...rest } = props;
+    const resolvedVariant = variant ?? 'default';
+    const resolvedSize = size ?? 'md';
+    const isDisabled = disabled === true;
+    const resolvedColor = color ?? VARIANT_DEFAULT_COLOR[resolvedVariant];
+    const resolvedUnderline = underline ?? VARIANT_DEFAULT_UNDERLINE[resolvedVariant];
+    // External affordances only apply when the link is actually navigable.
+    // A disabled link with `external` would be misleading: no target, no
+    // rel, no real navigation — but icon + "opens in new tab" suggest
+    // otherwise. So we suppress all of it.
+    const isExternal = !isDisabled &&
+        (external ?? (typeof href === 'string' && EXTERNAL_PROTOCOL_RE.test(href)));
+    const { base, hover } = resolveLinkColor(resolvedColor);
+    const inlineVars = assignInlineVars({
+        [linkColorVar]: base,
+        [linkHoverColorVar]: hover,
+    });
+    // Disabled forces a non-navigating <span> regardless of `as`. If we
+    // honored `as` while disabled, a router link would still respond to
+    // `to` / `onClick` because pointer-events: none and aria-disabled are
+    // visual hints, not functional locks for programmatic triggers.
+    const Component = isDisabled ? 'span' : (as ?? 'a');
+    const cleanedRest = isDisabled
+        ? stripNavProps(rest)
+        : rest;
+    // Only set `href` when rendering a plain anchor and not disabled. For
+    // custom `as` components (router links) the navigation prop is the
+    // router's own (`to`, `href`, …), passed through `...rest`.
+    const hrefProp = !isDisabled && Component === 'a' && href !== undefined ? { href } : {};
+    const externalAttrs = isExternal
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {};
+    const ariaLabelProp = ariaLabel
+        ? {
+            'aria-label': isExternal
+                ? `${ariaLabel} (opens in new tab)`
+                : ariaLabel,
+        }
+        : {};
+    const linkClassName = cx(linkRecipe({
+        variant: resolvedVariant,
+        underline: resolvedUnderline,
+        size: resolvedSize,
+        disabled: isDisabled || undefined,
+    }), className);
+    return (jsxs(Component, { ...cleanedRest, ...hrefProp, ...externalAttrs, ...ariaLabelProp, ref: ref, className: linkClassName, style: { ...inlineVars, ...style }, "data-testid": testId, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [children, isExternal && (jsxs(Fragment, { children: [jsx(ExternalIcon, {}), !ariaLabel && (jsx("span", { className: srOnlyStyle, children: " (opens in new tab)" }))] }))] }));
+}
+const Link = LinkImpl;
+Link.displayName = 'Link';
+
+export { Link };
+//# sourceMappingURL=Link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../../../../src/components/primitives/Link/Link.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;AAGG;AACH;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;AACE;AACA;AAAW;;AAEb;AAEA;;;;;;;AAOG;AACH;;;;;;;;;;;;;;;;;;;;AAqBA;;AAIE;AACE;;;AAGA;;AAEF;AACF;AAEA;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH;AAGE;AAkBA;AACA;AACA;;;;;;;;AAWE;;;;;AAMD;;;;;AAMD;;AAGE;;;;;;;;;;AAcA;AACI;;AAEE;AACH;;AAGL;AAEI;AACA;AACA;;;AAMJ;AAwBF;AAiBO;AACP;;"}

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

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-DW6aAr57.css';
+import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-KCfDIs4G.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var closeButtonStyle = 'Popover_closeButtonStyle__j7aln17';

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

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/primitives/Radio/Radio.css.ts.vanilla-CPjdD-ZM.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var groupContainerStyle = 'Radio_groupContainerStyle__kkwwvfr';
+var groupItemsStyle = 'Radio_groupItemsStyle__kkwwvfu';
+var groupOrientationVar = 'var(--groupOrientationVar__kkwwvfs)';
+var groupSpacingVar = 'var(--groupSpacingVar__kkwwvft)';
+var innerSizeVar = 'var(--innerSizeVar__kkwwvfb)';
+var outerSizeVar = 'var(--outerSizeVar__kkwwvfa)';
+var radioContainerStyle = 'Radio_radioContainerStyle__kkwwvf0';
+var radioDotRecipe = createRuntimeFn({defaultClassName:'Radio_radioDotRecipe__kkwwvfl',variantClassNames:{checked:{true:'Radio_radioDotRecipe_checked_true__kkwwvfm',false:'Radio_radioDotRecipe_checked_false__kkwwvfn'},error:{true:'Radio_radioDotRecipe_error_true__kkwwvfo',false:'Radio_radioDotRecipe_error_false__kkwwvfp'}},defaultVariants:{checked:false,error:false},compoundVariants:[]});
+var radioLabelRecipe = createRuntimeFn({defaultClassName:'Radio_radioLabelRecipe__kkwwvf2',variantClassNames:{labelPosition:{left:'Radio_radioLabelRecipe_labelPosition_left__kkwwvf3',right:'Radio_radioLabelRecipe_labelPosition_right__kkwwvf4'},size:{sm:'Radio_radioLabelRecipe_size_sm__kkwwvf5',md:'Radio_radioLabelRecipe_size_md__kkwwvf6',lg:'Radio_radioLabelRecipe_size_lg__kkwwvf7'},disabled:{true:'Radio_radioLabelRecipe_disabled_true__kkwwvf8',false:'Radio_radioLabelRecipe_disabled_false__kkwwvf9'}},defaultVariants:{labelPosition:'right',size:'md',disabled:false},compoundVariants:[]});
+var radioLabelTextStyle = 'Radio_radioLabelTextStyle__kkwwvfq';
+var radioOuterRecipe = createRuntimeFn({defaultClassName:'Radio_radioOuterRecipe__kkwwvfc',variantClassNames:{checked:{true:'Radio_radioOuterRecipe_checked_true__kkwwvfd',false:'Radio_radioOuterRecipe_checked_false__kkwwvfe'},disabled:{true:'Radio_radioOuterRecipe_disabled_true__kkwwvff',false:'Radio_radioOuterRecipe_disabled_false__kkwwvfg'},error:{true:'Radio_radioOuterRecipe_error_true__kkwwvfh',false:'Radio_radioOuterRecipe_error_false__kkwwvfi'}},defaultVariants:{checked:false,disabled:false,error:false},compoundVariants:[[{disabled:false,checked:false,error:false},'Radio_radioOuterRecipe_compound_0__kkwwvfj'],[{disabled:true,checked:true,error:false},'Radio_radioOuterRecipe_compound_1__kkwwvfk']]});
+var visuallyHiddenInputStyle = 'Radio_visuallyHiddenInputStyle__kkwwvf1';
+
+export { groupContainerStyle, groupItemsStyle, groupOrientationVar, groupSpacingVar, innerSizeVar, outerSizeVar, radioContainerStyle, radioDotRecipe, radioLabelRecipe, radioLabelTextStyle, radioOuterRecipe, visuallyHiddenInputStyle };
+//# sourceMappingURL=Radio.css.js.map

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

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