@nexub/react 7.7.0 → 7.9.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.7.0",
+  "version": "7.9.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Chip/Chip.js

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 const chipVariants = cva(
-  "inline-flex items-center gap-1 rounded-shape-control select-none",
+  "inline-flex items-center gap-1 rounded-[var(--shape-pill,var(--shape-control))] select-none",
   {
     variants: {
       size: {

package/dist/components/FilterChip/FilterChip.js

@@ -12,7 +12,7 @@ const FilterChip = React.forwardRef(
       {
         className: cn(
           // Matches Chip; hover/press come from the state layer.
-          "nx-state-layer inline-flex items-center gap-1 rounded-shape-control border h-8 px-3 text-label-lg select-none",
+          "nx-state-layer inline-flex items-center gap-1 rounded-[var(--shape-pill,var(--shape-control))] border h-8 px-3 text-label-lg select-none",
           selected ? "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)] border-transparent" : "bg-[var(--color-surface-container-low)] text-[var(--color-on-surface-variant)] border-[var(--color-outline-variant)]"
         ),
         children: [
@@ -22,7 +22,7 @@ const FilterChip = React.forwardRef(
               ref,
               type: "button",
               className: cn(
-                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer rounded-shape-control text-current",
+                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer rounded-[var(--shape-pill,var(--shape-control))] text-current",
                 disabledText,
                 className
               ),

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,7 +21,7 @@ const Item = React.forwardRef(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-[var(--color-primary)] [[data-disabled]_&]:bg-[var(--color-text-disabled)]" }) })
+      children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "nx-dot-in block h-2 w-2 rounded-full bg-[var(--color-primary)] [[data-disabled]_&]:bg-[var(--color-text-disabled)]" }) })
     }
   )
 );

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -21,7 +21,7 @@ const Root = React.forwardRef(
         ref: useMergedRefs(ref, forwardedRef),
         type: "single",
         className: cn(
-          "relative inline-flex items-stretch rounded-shape-control bg-[var(--color-surface-container-high)] p-0.5",
+          "relative inline-flex items-stretch rounded-[var(--shape-pill,var(--shape-control))] bg-[var(--color-surface-container-high)] p-0.5",
           sizeMap[size],
           className
         ),
@@ -32,7 +32,7 @@ const Root = React.forwardRef(
             {
               "aria-hidden": "true",
               className: cn(
-                "pointer-events-none absolute inset-y-0.5 left-0 rounded-shape-control",
+                "pointer-events-none absolute inset-y-0.5 left-0 rounded-[var(--shape-pill,var(--shape-control))]",
                 "bg-[var(--color-surface-container-lowest)] shadow-elevation-1",
                 "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
                 "[[data-nx-indicator=ready]>&]:transition-[transform,width] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
@@ -54,7 +54,7 @@ const Item = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative z-10 inline-flex items-center justify-center rounded-shape-control select-none",
+          "relative z-10 inline-flex items-center justify-center rounded-[var(--shape-pill,var(--shape-control))] select-none",
           size === "sm" ? "px-3" : size === "lg" ? "px-5" : "px-4",
           "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
           "hover:text-[var(--color-on-surface)] data-[state=on]:text-[var(--color-on-surface)]",

package/dist/components/Switch/Switch.js

@@ -17,10 +17,11 @@ const switchVariants = cva(
   ],
   {
     variants: {
+      // --nx-switch-travel: the Signature full thumb's slide (track width - height).
       size: {
-        sm: "h-5 w-9",
-        md: "h-7 w-12",
-        lg: "h-8 w-14"
+        sm: "h-5 w-9 [--nx-switch-travel:16px]",
+        md: "h-7 w-12 [--nx-switch-travel:20px]",
+        lg: "h-8 w-14 [--nx-switch-travel:24px]"
       }
     },
     defaultVariants: { size: "md" }
@@ -50,7 +51,7 @@ const Switch = React.forwardRef(
     RadixSwitch.Root,
     {
       ref,
-      className: cn(switchVariants({ size }), "nx-hit", loading && "cursor-progress", className),
+      className: cn(switchVariants({ size }), "nx-switch nx-hit", loading && "cursor-progress", className),
       "aria-busy": loading || void 0,
       onClick: (e) => {
         onClick?.(e);
@@ -62,6 +63,7 @@ const Switch = React.forwardRef(
         {
           className: cn(
             thumbVariants({ size }),
+            "nx-switch-thumb",
             (loading || checkedIcon || uncheckedIcon) && "group/thumb flex items-center justify-center data-[state=checked]:text-[var(--color-primary)] data-[state=unchecked]:text-[var(--color-surface-container-highest)]"
           ),
           children: loading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(spinnerVariants({ size: "xs" }), "h-2/3 w-2/3 border-current border-t-transparent") }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Tabs/Tabs.js

@@ -27,7 +27,7 @@ const List = React.forwardRef(
           // Vertical: a column with the rule on the inline-end side.
           "data-[orientation=vertical]:w-auto data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col",
           "data-[orientation=vertical]:overflow-x-visible data-[orientation=vertical]:overflow-y-auto",
-          pill ? "w-fit max-w-full rounded-shape-control bg-[var(--color-surface-container-high)] p-0.5" : "border-b border-[var(--color-outline-variant)] data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
+          pill ? "w-fit max-w-full rounded-[var(--shape-pill,var(--shape-control))] bg-[var(--color-surface-container-high)] p-0.5" : "border-b border-[var(--color-outline-variant)] data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
           className
         ),
         ...props,
@@ -40,7 +40,7 @@ const List = React.forwardRef(
               {
                 "aria-hidden": "true",
                 className: cn(
-                  "pointer-events-none absolute left-0 top-0 rounded-shape-control",
+                  "pointer-events-none absolute left-0 top-0 rounded-[var(--shape-pill,var(--shape-control))]",
                   "bg-[var(--color-surface-container-lowest)] shadow-elevation-1",
                   "h-[var(--nx-ind-h,0px)] w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] translate-y-[var(--nx-ind-y,0px)] opacity-[var(--nx-ind-o,0)]",
                   "[[data-nx-indicator=ready]>&]:transition-[transform,width,height] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
@@ -118,7 +118,7 @@ const Trigger = React.forwardRef(
           "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap px-4 text-label-lg select-none",
           "group-data-[orientation=vertical]/tabs:justify-start",
           "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
-          pill ? "z-10 rounded-shape-control hover:text-[var(--color-on-surface)] data-[state=active]:text-[var(--color-on-surface)]" : cn(
+          pill ? "z-10 rounded-[var(--shape-pill,var(--shape-control))] hover:text-[var(--color-on-surface)] data-[state=active]:text-[var(--color-on-surface)]" : cn(
             "rounded-t-[var(--shape-field)] data-[state=active]:text-[var(--color-primary)]",
             "group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-[var(--shape-field)]"
           ),

package/dist/components/Toggle/Toggle.js

@@ -7,7 +7,7 @@ import { cn } from "../../utils/cn.js";
 const toggleVariants = cva(
   [
     // Pressable capsule; on = the secondary container (tonal selection).
-    "nx-state-layer nx-press relative inline-flex items-center justify-center gap-2 rounded-shape-control select-none",
+    "nx-state-layer nx-press relative inline-flex items-center justify-center gap-2 rounded-[var(--shape-pill,var(--shape-control))] select-none",
     "text-[var(--color-on-surface-variant)] transition-[background-color,color] duration-effects-fast ease-effects-fast",
     "data-[state=on]:bg-[var(--color-secondary-container)] data-[state=on]:text-[var(--color-on-secondary-container)]",
     "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"