@nexub/react 1.5.1 → 1.7.0

package/dist/chunk-GG54WBLA.js

@@ -0,0 +1,134 @@
+'use client';
+import {
+  Provider,
+  Tooltip
+} from "./chunk-XQDD76EF.js";
+import {
+  useControllableState
+} from "./chunk-JLUCMNVS.js";
+import {
+  IconButton
+} from "./chunk-CQWYZPPJ.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/MessageBubble/MessageBubble.tsx
+import * as React from "react";
+import { Copy, RefreshCw, ThumbsDown, ThumbsUp } from "@nexub/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultMessageStrings = {
+  youSaid: "You said",
+  assistantSaid: "Assistant said",
+  failedToSend: "Failed to send",
+  retry: "Retry",
+  copy: "Copy",
+  copied: "Copied",
+  goodResponse: "Good response",
+  badResponse: "Bad response",
+  regenerate: "Regenerate"
+};
+var MessageBubble = React.forwardRef(
+  ({ from, avatar, name, status, onRetry, messages, className, children, ...props }, ref) => {
+    const m = { ...useNexubMessages(), ...messages };
+    const label = name ?? (from === "user" ? m.youSaid : from === "assistant" ? m.assistantSaid : void 0);
+    const error = status === "error" && /* @__PURE__ */ jsxs("p", { role: "alert", className: "mt-1 flex items-center gap-2 text-label-sm text-[var(--color-error)]", children: [
+      m.failedToSend,
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "nx-state-layer rounded-shape-min px-1 font-medium text-[var(--color-primary)] underline-offset-2 hover:underline",
+          children: m.retry
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        ref,
+        "aria-label": label,
+        "aria-busy": status === "sending" || void 0,
+        "data-from": from,
+        className: cn(
+          "group flex w-full",
+          from === "user" && "flex-col items-end",
+          from === "assistant" && "items-start gap-3",
+          from === "system" && "justify-center text-center text-label-sm text-[var(--color-on-surface-muted)]",
+          className
+        ),
+        ...props,
+        children: from === "user" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "max-w-[85%] whitespace-pre-wrap break-words rounded-shape-container rounded-ee-[6px] bg-[var(--color-primary-container)] px-4 py-2.5 text-body-md text-[var(--color-on-primary-container)]", children }),
+          error
+        ] }) : from === "assistant" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-body-md text-[var(--color-on-surface)]", children: [
+            children,
+            error
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { children: [
+          children,
+          error
+        ] })
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
+var MessageActions = React.forwardRef(
+  ({ text = "", copy = true, feedback: feedbackProp, defaultFeedback = null, onFeedback, onRegenerate, messages, className, ...props }, ref) => {
+    const m = { ...useNexubMessages(), ...messages };
+    const [feedback, setFeedback] = useControllableState({
+      value: feedbackProp,
+      defaultValue: defaultFeedback,
+      onChange: onFeedback
+    });
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef(void 0);
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const onCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        return;
+      }
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    };
+    const toggle = (value) => setFeedback(feedback === value ? null : value);
+    return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mt-1 flex items-center gap-0.5 transition-opacity duration-effects-fast ease-effects-fast",
+          "[@media(hover:hover)]:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+          className
+        ),
+        ...props,
+        children: [
+          copy && /* @__PURE__ */ jsx(Tooltip, { label: copied ? m.copied : m.copy, children: /* @__PURE__ */ jsx(IconButton, { size: "sm", label: m.copy, onClick: onCopy, children: copied ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) }) : /* @__PURE__ */ jsx(Copy, { size: "sm", "aria-hidden": "true" }) }) }),
+          onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Tooltip, { label: m.goodResponse, children: /* @__PURE__ */ jsx(IconButton, { size: "sm", label: m.goodResponse, "aria-pressed": feedback === "up", onClick: () => toggle("up"), children: /* @__PURE__ */ jsx(ThumbsUp, { size: "sm", "aria-hidden": "true", className: cn(feedback === "up" && "text-[var(--color-primary)]") }) }) }),
+            /* @__PURE__ */ jsx(Tooltip, { label: m.badResponse, children: /* @__PURE__ */ jsx(IconButton, { size: "sm", label: m.badResponse, "aria-pressed": feedback === "down", onClick: () => toggle("down"), children: /* @__PURE__ */ jsx(ThumbsDown, { size: "sm", "aria-hidden": "true", className: cn(feedback === "down" && "text-[var(--color-primary)]") }) }) })
+          ] }),
+          onRegenerate && /* @__PURE__ */ jsx(Tooltip, { label: m.regenerate, children: /* @__PURE__ */ jsx(IconButton, { size: "sm", label: m.regenerate, onClick: onRegenerate, children: /* @__PURE__ */ jsx(RefreshCw, { size: "sm", "aria-hidden": "true" }) }) }),
+          /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: copied ? m.copied : "" })
+        ]
+      }
+    ) });
+  }
+);
+MessageActions.displayName = "MessageActions";
+
+export {
+  defaultMessageStrings,
+  MessageBubble,
+  MessageActions
+};

package/dist/{chunk-64JDZWCV.js → chunk-GRKCUQG4.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   DropdownMenu
-} from "./chunk-7L3CGIRA.js";
+} from "./chunk-NQPGELMP.js";
 import {
   ButtonGroup
-} from "./chunk-LGQ737BP.js";
+} from "./chunk-WHTLXQB6.js";
 import {
   Button
-} from "./chunk-LMPGHWUA.js";
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -18,14 +18,15 @@ import { ChevronDown } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SplitButton = React.forwardRef(
   ({ menuLabel, menu, align = "end", variant, size, tone, disabled, loading, className, ...props }, ref) => {
-    const shared = { variant, size, tone, disabled: disabled || loading };
+    const shared = { variant, size, tone };
     return /* @__PURE__ */ jsxs(ButtonGroup, { attached: true, className, children: [
-      /* @__PURE__ */ jsx(Button, { ref, ...shared, loading, ...props }),
+      /* @__PURE__ */ jsx(Button, { ref, ...shared, disabled, ...loading ? { loading: true } : {}, ...props }),
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, children: [
         /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             ...shared,
+            disabled: disabled || loading,
             "aria-label": menuLabel,
             className: cn(
               "px-3",

package/dist/{chunk-YPHNHQYQ.js → chunk-GWDEKW7P.js}

@@ -4,13 +4,16 @@ import {
 } from "./chunk-JLUCMNVS.js";
 import {
   Input
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
 import {
   currencySymbol,
   formatForDisplay,
   formatForEditing,
   parseMoney
 } from "./chunk-CIQHFMF6.js";
+import {
+  useIntlLocale
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -19,7 +22,8 @@ import {
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var MoneyInput = React.forwardRef(
-  ({ value: valueProp, defaultValue = null, onValueChange, currency, locale, onFocus, onBlur, className, ...props }, ref) => {
+  ({ value: valueProp, defaultValue = null, onValueChange, currency, locale: localeProp, onFocus, onBlur, className, ...props }, ref) => {
+    const locale = useIntlLocale(localeProp);
     const [value, setValue] = useControllableState({
       value: valueProp,
       defaultValue,

package/dist/{chunk-4I5ULCYG.js → chunk-HFTS5AN7.js}

@@ -30,13 +30,13 @@ var CheckListItem = React.forwardRef(
       "li",
       {
         ref,
-        className: cn("flex items-start gap-2 text-[var(--color-text-primary)]", className),
+        className: cn("flex items-start gap-2 text-[var(--color-on-surface)]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[var(--color-semantic-success-default)]/10", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[color-mix(in_srgb,var(--color-success)_10%,transparent)]", children: /* @__PURE__ */ jsx(
             Check,
             {
-              className: "h-3 w-3 text-[var(--color-semantic-success-default)]",
+              className: "h-3 w-3 text-[var(--color-success)]",
               "aria-hidden": "true"
             }
           ) }),

package/dist/{chunk-GUB7YKG2.js → chunk-I4U36P54.js}

@@ -6,7 +6,7 @@ import {
 // src/components/Checkbox/Checkbox.tsx
 import * as React from "react";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
-import { Check, Minus } from "@nexub/icons";
+import { Minus } from "@nexub/icons";
 import { jsx } from "react/jsx-runtime";
 var Checkbox = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -15,7 +15,7 @@ var Checkbox = React.forwardRef(
       ref,
       className: cn(
         // 18px, 2px outline border (>= 3:1), primary when on. Focus = the global ring.
-        "peer h-[18px] w-[18px] shrink-0 rounded-[5px] border-2 border-[var(--color-outline)]",
+        "nx-hit peer h-[18px] w-[18px] shrink-0 rounded-[5px] border-2 border-[var(--color-outline)]",
         "transition-[background-color,border-color] duration-effects-fast ease-effects-fast",
         "hover:border-[var(--color-on-surface)]",
         "data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:text-[var(--color-on-primary)]",
@@ -24,7 +24,10 @@ var Checkbox = React.forwardRef(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : /* @__PURE__ */ jsx(Check, { size: "xs" }) })
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : (
+        // Drawn inline so the stroke can draw itself in (nx-check-draw).
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) })
+      ) })
     }
   )
 );

package/dist/{chunk-BTRTORKU.js → chunk-I6CAF7C5.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  layoutProps
+} from "./chunk-VLQGQFW7.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -34,12 +37,7 @@ var Stack = React.forwardRef(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "div";
-    const inlineStyle = {
-      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
-      ...align ? { alignItems: align } : {},
-      ...justify ? { justifyContent: justify } : {},
-      ...style
-    };
+    const layout = layoutProps({ gap, align, justify, style });
     const content = divider ? injectDividers(children, divider) : children;
     return /* @__PURE__ */ jsx(
       Comp,
@@ -47,11 +45,12 @@ var Stack = React.forwardRef(
         ref,
         className: cn(
           "flex",
+          layout.className,
           direction === "row" ? "flex-row" : "flex-col",
           wrap && "flex-wrap",
           className
         ),
-        style: inlineStyle,
+        style: layout.style,
         ...rest,
         children: content
       }

package/dist/{chunk-TJCHA3OI.js → chunk-J65MK3N4.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -22,6 +25,7 @@ var SearchInput = React.forwardRef(
       if (!controlled) setInternalValue(e.target.value);
       onChange?.(e);
     };
+    const messages = useNexubMessages();
     const handleClear = () => {
       if (!controlled) setInternalValue("");
       onClear?.();
@@ -31,10 +35,9 @@ var SearchInput = React.forwardRef(
       {
         type: "button",
         onClick: handleClear,
-        "aria-label": "Clear search",
+        "aria-label": messages.clearSearch,
         className: cn(
-          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+          "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
         children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
       }

package/dist/{chunk-IK23Q2OF.js → chunk-JHVYI5GK.js}

@@ -21,7 +21,7 @@ var inputVariants = cva(
     "border-0 shadow-none",
     "outline-none focus:outline-none focus-visible:outline-none",
     "ring-0 focus:ring-0 focus-visible:ring-0",
-    "placeholder:text-[var(--color-text-placeholder)]",
+    "placeholder:text-[var(--color-on-surface-muted)]",
     "text-[var(--color-on-surface)]",
     "disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]"
   ],
@@ -71,8 +71,8 @@ var addonVariants = cva(
   {
     variants: {
       side: {
-        leading: "border-r",
-        trailing: "border-l"
+        leading: "border-e",
+        trailing: "border-s"
       }
     }
   }

package/dist/{chunk-J6TU45KP.js → chunk-JSBNYRO4.js}

@@ -1,4 +1,11 @@
 'use client';
+import {
+  disabledText,
+  pressable
+} from "./chunk-7SXR4PGO.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -7,6 +14,11 @@ import {
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var navButton = cn(
+  pressable,
+  "inline-flex h-11 w-11 items-center justify-center bg-transparent text-[var(--color-on-surface)]",
+  disabledText
+);
 function generatePages(current, total, siblings) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const leftSibling = Math.max(current - siblings, 1);
@@ -32,6 +44,7 @@ var Pagination = React.forwardRef(
     onPageChange,
     ...props
   }, ref) => {
+    const messages = useNexubMessages();
     const totalPages = Math.ceil(totalItems / pageSize);
     if (totalPages <= 1) return null;
     const pages = generatePages(page, totalPages, siblingCount);
@@ -40,8 +53,8 @@ var Pagination = React.forwardRef(
       {
         ref,
         role: "navigation",
-        "aria-label": "Pagination",
-        className: cn("flex items-center gap-1", className),
+        "aria-label": messages.pagination,
+        className: cn("flex items-center gap-1 tabular-nums", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -49,16 +62,16 @@ var Pagination = React.forwardRef(
             {
               onClick: () => onPageChange(page - 1),
               disabled: page <= 1,
-              "aria-label": "Go to previous page",
-              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true" })
+              "aria-label": messages.previousPage,
+              className: navButton,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true", className: "rtl:-scale-x-100" })
             }
           ),
           pages.map(
             (p, i) => p === "..." ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex h-11 w-11 items-center justify-center text-[var(--color-text-muted)]",
+                className: "flex h-11 w-11 items-center justify-center text-[var(--color-on-surface-muted)]",
                 children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
               },
               `ellipsis-${i}`
@@ -66,11 +79,12 @@ var Pagination = React.forwardRef(
               "button",
               {
                 onClick: () => onPageChange(p),
-                "aria-label": `Go to page ${p}`,
+                "aria-label": messages.goToPage(p),
                 "aria-current": p === page ? "page" : void 0,
                 className: cn(
-                  "inline-flex h-11 w-11 items-center justify-center rounded-md text-sm font-medium transition-colors",
-                  p === page ? "bg-[var(--color-fill-primary)] text-white" : "border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]"
+                  pressable,
+                  "inline-flex h-11 min-w-11 px-2 items-center justify-center text-label-lg",
+                  p === page ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "bg-transparent text-[var(--color-on-surface)]"
                 ),
                 children: p
               },
@@ -82,9 +96,9 @@ var Pagination = React.forwardRef(
             {
               onClick: () => onPageChange(page + 1),
               disabled: page >= totalPages,
-              "aria-label": "Go to next page",
-              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true" })
+              "aria-label": messages.nextPage,
+              className: navButton,
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true", className: "rtl:-scale-x-100" })
             }
           )
         ]

package/dist/chunk-K5FKEAAK.js

@@ -0,0 +1,94 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/RadioCard/selectableCard.tsx
+import * as React from "react";
+import { Check } from "@nexub/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var selectableCardClass = [
+  "group nx-state-layer flex w-full items-start gap-3 p-4 text-start",
+  "rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)]",
+  "border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)]",
+  "cursor-pointer transition-[border-color,box-shadow] duration-effects-fast ease-effects-fast",
+  "data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--color-text-disabled)]",
+  "data-[disabled]:data-[state=checked]:border-[var(--color-text-disabled)] data-[disabled]:data-[state=checked]:shadow-[inset_0_0_0_1px_var(--color-text-disabled)]"
+].join(" ");
+var slotShape = {
+  circle: "rounded-full",
+  square: "rounded-shape-min"
+};
+function SelectableCardContent({
+  icon,
+  title,
+  description,
+  children,
+  titleId,
+  descriptionId,
+  shape
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "flex shrink-0 text-[var(--color-on-surface-variant)] group-data-[state=checked]:text-[var(--color-primary)] group-data-[disabled]:text-[var(--color-text-disabled)]",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { id: titleId, className: "text-sm font-medium", children: title }),
+      description != null && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descriptionId,
+          className: "text-sm text-[var(--color-on-surface-variant)] group-data-[disabled]:text-[var(--color-text-disabled)]",
+          children: description
+        }
+      ),
+      children
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "relative h-5 w-5 shrink-0 border border-[var(--color-outline-variant)]",
+          slotShape[shape]
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute -inset-px flex items-center justify-center rounded-[inherit]",
+              "bg-[var(--color-primary)] text-[var(--color-on-primary)] group-data-[disabled]:bg-[var(--color-text-disabled)] group-data-[disabled]:text-[var(--color-surface)]",
+              // Exit: fade on effects-fast; scale resets only after the fade.
+              "scale-0 opacity-0 [transition:opacity_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing),transform_0s_linear_var(--motion-spring-effects-fast-duration)]",
+              // Enter: scale 0 -> 1 on the expressive spring, opacity on effects.
+              "group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100 group-data-[state=checked]:[transition:transform_var(--motion-spring-expressive-fast-duration)_var(--motion-spring-expressive-fast-easing),opacity_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)]",
+              // Reduced motion: crossfade only.
+              "motion-reduce:scale-100"
+            ),
+            children: /* @__PURE__ */ jsx(Check, { size: "xs" })
+          }
+        )
+      }
+    )
+  ] });
+}
+function useCardIds(hasDescription) {
+  const id = React.useId();
+  return {
+    titleId: `${id}-title`,
+    descriptionId: `${id}-desc`,
+    describedBy: hasDescription ? `${id}-desc` : void 0
+  };
+}
+
+export {
+  selectableCardClass,
+  SelectableCardContent,
+  useCardIds
+};

package/dist/{chunk-5URGARPH.js → chunk-KE4YVG5Q.js}

@@ -1,8 +1,7 @@
 'use client';
 import {
-  enterExit,
   floatingSurface
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -11,7 +10,9 @@ import {
 import * as React from "react";
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
 import { jsx } from "react/jsx-runtime";
-var Root2 = RadixHoverCard.Root;
+function Root2({ openDelay = 500, closeDelay = 200, ...props }) {
+  return /* @__PURE__ */ jsx(RadixHoverCard.Root, { openDelay, closeDelay, ...props });
+}
 var Trigger2 = RadixHoverCard.Trigger;
 var Content2 = React.forwardRef(
   function HoverCardContent({ className, sideOffset = 4, ...props }, ref) {
@@ -23,12 +24,7 @@ var Content2 = React.forwardRef(
         className: cn(
           "z-[var(--z-popover)] w-64 p-4 outline-none",
           floatingSurface,
-          enterExit,
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
-          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          "nx-motion nx-pop origin-[var(--radix-hover-card-content-transform-origin)]",
           className
         ),
         ...props
@@ -43,7 +39,7 @@ var Arrow2 = React.forwardRef(
       RadixHoverCard.Arrow,
       {
         ref,
-        className: cn("fill-[var(--color-border-default)]", className),
+        className: cn("fill-[var(--color-outline-variant)]", className),
         ...props
       }
     );

package/dist/{chunk-QCNLE27O.js → chunk-KRCLK5O4.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   avatarVariants
-} from "./chunk-FHFVBOF3.js";
+} from "./chunk-QUYOV2ZJ.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -13,9 +16,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var avatarGroupVariants = cva("flex items-center", {
   variants: {
     spacing: {
-      sm: "[&>*:not(:first-child)]:-ml-3",
-      md: "[&>*:not(:first-child)]:-ml-2",
-      lg: "[&>*:not(:first-child)]:-ml-1"
+      sm: "[&>*:not(:first-child)]:-ms-3",
+      md: "[&>*:not(:first-child)]:-ms-2",
+      lg: "[&>*:not(:first-child)]:-ms-1"
     }
   },
   defaultVariants: {
@@ -24,6 +27,7 @@ var avatarGroupVariants = cva("flex items-center", {
 });
 var AvatarGroup = React.forwardRef(
   ({ className, max, size = "md", spacing, children, ...props }, ref) => {
+    const messages = useNexubMessages();
     const items = React.Children.toArray(children);
     const visibleItems = max !== void 0 ? items.slice(0, max) : items;
     const overflowCount = max !== void 0 && items.length > max ? items.length - max : 0;
@@ -44,18 +48,18 @@ var AvatarGroup = React.forwardRef(
             return /* @__PURE__ */ jsx(
               "span",
               {
-                className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex",
+                className: "ring-2 ring-[var(--color-surface)] rounded-full inline-flex",
                 children: childWithSize
               },
               child.key ?? index
             );
           }),
-          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
+          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-surface)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(avatarVariants({ size }), "font-medium"),
               role: "img",
-              "aria-label": `${overflowCount} more`,
+              "aria-label": messages.moreCount(overflowCount),
               children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
                 "+",
                 overflowCount

package/dist/{chunk-A4IMFAZX.js → chunk-LESI7J7B.js}

@@ -15,9 +15,9 @@ var Kbd = React.forwardRef(
         className: cn(
           "inline-flex items-center justify-center font-mono text-xs",
           "px-1.5 py-0.5 min-w-[1.5rem]",
-          "rounded border border-[var(--color-border-default)]",
-          "bg-[var(--color-bg-subtle)] text-[var(--color-text-secondary)]",
-          "shadow-[0_1px_0_var(--color-border-default)]",
+          "rounded-shape-min border border-[var(--color-outline-variant)]",
+          "bg-[var(--color-surface-container-low)] text-[var(--color-on-surface-variant)]",
+          "shadow-[0_1px_0_var(--color-outline-variant)]",
           className
         ),
         ...rest,