@mshafiqyajid/react-tabs 0.1.0 → 0.3.0

package/dist/styled.d.ts

@@ -1,14 +1,27 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { TabsChangeReason, TabsActivation, TabsOrientation } from './index.js';
 
 type TabsVariant = "line" | "solid" | "pill";
 type TabsSize = "sm" | "md" | "lg";
-type TabsTone = "neutral" | "primary";
+type TabsTone = "neutral" | "primary" | "success" | "danger";
 interface TabItem {
     value: string;
     label: ReactNode;
     content: ReactNode;
     disabled?: boolean;
+    /** When true, renders a × button on the tab. Pair with `onTabClose`. */
+    closable?: boolean;
+}
+interface TabsRenderTabContext {
+    tab: TabItem;
+    index: number;
+    isActive: boolean;
+    isDisabled: boolean;
+}
+interface TabsRenderPanelContext {
+    tab: TabItem;
+    isActive: boolean;
 }
 interface TabsStyledProps {
     tabs: TabItem[];
@@ -17,7 +30,29 @@ interface TabsStyledProps {
     tone?: TabsTone;
     defaultValue?: string;
     value?: string;
-    onChange?: (value: string) => void;
+    /** Optional second arg reports the trigger reason ("click" | "keyboard" | "programmatic"). */
+    onChange?: (value: string, reason: TabsChangeReason) => void;
+    /** "automatic" (default) — arrow keys move focus AND activate. "manual" — arrows move focus only. */
+    activation?: TabsActivation;
+    /** Affects keyboard nav direction. Default "horizontal". */
+    orientation?: TabsOrientation;
+    /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */
+    lazyMount?: boolean;
+    /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */
+    forceMount?: boolean;
+    /** Fires when the × on a closable tab is clicked. */
+    onTabClose?: (value: string) => void;
+    /** When true, the tab list scrolls horizontally with chevron buttons at the edges instead of wrapping. */
+    scrollable?: boolean;
+    /** When true, tabs can be reordered by dragging. Fires `onReorder` with the new value order. */
+    sortable?: boolean;
+    onReorder?: (values: string[]) => void;
+    /** When true, the active tab is scrolled into view on activation. Default: true when `scrollable`. */
+    scrollActiveIntoView?: boolean;
+    /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */
+    renderTab?: (ctx: TabsRenderTabContext) => ReactNode;
+    /** Replace the default panel rendering. */
+    renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;
     className?: string;
 }
 declare const TabsStyled: react.ForwardRefExoticComponent<TabsStyledProps & react.RefAttributes<HTMLDivElement>>;

package/dist/styled.js

@@ -1,9 +1,9 @@
-import { useTabs } from './chunk-UCRNSS7N.js';
-import { forwardRef, useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { useTabs } from './chunk-NNDW3W6L.js';
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function useIndicator(tabListRef, activeValue) {
+function useIndicator(tabListRef, activeValue, orientation) {
   const [style, setStyle] = useState({});
   useIsoLayoutEffect(() => {
     if (!tabListRef.current || activeValue === void 0) return;
@@ -16,20 +16,30 @@ function useIndicator(tabListRef, activeValue) {
       if (!activeTab) return;
       const listRect = list.getBoundingClientRect();
       const tabRect = activeTab.getBoundingClientRect();
-      const x = tabRect.left - listRect.left;
-      const w = tabRect.width;
-      setStyle({
-        ["--rtab-indicator-x"]: `${x}px`,
-        ["--rtab-indicator-width"]: `${w}px`,
-        ["--rtab-indicator-ready"]: "1"
-      });
+      if (orientation === "vertical") {
+        const y = tabRect.top - listRect.top;
+        const h = tabRect.height;
+        setStyle({
+          ["--rtab-indicator-y"]: `${y}px`,
+          ["--rtab-indicator-height"]: `${h}px`,
+          ["--rtab-indicator-ready"]: "1"
+        });
+      } else {
+        const x = tabRect.left - listRect.left;
+        const w = tabRect.width;
+        setStyle({
+          ["--rtab-indicator-x"]: `${x}px`,
+          ["--rtab-indicator-width"]: `${w}px`,
+          ["--rtab-indicator-ready"]: "1"
+        });
+      }
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(measure);
     ro.observe(tabListRef.current);
     return () => ro.disconnect();
-  }, [activeValue, tabListRef]);
+  }, [activeValue, tabListRef, orientation]);
   return style;
 }
 var TabsStyled = forwardRef(
@@ -41,54 +51,221 @@ var TabsStyled = forwardRef(
     defaultValue,
     value,
     onChange,
+    activation = "automatic",
+    orientation = "horizontal",
+    lazyMount = false,
+    forceMount = false,
+    onTabClose,
+    scrollable = false,
+    sortable = false,
+    onReorder,
+    scrollActiveIntoView,
+    renderTab,
+    renderPanel,
     className
   }, ref) {
+    const autoScrollActive = scrollActiveIntoView ?? scrollable;
+    const [scrollState, setScrollState] = useState({
+      left: false,
+      right: false
+    });
+    const typeaheadBufferRef = useRef("");
+    const typeaheadTimerRef = useRef(null);
+    const dragValueRef = useRef(null);
     const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));
     const resolvedDefault = defaultValue ?? tabs.find((t) => !t.disabled)?.value;
     const { activeValue, getTabProps, getPanelProps } = useTabs({
       tabs: tabDefs,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
       value,
-      onChange
+      onChange,
+      activation,
+      orientation
     });
     const tabListRef = useRef(null);
-    const indicatorStyle = useIndicator(tabListRef, activeValue);
+    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);
+    const activatedRef = useRef(/* @__PURE__ */ new Set());
+    if (activeValue !== void 0) activatedRef.current.add(activeValue);
     const rootClass = ["rtab-root", className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ref, className: rootClass, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: tabListRef,
-          role: "tablist",
-          className: "rtab-list",
-          "data-variant": variant,
-          "data-size": size,
-          "data-tone": tone,
-          style: indicatorStyle,
-          children: [
-            tabs.map((tab) => /* @__PURE__ */ jsx(
+    useEffect(() => {
+      if (!scrollable) return;
+      const list = tabListRef.current;
+      if (!list) return;
+      const update = () => {
+        setScrollState({
+          left: list.scrollLeft > 4,
+          right: list.scrollLeft + list.clientWidth < list.scrollWidth - 4
+        });
+      };
+      update();
+      list.addEventListener("scroll", update, { passive: true });
+      const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+      ro?.observe(list);
+      return () => {
+        list.removeEventListener("scroll", update);
+        ro?.disconnect();
+      };
+    }, [scrollable, tabs.length]);
+    useEffect(() => {
+      if (!autoScrollActive || !activeValue) return;
+      const list = tabListRef.current;
+      if (!list) return;
+      const activeEl = list.querySelector(`[aria-selected="true"]`);
+      if (!activeEl) return;
+      activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    }, [autoScrollActive, activeValue]);
+    const scrollByAmount = (delta) => {
+      tabListRef.current?.scrollBy({ left: delta, behavior: "smooth" });
+    };
+    const handleTypeahead = (e) => {
+      if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;
+      typeaheadBufferRef.current = (typeaheadBufferRef.current + e.key).toLowerCase();
+      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+      typeaheadTimerRef.current = setTimeout(() => {
+        typeaheadBufferRef.current = "";
+      }, 600);
+      const buffer = typeaheadBufferRef.current;
+      const startIdx = Math.max(0, tabs.findIndex((t) => t.value === activeValue));
+      for (let i = 1; i <= tabs.length; i++) {
+        const idx = (startIdx + i) % tabs.length;
+        const tab = tabs[idx];
+        if (!tab || tab.disabled) continue;
+        const labelStr = typeof tab.label === "string" ? tab.label : "";
+        if (labelStr.toLowerCase().startsWith(buffer)) {
+          const list = tabListRef.current;
+          const btn = list?.querySelector(`[data-value="${tab.value}"]`);
+          btn?.click();
+          btn?.focus();
+          break;
+        }
+      }
+    };
+    const handleDragStart = (val) => (e) => {
+      if (!sortable) return;
+      dragValueRef.current = val;
+      e.dataTransfer.effectAllowed = "move";
+    };
+    const handleDragOver = (val) => (e) => {
+      if (!sortable || !dragValueRef.current || dragValueRef.current === val) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    };
+    const handleDrop = (val) => (e) => {
+      if (!sortable) return;
+      e.preventDefault();
+      const from = dragValueRef.current;
+      dragValueRef.current = null;
+      if (!from || from === val || !onReorder) return;
+      const order = tabs.map((t) => t.value);
+      const fromIdx = order.indexOf(from);
+      const toIdx = order.indexOf(val);
+      if (fromIdx === -1 || toIdx === -1) return;
+      const next = [...order];
+      next.splice(fromIdx, 1);
+      next.splice(toIdx, 0, from);
+      onReorder(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: rootClass,
+        "data-orientation": orientation,
+        "data-scrollable": scrollable || void 0,
+        onKeyDown: handleTypeahead,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "rtab-list-wrap", children: [
+            scrollable && scrollState.left && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rtab-scroll-btn rtab-scroll-btn--left",
+                "aria-label": "Scroll left",
+                onClick: () => scrollByAmount(-200),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3l-3 3 3 3" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: tabListRef,
+                role: "tablist",
+                "aria-orientation": orientation,
+                className: "rtab-list",
+                "data-variant": variant,
+                "data-size": size,
+                "data-tone": tone,
+                "data-orientation": orientation,
+                "data-scrollable": scrollable || void 0,
+                style: indicatorStyle,
+                children: [
+                  tabs.map((tab, index) => {
+                    const isActive = activeValue === tab.value;
+                    const isDisabled = !!tab.disabled;
+                    const tabProps = getTabProps(tab.value, { disabled: tab.disabled });
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        "data-value": tab.value,
+                        "data-closable": tab.closable || void 0,
+                        className: "rtab-tab",
+                        ...tabProps,
+                        draggable: sortable && !isDisabled ? true : void 0,
+                        onDragStart: sortable ? handleDragStart(tab.value) : void 0,
+                        onDragOver: sortable ? handleDragOver(tab.value) : void 0,
+                        onDrop: sortable ? handleDrop(tab.value) : void 0,
+                        children: [
+                          renderTab ? renderTab({ tab, index, isActive, isDisabled }) : tab.label,
+                          tab.closable && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "rtab-close",
+                              role: "button",
+                              tabIndex: -1,
+                              "aria-label": `Close ${typeof tab.label === "string" ? tab.label : "tab"}`,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onTabClose?.(tab.value);
+                              },
+                              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "10", height: "10", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3l-6 6" }) })
+                            }
+                          )
+                        ]
+                      },
+                      tab.value
+                    );
+                  }),
+                  (variant === "line" || variant === "solid" || variant === "pill") && /* @__PURE__ */ jsx("span", { className: "rtab-indicator", "aria-hidden": "true" })
+                ]
+              }
+            ),
+            scrollable && scrollState.right && /* @__PURE__ */ jsx(
               "button",
               {
-                className: "rtab-tab",
-                ...getTabProps(tab.value, { disabled: tab.disabled }),
-                children: tab.label
+                type: "button",
+                className: "rtab-scroll-btn rtab-scroll-btn--right",
+                "aria-label": "Scroll right",
+                onClick: () => scrollByAmount(200),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rtab-panels", children: tabs.map((tab) => {
+            const isActive = activeValue === tab.value;
+            const shouldRender = forceMount || !lazyMount || activatedRef.current.has(tab.value);
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rtab-panel",
+                ...getPanelProps(tab.value),
+                children: shouldRender ? renderPanel ? renderPanel({ tab, isActive }) : tab.content : null
               },
               tab.value
-            )),
-            (variant === "line" || variant === "solid" || variant === "pill") && /* @__PURE__ */ jsx("span", { className: "rtab-indicator", "aria-hidden": "true" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "rtab-panels", children: tabs.map((tab) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "rtab-panel",
-          ...getPanelProps(tab.value),
-          children: tab.content
-        },
-        tab.value
-      )) })
-    ] });
+            );
+          }) })
+        ]
+      }
+    );
   }
 );
 

package/dist/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled/TabsStyled.tsx"],"names":["TabsStyled"],"mappings":"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","file":"styled.js","sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTabs } from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsStyledProps {\n  tabs: TabItem[];\n  variant?: TabsVariant;\n  size?: TabsSize;\n  tone?: TabsTone;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n}\n\n// Run layout effects on the client; fall back to a no-op effect on the server.\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nfunction useIndicator(\n  tabListRef: React.RefObject<HTMLDivElement | null>,\n  activeValue: string | undefined,\n) {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useIsoLayoutEffect(() => {\n    if (!tabListRef.current || activeValue === undefined) return;\n\n    const measure = () => {\n      const list = tabListRef.current;\n      if (!list) return;\n      const activeTab = list.querySelector<HTMLElement>(\n        `[aria-selected=\"true\"]`,\n      );\n      if (!activeTab) return;\n\n      const listRect = list.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n      const x = tabRect.left - listRect.left;\n      const w = tabRect.width;\n\n      setStyle({\n        [\"--rtab-indicator-x\" as string]: `${x}px`,\n        [\"--rtab-indicator-width\" as string]: `${w}px`,\n        [\"--rtab-indicator-ready\" as string]: \"1\",\n      });\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(tabListRef.current);\n    return () => ro.disconnect();\n  }, [activeValue, tabListRef]);\n\n  return style;\n}\n\nexport const TabsStyled = forwardRef<HTMLDivElement, TabsStyledProps>(\n  function TabsStyled(\n    {\n      tabs,\n      variant = \"line\",\n      size = \"md\",\n      tone = \"neutral\",\n      defaultValue,\n      value,\n      onChange,\n      className,\n    },\n    ref,\n  ) {\n    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));\n\n    const resolvedDefault =\n      defaultValue ?? tabs.find((t) => !t.disabled)?.value;\n\n    const { activeValue, getTabProps, getPanelProps } = useTabs({\n      tabs: tabDefs,\n      defaultValue: value === undefined ? resolvedDefault : undefined,\n      value,\n      onChange,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    return (\n      <div ref={ref} className={rootClass}>\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          className=\"rtab-list\"\n          data-variant={variant}\n          data-size={size}\n          data-tone={tone}\n          style={indicatorStyle}\n        >\n          {tabs.map((tab) => (\n            <button\n              key={tab.value}\n              className=\"rtab-tab\"\n              {...getTabProps(tab.value, { disabled: tab.disabled })}\n            >\n              {tab.label}\n            </button>\n          ))}\n          {(variant === \"line\" || variant === \"solid\" || variant === \"pill\") && (\n            <span className=\"rtab-indicator\" aria-hidden=\"true\" />\n          )}\n        </div>\n        <div className=\"rtab-panels\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.value}\n              className=\"rtab-panel\"\n              {...getPanelProps(tab.value)}\n            >\n              {tab.content}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n"]}
+{"version":3,"sources":["../src/styled/TabsStyled.tsx"],"names":["TabsStyled"],"mappings":"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","file":"styled.js","sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  useTabs,\n  type TabsActivation,\n  type TabsChangeReason,\n  type TabsOrientation,\n} from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\" | \"success\" | \"danger\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n  /** When true, renders a × button on the tab. Pair with `onTabClose`. */\n  closable?: boolean;\n}\n\nexport interface TabsRenderTabContext {\n  tab: TabItem;\n  index: number;\n  isActive: boolean;\n  isDisabled: boolean;\n}\n\nexport interface TabsRenderPanelContext {\n  tab: TabItem;\n  isActive: boolean;\n}\n\nexport interface TabsStyledProps {\n  tabs: TabItem[];\n  variant?: TabsVariant;\n  size?: TabsSize;\n  tone?: TabsTone;\n  defaultValue?: string;\n  value?: string;\n  /** Optional second arg reports the trigger reason (\"click\" | \"keyboard\" | \"programmatic\"). */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav direction. Default \"horizontal\". */\n  orientation?: TabsOrientation;\n  /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */\n  lazyMount?: boolean;\n  /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */\n  forceMount?: boolean;\n  /** Fires when the × on a closable tab is clicked. */\n  onTabClose?: (value: string) => void;\n  /** When true, the tab list scrolls horizontally with chevron buttons at the edges instead of wrapping. */\n  scrollable?: boolean;\n  /** When true, tabs can be reordered by dragging. Fires `onReorder` with the new value order. */\n  sortable?: boolean;\n  onReorder?: (values: string[]) => void;\n  /** When true, the active tab is scrolled into view on activation. Default: true when `scrollable`. */\n  scrollActiveIntoView?: boolean;\n  /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */\n  renderTab?: (ctx: TabsRenderTabContext) => ReactNode;\n  /** Replace the default panel rendering. */\n  renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;\n  className?: string;\n}\n\n// Run layout effects on the client; fall back to a no-op effect on the server.\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nfunction useIndicator(\n  tabListRef: React.RefObject<HTMLDivElement | null>,\n  activeValue: string | undefined,\n  orientation: TabsOrientation,\n) {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useIsoLayoutEffect(() => {\n    if (!tabListRef.current || activeValue === undefined) return;\n\n    const measure = () => {\n      const list = tabListRef.current;\n      if (!list) return;\n      const activeTab = list.querySelector<HTMLElement>(\n        `[aria-selected=\"true\"]`,\n      );\n      if (!activeTab) return;\n\n      const listRect = list.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n\n      if (orientation === \"vertical\") {\n        const y = tabRect.top - listRect.top;\n        const h = tabRect.height;\n        setStyle({\n          [\"--rtab-indicator-y\" as string]: `${y}px`,\n          [\"--rtab-indicator-height\" as string]: `${h}px`,\n          [\"--rtab-indicator-ready\" as string]: \"1\",\n        });\n      } else {\n        const x = tabRect.left - listRect.left;\n        const w = tabRect.width;\n        setStyle({\n          [\"--rtab-indicator-x\" as string]: `${x}px`,\n          [\"--rtab-indicator-width\" as string]: `${w}px`,\n          [\"--rtab-indicator-ready\" as string]: \"1\",\n        });\n      }\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(tabListRef.current);\n    return () => ro.disconnect();\n  }, [activeValue, tabListRef, orientation]);\n\n  return style;\n}\n\nexport const TabsStyled = forwardRef<HTMLDivElement, TabsStyledProps>(\n  function TabsStyled(\n    {\n      tabs,\n      variant = \"line\",\n      size = \"md\",\n      tone = \"neutral\",\n      defaultValue,\n      value,\n      onChange,\n      activation = \"automatic\",\n      orientation = \"horizontal\",\n      lazyMount = false,\n      forceMount = false,\n      onTabClose,\n      scrollable = false,\n      sortable = false,\n      onReorder,\n      scrollActiveIntoView,\n      renderTab,\n      renderPanel,\n      className,\n    },\n    ref,\n  ) {\n    const autoScrollActive = scrollActiveIntoView ?? scrollable;\n    const [scrollState, setScrollState] = useState<{ left: boolean; right: boolean }>({\n      left: false,\n      right: false,\n    });\n    const typeaheadBufferRef = useRef(\"\");\n    const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const dragValueRef = useRef<string | null>(null);\n    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));\n\n    const resolvedDefault =\n      defaultValue ?? tabs.find((t) => !t.disabled)?.value;\n\n    const { activeValue, getTabProps, getPanelProps } = useTabs({\n      tabs: tabDefs,\n      defaultValue: value === undefined ? resolvedDefault : undefined,\n      value,\n      onChange,\n      activation,\n      orientation,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);\n\n    // Track which tabs have been activated for lazyMount.\n    const activatedRef = useRef<Set<string>>(new Set());\n    if (activeValue !== undefined) activatedRef.current.add(activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    // Scroll-state: detect when there's content off the left/right edges so we can\n    // toggle the chevron buttons. Only relevant when scrollable.\n    useEffect(() => {\n      if (!scrollable) return;\n      const list = tabListRef.current;\n      if (!list) return;\n      const update = () => {\n        setScrollState({\n          left: list.scrollLeft > 4,\n          right: list.scrollLeft + list.clientWidth < list.scrollWidth - 4,\n        });\n      };\n      update();\n      list.addEventListener(\"scroll\", update, { passive: true });\n      const ro = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(update) : null;\n      ro?.observe(list);\n      return () => {\n        list.removeEventListener(\"scroll\", update);\n        ro?.disconnect();\n      };\n    }, [scrollable, tabs.length]);\n\n    // Auto-scroll active tab into view\n    useEffect(() => {\n      if (!autoScrollActive || !activeValue) return;\n      const list = tabListRef.current;\n      if (!list) return;\n      const activeEl = list.querySelector<HTMLElement>(`[aria-selected=\"true\"]`);\n      if (!activeEl) return;\n      activeEl.scrollIntoView({ behavior: \"smooth\", block: \"nearest\", inline: \"nearest\" });\n    }, [autoScrollActive, activeValue]);\n\n    const scrollByAmount = (delta: number) => {\n      tabListRef.current?.scrollBy({ left: delta, behavior: \"smooth\" });\n    };\n\n    // Typeahead: letters jump to the next tab whose label starts with the buffer.\n    const handleTypeahead = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n      typeaheadBufferRef.current = (typeaheadBufferRef.current + e.key).toLowerCase();\n      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);\n      typeaheadTimerRef.current = setTimeout(() => { typeaheadBufferRef.current = \"\"; }, 600);\n\n      const buffer = typeaheadBufferRef.current;\n      const startIdx = Math.max(0, tabs.findIndex((t) => t.value === activeValue));\n      // Search starting just after the active tab, wrapping around.\n      for (let i = 1; i <= tabs.length; i++) {\n        const idx = (startIdx + i) % tabs.length;\n        const tab = tabs[idx];\n        if (!tab || tab.disabled) continue;\n        const labelStr = typeof tab.label === \"string\" ? tab.label : \"\";\n        if (labelStr.toLowerCase().startsWith(buffer)) {\n          // Use the existing tab button's click via aria-selected target.\n          const list = tabListRef.current;\n          const btn = list?.querySelector<HTMLButtonElement>(`[data-value=\"${tab.value}\"]`);\n          btn?.click();\n          btn?.focus();\n          break;\n        }\n      }\n    };\n\n    // Drag-to-reorder: HTML5 DnD is fine here — no external lib.\n    const handleDragStart = (val: string) => (e: React.DragEvent<HTMLButtonElement>) => {\n      if (!sortable) return;\n      dragValueRef.current = val;\n      e.dataTransfer.effectAllowed = \"move\";\n    };\n    const handleDragOver = (val: string) => (e: React.DragEvent<HTMLButtonElement>) => {\n      if (!sortable || !dragValueRef.current || dragValueRef.current === val) return;\n      e.preventDefault();\n      e.dataTransfer.dropEffect = \"move\";\n    };\n    const handleDrop = (val: string) => (e: React.DragEvent<HTMLButtonElement>) => {\n      if (!sortable) return;\n      e.preventDefault();\n      const from = dragValueRef.current;\n      dragValueRef.current = null;\n      if (!from || from === val || !onReorder) return;\n      const order = tabs.map((t) => t.value);\n      const fromIdx = order.indexOf(from);\n      const toIdx = order.indexOf(val);\n      if (fromIdx === -1 || toIdx === -1) return;\n      const next = [...order];\n      next.splice(fromIdx, 1);\n      next.splice(toIdx, 0, from);\n      onReorder(next);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={rootClass}\n        data-orientation={orientation}\n        data-scrollable={scrollable || undefined}\n        onKeyDown={handleTypeahead}\n      >\n        <div className=\"rtab-list-wrap\">\n          {scrollable && scrollState.left && (\n            <button\n              type=\"button\"\n              className=\"rtab-scroll-btn rtab-scroll-btn--left\"\n              aria-label=\"Scroll left\"\n              onClick={() => scrollByAmount(-200)}\n            >\n              <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M7.5 3l-3 3 3 3\"/></svg>\n            </button>\n          )}\n          <div\n            ref={tabListRef}\n            role=\"tablist\"\n            aria-orientation={orientation}\n            className=\"rtab-list\"\n            data-variant={variant}\n            data-size={size}\n            data-tone={tone}\n            data-orientation={orientation}\n            data-scrollable={scrollable || undefined}\n            style={indicatorStyle}\n          >\n            {tabs.map((tab, index) => {\n              const isActive = activeValue === tab.value;\n              const isDisabled = !!tab.disabled;\n              const tabProps = getTabProps(tab.value, { disabled: tab.disabled });\n              return (\n                <button\n                  key={tab.value}\n                  data-value={tab.value}\n                  data-closable={tab.closable || undefined}\n                  className=\"rtab-tab\"\n                  {...tabProps}\n                  draggable={sortable && !isDisabled ? true : undefined}\n                  onDragStart={sortable ? handleDragStart(tab.value) : undefined}\n                  onDragOver={sortable ? handleDragOver(tab.value) : undefined}\n                  onDrop={sortable ? handleDrop(tab.value) : undefined}\n                >\n                  {renderTab\n                    ? renderTab({ tab, index, isActive, isDisabled })\n                    : tab.label}\n                  {tab.closable && (\n                    <span\n                      className=\"rtab-close\"\n                      role=\"button\"\n                      tabIndex={-1}\n                      aria-label={`Close ${typeof tab.label === \"string\" ? tab.label : \"tab\"}`}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onTabClose?.(tab.value);\n                      }}\n                    >\n                      <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" aria-hidden=\"true\">\n                        <path d=\"M3 3l6 6M9 3l-6 6\"/>\n                      </svg>\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n            {(variant === \"line\" || variant === \"solid\" || variant === \"pill\") && (\n              <span className=\"rtab-indicator\" aria-hidden=\"true\" />\n            )}\n          </div>\n          {scrollable && scrollState.right && (\n            <button\n              type=\"button\"\n              className=\"rtab-scroll-btn rtab-scroll-btn--right\"\n              aria-label=\"Scroll right\"\n              onClick={() => scrollByAmount(200)}\n            >\n              <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M4.5 3l3 3-3 3\"/></svg>\n            </button>\n          )}\n        </div>\n        <div className=\"rtab-panels\">\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n            const shouldRender =\n              forceMount || !lazyMount || activatedRef.current.has(tab.value);\n            return (\n              <div\n                key={tab.value}\n                className=\"rtab-panel\"\n                {...getPanelProps(tab.value)}\n              >\n                {shouldRender\n                  ? renderPanel\n                    ? renderPanel({ tab, isActive })\n                    : tab.content\n                  : null}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/styles.css

@@ -296,3 +296,123 @@
     transition-duration: 0ms !important;
   }
 }
+
+/* ============================================================================
+ * 0.2.0 additions: vertical orientation, success/danger tones, data-state
+ * ========================================================================== */
+.rtab-root[data-orientation="vertical"] { display: flex; gap: 1rem; align-items: flex-start; }
+.rtab-list[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+  border-right: 1px solid var(--rtab-border-list);
+  border-bottom: none;
+  min-width: 160px;
+}
+.rtab-list[data-orientation="vertical"] .rtab-tab { text-align: left; justify-content: flex-start; }
+.rtab-list[data-orientation="vertical"] .rtab-indicator {
+  --rtab-indicator-x: auto;
+  --rtab-indicator-width: 2px;
+  inset-inline-start: auto;
+  inset-inline-end: -1px;
+  top: 0;
+  bottom: auto;
+  width: 2px;
+  height: var(--rtab-indicator-height, 0);
+  transform: translateY(var(--rtab-indicator-y, 0));
+}
+.rtab-root[data-orientation="vertical"] .rtab-panels { flex: 1; }
+
+/* Tones — success / danger */
+.rtab-list[data-tone="success"] { --rtab-fg-active: #166534; --rtab-bg-tab-active: #dcfce7; --rtab-bg-indicator: #16a34a; --rtab-ring: rgba(34, 197, 94, 0.45); }
+.rtab-list[data-tone="danger"]  { --rtab-fg-active: #991b1b; --rtab-bg-tab-active: #fee2e2; --rtab-bg-indicator: #dc2626; --rtab-ring: rgba(239, 68, 68, 0.45); }
+
+[data-theme="dark"] .rtab-list[data-tone="success"] { --rtab-fg-active: #bbf7d0; --rtab-bg-tab-active: #14532d; --rtab-bg-indicator: #4ade80; }
+[data-theme="dark"] .rtab-list[data-tone="danger"]  { --rtab-fg-active: #fecaca; --rtab-bg-tab-active: #7f1d1d; --rtab-bg-indicator: #f87171; }
+
+/* ============================================================================
+ * Closeable / scrollable / sortable tabs (1.x additions)
+ * ============================================================================ */
+
+/* Wrap that holds the list + the chevron scroll buttons */
+.rtab-list-wrap {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+/* Scrollable mode — list itself becomes a horizontal scroll container */
+.rtab-list[data-scrollable] {
+  overflow-x: auto;
+  scrollbar-width: none;             /* Firefox */
+  scroll-behavior: smooth;
+  flex-wrap: nowrap;
+}
+.rtab-list[data-scrollable]::-webkit-scrollbar { display: none; }
+.rtab-list[data-scrollable] .rtab-tab {
+  flex-shrink: 0;
+}
+
+/* Chevron scroll buttons */
+.rtab-scroll-btn {
+  appearance: none;
+  background: var(--rtab-bg, transparent);
+  border: none;
+  width: 28px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--rtab-fg-muted, currentColor);
+  opacity: 0.85;
+  transition: opacity 120ms ease, background 120ms ease;
+}
+.rtab-scroll-btn:hover { opacity: 1; }
+.rtab-scroll-btn:focus-visible {
+  outline: 2px solid var(--rtab-color-active, #6366f1);
+  outline-offset: 1px;
+}
+.rtab-scroll-btn--left {
+  background: linear-gradient(to right, var(--rtab-bg, var(--bg, #fff)) 50%, transparent);
+}
+.rtab-scroll-btn--right {
+  background: linear-gradient(to left, var(--rtab-bg, var(--bg, #fff)) 50%, transparent);
+}
+
+/* Close (×) button on closable tabs */
+.rtab-tab[data-closable] {
+  padding-right: 0.4rem;
+}
+.rtab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 0.4rem;
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--rtab-fg-muted, currentColor);
+  opacity: 0.55;
+  transition: background 120ms ease, opacity 120ms ease;
+}
+.rtab-close:hover {
+  opacity: 1;
+  background: var(--rtab-close-hover-bg, rgba(0, 0, 0, 0.08));
+}
+[data-theme="dark"] .rtab-close:hover {
+  background: var(--rtab-close-hover-bg, rgba(255, 255, 255, 0.12));
+}
+
+/* Drag-to-reorder visuals */
+.rtab-tab[draggable="true"] { cursor: grab; }
+.rtab-tab[draggable="true"]:active { cursor: grabbing; }
+.rtab-tab[draggable="true"]:hover {
+  background: var(--rtab-tab-hover-bg, rgba(0, 0, 0, 0.04));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rtab-list { scroll-behavior: auto; }
+  .rtab-scroll-btn { transition: none; }
+  .rtab-close { transition: none; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshafiqyajid/react-tabs",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Headless tabs hook and styled component for React. Accessible, keyboard-friendly, animated, SSR-safe, fully typed.",
   "keywords": [
     "react",

package/dist/chunk-UCRNSS7N.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/useTabs.ts"],"names":[],"mappings":"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","file":"chunk-UCRNSS7N.js","sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseTabsTab {\n  value: string;\n  disabled?: boolean;\n}\n\nexport interface UseTabsOptions {\n  /** Tab definitions — needed for keyboard navigation between tabs. */\n  tabs?: UseTabsTab[];\n  /** Controlled active value. */\n  value?: string;\n  /** Initial active value when uncontrolled. */\n  defaultValue?: string;\n  /** Called when the active tab changes. */\n  onChange?: (value: string) => void;\n}\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  id: string;\n  role: \"tab\";\n  \"aria-selected\": boolean;\n  \"aria-controls\": string;\n  \"aria-disabled\"?: boolean;\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  hidden: boolean;\n}\n\nexport interface UseTabsResult {\n  /** Currently active tab value. */\n  activeValue: string | undefined;\n  /** Returns props to spread onto a tab trigger `<button>`. */\n  getTabProps: (value: string, options?: { disabled?: boolean }) => TabProps;\n  /** Returns props to spread onto a tab panel. */\n  getPanelProps: (value: string) => PanelProps;\n  /** Programmatically set the active tab. */\n  setActiveValue: (value: string) => void;\n}\n\nconst tabId = (listId: string, value: string) => `${listId}-tab-${value}`;\nconst panelId = (listId: string, value: string) => `${listId}-panel-${value}`;\n\nlet counter = 0;\nfunction useStableId() {\n  const ref = useRef<string | null>(null);\n  if (ref.current === null) {\n    ref.current = `rtabs-${++counter}`;\n  }\n  return ref.current;\n}\n\nexport function useTabs(opts: UseTabsOptions = {}): UseTabsResult {\n  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;\n\n  const listId = useStableId();\n  const isControlled = controlledValue !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue,\n  );\n\n  const activeValue = isControlled ? controlledValue : internalValue;\n\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const setActiveValue = useCallback(\n    (next: string) => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChange?.(next);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChange?.(next);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue, onChange],\n  );\n\n  const focusTab = useCallback((value: string) => {\n    tabRefs.current.get(value)?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (currentValue: string) =>\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        const enabled = tabs.filter((t) => !t.disabled);\n        if (enabled.length === 0) return;\n\n        const currentIndex = enabled.findIndex((t) => t.value === currentValue);\n\n        let nextValue: string | undefined;\n\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowDown\": {\n            const nextIndex = (currentIndex + 1) % enabled.length;\n            nextValue = enabled[nextIndex]?.value;\n            break;\n          }\n          case \"ArrowLeft\":\n          case \"ArrowUp\": {\n            const prevIndex =\n              (currentIndex - 1 + enabled.length) % enabled.length;\n            nextValue = enabled[prevIndex]?.value;\n            break;\n          }\n          case \"Home\": {\n            nextValue = enabled[0]?.value;\n            break;\n          }\n          case \"End\": {\n            nextValue = enabled[enabled.length - 1]?.value;\n            break;\n          }\n          default:\n            return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        setActiveValue(nextValue);\n        focusTab(nextValue);\n      },\n    [tabs, setActiveValue, focusTab],\n  );\n\n  const getTabProps = useCallback(\n    (value: string, options?: { disabled?: boolean }): TabProps => {\n      const isDisabled =\n        options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;\n      const isSelected = activeValue === value;\n      return {\n        id: tabId(listId, value),\n        role: \"tab\",\n        \"aria-selected\": isSelected,\n        \"aria-controls\": panelId(listId, value),\n        \"aria-disabled\": isDisabled || undefined,\n        tabIndex: isSelected ? 0 : -1,\n        disabled: isDisabled,\n        ref: (node: HTMLButtonElement | null) => {\n          if (node) {\n            tabRefs.current.set(value, node);\n          } else {\n            tabRefs.current.delete(value);\n          }\n        },\n        onClick: () => {\n          if (!isDisabled) setActiveValue(value);\n        },\n        onKeyDown: handleKeyDown(value),\n      } as TabProps & {\n        disabled: boolean | undefined;\n        ref: (node: HTMLButtonElement | null) => void;\n      };\n    },\n    [activeValue, listId, tabs, setActiveValue, handleKeyDown],\n  );\n\n  const getPanelProps = useCallback(\n    (value: string): PanelProps => {\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        hidden: activeValue !== value,\n        tabIndex: 0,\n      };\n    },\n    [activeValue, listId],\n  );\n\n  return useMemo(\n    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),\n    [activeValue, getTabProps, getPanelProps, setActiveValue],\n  );\n}\n"]}