@plexui/ui 0.2.1 → 0.4.0

package/dist/es/components/Tabs/Tabs.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ToggleGroup } from "radix-ui";
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { useResizeObserver } from "usehooks-ts";
+import { handlePressableMouseEnter, waitForAnimationFrame } from "../../lib/helpers";
+import {} from "../../types";
+import { LoadingIndicator } from "../Indicator";
+import s from "./Tabs.module.css";
+export const Tabs = ({ value, onChange, children, variant = "segmented", orientation = "horizontal", block, pill = true, size = "md", gutterSize, className, onClick, ...restProps }) => {
+    const rootRef = useRef(null);
+    const thumbRef = useRef(null);
+    const prevSizeRef = useRef(size);
+    const isVertical = orientation === "vertical";
+    const applyThumbSizing = useCallback((attemptScroll) => {
+        const root = rootRef.current;
+        const thumb = thumbRef.current;
+        if (!root || !thumb) {
+            return;
+        }
+        // Get selected node
+        const activeNode = root?.querySelector('[data-state="on"]');
+        // Impossible
+        if (!activeNode) {
+            return;
+        }
+        if (isVertical) {
+            const rootHeight = root.clientHeight;
+            let targetHeight = Math.floor(activeNode.clientHeight);
+            const targetOffset = activeNode.offsetTop;
+            // Detect subpixel edge case
+            if (rootHeight - (targetHeight + targetOffset) < 2) {
+                targetHeight = targetHeight - 1;
+            }
+            thumb.style.height = `${Math.floor(targetHeight)}px`;
+            thumb.style.width = "";
+            thumb.style.transform = `translateY(${targetOffset}px)`;
+            // Scroll into view if needed
+            if (root.scrollHeight > rootHeight) {
+                const buffer = rootHeight * 0.15;
+                const scrollTop = root.scrollTop;
+                const top = activeNode.offsetTop;
+                const bottom = top + targetHeight;
+                if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {
+                    if (attemptScroll) {
+                        activeNode.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" });
+                    }
+                }
+            }
+        }
+        else {
+            const rootWidth = root.clientWidth;
+            let targetWidth = Math.floor(activeNode.clientWidth);
+            const targetOffset = activeNode.offsetLeft;
+            // Detect if the thumb is moving too far to the edge of the container.
+            // This would most commonly be due to subpixel widths adding up to excessive distance.
+            if (rootWidth - (targetWidth + targetOffset) < 2) {
+                targetWidth = targetWidth - 1;
+            }
+            thumb.style.width = `${Math.floor(targetWidth)}px`;
+            thumb.style.height = "";
+            thumb.style.transform = `translateX(${targetOffset}px)`;
+            // If the control is scrollable, ensure the active option is visible
+            if (root.scrollWidth > rootWidth) {
+                // Only scroll items near the edge, but not the inner 2/3.
+                const buffer = rootWidth * 0.15;
+                const scrollLeft = root.scrollLeft;
+                const left = activeNode.offsetLeft;
+                const right = left + targetWidth;
+                if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {
+                    // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting
+                    if (attemptScroll) {
+                        activeNode.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" });
+                    }
+                }
+            }
+        }
+    }, [isVertical]);
+    useResizeObserver({
+        // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663
+        ref: rootRef,
+        onResize: () => {
+            const thumb = thumbRef.current;
+            if (!thumb) {
+                return;
+            }
+            // Perform the size update instantly
+            const currentTransition = thumb.style.transition;
+            thumb.style.transition = "";
+            applyThumbSizing(false);
+            thumb.style.transition = currentTransition;
+        },
+    });
+    const transitionProperty = isVertical
+        ? "height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)"
+        : "width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)";
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const thumb = thumbRef.current;
+        if (!root || !thumb) {
+            return;
+        }
+        const sizeChanged = prevSizeRef.current !== size;
+        prevSizeRef.current = size;
+        if (sizeChanged) {
+            // Size changed - disable transition, wait for CSS, then apply sizing
+            const currentTransition = thumb.style.transition;
+            thumb.style.transition = "";
+            waitForAnimationFrame(() => {
+                applyThumbSizing(false);
+                waitForAnimationFrame(() => {
+                    thumb.style.transition = currentTransition;
+                });
+            });
+        }
+        else {
+            // Normal update (value change, etc.)
+            waitForAnimationFrame(() => {
+                applyThumbSizing(!!thumb.style.transition);
+                // Apply transition after initial calculation is set
+                if (!thumb.style.transition) {
+                    waitForAnimationFrame(() => {
+                        thumb.style.transition = transitionProperty;
+                    });
+                }
+            });
+        }
+    }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty]);
+    const handleValueChange = (nextValue) => {
+        // Only trigger onChange when a value exists
+        // Disallow toggling off enabled items
+        if (nextValue && onChange)
+            onChange(nextValue);
+    };
+    // Only apply pill for segmented variant
+    const isPill = variant === "segmented" && pill;
+    return (_jsxs(ToggleGroup.Root, { ref: rootRef, className: clsx(s.Tabs, className), type: "single", value: value, loop: false, onValueChange: handleValueChange, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-block": block ? "" : undefined, "data-pill": isPill ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, ...restProps, children: [_jsx("div", { className: s.TabsThumb, ref: thumbRef }), children] }));
+};
+// Type guard for badge object form
+const isBadgeObject = (badge) => {
+    return badge != null && typeof badge === "object" && "content" in badge;
+};
+const Tab = ({ children, icon, badge, ...restProps }) => {
+    // Normalize badge prop
+    const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null;
+    return (_jsx(ToggleGroup.Item, { className: s.Tab, ...restProps, onPointerEnter: handlePressableMouseEnter, children: _jsxs("span", { className: s.TabContent, children: [icon, children && _jsx("span", { children: children }), badgeProps && (_jsx("span", { className: s.TabBadge, "data-color": badgeProps.color ?? "secondary", "data-variant": badgeProps.variant ?? "soft", "data-pill": badgeProps.pill ? "" : undefined, children: badgeProps.loading ? _jsx(LoadingIndicator, {}) : badgeProps.content }))] }) }));
+};
+// Attach sub-components
+Tabs.Tab = Tab;
+// Backward-compat alias
+Tabs.Option = Tab;
+//# sourceMappingURL=Tabs.js.map

package/dist/es/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { ToggleGroup } from \"radix-ui\"\nimport { useCallback, useLayoutEffect, useRef } from \"react\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { handlePressableMouseEnter, waitForAnimationFrame } from \"../../lib/helpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport s from \"./Tabs.module.css\"\n\nexport type SizeVariant = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type TabsVariant = \"segmented\" | \"underline\"\nexport type TabsOrientation = \"horizontal\" | \"vertical\"\n\nexport type TabsProps<T extends string> = {\n  /**\n   * Controlled value for the group\n   */\n  \"value\": T\n  /** Callback for when a new value is selected */\n  \"onChange\"?: (nextValue: T) => void\n  /** Callback any time the control is clicked (even if a new value was not selected) */\n  \"onClick\"?: () => void\n  /**\n   * Text read aloud to screen readers when the control is focused\n   */\n  \"aria-label\": string\n  /**\n   * Visual variant of the tab group\n   * - `\"segmented\"` — background container with sliding highlight (default)\n   * - `\"underline\"` — no background, animated line indicator under active tab\n   * @default \"segmented\"\n   */\n  \"variant\"?: TabsVariant\n  /**\n   * Orientation of the tab layout\n   * @default \"horizontal\"\n   */\n  \"orientation\"?: TabsOrientation\n  /**\n   * Controls the size of the tabs\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  \"size\"?: ControlSize\n  /**\n   * Controls gutter on the edges of the button, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  \"gutterSize\"?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /** Disable the entire group */\n  \"disabled\"?: boolean\n  /**\n   * Display the control as a block element with equal width segments\n   * @default false\n   */\n  \"block\"?: boolean\n  /**\n   * Determines if the tabs should be a fully rounded pill shape.\n   * Only applies to the `\"segmented\"` variant.\n   * @default true\n   */\n  \"pill\"?: boolean\n  \"className\"?: string\n  \"children\": React.ReactNode\n}\n\nexport const Tabs = <T extends string>({\n  value,\n  onChange,\n  children,\n  variant = \"segmented\",\n  orientation = \"horizontal\",\n  block,\n  pill = true,\n  size = \"md\",\n  gutterSize,\n  className,\n  onClick,\n  ...restProps\n}: TabsProps<T>) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const thumbRef = useRef<HTMLDivElement>(null)\n  const prevSizeRef = useRef(size)\n  const isVertical = orientation === \"vertical\"\n\n  const applyThumbSizing = useCallback(\n    (attemptScroll: boolean) => {\n      const root = rootRef.current\n      const thumb = thumbRef.current\n\n      if (!root || !thumb) {\n        return\n      }\n\n      // Get selected node\n      const activeNode = root?.querySelector<HTMLDivElement>('[data-state=\"on\"]')\n\n      // Impossible\n      if (!activeNode) {\n        return\n      }\n\n      if (isVertical) {\n        const rootHeight = root.clientHeight\n        let targetHeight = Math.floor(activeNode.clientHeight)\n        const targetOffset = activeNode.offsetTop\n\n        // Detect subpixel edge case\n        if (rootHeight - (targetHeight + targetOffset) < 2) {\n          targetHeight = targetHeight - 1\n        }\n\n        thumb.style.height = `${Math.floor(targetHeight)}px`\n        thumb.style.width = \"\"\n        thumb.style.transform = `translateY(${targetOffset}px)`\n\n        // Scroll into view if needed\n        if (root.scrollHeight > rootHeight) {\n          const buffer = rootHeight * 0.15\n          const scrollTop = root.scrollTop\n          const top = activeNode.offsetTop\n          const bottom = top + targetHeight\n          if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" })\n            }\n          }\n        }\n      } else {\n        const rootWidth = root.clientWidth\n        let targetWidth = Math.floor(activeNode.clientWidth)\n        const targetOffset = activeNode.offsetLeft\n\n        // Detect if the thumb is moving too far to the edge of the container.\n        // This would most commonly be due to subpixel widths adding up to excessive distance.\n        if (rootWidth - (targetWidth + targetOffset) < 2) {\n          targetWidth = targetWidth - 1\n        }\n\n        thumb.style.width = `${Math.floor(targetWidth)}px`\n        thumb.style.height = \"\"\n        thumb.style.transform = `translateX(${targetOffset}px)`\n\n        // If the control is scrollable, ensure the active option is visible\n        if (root.scrollWidth > rootWidth) {\n          // Only scroll items near the edge, but not the inner 2/3.\n          const buffer = rootWidth * 0.15\n          const scrollLeft = root.scrollLeft\n          const left = activeNode.offsetLeft\n          const right = left + targetWidth\n          if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {\n            // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"nearest\", inline: \"center\", behavior: \"smooth\" })\n            }\n          }\n        }\n      }\n    },\n    [isVertical],\n  )\n\n  useResizeObserver({\n    // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663\n    ref: rootRef,\n    onResize: () => {\n      const thumb = thumbRef.current\n\n      if (!thumb) {\n        return\n      }\n\n      // Perform the size update instantly\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n      applyThumbSizing(false)\n      thumb.style.transition = currentTransition\n    },\n  })\n\n  const transitionProperty = isVertical\n    ? \"height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n    : \"width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n\n  useLayoutEffect(() => {\n    const root = rootRef.current\n    const thumb = thumbRef.current\n\n    if (!root || !thumb) {\n      return\n    }\n\n    const sizeChanged = prevSizeRef.current !== size\n    prevSizeRef.current = size\n\n    if (sizeChanged) {\n      // Size changed - disable transition, wait for CSS, then apply sizing\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n\n      waitForAnimationFrame(() => {\n        applyThumbSizing(false)\n        waitForAnimationFrame(() => {\n          thumb.style.transition = currentTransition\n        })\n      })\n    } else {\n      // Normal update (value change, etc.)\n      waitForAnimationFrame(() => {\n        applyThumbSizing(!!thumb.style.transition)\n\n        // Apply transition after initial calculation is set\n        if (!thumb.style.transition) {\n          waitForAnimationFrame(() => {\n            thumb.style.transition = transitionProperty\n          })\n        }\n      })\n    }\n  }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty])\n\n  const handleValueChange = (nextValue: T) => {\n    // Only trigger onChange when a value exists\n    // Disallow toggling off enabled items\n    if (nextValue && onChange) onChange(nextValue)\n  }\n\n  // Only apply pill for segmented variant\n  const isPill = variant === \"segmented\" && pill\n\n  return (\n    <ToggleGroup.Root\n      ref={rootRef}\n      className={clsx(s.Tabs, className)}\n      type=\"single\"\n      value={value}\n      loop={false}\n      onValueChange={handleValueChange}\n      onClick={onClick}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-block={block ? \"\" : undefined}\n      data-pill={isPill ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      {...restProps}\n    >\n      <div className={s.TabsThumb} ref={thumbRef} />\n      {children}\n    </ToggleGroup.Root>\n  )\n}\n\n/**\n * Badge configuration for Tabs.Tab\n */\nexport type TabsBadgeProp =\n  | React.ReactNode\n  | {\n      content: React.ReactNode\n      color?: SemanticColors<\n        \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n      >\n      variant?: Variants<\"soft\" | \"solid\">\n      pill?: boolean\n      loading?: boolean\n    }\n\nexport type TabProps = {\n  /**\n   * Tab value\n   */\n  \"value\": string\n  /**\n   * Text read aloud to screen readers when the tab is focused\n   */\n  \"aria-label\"?: string\n  /**\n   * Text content to render in the tab\n   */\n  \"children\"?: React.ReactNode\n  /**\n   * Icon to render before the text content\n   */\n  \"icon\"?: React.ReactNode\n  /**\n   * Badge to render after the text content.\n   * Can be a simple value or an object with content, color, variant, and loading options.\n   * @example badge={5}\n   * @example badge={{ content: 5, color: \"danger\" }}\n   */\n  \"badge\"?: TabsBadgeProp\n  /**\n   * Disable the individual tab\n   */\n  \"disabled\"?: boolean\n}\n\n// Type guard for badge object form\nconst isBadgeObject = (\n  badge: TabsBadgeProp,\n): badge is Exclude<TabsBadgeProp, React.ReactNode> & { content: React.ReactNode } => {\n  return badge != null && typeof badge === \"object\" && \"content\" in badge\n}\n\nconst Tab = ({ children, icon, badge, ...restProps }: TabProps) => {\n  // Normalize badge prop\n  const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null\n\n  return (\n    <ToggleGroup.Item\n      className={s.Tab}\n      {...restProps}\n      onPointerEnter={handlePressableMouseEnter}\n    >\n      <span className={s.TabContent}>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProps && (\n          <span\n            className={s.TabBadge}\n            data-color={badgeProps.color ?? \"secondary\"}\n            data-variant={badgeProps.variant ?? \"soft\"}\n            data-pill={badgeProps.pill ? \"\" : undefined}\n          >\n            {badgeProps.loading ? <LoadingIndicator /> : badgeProps.content}\n          </span>\n        )}\n      </span>\n    </ToggleGroup.Item>\n  )\n}\n\n// Attach sub-components\nTabs.Tab = Tab\n// Backward-compat alias\nTabs.Option = Tab\n"]}