@nexub/react 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -36,68 +36,70 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-toolbar": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@radix-ui/react-accordion": "^1.3.1",
+    "@radix-ui/react-alert-dialog": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-collapsible": "^1.2.1",
+    "@radix-ui/react-context-menu": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-direction": "^1.2.0",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-hover-card": "^1.2.1",
+    "@radix-ui/react-menubar": "^1.2.1",
+    "@radix-ui/react-navigation-menu": "^1.4.1",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-scroll-area": "^1.4.0",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-toast": "^1.3.1",
+    "@radix-ui/react-toggle": "^1.2.1",
+    "@radix-ui/react-toggle-group": "^1.2.1",
+    "@radix-ui/react-toolbar": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
+    "@radix-ui/react-visually-hidden": "^1.2.13",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "react-day-picker": "^9.14.0",
-    "tailwind-merge": "^2.5.4",
-    "@nexub/icons": "1.5.1"
+    "tailwind-merge": "^2.6.1",
+    "@nexub/icons": "1.6.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^1.5.1"
+    "@nexub/tokens": "^1.6.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "autoprefixer": "^10.4.20",
-    "axe-core": "^4.11.3",
-    "jsdom": "^25.0.1",
-    "postcss": "^8.4.49",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "8.6.14",
-    "tailwindcss": "^3.4.0",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
+    "@storybook/react": "10.6.3",
+    "@storybook/react-vite": "10.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "autoprefixer": "^10.6.1",
+    "axe-core": "^4.14.0",
+    "jsdom": "^30.1.3",
+    "postcss": "^8.5.31",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "10.6.3",
+    "tailwindcss": "^3.4.19",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
     "vaul": "1.1.2",
-    "vitest": "^2.1.8",
-    "@nexub/themes": "1.5.1",
-    "@nexub/tokens": "1.5.1"
+    "vite": "^7.3.7",
+    "vitest": "^5.0.5",
+    "@nexub/themes": "1.6.0",
+    "@nexub/tokens": "1.6.0"
   },
   "scripts": {
     "build": "tsup && node scripts/check-dts.mjs",

package/dist/chunk-63DPMUMR.js

@@ -1,67 +0,0 @@
-'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(
-  "bg-[var(--color-bg-muted)]",
-  {
-    variants: {
-      shape: {
-        line: "rounded",
-        rect: "rounded-md",
-        circle: "rounded-full"
-      },
-      animated: {
-        true: "animate-pulse"
-      }
-    },
-    defaultVariants: {
-      shape: "line",
-      animated: true
-    }
-  }
-);
-var Skeleton = React.forwardRef(
-  ({
-    className,
-    shape = "line",
-    width,
-    height,
-    animated = true,
-    style,
-    ...props
-  }, ref) => {
-    const defaultHeight = shape === "line" ? "1em" : shape === "circle" ? void 0 : void 0;
-    const resolvedWidth = width !== void 0 ? typeof width === "number" ? `${width}px` : width : shape === "circle" ? height !== void 0 ? typeof height === "number" ? `${height}px` : height : "2.5rem" : "100%";
-    const resolvedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : shape === "circle" ? resolvedWidth : defaultHeight;
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        "aria-hidden": "true",
-        className: cn(
-          skeletonVariants({ shape, animated }),
-          "block",
-          className
-        ),
-        style: {
-          width: resolvedWidth,
-          height: resolvedHeight,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Skeleton.displayName = "Skeleton";
-
-export {
-  skeletonVariants,
-  Skeleton
-};

package/dist/chunk-CHGPGRML.js

@@ -1,115 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/DateRangePicker/DateRangePicker.tsx
-import * as React from "react";
-import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
-import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-function formatRange(range, placeholder) {
-  if (!range) return placeholder;
-  if (range.from && range.to) {
-    return `${format(range.from, "PP")} \u2013 ${format(range.to, "PP")}`;
-  }
-  if (range.from) return `${format(range.from, "PP")} \u2013 \u2026`;
-  return placeholder;
-}
-var calendarClassNames = {
-  months: "flex flex-col sm:flex-row gap-4",
-  month: "flex flex-col gap-4",
-  month_caption: "flex justify-center pt-1 relative items-center",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1",
-  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  month_grid: "w-full border-collapse",
-  weekdays: "flex",
-  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
-  week: "flex w-full mt-2",
-  day: "relative p-0 text-center text-sm flex-1 focus-within:relative focus-within:z-20",
-  day_button: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
-  range_start: "rounded-l-md",
-  range_end: "rounded-r-md",
-  range_middle: "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)] rounded-none",
-  today: "bg-[var(--color-bg-subtle)]",
-  outside: "opacity-50",
-  disabled: "opacity-50",
-  hidden: "invisible"
-};
-var DateRangePicker = React.forwardRef(function DateRangePicker2({
-  value,
-  onChange,
-  placeholder = "Pick a date range",
-  disabled = false,
-  minDate,
-  maxDate,
-  className,
-  id,
-  "aria-label": ariaLabel
-}, ref) {
-  const [open, setOpen] = React.useState(false);
-  const display = formatRange(value, placeholder);
-  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
-  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        id,
-        disabled,
-        "aria-label": label,
-        className: cn(
-          "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
-          "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          !value && "text-[var(--color-text-muted)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-          display
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-      RadixPopover.Content,
-      {
-        align: "start",
-        className: cn(
-          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-        ),
-        children: /* @__PURE__ */ jsx(
-          DayPicker,
-          {
-            mode: "range",
-            selected: value,
-            onSelect: onChange,
-            numberOfMonths: 2,
-            startMonth: minDate,
-            endMonth: maxDate,
-            initialFocus: true,
-            showOutsideDays: true,
-            className: "p-3",
-            classNames: calendarClassNames,
-            components: {
-              Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
-            }
-          }
-        )
-      }
-    ) })
-  ] });
-});
-DateRangePicker.displayName = "DateRangePicker";
-
-export {
-  DateRangePicker
-};

package/dist/chunk-J2T4GFFS.js

@@ -1,85 +0,0 @@
-'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-full px-2.5 py-1 text-xs font-medium select-none",
-  {
-    variants: {
-      tone: {
-        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)] border border-[var(--color-neutral-200)]",
-        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)] border border-[var(--color-semantic-info-default)]/20",
-        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)] border border-[var(--color-semantic-success-default)]/20",
-        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)] border border-[var(--color-semantic-warning-default)]/20",
-        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)] border border-[var(--color-semantic-error-default)]/20",
-        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)] border border-[var(--color-leap-500)]/20",
-        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)] border border-[var(--color-bookub-500)]/20",
-        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)] border border-[var(--color-payub-500)]/20",
-        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)] border border-[var(--color-founderub-500)]/20"
-      }
-    },
-    defaultVariants: {
-      tone: "neutral"
-    }
-  }
-);
-var dotColorMap = {
-  neutral: "bg-[var(--color-neutral-500)]",
-  info: "bg-[var(--color-semantic-info-default)]",
-  success: "bg-[var(--color-semantic-success-default)]",
-  warning: "bg-[var(--color-semantic-warning-default)]",
-  danger: "bg-[var(--color-semantic-error-default)]",
-  leap: "bg-[var(--color-leap-500)]",
-  bookub: "bg-[var(--color-bookub-500)]",
-  payub: "bg-[var(--color-payub-500)]",
-  founderub: "bg-[var(--color-founderub-500)]"
-};
-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-LH3BSAIS.js

@@ -1,119 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/DatePicker/DatePicker.tsx
-import * as React from "react";
-import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
-import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var calendarClassNames = {
-  months: "flex flex-col sm:flex-row gap-4",
-  month: "flex flex-col gap-4",
-  month_caption: "flex justify-center pt-1 relative items-center",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1",
-  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  month_grid: "w-full border-collapse",
-  weekdays: "flex",
-  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
-  week: "flex w-full mt-2",
-  day: cn(
-    "relative p-0 text-center text-sm flex-1",
-    "[&:has([aria-selected].day-range-end)]:rounded-r-md",
-    "[&:has([aria-selected].day-outside)]:bg-[var(--color-bg-subtle)]/50",
-    "[&:has([aria-selected])]:bg-[var(--color-bg-subtle)]",
-    "first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
-    "focus-within:relative focus-within:z-20"
-  ),
-  day_button: cn(
-    "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-    "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-    "aria-selected:opacity-100"
-  ),
-  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)] hover:text-white focus:bg-[var(--color-fill-primary)] focus:text-white",
-  today: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]",
-  outside: "text-[var(--color-text-muted)] opacity-50",
-  disabled: "text-[var(--color-text-muted)] opacity-50",
-  hidden: "invisible"
-};
-var DatePicker = React.forwardRef(
-  function DatePicker2({
-    value,
-    onChange,
-    placeholder = "Pick a date",
-    disabled = false,
-    minDate,
-    maxDate,
-    className,
-    id,
-    "aria-label": ariaLabel
-  }, ref) {
-    const [open, setOpen] = React.useState(false);
-    const display = value ? format(value, "PP") : placeholder;
-    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref,
-          id,
-          disabled,
-          "aria-label": ariaLabel ? `${ariaLabel}: ${display}` : display,
-          className: cn(
-            "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
-            "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            !value && "text-[var(--color-text-muted)]",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-            value ? format(value, "PP") : placeholder
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-        RadixPopover.Content,
-        {
-          align: "start",
-          className: cn(
-            "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-          ),
-          children: /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              mode: "single",
-              selected: value,
-              onSelect: (date) => {
-                onChange?.(date);
-                setOpen(false);
-              },
-              startMonth: minDate,
-              endMonth: maxDate,
-              initialFocus: true,
-              showOutsideDays: true,
-              className: "p-3",
-              classNames: calendarClassNames,
-              components: {
-                Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
-              }
-            }
-          )
-        }
-      ) })
-    ] });
-  }
-);
-DatePicker.displayName = "DatePicker";
-
-export {
-  DatePicker
-};

package/dist/chunk-LMPGHWUA.js

@@ -1,114 +0,0 @@
-'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 { jsx, jsxs } from "react/jsx-runtime";
-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-[color:light-dark(var(--color-palette-leap-40),var(--color-palette-leap-80))] text-[color:light-dark(var(--color-palette-leap-100),var(--color-palette-leap-20))]",
-  bookub: "bg-[color:light-dark(var(--color-palette-bookub-40),var(--color-palette-bookub-80))] text-[color:light-dark(var(--color-palette-bookub-100),var(--color-palette-bookub-20))]",
-  payub: "bg-[color:light-dark(var(--color-palette-payub-40),var(--color-palette-payub-80))] text-[color:light-dark(var(--color-palette-payub-100),var(--color-palette-payub-20))]",
-  founderub: "bg-[color:light-dark(var(--color-palette-founderub-40),var(--color-palette-founderub-80))] text-[color:light-dark(var(--color-palette-founderub-100),var(--color-palette-founderub-20))]"
-};
-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, "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 Button = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    tone,
-    loading = false,
-    fullWidth,
-    leadingIcon,
-    trailingIcon,
-    asChild = false,
-    disabled,
-    children,
-    ...props
-  }, ref) => {
-    const sharedProps = {
-      className: cn(
-        buttonVariants({ variant, size, fullWidth }),
-        tone ? toneClasses[tone] : "",
-        className
-      ),
-      "data-tone": tone,
-      ...variant === "glass" && { "data-material": "glass", "data-glass-thickness": "thin" },
-      ...props
-    };
-    if (asChild) {
-      return /* @__PURE__ */ jsx(Slot, { ref, ...sharedProps, children });
-    }
-    return /* @__PURE__ */ jsxs("button", { ref, disabled: disabled ?? loading, ...sharedProps, children: [
-      loading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : leadingIcon,
-      children,
-      !loading && trailingIcon
-    ] });
-  }
-);
-Button.displayName = "Button";
-
-export {
-  buttonVariants,
-  Button
-};