@nexub/react 7.4.0 → 7.6.0

package/dist/components/Tabs/Tabs.js

@@ -9,63 +9,126 @@ const Root = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className), ...props })
 );
 Root.displayName = "Tabs.Root";
+const VariantContext = React.createContext("line");
 const List = React.forwardRef(
-  ({ className, children, ...props }, forwardedRef) => {
+  ({ className, children, variant = "line", ...props }, forwardedRef) => {
     const ref = React.useRef(null);
     useSlidingIndicator(ref, '[data-state="active"]');
-    return /* @__PURE__ */ jsxs(
+    useOverflow(ref);
+    const pill = variant === "pill";
+    return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
       RadixTabs.List,
       {
         ref: useMergedRefs(ref, forwardedRef),
+        "data-variant": variant,
         className: cn(
-          "group/tabs relative flex w-full items-stretch justify-start overflow-x-auto",
-          "border-b border-[var(--color-outline-variant)]",
+          // nx-scroll-fade: edge fades while more tabs hide past an edge (@nexub/themes core).
+          "nx-scroll-fade group/tabs relative flex w-full items-stretch justify-start overflow-x-auto",
           // 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",
-          "data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
+          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",
           className
         ),
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "pointer-events-none absolute bottom-0 left-0 h-[3px] rounded-t-full bg-[var(--color-primary)]",
-                "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
-                "group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:bottom-auto group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:end-0",
-                "group-data-[orientation=vertical]/tabs:h-[var(--nx-ind-h,0px)] group-data-[orientation=vertical]/tabs:w-[3px] group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-full",
-                "group-data-[orientation=vertical]/tabs:translate-x-0 group-data-[orientation=vertical]/tabs:translate-y-[var(--nx-ind-y,0px)]",
-                "[[data-nx-indicator=ready]>&]:transition-[transform,width,height] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
-              )
-            }
+          pill ? (
+            /* The thumb (as SegmentedControl): one raised surface behind the active tab, either orientation. */
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "pointer-events-none absolute left-0 top-0 rounded-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"
+                )
+              }
+            )
+          ) : (
+            /* The indicator: a 3px primary bar that slides under (or beside) the active tab. */
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "pointer-events-none absolute bottom-0 left-0 h-[3px] rounded-t-full bg-[var(--color-primary)]",
+                  "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
+                  "group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:bottom-auto group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:end-0",
+                  "group-data-[orientation=vertical]/tabs:h-[var(--nx-ind-h,0px)] group-data-[orientation=vertical]/tabs:w-[3px] group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-full",
+                  "group-data-[orientation=vertical]/tabs:translate-x-0 group-data-[orientation=vertical]/tabs:translate-y-[var(--nx-ind-y,0px)]",
+                  "[[data-nx-indicator=ready]>&]:transition-[transform,width,height] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
+                )
+              }
+            )
           )
         ]
       }
-    );
+    ) });
   }
 );
 List.displayName = "Tabs.List";
+function useOverflow(ref) {
+  React.useEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const sync = () => {
+      const v = root.dataset.orientation === "vertical";
+      const pos = Math.abs(v ? root.scrollTop : root.scrollLeft);
+      const max = v ? root.scrollHeight - root.clientHeight : root.scrollWidth - root.clientWidth;
+      const edges = [pos > 1 && "start", pos < max - 1 && "end"].filter(Boolean).join(" ");
+      if (edges) root.dataset.nxOverflow = edges;
+      else delete root.dataset.nxOverflow;
+    };
+    const reveal = (records) => {
+      const tab = records.map((r2) => r2.target).find((t2) => t2.getAttribute("role") === "tab" && t2.dataset.state === "active");
+      if (!tab) return;
+      const r = root.getBoundingClientRect();
+      const t = tab.getBoundingClientRect();
+      const left = t.left < r.left ? t.left - r.left : t.right > r.right ? t.right - r.right : 0;
+      const top = t.top < r.top ? t.top - r.top : t.bottom > r.bottom ? t.bottom - r.bottom : 0;
+      if (!left && !top) return;
+      const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      root.scrollBy?.({ left, top, behavior: reduce ? "auto" : "smooth" });
+    };
+    sync();
+    root.addEventListener("scroll", sync, { passive: true });
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+    ro?.observe(root);
+    const mo = new MutationObserver(reveal);
+    mo.observe(root, { subtree: true, attributes: true, attributeFilter: ["data-state"] });
+    return () => {
+      root.removeEventListener("scroll", sync);
+      ro?.disconnect();
+      mo.disconnect();
+    };
+  }, [ref]);
+}
 const Trigger = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixTabs.Trigger,
-    {
-      ref,
-      className: cn(
-        // State layer for hover/press; focus = the global ring.
-        "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-[var(--shape-field)] px-4 text-label-lg select-none",
-        "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
-        "data-[state=active]:text-[var(--color-primary)]",
-        "group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-[var(--shape-field)]",
-        "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => {
+    const pill = React.useContext(VariantContext) === "pill";
+    return /* @__PURE__ */ jsx(
+      RadixTabs.Trigger,
+      {
+        ref,
+        className: cn(
+          // State layer for hover/press; focus = the global ring.
+          "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(
+            "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)]"
+          ),
+          "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 Trigger.displayName = "Tabs.Trigger";
 const Content = React.forwardRef(

package/dist/components/Text/Text.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 export declare const textVariants: (props?: ({
     size?: "body" | "label" | "caption" | "body-lg" | "body-sm" | null | undefined;
-    tone?: "default" | "subtle" | "secondary" | "muted" | "inverse" | null | undefined;
+    tone?: "default" | "secondary" | "subtle" | "muted" | "inverse" | null | undefined;
     weight?: "bold" | "regular" | "medium" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof textVariants> {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,11 +4,18 @@ declare function Provider({ delayDuration, skipDelayDuration, ...props }: RadixT
 declare const Root: React.FC<RadixTooltip.TooltipProps>;
 declare const Trigger: React.ForwardRefExoticComponent<RadixTooltip.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Content: React.ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
-interface TooltipProps {
-    label: string;
+export interface TooltipProps {
+    /** The tip, or the title when `description` is set. */
+    label: React.ReactNode;
+    /** Secondary line under the title (rich tooltip). */
+    description?: React.ReactNode;
+    /** Keyboard shortcut, shown as a Kbd at the end, e.g. "⌘S". */
+    shortcut?: React.ReactNode;
+    /** Point at the trigger with a small arrow. */
+    arrow?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     delayDuration?: number;
     children: React.ReactElement;
 }
-declare function Tooltip({ label, side, delayDuration, children }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ label, description, shortcut, arrow, side, delayDuration, children }: TooltipProps): React.JSX.Element;
 export { Provider, Root, Trigger, Content, Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -3,8 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { cn } from "../../utils/cn.js";
+import { Kbd } from "../Kbd/Kbd.js";
+const InProvider = React.createContext(false);
 function Provider({ delayDuration = 400, skipDelayDuration = 300, ...props }) {
-  return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration, skipDelayDuration, ...props });
+  return /* @__PURE__ */ jsx(InProvider.Provider, { value: true, children: /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration, skipDelayDuration, ...props }) });
 }
 const Root = RadixTooltip.Root;
 const Trigger = RadixTooltip.Trigger;
@@ -26,11 +28,21 @@ const Content = React.forwardRef(
   }
 );
 Content.displayName = "Tooltip.Content";
-function Tooltip({ label, side = "top", delayDuration = 400, children }) {
-  return /* @__PURE__ */ jsxs(Root, { delayDuration, children: [
+function Tooltip({ label, description, shortcut, arrow, side = "top", delayDuration = 400, children }) {
+  const tip = /* @__PURE__ */ jsxs(Root, { delayDuration, children: [
     /* @__PURE__ */ jsx(Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(Content, { side, children: label }) })
+    /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs(Content, { side, className: cn(description != null && "max-w-xs"), children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3", children: [
+        description == null ? label : /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "text-body-sm", children: description })
+        ] }),
+        shortcut != null && /* @__PURE__ */ jsx(Kbd, { className: "ms-auto border-current bg-transparent text-inherit shadow-none", children: shortcut })
+      ] }),
+      arrow && /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: "fill-[var(--color-inverse-surface)]" })
+    ] }) })
   ] });
+  return React.useContext(InProvider) ? tip : /* @__PURE__ */ jsx(Provider, { children: tip });
 }
 export {
   Content,

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';
@@ -259,3 +259,5 @@ export type { FadeProps, SlideProps, SlideDirection, ScaleProps, CollapseProps,
 export type { DataTableColumn } from './components/DataTable/index.js';
 export type { TableRootProps } from './components/Table/index.js';
 export type { PromiseToastOptions } from './components/Toast/index.js';
+export type { CommandPaletteItemProps, CommandPalettePageProps } from './components/CommandPalette/index.js';
+export type { EmptyStateRootProps } from './components/EmptyState/EmptyState.js';