@nexub/react 8.4.0 → 8.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.4.0",
+  "version": "8.6.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/Card/Card.js

@@ -10,7 +10,7 @@ import { usePointerSheen } from "../../hooks/usePointerSheen.js";
 const cardVariants = cva(
   // In-flow content: tone + a soft alpha hairline, no shadow (shadows are for floating layers).
   // A CardLink inside stretches over the card; the card then carries its focus ring.
-  "rounded-[var(--card-radius,var(--shape-container))] bg-[var(--card-bg,var(--color-surface-elevated))] border border-[color:var(--card-border,color-mix(in_srgb,var(--color-outline-variant)_60%,transparent))] text-[var(--card-fg,var(--color-on-surface))] has-[[data-card-link]]:relative has-[[data-card-link]:focus-visible]:outline has-[[data-card-link]:focus-visible]:outline-[3px] has-[[data-card-link]:focus-visible]:outline-offset-2 has-[[data-card-link]:focus-visible]:outline-[var(--color-primary)]",
+  "rounded-[var(--card-radius,var(--shape-container))] bg-[var(--card-bg,var(--color-surface-elevated))] border border-[color:var(--card-border,color-mix(in_srgb,var(--color-outline-variant)_60%,transparent))] text-[var(--card-fg,var(--color-on-surface))] has-[[data-card-link]]:relative has-[[data-card-link]:focus-visible]:outline has-[[data-card-link]:focus-visible]:outline-3 has-[[data-card-link]:focus-visible]:outline-offset-2 has-[[data-card-link]:focus-visible]:outline-[var(--color-primary)]",
   {
     variants: {
       variant: {

package/dist/components/DataTable/DataTable.js

@@ -35,7 +35,7 @@ const alignJustify = {
 };
 const pagerButton = cn(
   pressable,
-  "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-[44px] text-label-lg text-[var(--color-on-surface)]",
+  "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-11 text-label-lg text-[var(--color-on-surface)]",
   disabledContainer
 );
 const TableRoot = Table.Root;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -22,6 +22,9 @@ export declare function useCalendarLocale(localeProp?: Locale): {
 };
 export interface DatePickerProps {
     value?: Date;
+    /** Called with the new value. */
+    onValueChange?: (date: Date | undefined) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (date: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;

package/dist/components/DatePicker/DatePicker.js

@@ -88,6 +88,7 @@ const calendarClassNames = {
 const DatePicker = React.forwardRef(
   function DatePicker2({
     value,
+    onValueChange,
     onChange,
     placeholder: placeholderProp,
     disabled = false,
@@ -102,6 +103,10 @@ const DatePicker = React.forwardRef(
     typeable = false
   }, ref) {
     const [open, setOpen] = React.useState(false);
+    const change = (v) => {
+      onValueChange?.(v);
+      onChange?.(v);
+    };
     const messages = useNexubMessages();
     const placeholder = placeholderProp ?? messages.pickDate;
     const calendar = useCalendarLocale(localeProp);
@@ -112,11 +117,11 @@ const DatePicker = React.forwardRef(
     const invalid = typed !== void 0 && (!isValid(typed) || minDate !== void 0 && typed < minDate || maxDate !== void 0 && typed > maxDate || disabledDates !== void 0 && dateMatchModifiers(typed, disabledDates));
     const commit = () => {
       if (text === null || invalid) return;
-      onChange?.(typed);
+      change(typed);
       setText(null);
     };
     const pick = (date) => {
-      onChange?.(date);
+      change(date);
       setText(null);
       setOpen(false);
     };

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -3,6 +3,9 @@ import type { Locale } from 'date-fns';
 export interface DateTimePickerProps {
     /** Date and time in the reader's local time. */
     value?: Date;
+    /** Called with the new value. */
+    onValueChange?: (value: Date | undefined) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (value: Date | undefined) => void;
     /** Time used when a date is picked first. @default '09:00' */
     defaultTime?: string;
@@ -17,4 +20,4 @@ export interface DateTimePickerProps {
     locale?: Locale;
 }
 /** A DatePicker and a TimePicker that edit one `Date` together. */
-export declare function DateTimePicker({ value, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;
+export declare function DateTimePicker({ value, onValueChange, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -15,6 +15,7 @@ const withTime = (d, time) => {
 };
 function DateTimePicker({
   value,
+  onValueChange,
   onChange,
   defaultTime = "09:00",
   minuteStep,
@@ -26,6 +27,10 @@ function DateTimePicker({
   className,
   locale
 }) {
+  const change = (v) => {
+    onValueChange?.(v);
+    onChange?.(v);
+  };
   const messages = useNexubMessages();
   const intlLocale = useIntlLocale();
   const [pendingTime, setPendingTime] = React.useState(defaultTime);
@@ -37,7 +42,7 @@ function DateTimePicker({
       {
         "aria-label": messages.dateLabel,
         value,
-        onChange: (date) => onChange?.(date ? withTime(date, time) : void 0),
+        onValueChange: (date) => change(date ? withTime(date, time) : void 0),
         minDate,
         maxDate,
         disabled,
@@ -54,7 +59,7 @@ function DateTimePicker({
         disabled,
         onValueChange: (next) => {
           if (!next) return;
-          if (value) onChange?.(withTime(value, next));
+          if (value) change(withTime(value, next));
           else setPendingTime(next);
         }
       }

package/dist/components/FileUpload/FileUpload.js

@@ -115,7 +115,7 @@ const Dropzone = React.forwardRef(
           className: cn(
             // Hover/press = the state layer.
             "nx-state-layer rounded-shape-container border-2 border-dashed text-center text-[var(--color-on-surface)] transition-colors",
-            "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-[3px] has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
+            "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-3 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
             isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
             className
           ),

package/dist/components/MediaCard/MediaCard.js

@@ -20,7 +20,7 @@ const MediaCard = React.forwardRef(
         ref,
         className: cn(
           "group relative grid overflow-hidden rounded-shape-container border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] bg-[var(--color-surface-container-high)]",
-          href && "shadow-elevation-1 transition-[box-shadow,transform] duration-effects-fast ease-effects-fast hover:shadow-elevation-2 hover:duration-spatial-default hover:ease-spatial-default motion-safe:hover:-translate-y-0.5 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-[3px] has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[var(--color-primary)]",
+          href && "shadow-elevation-1 transition-[box-shadow,transform] duration-effects-fast ease-effects-fast hover:shadow-elevation-2 hover:duration-spatial-default hover:ease-spatial-default motion-safe:hover:-translate-y-0.5 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-3 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[var(--color-primary)]",
           className
         ),
         ...props,

package/dist/components/NumberInput/NumberInput.d.ts

@@ -9,6 +9,9 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     showSteppers?: boolean;
     value?: number;
     defaultValue?: number;
+    /** Called with the new value. */
+    onValueChange?: (value: number) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (value: number) => void;
     invalid?: boolean;
 }

package/dist/components/NumberInput/NumberInput.js

@@ -26,19 +26,24 @@ const NumberInput = React.forwardRef(
     showSteppers = false,
     value,
     defaultValue = 0,
+    onValueChange,
     onChange,
     invalid,
     disabled,
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const change = (v) => {
+      onValueChange?.(v);
+      onChange?.(v);
+    };
     const messages = useNexubMessages();
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
     const commit = (next) => {
       const clamped = clampValue(next, min, max);
       if (!controlled) setInternalValue(clamped);
-      onChange?.(clamped);
+      change(clamped);
     };
     const handleChange = (e) => {
       const parsed = parseFloat(e.target.value);

package/dist/components/Spinner/Spinner.js

@@ -17,7 +17,7 @@ const spinnerVariants = cva(
         xs: "h-3 w-3 border-[1.5px]",
         sm: "h-4 w-4 border-2",
         md: "h-6 w-6 border-2",
-        lg: "h-8 w-8 border-[3px]",
+        lg: "h-8 w-8 border-3",
         xl: "h-10 w-10 border-4"
       },
       tone: {

package/dist/components/StreamingText/StreamingText.js

@@ -36,7 +36,7 @@ const StreamingText = React.forwardRef(
             {
               "aria-hidden": "true",
               "data-caret": "",
-              className: "nx-caret ms-0.5 inline-block h-[1em] w-[2px] align-text-bottom rounded-full bg-[var(--color-primary)] motion-reduce:animate-none"
+              className: "nx-caret ms-0.5 inline-block h-[1em] w-0-5 align-text-bottom rounded-full bg-[var(--color-primary)] motion-reduce:animate-none"
             }
           )
         ]

package/dist/components/Table/Table.js

@@ -93,7 +93,7 @@ const Head = React.forwardRef(
     {
       ref,
       className: cn(
-        "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0-5",
         className
       ),
       ...props
@@ -107,7 +107,7 @@ const Cell = React.forwardRef(
     {
       ref,
       className: cn(
-        "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0-5",
         className
       ),
       ...props

package/dist/components/Textarea/Textarea.js

@@ -15,9 +15,9 @@ const textareaVariants = cva(
   {
     variants: {
       size: {
-        sm: "px-3 py-1.5 text-body-sm min-h-[64px]",
-        md: "px-3.5 py-2 text-body-md min-h-[80px]",
-        lg: "px-4 py-2.5 text-body-md min-h-[96px]"
+        sm: "px-3 py-1.5 text-body-sm min-h-16",
+        md: "px-3.5 py-2 text-body-md min-h-20",
+        lg: "px-4 py-2.5 text-body-md min-h-24"
       },
       invalid: {
         true: fieldInvalid

package/dist/components/Toast/Toast.js

@@ -64,7 +64,7 @@ const Action = React.forwardRef(
     {
       ref,
       className: cn(
-        "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
+        "nx-state-layer relative inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
         className
       ),
       ...props

package/dist/components/Toast/Toaster.js

@@ -198,7 +198,7 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
               {
                 altText: action.label,
                 onClick: action.onClick,
-                className: "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
+                className: "nx-state-layer relative inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
                 children: action.label
               }
             ),

package/dist/components/TreeView/TreeView.js

@@ -220,7 +220,7 @@ function TreeView({
                   {
                     "aria-hidden": "true",
                     className: cn(
-                      "inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border-2",
+                      "inline-flex size-4 shrink-0 items-center justify-center rounded-shape-min border-2",
                       isChecked || mixed ? "border-[var(--color-primary)] bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "border-[var(--color-outline)]"
                     ),
                     children: isChecked ? /* @__PURE__ */ jsx(Check, { size: "xs" }) : mixed ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : null