@nexub/react 1.5.0 → 1.6.0

package/dist/chunk-5VW6RUKZ.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-743Y5MY3.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-CNNJFWFA.js → chunk-6BGUZQAX.js}

@@ -12,14 +12,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var linkVariants = cva(
   [
     "inline-flex items-center gap-1 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] rounded-sm"
+    "rounded-shape-min"
   ],
   {
     variants: {
       variant: {
-        default: "text-[var(--color-brand-primary-500)] hover:text-[var(--color-brand-primary-600)]",
-        muted: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
-        underlined: "text-[var(--color-brand-primary-500)] underline underline-offset-4 hover:text-[var(--color-brand-primary-600)]"
+        default: "text-[var(--color-primary)] underline-offset-4 hover:underline",
+        muted: "text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)]",
+        underlined: "text-[var(--color-primary)] underline underline-offset-4 hover:decoration-2"
       }
     },
     defaultVariants: {

package/dist/{chunk-LDYD7WL3.js → chunk-6ECOCGZG.js}

@@ -16,8 +16,9 @@ var logoVariants = cva("inline-flex min-w-0 max-w-full items-center gap-2", {
       lg: "h-10"
     },
     tone: {
-      default: "text-[var(--color-text-primary)]",
-      inverse: "text-white"
+      default: "text-[var(--color-on-surface)]",
+      // Brand asset: the inverse mark is always white (on dark or imagery), in both themes.
+      inverse: "text-[var(--color-palette-neutral-100)]"
     }
   },
   defaultVariants: {
@@ -84,7 +85,7 @@ var Logo = React.forwardRef(
                   wordmarkSizeMap[resolvedSize],
                   // leading-normal so the clip box doesn't cut descenders.
                   "min-w-0 truncate font-medium tracking-tight leading-normal",
-                  resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-text-muted)]"
+                  resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-on-surface-muted)]"
                 ),
                 children: product
               }

package/dist/{chunk-3AXIMXDU.js → chunk-6JBQAJJD.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  layoutProps
+} from "./chunk-VLQGQFW7.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -25,22 +28,13 @@ var Grid = React.forwardRef(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "div";
-    const inlineStyle = {
-      ...cols !== void 0 ? {
-        gridTemplateColumns: typeof cols === "number" ? `repeat(${cols}, minmax(0, 1fr))` : cols
-      } : {},
-      ...rows !== void 0 ? {
-        gridTemplateRows: typeof rows === "number" ? `repeat(${rows}, minmax(0, 1fr))` : rows
-      } : {},
-      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
-      ...style
-    };
+    const layout = layoutProps({ gap, cols, rows, style });
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn("grid", flow && flowClass[flow], className),
-        style: inlineStyle,
+        className: cn("grid", layout.className, flow && flowClass[flow], className),
+        style: layout.style,
         ...rest,
         children
       }

package/dist/{chunk-YRDCY6BI.js → chunk-6UKNUI46.js}

@@ -3,24 +3,6 @@ import {
   useIsomorphicLayoutEffect
 } from "./chunk-NHUQLIHL.js";
 
-// src/hooks/useMergedRefs.ts
-import { useCallback, useRef } from "react";
-function setRef(ref, value) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(value);
-  } else {
-    ref.current = value;
-  }
-}
-function useMergedRefs(...refs) {
-  const refsRef = useRef(refs);
-  refsRef.current = refs;
-  return useCallback((node) => {
-    for (const ref of refsRef.current) setRef(ref, node);
-  }, []);
-}
-
 // src/hooks/useSlidingIndicator.ts
 function useSlidingIndicator(ref, activeSelector) {
   useIsomorphicLayoutEffect(() => {
@@ -50,6 +32,5 @@ function useSlidingIndicator(ref, activeSelector) {
 }
 
 export {
-  useMergedRefs,
   useSlidingIndicator
 };

package/dist/chunk-743Y5MY3.js

@@ -0,0 +1,95 @@
+'use client';
+
+// src/components/NexubProvider/NexubProvider.tsx
+import * as React from "react";
+import { DirectionProvider } from "@radix-ui/react-direction";
+import { jsx } from "react/jsx-runtime";
+var defaultMessages = {
+  close: "Close",
+  dismissAlert: "Dismiss alert",
+  dismissBanner: "Dismiss banner",
+  remove: "Remove",
+  removeFilter: "Remove filter",
+  removeFile: (fileName) => `Remove ${fileName}`,
+  uploadFiles: "Upload files",
+  clickToUpload: "Click to upload",
+  orDragAndDrop: "or drag and drop",
+  clearSearch: "Clear search",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+  increment: "Increment",
+  decrement: "Decrement",
+  loading: "Loading\u2026",
+  pagination: "Pagination",
+  previousPage: "Go to previous page",
+  nextPage: "Go to next page",
+  goToPage: (page) => `Go to page ${page}`,
+  breadcrumb: "breadcrumb",
+  breadcrumbMore: "More",
+  moreCount: (count) => `${count} more`,
+  rating: "Rating",
+  ratingStars: (stars) => `${stars} star${stars !== 1 ? "s" : ""}`,
+  mainNavigation: "Main",
+  sidebar: "Sidebar",
+  searchPlaceholder: "Search\u2026",
+  noResults: "No results found.",
+  pickDate: "Pick a date",
+  pickDateRange: "Pick a date range",
+  commandPalette: "Command palette",
+  notifications: "Notifications ({hotkey})",
+  undo: "Undo",
+  promptLabel: "Message",
+  sendMessage: "Send message",
+  stopGenerating: "Stop generating",
+  promptHint: "Press Enter to send, Shift+Enter for a new line",
+  thinking: "Thinking",
+  youSaid: "You said",
+  assistantSaid: "Assistant said",
+  failedToSend: "Failed to send",
+  retry: "Retry",
+  copy: "Copy",
+  copied: "Copied",
+  goodResponse: "Good response",
+  badResponse: "Bad response",
+  regenerate: "Regenerate",
+  sources: "Sources",
+  source: (n) => `Source ${n}`,
+  jumpToLatest: "Jump to latest",
+  conversation: "Conversation"
+};
+var NexubContext = React.createContext({
+  locale: void 0,
+  dir: "ltr",
+  messages: defaultMessages
+});
+var RTL_LANGUAGES = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur"]);
+function directionOf(locale) {
+  return RTL_LANGUAGES.has(locale.toLowerCase().split(/[-_]/)[0]) ? "rtl" : "ltr";
+}
+function NexubProvider({ locale = "en", dir, messages, children }) {
+  const resolvedDir = dir ?? directionOf(locale);
+  const value = React.useMemo(
+    () => ({ locale, dir: resolvedDir, messages: { ...defaultMessages, ...messages } }),
+    [locale, resolvedDir, messages]
+  );
+  return /* @__PURE__ */ jsx(NexubContext.Provider, { value, children: /* @__PURE__ */ jsx(DirectionProvider, { dir: resolvedDir, children }) });
+}
+function useNexubMessages() {
+  return React.useContext(NexubContext).messages;
+}
+function useLocale() {
+  const { locale = "en", dir } = React.useContext(NexubContext);
+  return { locale, dir };
+}
+function useIntlLocale(explicit) {
+  const ctx = React.useContext(NexubContext).locale;
+  return explicit ?? ctx;
+}
+
+export {
+  defaultMessages,
+  NexubProvider,
+  useNexubMessages,
+  useLocale,
+  useIntlLocale
+};

package/dist/{chunk-BFRX6X4O.js → chunk-74RUJ5KZ.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,22 +11,25 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Root = React.forwardRef(
-  ({ className, collapsed = false, ...props }, ref) => /* @__PURE__ */ jsx(
-    "nav",
-    {
-      ref,
-      "aria-label": "Sidebar",
-      "data-collapsed": collapsed,
-      className: cn(
-        // Chrome recedes: a tonal panel, no divider.
-        "group/sidebar flex flex-col gap-1 bg-[var(--color-surface-container-low)] transition-[width] duration-spatial-default ease-spatial-default",
-        collapsed ? "w-[var(--size-nav-sidebar-collapsed,56px)]" : "w-[var(--size-nav-sidebar,240px)]",
-        "h-full overflow-y-auto overflow-x-hidden",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, collapsed = false, ...props }, ref) => {
+    const messages = useNexubMessages();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": messages.sidebar,
+        "data-collapsed": collapsed,
+        className: cn(
+          // Chrome recedes: a tonal panel, no divider.
+          "group/sidebar flex flex-col gap-1 bg-[var(--color-surface-container-low)] transition-[width] duration-spatial-default ease-spatial-default",
+          collapsed ? "w-[var(--size-nav-sidebar-collapsed,56px)]" : "w-[var(--size-nav-sidebar,240px)]",
+          "h-full overflow-y-auto overflow-x-hidden",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 Root.displayName = "Sidebar.Root";
 var Header = React.forwardRef(
@@ -48,7 +54,7 @@ var Header = React.forwardRef(
 Header.displayName = "Sidebar.Header";
 var Group = React.forwardRef(
   ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-0.5 p-2", className), ...props, children: [
-    label && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]", children: label }),
+    label && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-on-surface-muted)]", children: label }),
     children
   ] })
 );

package/dist/chunk-77LYWSJW.js

@@ -0,0 +1,85 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/StatusPill/StatusPill.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusPillVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-shape-control px-2.5 py-1 text-xs font-medium select-none",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)] border border-[var(--color-outline-variant)]",
+        info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)] border border-[color-mix(in_srgb,var(--color-info)_35%,transparent)]",
+        success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)] border border-[color-mix(in_srgb,var(--color-success)_35%,transparent)]",
+        warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)] border border-[color-mix(in_srgb,var(--color-warning)_35%,transparent)]",
+        danger: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)] border border-[color-mix(in_srgb,var(--color-error)_35%,transparent)]",
+        leap: "bg-[var(--color-leap-container)] text-[var(--color-on-leap-container)] border border-[color-mix(in_srgb,var(--color-leap)_35%,transparent)]",
+        bookub: "bg-[var(--color-bookub-container)] text-[var(--color-on-bookub-container)] border border-[color-mix(in_srgb,var(--color-bookub)_35%,transparent)]",
+        payub: "bg-[var(--color-payub-container)] text-[var(--color-on-payub-container)] border border-[color-mix(in_srgb,var(--color-payub)_35%,transparent)]",
+        founderub: "bg-[var(--color-founderub-container)] text-[var(--color-on-founderub-container)] border border-[color-mix(in_srgb,var(--color-founderub)_35%,transparent)]"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var dotColorMap = {
+  neutral: "bg-[var(--color-outline)]",
+  info: "bg-[var(--color-info)]",
+  success: "bg-[var(--color-success)]",
+  warning: "bg-[var(--color-warning)]",
+  danger: "bg-[var(--color-error)]",
+  leap: "bg-[var(--color-leap)]",
+  bookub: "bg-[var(--color-bookub)]",
+  payub: "bg-[var(--color-payub)]",
+  founderub: "bg-[var(--color-founderub)]"
+};
+var pulseTones = ["success", "info"];
+var StatusPill = React.forwardRef(
+  ({ className, tone = "neutral", label, dot = false, ...props }, ref) => {
+    const shouldPulse = dot && pulseTones.includes(tone);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(statusPillVariants({ tone }), className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-2 w-2 shrink-0", children: [
+            shouldPulse && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+                  dotColorMap[tone]
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative inline-flex rounded-full h-2 w-2",
+                  dotColorMap[tone]
+                )
+              }
+            )
+          ] }),
+          label
+        ]
+      }
+    );
+  }
+);
+StatusPill.displayName = "StatusPill";
+
+export {
+  statusPillVariants,
+  StatusPill
+};

package/dist/{chunk-YPHNHQYQ.js → chunk-7B4VF2ZU.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-743Y5MY3.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-NCRFKPA4.js → chunk-7MSIOYJZ.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  layoutProps
+} from "./chunk-VLQGQFW7.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -27,18 +30,13 @@ var Flex = 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 });
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn("flex", directionClass[direction], wrap && "flex-wrap", className),
-        style: inlineStyle,
+        className: cn("flex", layout.className, directionClass[direction], wrap && "flex-wrap", className),
+        style: layout.style,
         ...rest,
         children
       }

package/dist/{chunk-AHT35UWY.js → chunk-7Q4T7CB6.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -22,10 +25,10 @@ var chipVariants = cva(
         success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
         warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
         danger: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
-        leap: "bg-[color:light-dark(var(--color-palette-leap-90),var(--color-palette-leap-30))] text-[color:light-dark(var(--color-palette-leap-10),var(--color-palette-leap-90))]",
-        bookub: "bg-[color:light-dark(var(--color-palette-bookub-90),var(--color-palette-bookub-30))] text-[color:light-dark(var(--color-palette-bookub-10),var(--color-palette-bookub-90))]",
-        payub: "bg-[color:light-dark(var(--color-palette-payub-90),var(--color-palette-payub-30))] text-[color:light-dark(var(--color-palette-payub-10),var(--color-palette-payub-90))]",
-        founderub: "bg-[color:light-dark(var(--color-palette-founderub-90),var(--color-palette-founderub-30))] text-[color:light-dark(var(--color-palette-founderub-10),var(--color-palette-founderub-90))]"
+        leap: "bg-[var(--color-leap-container)] text-[var(--color-on-leap-container)]",
+        bookub: "bg-[var(--color-bookub-container)] text-[var(--color-on-bookub-container)]",
+        payub: "bg-[var(--color-payub-container)] text-[var(--color-on-payub-container)]",
+        founderub: "bg-[var(--color-founderub-container)] text-[var(--color-on-founderub-container)]"
       }
     },
     defaultVariants: {
@@ -36,6 +39,7 @@ var chipVariants = cva(
 );
 var Chip = React.forwardRef(
   ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+    const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -48,14 +52,14 @@ var Chip = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": "Remove",
+              "aria-label": messages.remove,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();
               },
               className: cn(
                 // State layer for hover/press; focus = the global ring.
-                "nx-state-layer inline-flex items-center justify-center rounded-full text-current -mr-1",
+                "nx-state-layer inline-flex items-center justify-center rounded-full text-current -me-1",
                 size === "sm" ? "w-4 h-4" : "w-5 h-5"
               ),
               children: /* @__PURE__ */ jsx(

package/dist/{chunk-GIGOTRXX.js → chunk-7VJABRKB.js}

@@ -1,8 +1,7 @@
 'use client';
 import {
-  enterExit,
   floatingSurface
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";
@@ -28,13 +27,7 @@ var Content2 = React.forwardRef(
         className: cn(
           "z-[var(--z-popover)] p-4 outline-none",
           floatingSurface,
-          enterExit,
-          "outline-none",
-          "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-popover-content-transform-origin)]",
           surface === "glass" && glassSurfaceClass,
           className
         ),
@@ -51,7 +44,7 @@ var Arrow2 = React.forwardRef(
       RadixPopover.Arrow,
       {
         ref,
-        className: cn("fill-[var(--color-border-default)]", className),
+        className: cn("fill-[var(--color-outline-variant)]", className),
         ...props
       }
     );