@nexub/react 1.5.0 → 1.6.0

package/dist/chunk-IGLOYOCH.js

@@ -0,0 +1,134 @@
+'use client';
+import {
+  floatingSurface
+} from "./chunk-FLZD7HQY.js";
+import {
+  field,
+  fieldFocusVisible
+} from "./chunk-7SXR4PGO.js";
+import {
+  useIntlLocale,
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
+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";
+function formatDate(date, locale) {
+  return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
+}
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-label-lg text-[var(--color-on-surface)]",
+  // v9 renders nav beside the months, not in the caption: pin it to the caption row.
+  nav: "pointer-events-none absolute inset-x-3 top-3 flex h-8 items-center justify-between",
+  button_previous: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  button_next: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-on-surface-muted)] w-8 text-label-sm flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: "relative flex flex-1 justify-center p-0 text-center focus-within:z-20",
+  day_button: cn(
+    // Capsule day with a state layer; focus = the global ring. The transparent
+    // border carries today's primary outline.
+    "nx-state-layer inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-body-sm text-[var(--color-on-surface)]",
+    "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"
+  ),
+  selected: "[&>button]:bg-[var(--color-primary)] [&>button]:text-[var(--color-on-primary)]",
+  today: "[&>button]:border-[var(--color-primary)]",
+  outside: "[&:not([data-selected]):not([data-disabled])>button]:text-[var(--color-on-surface-muted)]",
+  disabled: "",
+  hidden: "invisible"
+};
+var DatePicker = React.forwardRef(
+  function DatePicker2({
+    value,
+    onChange,
+    placeholder: placeholderProp,
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const messages = useNexubMessages();
+    const placeholder = placeholderProp ?? messages.pickDate;
+    const locale = useIntlLocale();
+    const display = value ? formatDate(value, locale) : 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-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
+            field,
+            fieldFocusVisible,
+            // Open reads like focus: the 2px primary border (as Select).
+            "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+            !value && "text-[var(--color-on-surface-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)] outline-none",
+            floatingSurface,
+            "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+          ),
+          children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "single",
+              selected: value,
+              defaultMonth: value,
+              onSelect: (date) => {
+                onChange?.(date);
+                setOpen(false);
+              },
+              startMonth: minDate,
+              endMonth: maxDate,
+              initialFocus: true,
+              showOutsideDays: true,
+              className: "relative 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 {
+  formatDate,
+  DatePicker
+};

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-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-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,

package/dist/chunk-MEUJBGY5.js

@@ -0,0 +1,88 @@
+'use client';
+import {
+  useIntlLocale
+} from "./chunk-743Y5MY3.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/NumberTicker/NumberTicker.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SHIFT = [
+  "translate-y-0",
+  "-translate-y-[10%]",
+  "-translate-y-[20%]",
+  "-translate-y-[30%]",
+  "-translate-y-[40%]",
+  "-translate-y-[50%]",
+  "-translate-y-[60%]",
+  "-translate-y-[70%]",
+  "-translate-y-[80%]",
+  "-translate-y-[90%]"
+];
+var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+function Char({ char, className, enter }) {
+  const [entering] = React.useState(enter);
+  const motion = entering ? { "data-motion": "from-fade" } : {};
+  if (!/^[0-9]$/.test(char)) {
+    return /* @__PURE__ */ jsx("span", { className: cn(entering && "nx-motion", className), ...motion, children: char });
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-digit": char,
+      className: cn("relative inline-block overflow-clip", entering && "nx-motion", className),
+      ...motion,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "invisible", children: "0" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-x-0 top-0 flex h-[1000%] flex-col text-center",
+              "transition-transform duration-spatial-default ease-spatial-default motion-reduce:transition-none",
+              SHIFT[Number(char)]
+            ),
+            children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "h-[10%]", children: d }, d))
+          }
+        )
+      ]
+    }
+  );
+}
+var NumberTicker = React.forwardRef(
+  ({ value, format, locale: localeProp, className, "aria-live": ariaLive = "off", ...props }, ref) => {
+    const locale = useIntlLocale(localeProp);
+    const parts = typeof value === "number" ? [{ value: new Intl.NumberFormat(locale, format).format(value) }] : typeof value === "string" ? [{ value }] : value;
+    const chars = parts.flatMap((p) => Array.from(p.value, (char) => ({ char, className: p.className })));
+    const text = parts.map((p) => p.value).join("");
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+      mounted.current = true;
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn("whitespace-nowrap tabular-nums", className),
+        "aria-live": ariaLive,
+        "aria-atomic": "true",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: chars.map(({ char, className: cls }, i) => {
+            const fromEnd = chars.length - 1 - i;
+            const kind = /^[0-9]$/.test(char) ? "d" : `s${char}`;
+            return /* @__PURE__ */ jsx(Char, { char, className: cls, enter: mounted.current }, `${fromEnd}${kind}`);
+          }) })
+        ]
+      }
+    );
+  }
+);
+NumberTicker.displayName = "NumberTicker";
+
+export {
+  NumberTicker
+};

package/dist/chunk-MNEXMMLM.js

@@ -0,0 +1,23 @@
+'use client';
+
+// 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);
+  }, []);
+}
+
+export {
+  useMergedRefs
+};

package/dist/{chunk-PVTACENM.js → chunk-MTK3GHDQ.js}

@@ -11,8 +11,8 @@ var PageHeader = React.forwardRef(
     breadcrumb && /* @__PURE__ */ jsx("div", { children: breadcrumb }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)] truncate", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-text-muted)]", children: description })
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-on-surface)] truncate", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-on-surface-muted)]", children: description })
       ] }),
       actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
     ] })

package/dist/chunk-NA5UMOE5.js

@@ -0,0 +1,55 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Tag/Tag.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var tagVariants = cva(
+  "inline-flex items-center rounded-shape-min font-medium select-none whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0.5 text-xs",
+        md: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      },
+      tone: {
+        neutral: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]",
+        info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]",
+        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-[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: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Tag = React.forwardRef(
+  ({ className, size, tone = "neutral", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(tagVariants({ size, tone }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+export {
+  tagVariants,
+  Tag
+};

package/dist/{chunk-YJ3JQYAN.js → chunk-NGQKBDHA.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  toneTextClasses
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -6,17 +9,6 @@ import {
 // src/components/EyebrowChip/EyebrowChip.tsx
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var toneTextMap = {
-  neutral: "text-[var(--color-neutral-700)]",
-  info: "text-[var(--color-semantic-info-default)]",
-  success: "text-[var(--color-semantic-success-default)]",
-  warning: "text-[var(--color-semantic-warning-default)]",
-  danger: "text-[var(--color-semantic-error-default)]",
-  leap: "text-[var(--color-leap-700)]",
-  bookub: "text-[var(--color-bookub-700)]",
-  payub: "text-[var(--color-payub-700)]",
-  founderub: "text-[var(--color-founderub-700)]"
-};
 var EyebrowChip = React.forwardRef(
   ({ className, tone = "neutral", leadingIcon, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -26,8 +18,8 @@ var EyebrowChip = React.forwardRef(
         className: cn(
           "inline-flex items-center gap-1.5 rounded-full px-3 py-1",
           "text-xs font-semibold uppercase tracking-wider select-none",
-          "bg-[var(--color-bg-subtle)]",
-          toneTextMap[tone],
+          "bg-[var(--color-surface-container-low)]",
+          toneTextClasses[tone],
           className
         ),
         ...props,

package/dist/{chunk-7Q7ZF6BY.js → chunk-NNIFOMIH.js}

@@ -18,11 +18,11 @@ var textVariants = cva("", {
       label: "text-sm leading-none font-medium"
     },
     tone: {
-      default: "text-[var(--color-text-primary)]",
-      secondary: "text-[var(--color-text-secondary)]",
-      muted: "text-[var(--color-text-muted)]",
-      subtle: "text-[var(--color-text-subtle)]",
-      inverse: "text-[var(--color-text-inverse)]"
+      default: "text-[var(--color-on-surface)]",
+      secondary: "text-[var(--color-on-surface-variant)]",
+      muted: "text-[var(--color-on-surface-muted)]",
+      subtle: "text-[var(--color-outline)]",
+      inverse: "text-[var(--color-inverse-on-surface)]"
     },
     weight: {
       regular: "font-normal",
@@ -36,6 +36,14 @@ var textVariants = cva("", {
     tone: "default"
   }
 });
+var LINE_CLAMP = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
 var Text = React.forwardRef(
   ({
     size,
@@ -50,12 +58,13 @@ var Text = React.forwardRef(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "p";
-    const clampStyle = lineClamp !== void 0 ? {
+    const clampClass = lineClamp !== void 0 ? LINE_CLAMP[lineClamp] : void 0;
+    const clampStyle = lineClamp !== void 0 && !clampClass ? {
       display: "-webkit-box",
       WebkitLineClamp: lineClamp,
       WebkitBoxOrient: "vertical",
       overflow: "hidden"
-    } : {};
+    } : void 0;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -63,9 +72,10 @@ var Text = React.forwardRef(
         className: cn(
           textVariants({ size, tone, weight }),
           truncate && "truncate",
+          clampClass,
           className
         ),
-        style: { ...clampStyle, ...style },
+        style: clampStyle ? { ...clampStyle, ...style } : style,
         ...rest,
         children
       }

package/dist/{chunk-7L3CGIRA.js → chunk-NQPGELMP.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";
@@ -33,12 +32,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",
-          "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-dropdown-menu-content-transform-origin)]",
           className
         ),
         ...props
@@ -97,11 +91,11 @@ var CheckboxItem2 = React.forwardRef(function DropdownMenuCheckboxItem({ classNa
     RadixDropdownMenu.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(RadixDropdownMenu.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(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -113,10 +107,10 @@ var RadioItem2 = React.forwardRef(function DropdownMenuRadioItem({ className, ch
     RadixDropdownMenu.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(RadixDropdownMenu.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(RadixDropdownMenu.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
       ]
     }
@@ -136,7 +130,7 @@ var SubTrigger2 = React.forwardRef(function DropdownMenuSubTrigger({ className,
       ...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" })
       ]
     }
   );
@@ -151,12 +145,7 @@ var SubContent2 = React.forwardRef(function DropdownMenuSubContent({ 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-dropdown-menu-content-transform-origin)]",
         className
       ),
       ...props