@nexub/react 1.5.1 → 1.6.0

package/dist/{chunk-6QLLH6ID.js → chunk-7XWJCFWI.js}

@@ -1,12 +1,11 @@
 'use client';
 import {
-  enterExit,
   floatingSurface,
   menuContent,
   menuItem,
   menuLabel,
   menuSeparator
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -32,10 +31,7 @@ var Content2 = React.forwardRef(
           "z-[var(--z-popover)] min-w-48 outline-none",
           floatingSurface,
           menuContent,
-          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",
+          "nx-motion nx-pop origin-[var(--radix-context-menu-content-transform-origin)]",
           className
         ),
         ...props
@@ -94,11 +90,11 @@ var CheckboxItem2 = React.forwardRef(function ContextMenuCheckboxItem({ classNam
     RadixContextMenu.CheckboxItem,
     {
       ref,
-      className: cn(itemBaseClasses, "pl-8", className),
+      className: cn(itemBaseClasses, "ps-8", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -110,10 +106,10 @@ var RadioItem2 = React.forwardRef(function ContextMenuRadioItem({ className, chi
     RadixContextMenu.RadioItem,
     {
       ref,
-      className: cn(itemBaseClasses, "pl-8", className),
+      className: cn(itemBaseClasses, "ps-8", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
         children
       ]
     }
@@ -133,7 +129,7 @@ var SubTrigger2 = React.forwardRef(function ContextMenuSubTrigger({ className, c
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto h-4 w-4 rtl:-scale-x-100" })
       ]
     }
   );
@@ -148,12 +144,7 @@ var SubContent2 = React.forwardRef(function ContextMenuSubContent({ className, .
         "z-[var(--z-popover)] min-w-48 outline-none",
         floatingSurface,
         menuContent,
-        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-context-menu-content-transform-origin)]",
         className
       ),
       ...props

package/dist/chunk-A3O23F2B.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-AT2DSFP3.js

@@ -0,0 +1,47 @@
+'use client';
+import {
+  SelectableCardContent,
+  selectableCardClass,
+  useCardIds
+} from "./chunk-K5FKEAAK.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/CheckboxCard/CheckboxCard.tsx
+import * as React from "react";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { jsx } from "react/jsx-runtime";
+var CheckboxCard = React.forwardRef(
+  ({ className, icon, title, description, children, onCheckedChange, ...props }, ref) => {
+    const ids = useCardIds(description != null);
+    return /* @__PURE__ */ jsx(
+      RadixCheckbox.Root,
+      {
+        ref,
+        "aria-labelledby": ids.titleId,
+        "aria-describedby": ids.describedBy,
+        className: cn(selectableCardClass, className),
+        onCheckedChange: onCheckedChange ? (c) => onCheckedChange(c === true) : void 0,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          SelectableCardContent,
+          {
+            icon,
+            title,
+            description,
+            titleId: ids.titleId,
+            descriptionId: ids.descriptionId,
+            shape: "square",
+            children
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxCard.displayName = "CheckboxCard";
+
+export {
+  CheckboxCard
+};

package/dist/{chunk-XI63BK3S.js → chunk-BNFGVFZ3.js}

@@ -1,13 +1,13 @@
 'use client';
+import {
+  HelperText
+} from "./chunk-WVBGQCYC.js";
 import {
   Label
-} from "./chunk-NIX4SEKM.js";
+} from "./chunk-PREMZMLU.js";
 import {
   FormError
-} from "./chunk-KM6Z3VTI.js";
-import {
-  HelperText
-} from "./chunk-UMC64NCT.js";
+} from "./chunk-QVTVDL6Y.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-GHCV6UXG.js → chunk-BTYDDKRQ.js}

@@ -34,21 +34,21 @@ var thumbVariants = cva(
   [
     "pointer-events-none block rounded-full shadow-elevation-1",
     "transition-[transform,background-color] duration-expressive-fast ease-expressive-fast",
-    "translate-x-0.5 data-[state=unchecked]:bg-[var(--color-outline)] data-[state=checked]:bg-[var(--color-on-primary)] data-[disabled]:data-[state=unchecked]:bg-[var(--color-outline-variant)]"
+    "translate-x-0.5 rtl:-translate-x-0.5 data-[state=unchecked]:bg-[var(--color-outline)] data-[state=checked]:bg-[var(--color-on-primary)] data-[disabled]:data-[state=unchecked]:bg-[var(--color-outline-variant)]"
   ],
   {
     variants: {
       size: {
-        sm: "h-3 w-3 data-[state=checked]:translate-x-[18px]",
-        md: "h-5 w-5 data-[state=checked]:translate-x-[22px]",
-        lg: "h-6 w-6 data-[state=checked]:translate-x-[26px]"
+        sm: "h-3 w-3 data-[state=checked]:translate-x-[18px] rtl:data-[state=checked]:-translate-x-[18px]",
+        md: "h-5 w-5 data-[state=checked]:translate-x-[22px] rtl:data-[state=checked]:-translate-x-[22px]",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-[26px] rtl:data-[state=checked]:-translate-x-[26px]"
       }
     },
     defaultVariants: { size: "md" }
   }
 );
 var Switch = React.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(RadixSwitch.Root, { ref, className: cn(switchVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: cn(thumbVariants({ size })) }) })
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(RadixSwitch.Root, { ref, className: cn(switchVariants({ size }), "nx-hit", className), ...props, children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: cn(thumbVariants({ size })) }) })
 );
 Switch.displayName = "Switch";
 

package/dist/chunk-C6JRJ6JW.js

@@ -0,0 +1,167 @@
+'use client';
+import {
+  disabledContainer,
+  disabledText,
+  pressable
+} from "./chunk-7SXR4PGO.js";
+import {
+  glassSurfaceClass
+} from "./chunk-DEIBF3P7.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Button/Button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Loader2 } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toneTextClasses = {
+  neutral: "text-[var(--color-on-surface-variant)]",
+  info: "text-[var(--color-info)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  danger: "text-[var(--color-error)]",
+  leap: "text-[var(--color-leap)]",
+  bookub: "text-[var(--color-bookub)]",
+  payub: "text-[var(--color-payub)]",
+  founderub: "text-[var(--color-founderub)]"
+};
+var toneClasses = {
+  neutral: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface)]",
+  info: "bg-[var(--color-info)] text-[var(--color-on-info)]",
+  success: "bg-[var(--color-success)] text-[var(--color-on-success)]",
+  warning: "bg-[var(--color-warning)] text-[var(--color-on-warning)]",
+  danger: "bg-[var(--color-error)] text-[var(--color-on-error)]",
+  leap: "bg-[var(--color-leap)] text-[var(--color-on-leap)]",
+  bookub: "bg-[var(--color-bookub)] text-[var(--color-on-bookub)]",
+  payub: "bg-[var(--color-payub)] text-[var(--color-on-payub)]",
+  founderub: "bg-[var(--color-founderub)] text-[var(--color-on-founderub)]"
+};
+var filled = `bg-[var(--color-primary)] text-[var(--color-on-primary)] ${disabledContainer}`;
+var tonal = `bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)] ${disabledContainer}`;
+var outlined = `bg-transparent border border-[var(--color-outline-variant)] text-[var(--color-on-surface)] ${disabledContainer}`;
+var text = `bg-transparent text-[var(--color-on-surface)] ${disabledText}`;
+var buttonVariants = cva(
+  [pressable, "nx-hit relative inline-flex items-center justify-center gap-2 whitespace-nowrap"],
+  {
+    variants: {
+      variant: {
+        filled,
+        tonal,
+        outlined,
+        text,
+        // Thin glass: for buttons floating over content/media (toolbars, media controls).
+        glass: `border ${glassSurfaceClass} text-[var(--color-on-surface)] ${disabledContainer}`,
+        // Legacy names (kept as aliases).
+        primary: filled,
+        secondary: tonal,
+        subtle: `bg-[var(--color-surface-container-high)] text-[var(--color-on-surface)] ${disabledContainer}`,
+        outline: outlined,
+        ghost: text,
+        destructive: `bg-[var(--color-error)] text-[var(--color-on-error)] ${disabledContainer}`,
+        accent: `bg-[var(--color-tertiary)] text-[var(--color-on-tertiary)] ${disabledContainer}`,
+        link: `bg-transparent text-[var(--color-primary)] underline underline-offset-[0.3em] ${disabledText}`
+      },
+      // The control ladder (density-aware: data-density="compact" shrinks it).
+      size: {
+        xs: "h-control-xs px-2.5 text-label-sm",
+        sm: "h-control-sm px-3.5 text-label-md",
+        md: "h-control-md px-5 text-label-lg",
+        lg: "h-control-lg px-6 text-title-md",
+        xl: "h-control-xl px-7 text-title-md"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) });
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    tone,
+    status: statusProp,
+    loading,
+    loadingLabel = "Loading",
+    successLabel,
+    errorLabel = "Something went wrong",
+    fullWidth,
+    leadingIcon,
+    trailingIcon,
+    asChild = false,
+    disabled,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const status = statusProp ?? (loading ? "loading" : "idle");
+    const sharedProps = {
+      className: cn(
+        buttonVariants({ variant, size, fullWidth }),
+        tone ? toneClasses[tone] : "",
+        !asChild && status === "error" && "nx-shake",
+        className
+      ),
+      "data-tone": tone,
+      ...variant === "glass" && { "data-material": "glass", "data-glass-thickness": "thin" },
+      ...props
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Slot, { ref, onClick, ...sharedProps, children });
+    }
+    const busy = status === "loading";
+    const swapLabel = status === "success" && successLabel !== void 0;
+    const overlay = busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
+    const announcement = status === "loading" ? loadingLabel : status === "success" ? successLabel ?? "Done" : status === "error" ? errorLabel : "";
+    const button = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled,
+        "aria-busy": busy || void 0,
+        "aria-disabled": busy || props["aria-disabled"] || void 0,
+        onClick: (e) => {
+          if (busy) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        },
+        "data-status": status === "idle" ? void 0 : status,
+        ...sharedProps,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: swapLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CheckIcon, {}),
+            successLabel
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            leadingIcon,
+            children,
+            trailingIcon
+          ] }) }),
+          overlay && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: overlay })
+        ]
+      }
+    );
+    if (statusProp === void 0 && loading === void 0) return button;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      button,
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: announcement })
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+export {
+  toneTextClasses,
+  buttonVariants,
+  Button
+};

package/dist/chunk-CAOLGXA5.js

@@ -0,0 +1 @@
+'use client';

package/dist/{chunk-IIPYF6ZQ.js → chunk-CBDJRPMD.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -9,21 +12,21 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var alertVariants = cva(
   [
-    "relative flex gap-3 rounded-lg border-l-4 p-4",
+    "relative flex gap-3 rounded-shape-container border-s-4 p-4",
     "w-full"
   ],
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--color-bg-subtle)] border-l-[var(--color-neutral-500)] text-[var(--color-text-primary)]",
-        info: "bg-[var(--color-semantic-info-default)]/8 border-l-[var(--color-semantic-info-default)] text-[var(--color-semantic-info-default)]",
-        success: "bg-[var(--color-semantic-success-default)]/8 border-l-[var(--color-semantic-success-default)] text-[var(--color-semantic-success-default)]",
-        warning: "bg-[var(--color-semantic-warning-default)]/8 border-l-[var(--color-semantic-warning-default)] text-[var(--color-semantic-warning-default)]",
-        danger: "bg-[var(--color-semantic-error-default)]/8 border-l-[var(--color-semantic-error-default)] text-[var(--color-semantic-error-default)]",
-        leap: "bg-[var(--color-leap-500)]/8 border-l-[var(--color-leap-500)] text-[var(--color-leap-700)]",
-        bookub: "bg-[var(--color-bookub-500)]/8 border-l-[var(--color-bookub-500)] text-[var(--color-bookub-700)]",
-        payub: "bg-[var(--color-payub-500)]/8 border-l-[var(--color-payub-500)] text-[var(--color-payub-700)]",
-        founderub: "bg-[var(--color-founderub-500)]/8 border-l-[var(--color-founderub-500)] text-[var(--color-founderub-700)]"
+        neutral: "bg-[var(--color-surface-container-low)] border-s-[var(--color-outline)] text-[var(--color-on-surface)]",
+        info: "bg-[var(--color-info-container)] border-s-[var(--color-info)] text-[var(--color-on-info-container)]",
+        success: "bg-[var(--color-success-container)] border-s-[var(--color-success)] text-[var(--color-on-success-container)]",
+        warning: "bg-[var(--color-warning-container)] border-s-[var(--color-warning)] text-[var(--color-on-warning-container)]",
+        danger: "bg-[var(--color-error-container)] border-s-[var(--color-error)] text-[var(--color-on-error-container)]",
+        leap: "bg-[var(--color-leap-container)] border-s-[var(--color-leap)] text-[var(--color-on-leap-container)]",
+        bookub: "bg-[var(--color-bookub-container)] border-s-[var(--color-bookub)] text-[var(--color-on-bookub-container)]",
+        payub: "bg-[var(--color-payub-container)] border-s-[var(--color-payub)] text-[var(--color-on-payub-container)]",
+        founderub: "bg-[var(--color-founderub-container)] border-s-[var(--color-founderub)] text-[var(--color-on-founderub-container)]"
       }
     },
     defaultVariants: {
@@ -42,6 +45,7 @@ var Alert = React.forwardRef(
     children,
     ...props
   }, ref) => {
+    const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -61,11 +65,10 @@ var Alert = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": "Dismiss alert",
+              "aria-label": messages.dismissAlert,
               onClick: onClose,
               className: cn(
-                "shrink-0 inline-flex items-center justify-center rounded-md w-6 h-6 opacity-60 hover:opacity-100 transition-opacity",
-                "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)]"
+                "nx-state-layer shrink-0 inline-flex items-center justify-center rounded-full w-6 h-6"
               ),
               children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 2L2 10M2 2l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
             }

package/dist/{chunk-OJ2TLWYD.js → chunk-CKFRMCZ7.js}

@@ -1,8 +1,10 @@
 'use client';
 import {
-  useMergedRefs,
   useSlidingIndicator
-} from "./chunk-YRDCY6BI.js";
+} from "./chunk-6UKNUI46.js";
+import {
+  useMergedRefs
+} from "./chunk-MNEXMMLM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -55,7 +57,7 @@ var Trigger2 = React.forwardRef(
       ref,
       className: cn(
         // State layer for hover/press; focus = the global ring.
-        "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-lg px-4 text-label-lg select-none",
+        "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-[var(--shape-field)] px-4 text-label-lg select-none",
         "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
         "data-[state=active]:text-[var(--color-primary)]",
         "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",

package/dist/{chunk-LZB3KTSH.js → chunk-CQWYZPPJ.js}

@@ -46,7 +46,7 @@ var IconButton = React.forwardRef(
       {
         ref,
         "aria-label": label,
-        className: cn(iconButtonVariants({ variant, size }), className),
+        className: cn(iconButtonVariants({ variant, size }), "nx-hit", className),
         ...props,
         children
       }

package/dist/{chunk-6RBNM5RO.js → chunk-CUOASXI7.js}

@@ -11,18 +11,18 @@ var separatorVariants = cva("", {
   variants: {
     orientation: {
       horizontal: "w-full border-t",
-      vertical: "h-full border-l self-stretch"
+      vertical: "h-full border-s self-stretch"
     },
     tone: {
-      neutral: "border-[var(--color-border-default)]",
-      info: "border-[var(--color-semantic-info-default)]/30",
-      success: "border-[var(--color-semantic-success-default)]/30",
-      warning: "border-[var(--color-semantic-warning-default)]/30",
-      danger: "border-[var(--color-semantic-error-default)]/30",
-      leap: "border-[var(--color-leap-500)]/30",
-      bookub: "border-[var(--color-bookub-500)]/30",
-      payub: "border-[var(--color-payub-500)]/30",
-      founderub: "border-[var(--color-founderub-500)]/30"
+      neutral: "border-[var(--color-outline-variant)]",
+      info: "border-[color-mix(in_srgb,var(--color-info)_30%,transparent)]",
+      success: "border-[color-mix(in_srgb,var(--color-success)_30%,transparent)]",
+      warning: "border-[color-mix(in_srgb,var(--color-warning)_30%,transparent)]",
+      danger: "border-[color-mix(in_srgb,var(--color-error)_30%,transparent)]",
+      leap: "border-[color-mix(in_srgb,var(--color-leap)_30%,transparent)]",
+      bookub: "border-[color-mix(in_srgb,var(--color-bookub)_30%,transparent)]",
+      payub: "border-[color-mix(in_srgb,var(--color-payub)_30%,transparent)]",
+      founderub: "border-[color-mix(in_srgb,var(--color-founderub)_30%,transparent)]"
     }
   },
   defaultVariants: {

package/dist/{chunk-HG6HTUWU.js → chunk-CV5ZKED7.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   Kbd
-} from "./chunk-A4IMFAZX.js";
+} from "./chunk-LESI7J7B.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -22,7 +22,7 @@ var KeyboardShortcut = React.forwardRef(
           index > 0 && /* @__PURE__ */ jsx(
             "span",
             {
-              className: "text-[var(--color-text-muted)] text-xs select-none",
+              className: "text-[var(--color-on-surface-muted)] text-xs select-none",
               "aria-hidden": "true",
               children: "+"
             }

package/dist/{chunk-HJERFB7J.js → chunk-DDRYT3SY.js}

@@ -14,7 +14,7 @@ var Code = React.forwardRef(
         {
           ref,
           className: cn(
-            "font-mono text-sm bg-[var(--color-bg-muted)] px-1.5 py-0.5 rounded",
+            "font-mono text-sm bg-[var(--color-surface-container-high)] px-1.5 py-0.5 rounded-shape-min",
             className
           ),
           ...rest,
@@ -26,7 +26,7 @@ var Code = React.forwardRef(
       "pre",
       {
         className: cn(
-          "overflow-x-auto rounded-md bg-[var(--color-bg-muted)] p-4",
+          "overflow-x-auto rounded-shape-container bg-[var(--color-surface-container-high)] p-4",
           className
         ),
         children: /* @__PURE__ */ jsx(

package/dist/chunk-DGCAM2UJ.js

@@ -0,0 +1,60 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Skeleton/Skeleton.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var skeletonVariants = cva(
+  "block bg-surface-container-highest",
+  {
+    variants: {
+      shape: {
+        line: "h-[1em] w-full rounded-shape-min",
+        rect: "w-full rounded-shape-container",
+        circle: "size-10 rounded-full"
+      },
+      animated: {
+        true: "animate-pulse motion-reduce:animate-none"
+      }
+    },
+    defaultVariants: {
+      shape: "line",
+      animated: true
+    }
+  }
+);
+var px = (v) => typeof v === "number" ? `${v}px` : v;
+var Skeleton = React.forwardRef(
+  ({
+    className,
+    shape = "line",
+    width,
+    height,
+    animated = true,
+    style,
+    ...props
+  }, ref) => {
+    const w = width ?? (shape === "circle" ? height : void 0);
+    const h = height ?? (shape === "circle" ? width : void 0);
+    const sizeStyle = w !== void 0 || h !== void 0 ? { ...w !== void 0 && { width: px(w) }, ...h !== void 0 && { height: px(h) } } : void 0;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(skeletonVariants({ shape, animated }), className),
+        style: sizeStyle || style ? { ...sizeStyle, ...style } : void 0,
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export {
+  skeletonVariants,
+  Skeleton
+};

package/dist/{chunk-RLE5RN3T.js → chunk-DGQJRTO6.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -24,15 +27,15 @@ var spinnerVariants = cva(
         xl: "h-10 w-10 border-4"
       },
       tone: {
-        neutral: "border-[var(--color-neutral-500)]",
-        info: "border-[var(--color-semantic-info-default)]",
-        success: "border-[var(--color-semantic-success-default)]",
-        warning: "border-[var(--color-semantic-warning-default)]",
-        danger: "border-[var(--color-semantic-error-default)]",
-        leap: "border-[var(--color-leap-500)]",
-        bookub: "border-[var(--color-bookub-500)]",
-        payub: "border-[var(--color-payub-500)]",
-        founderub: "border-[var(--color-founderub-500)]"
+        neutral: "border-[var(--color-on-surface-variant)]",
+        info: "border-[var(--color-info)]",
+        success: "border-[var(--color-success)]",
+        warning: "border-[var(--color-warning)]",
+        danger: "border-[var(--color-error)]",
+        leap: "border-[var(--color-leap)]",
+        bookub: "border-[var(--color-bookub)]",
+        payub: "border-[var(--color-payub)]",
+        founderub: "border-[var(--color-founderub)]"
       }
     },
     defaultVariants: {
@@ -42,13 +45,14 @@ var spinnerVariants = cva(
   }
 );
 var Spinner = React.forwardRef(
-  ({ className, size, tone = "neutral", label = "Loading\u2026", ...props }, ref) => {
+  ({ className, size, tone = "neutral", label, ...props }, ref) => {
+    const messages = useNexubMessages();
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         role: "status",
-        "aria-label": label,
+        "aria-label": label ?? messages.loading,
         className: cn("inline-flex items-center justify-center", className),
         ...props,
         children: /* @__PURE__ */ jsx(

package/dist/{chunk-FD7YU53N.js → chunk-DT3QGFXB.js}

@@ -16,10 +16,10 @@ var sectionVariants = cva("w-full", {
       lg: "py-32"
     },
     tone: {
-      default: "bg-[var(--color-bg-default)]",
-      subtle: "bg-[var(--color-bg-subtle)]",
-      muted: "bg-[var(--color-bg-muted)]",
-      inverse: "bg-[var(--color-bg-inverse)] text-[var(--color-text-inverse)]"
+      default: "bg-[var(--color-surface)]",
+      subtle: "bg-[var(--color-surface-container-low)]",
+      muted: "bg-[var(--color-surface-container-high)]",
+      inverse: "bg-[var(--color-inverse-surface)] text-[var(--color-inverse-on-surface)]"
     }
   },
   defaultVariants: {