@nexub/react 7.4.0 → 7.5.0

package/dist/components/Select/Select.js

@@ -2,37 +2,94 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixSelect from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "@nexub/icons";
+import { Check, ChevronDown, ChevronUp, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { field, fieldFocusVisible, fieldInvalid } from "../../utils/control.js";
 import { floatingSurface, menuLabel, menuSeparator } from "../../utils/surface.js";
-const Root = RadixSelect.Root;
-const Group = RadixSelect.Group;
-const Value = RadixSelect.Value;
-const Trigger = React.forwardRef(
-  ({ className, children, invalid, ...props }, ref) => /* @__PURE__ */ jsxs(
-    RadixSelect.Trigger,
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { IconButton } from "../IconButton/IconButton.js";
+const SelectContext = React.createContext({
+  clearable: false,
+  hasValue: false,
+  clear: () => {
+  },
+  query: "",
+  setQuery: () => {
+  }
+});
+const Root = ({ clearable = false, value, defaultValue, onValueChange, onOpenChange, ...props }) => {
+  const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const [query, setQuery] = React.useState("");
+  const ctx = React.useMemo(
+    () => ({ clearable, hasValue: Boolean(current), clear: () => setCurrent(""), query, setQuery }),
+    [clearable, current, setCurrent, query]
+  );
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RadixSelect.Root,
     {
-      ref,
-      className: cn(
-        "flex h-control-md w-full items-center justify-between gap-2 px-3.5 text-body-md",
-        field,
-        fieldFocusVisible,
-        // Open reads like focus: the 2px primary border.
-        "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
-        "data-[placeholder]:text-[var(--color-on-surface-muted)]",
-        "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
-        invalid && fieldInvalid,
-        "[&>span]:line-clamp-1",
-        className
-      ),
       ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 text-[var(--color-on-surface-variant)]", "aria-hidden": "true" }) })
-      ]
+      ...clearable ? { value: current ?? "", onValueChange: setCurrent } : { value, defaultValue, onValueChange },
+      onOpenChange: (open) => {
+        if (!open) setQuery("");
+        onOpenChange?.(open);
+      }
     }
-  )
+  ) });
+};
+Root.displayName = "Select.Root";
+const Group = RadixSelect.Group;
+const Value = RadixSelect.Value;
+const Trigger = React.forwardRef(
+  ({ className, children, invalid, ...props }, ref) => {
+    const ctx = React.useContext(SelectContext);
+    const messages = useNexubMessages();
+    const innerRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    const showClear = ctx.clearable && ctx.hasValue && !props.disabled;
+    const trigger = /* @__PURE__ */ jsxs(
+      RadixSelect.Trigger,
+      {
+        ref: mergedRef,
+        className: cn(
+          "flex h-control-md w-full items-center justify-between gap-2 px-3.5 text-body-md",
+          field,
+          fieldFocusVisible,
+          // Open reads like focus: the 2px primary border.
+          "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+          "data-[placeholder]:text-[var(--color-on-surface-muted)]",
+          "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+          invalid && fieldInvalid,
+          "[&>span]:line-clamp-1",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClear && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ms-auto w-control-xs shrink-0" }),
+          /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 text-[var(--color-on-surface-variant)]", "aria-hidden": "true" }) })
+        ]
+      }
+    );
+    if (!ctx.clearable) return trigger;
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      trigger,
+      showClear && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "xs",
+          label: messages.clearSelection,
+          className: "absolute end-9.5 top-1/2 -translate-y-1/2",
+          onClick: () => {
+            ctx.clear();
+            innerRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] });
+  }
 );
 Trigger.displayName = "Select.Trigger";
 const ScrollUpButton = React.forwardRef(
@@ -60,35 +117,66 @@ const ScrollDownButton = React.forwardRef(
 );
 ScrollDownButton.displayName = "Select.ScrollDownButton";
 const Content = React.forwardRef(
-  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(
-    RadixSelect.Content,
-    {
-      ref,
-      className: cn(
-        "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden",
-        floatingSurface,
-        "nx-motion nx-pop origin-[var(--radix-select-content-transform-origin)]",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
-        className
-      ),
-      position,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ScrollUpButton, {}),
-        /* @__PURE__ */ jsx(
-          RadixSelect.Viewport,
-          {
-            className: cn(
-              "p-1.5",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-            ),
-            children
-          }
+  ({ className, children, position = "popper", searchable, onKeyDown, ...props }, ref) => {
+    const ctx = React.useContext(SelectContext);
+    const messages = useNexubMessages();
+    const searchRef = React.useRef(null);
+    return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(
+      RadixSelect.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden",
+          floatingSurface,
+          "nx-motion nx-pop origin-[var(--radix-select-content-transform-origin)]",
+          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
+          className
         ),
-        /* @__PURE__ */ jsx(ScrollDownButton, {})
-      ]
-    }
-  ) })
+        position,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (searchable && !e.defaultPrevented && e.target !== searchRef.current && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            const input = searchRef.current;
+            if (!input) return;
+            e.preventDefault();
+            input.focus();
+            input.setRangeText(e.key, input.value.length, input.value.length, "end");
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+        },
+        ...props,
+        children: [
+          searchable && /* @__PURE__ */ jsx("div", { className: "p-1.5 pb-0", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              value: ctx.query,
+              onChange: (e) => ctx.setQuery(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key.length === 1 || e.key === "Home" || e.key === "End") e.stopPropagation();
+              },
+              placeholder: messages.searchPlaceholder,
+              "aria-label": messages.search,
+              className: cn("h-control-sm w-full px-3 text-body-sm", field, fieldFocusVisible)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ScrollUpButton, {}),
+          /* @__PURE__ */ jsx(
+            RadixSelect.Viewport,
+            {
+              className: cn(
+                "p-1.5",
+                position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
 );
 Content.displayName = "Select.Content";
 const Label = React.forwardRef(
@@ -103,24 +191,35 @@ const Label = React.forwardRef(
 );
 Label.displayName = "Select.Label";
 const Item = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-    RadixSelect.Item,
-    {
-      ref,
-      className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-[10px] py-2 ps-8 pe-2 text-body-sm text-[var(--color-on-surface)] outline-none",
-        // Highlight = the on-surface state layer at hover opacity.
-        "focus:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
-        "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
-        /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
-      ]
-    }
-  )
+  ({ className, children, description, ...props }, ref) => {
+    const { query } = React.useContext(SelectContext);
+    const descriptionId = React.useId();
+    const text = props.textValue ?? (typeof children === "string" ? children : void 0);
+    const filtered = Boolean(query.trim()) && text !== void 0 && !text.toLowerCase().includes(query.trim().toLowerCase());
+    return /* @__PURE__ */ jsxs(
+      RadixSelect.Item,
+      {
+        ref,
+        "aria-describedby": description ? descriptionId : void 0,
+        className: cn(
+          "relative flex w-full cursor-default select-none items-center rounded-[10px] py-2 ps-8 pe-2 text-body-sm text-[var(--color-on-surface)] outline-none",
+          // Highlight = the on-surface state layer at hover opacity.
+          "focus:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]",
+          className,
+          filtered && "hidden"
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
+          description ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
+            /* @__PURE__ */ jsx("span", { id: descriptionId, className: "text-label-sm text-[var(--color-on-surface-muted)]", children: description })
+          ] }) : /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
+        ]
+      }
+    );
+  }
 );
 Item.displayName = "Select.Item";
 const Separator = React.forwardRef(

package/dist/components/Slider/Slider.d.ts

@@ -1,7 +1,17 @@
 import * as React from 'react';
 import * as RadixSlider from '@radix-ui/react-slider';
+export type SliderMark = number | {
+    value: number;
+    label?: string;
+};
 export interface SliderProps extends RadixSlider.SliderProps {
     /** Accessible name per thumb (e.g. ['Minimum', 'Maximum']). Falls back to `aria-label`. */
     thumbLabels?: string[];
+    /** Ticks along the track, optionally labelled (`[0, { value: 50, label: '50%' }, 100]`). */
+    marks?: SliderMark[];
+    /** Value bubble above each thumb: `true` always, `'hover'` on hover, focus and drag. */
+    showValue?: boolean | 'hover';
+    /** Formats the bubble and each thumb's `aria-valuetext`. */
+    formatValue?: (value: number) => string;
 }
 export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Slider/Slider.js

@@ -4,25 +4,70 @@ import * as React from "react";
 import * as RadixSlider from "@radix-ui/react-slider";
 import { cn } from "../../utils/cn.js";
 const Slider = React.forwardRef(
-  ({ className, thumbLabels, "aria-label": ariaLabel, ...props }, ref) => {
+  ({ className, thumbLabels, marks, showValue, formatValue, "aria-label": ariaLabel, onValueChange, ...props }, ref) => {
+    const { min = 0, max = 100, inverted } = props;
+    const [own, setOwn] = React.useState(props.defaultValue ?? [min]);
+    const values = props.value ?? own;
     const count = (props.value ?? props.defaultValue ?? [0]).length;
+    const format = formatValue ?? String;
+    const at = (v) => {
+      const p = (v - min) / (max - min) * 100;
+      const pct = inverted ? 100 - p : p;
+      return { insetInlineStart: `calc(${pct}% + ${(0.5 - pct / 100) * 1.25}rem)` };
+    };
+    const list = marks?.map((m) => typeof m === "number" ? { value: m } : m);
+    const labelled = list?.some((m) => m.label);
     return /* @__PURE__ */ jsxs(
       RadixSlider.Root,
       {
         ref,
-        className: cn("group relative flex h-control-sm w-full touch-none select-none items-center", className),
+        className: cn(
+          "group relative flex h-control-sm w-full touch-none select-none items-center",
+          labelled && "mb-5",
+          className
+        ),
+        onValueChange: (v) => {
+          setOwn(v);
+          onValueChange?.(v);
+        },
         ...props,
         children: [
           /* @__PURE__ */ jsx(RadixSlider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-[var(--color-surface-container-highest)]", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full bg-[var(--color-primary)] group-data-[disabled]:bg-[var(--color-text-disabled)]" }) }),
+          list?.map((m) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-mark": m.value,
+              className: "pointer-events-none absolute inset-y-0 flex w-0 flex-col items-center justify-center",
+              style: at(m.value),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "h-1 w-1 shrink-0 rounded-full bg-[var(--color-on-surface-muted)]" }),
+                m.label && /* @__PURE__ */ jsx("span", { className: "absolute top-full whitespace-nowrap text-label-sm text-[var(--color-on-surface-muted)]", children: m.label })
+              ]
+            },
+            m.value
+          )),
           Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
             RadixSlider.Thumb,
             {
               "aria-label": thumbLabels?.[i] ?? ariaLabel,
+              "aria-valuetext": formatValue && values[i] !== void 0 ? formatValue(values[i]) : void 0,
               className: cn(
-                "nx-state-layer block h-5 w-5 rounded-full border-2 border-[var(--color-surface-container-lowest)] bg-[var(--color-primary)] text-[var(--color-primary)] shadow-elevation-1",
+                "nx-state-layer group/thumb relative block h-5 w-5 rounded-full border-2 border-[var(--color-surface-container-lowest)] bg-[var(--color-primary)] text-[var(--color-primary)] shadow-elevation-1",
                 "before:-inset-2.5 cursor-grab active:cursor-grabbing",
                 // Opaque disabled knob (text-disabled is translucent and would show the range through it).
                 "group-data-[disabled]:pointer-events-none group-data-[disabled]:bg-[color-mix(in_srgb,var(--color-on-surface)_38%,var(--color-surface))]"
+              ),
+              children: showValue && values[i] !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-shape-tooltip bg-[var(--color-inverse-surface)] px-2 py-1 text-label-md text-[var(--color-inverse-on-surface)] shadow-elevation-1 transition-opacity",
+                    showValue === "hover" && "opacity-0 group-hover/thumb:opacity-100 group-focus/thumb:opacity-100"
+                  ),
+                  children: format(values[i])
+                }
               )
             },
             i

package/dist/components/Slider/index.d.ts

@@ -1,2 +1,2 @@
 export { Slider } from './Slider.js';
-export type { SliderProps } from './Slider.js';
+export type { SliderProps, SliderMark } from './Slider.js';

package/dist/components/Switch/Switch.d.ts

@@ -8,5 +8,11 @@ export declare const thumbVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SwitchProps extends RadixSwitch.SwitchProps, VariantProps<typeof switchVariants> {
+    /** Spinner in the thumb and `aria-busy`; clicks don't toggle while loading. Stays focusable. */
+    loading?: boolean;
+    /** Small icon inside the thumb while on. */
+    checkedIcon?: React.ReactNode;
+    /** Small icon inside the thumb while off. */
+    uncheckedIcon?: React.ReactNode;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import { cn } from "../../utils/cn.js";
 import { cva } from "class-variance-authority";
+import { spinnerVariants } from "../Spinner/Spinner.js";
 const switchVariants = cva(
   // Off: tonal track with a 2px outline (>= 3:1, WCAG 1.4.11). On: primary.
   // Focus = the global ring (it follows the capsule).
@@ -43,8 +44,34 @@ const thumbVariants = cva(
     defaultVariants: { size: "md" }
   }
 );
+const thumbSlot = "hidden h-full w-full items-center justify-center [&>svg]:h-2/3 [&>svg]:w-2/3";
 const Switch = React.forwardRef(
-  ({ 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 })) }) })
+  ({ className, size, loading, checkedIcon, uncheckedIcon, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSwitch.Root,
+    {
+      ref,
+      className: cn(switchVariants({ size }), "nx-hit", loading && "cursor-progress", className),
+      "aria-busy": loading || void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (loading) e.preventDefault();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadixSwitch.Thumb,
+        {
+          className: cn(
+            thumbVariants({ size }),
+            (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: [
+            checkedIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(thumbSlot, "group-data-[state=checked]/thumb:flex"), children: checkedIcon }),
+            uncheckedIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(thumbSlot, "group-data-[state=unchecked]/thumb:flex"), children: uncheckedIcon })
+          ] })
+        }
+      )
+    }
+  )
 );
 Switch.displayName = "Switch";
 export {

package/dist/index.d.ts

@@ -180,7 +180,7 @@ export { Checkbox } from './components/Checkbox/index.js';
 export type { CheckboxProps } from './components/Checkbox/index.js';
 export { RadioGroup } from './components/RadioGroup/index.js';
 export { Slider } from './components/Slider/index.js';
-export type { SliderProps } from './components/Slider/index.js';
+export type { SliderProps, SliderMark } from './components/Slider/index.js';
 export { Toggle, toggleVariants } from './components/Toggle/index.js';
 export type { ToggleProps } from './components/Toggle/index.js';
 export { ToggleGroup } from './components/ToggleGroup/index.js';