@compa11y/react 0.1.0

package/dist/chunk-D2UMS62N.cjs

@@ -0,0 +1,245 @@
+'use strict';
+
+var chunkRBDQCIS7_cjs = require('./chunk-RBDQCIS7.cjs');
+var chunkGDLOJH6K_cjs = require('./chunk-GDLOJH6K.cjs');
+var chunk52J4Z3QD_cjs = require('./chunk-52J4Z3QD.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TabsContext = React.createContext(null);
+function useTabsContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs compound components must be used within a Tabs component"
+    );
+  }
+  return context;
+}
+var TabsProvider = TabsContext.Provider;
+var Tabs = React.forwardRef(function Tabs2({
+  defaultValue = "",
+  value: controlledValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  ...props
+}, ref) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const selectedValue = controlledValue ?? uncontrolledValue;
+  const tabsRef = React.useRef([]);
+  const baseId = chunk52J4Z3QD_cjs.useId("tabs");
+  const setSelectedValue = React.useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setUncontrolledValue(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const registerTab = React.useCallback((value) => {
+    if (!tabsRef.current.includes(value)) {
+      tabsRef.current.push(value);
+    }
+  }, []);
+  const unregisterTab = React.useCallback((value) => {
+    const index = tabsRef.current.indexOf(value);
+    if (index > -1) {
+      tabsRef.current.splice(index, 1);
+    }
+  }, []);
+  const getTabValues = React.useCallback(() => [...tabsRef.current], []);
+  const contextValue = {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    orientation,
+    activationMode,
+    registerTab,
+    unregisterTab,
+    getTabValues
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      "data-compa11y-tabs": true,
+      ...props,
+      children
+    }
+  ) });
+});
+var TabList = React.forwardRef(
+  function TabList2({ children, "aria-label": ariaLabel, onKeyDown, ...props }, ref) {
+    const {
+      orientation,
+      selectedValue,
+      setSelectedValue,
+      getTabValues,
+      activationMode
+    } = useTabsContext();
+    const navigateToTab = React.useCallback(
+      (direction) => {
+        const values = getTabValues();
+        if (values.length === 0) return;
+        const currentIndex = values.indexOf(selectedValue);
+        let newIndex;
+        switch (direction) {
+          case "next":
+            newIndex = (currentIndex + 1) % values.length;
+            break;
+          case "previous":
+            newIndex = (currentIndex - 1 + values.length) % values.length;
+            break;
+          case "first":
+            newIndex = 0;
+            break;
+          case "last":
+            newIndex = values.length - 1;
+            break;
+        }
+        const newValue = values[newIndex];
+        if (newValue) {
+          const tabElement = document.querySelector(
+            `[data-compa11y-tab][data-value="${newValue}"]`
+          );
+          tabElement?.focus();
+          if (activationMode === "automatic") {
+            setSelectedValue(newValue);
+          }
+        }
+      },
+      [getTabValues, selectedValue, setSelectedValue, activationMode]
+    );
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
+      {
+        ArrowRight: () => {
+          if (orientation === "horizontal") navigateToTab("next");
+        },
+        ArrowLeft: () => {
+          if (orientation === "horizontal") navigateToTab("previous");
+        },
+        ArrowDown: () => {
+          if (orientation === "vertical") navigateToTab("next");
+        },
+        ArrowUp: () => {
+          if (orientation === "vertical") navigateToTab("previous");
+        },
+        Home: () => navigateToTab("first"),
+        End: () => navigateToTab("last")
+      },
+      { preventDefault: true }
+    );
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        "data-compa11y-tablist": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var Tab = React.forwardRef(function Tab2({ value, disabled = false, children, onClick, ...props }, ref) {
+  const {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    registerTab,
+    unregisterTab
+  } = useTabsContext();
+  const { announce } = chunkRBDQCIS7_cjs.useAnnouncer();
+  React__default.default.useEffect(() => {
+    registerTab(value);
+    return () => unregisterTab(value);
+  }, [value, registerTab, unregisterTab]);
+  const isSelected = selectedValue === value;
+  const tabId = `${baseId}-tab-${value}`;
+  const panelId = `${baseId}-panel-${value}`;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && !disabled) {
+      setSelectedValue(value);
+      announce(`${value} tab selected`);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      id: tabId,
+      "aria-selected": isSelected,
+      "aria-controls": panelId,
+      "aria-disabled": disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onClick: handleClick,
+      disabled,
+      "data-selected": isSelected,
+      "data-disabled": disabled,
+      "data-value": value,
+      "data-compa11y-tab": true,
+      ...props,
+      children
+    }
+  );
+});
+var TabPanel = React.forwardRef(
+  function TabPanel2({ value, forceMount = false, children, ...props }, ref) {
+    const { selectedValue, baseId } = useTabsContext();
+    const isSelected = selectedValue === value;
+    const tabId = `${baseId}-tab-${value}`;
+    const panelId = `${baseId}-panel-${value}`;
+    if (!isSelected && !forceMount) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: panelId,
+        "aria-labelledby": tabId,
+        tabIndex: 0,
+        hidden: !isSelected,
+        "data-selected": isSelected,
+        "data-compa11y-tabpanel": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var TabsCompound = Object.assign(Tabs, {
+  List: TabList,
+  Tab,
+  Panel: TabPanel
+});
+
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+exports.TabsCompound = TabsCompound;
+exports.useTabsContext = useTabsContext;
+//# sourceMappingURL=chunk-D2UMS62N.cjs.map
+//# sourceMappingURL=chunk-D2UMS62N.cjs.map

package/dist/chunk-D2UMS62N.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tabs/tabs-context.ts","../src/components/tabs/tabs.tsx"],"names":["createContext","useContext","forwardRef","Tabs","useState","useRef","useId","useCallback","jsx","TabList","useKeyboard","Tab","useAnnouncer","React","TabPanel"],"mappings":"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","file":"chunk-D2UMS62N.cjs","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface TabsContextValue {\n  /** Currently selected tab value */\n  selectedValue: string;\n  /** Change selected tab */\n  setSelectedValue: (value: string) => void;\n  /** Base ID for ARIA relationships */\n  baseId: string;\n  /** Orientation of tabs */\n  orientation: 'horizontal' | 'vertical';\n  /** Whether tabs are activated on focus or on click */\n  activationMode: 'automatic' | 'manual';\n  /** Register a tab */\n  registerTab: (value: string) => void;\n  /** Unregister a tab */\n  unregisterTab: (value: string) => void;\n  /** Get all tab values */\n  getTabValues: () => string[];\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      'Tabs compound components must be used within a Tabs component'\n    );\n  }\n  return context;\n}\n\nexport const TabsProvider = TabsContext.Provider;\n","import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport {\n  TabsProvider,\n  useTabsContext,\n  type TabsContextValue,\n} from './tabs-context';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Default selected tab value */\n  defaultValue?: string;\n  /** Controlled selected value */\n  value?: string;\n  /** Called when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of tabs */\n  orientation?: 'horizontal' | 'vertical';\n  /** Activation mode */\n  activationMode?: 'automatic' | 'manual';\n  children: React.ReactNode;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    defaultValue = '',\n    value: controlledValue,\n    onValueChange,\n    orientation = 'horizontal',\n    activationMode = 'automatic',\n    children,\n    ...props\n  },\n  ref\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const selectedValue = controlledValue ?? uncontrolledValue;\n  const tabsRef = useRef<string[]>([]);\n  const baseId = useId('tabs');\n\n  const setSelectedValue = useCallback(\n    (value: string) => {\n      if (controlledValue === undefined) {\n        setUncontrolledValue(value);\n      }\n      onValueChange?.(value);\n    },\n    [controlledValue, onValueChange]\n  );\n\n  const registerTab = useCallback((value: string) => {\n    if (!tabsRef.current.includes(value)) {\n      tabsRef.current.push(value);\n    }\n  }, []);\n\n  const unregisterTab = useCallback((value: string) => {\n    const index = tabsRef.current.indexOf(value);\n    if (index > -1) {\n      tabsRef.current.splice(index, 1);\n    }\n  }, []);\n\n  const getTabValues = useCallback(() => [...tabsRef.current], []);\n\n  const contextValue: TabsContextValue = {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    orientation,\n    activationMode,\n    registerTab,\n    unregisterTab,\n    getTabValues,\n  };\n\n  return (\n    <TabsProvider value={contextValue}>\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-compa11y-tabs\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsProvider>\n  );\n});\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the tab list */\n  'aria-label'?: string;\n  children: React.ReactNode;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(\n    { children, 'aria-label': ariaLabel, onKeyDown, ...props },\n    ref\n  ) {\n    const {\n      orientation,\n      selectedValue,\n      setSelectedValue,\n      getTabValues,\n      activationMode,\n    } = useTabsContext();\n\n    const navigateToTab = useCallback(\n      (direction: 'next' | 'previous' | 'first' | 'last') => {\n        const values = getTabValues();\n        if (values.length === 0) return;\n\n        const currentIndex = values.indexOf(selectedValue);\n        let newIndex: number;\n\n        switch (direction) {\n          case 'next':\n            newIndex = (currentIndex + 1) % values.length;\n            break;\n          case 'previous':\n            newIndex = (currentIndex - 1 + values.length) % values.length;\n            break;\n          case 'first':\n            newIndex = 0;\n            break;\n          case 'last':\n            newIndex = values.length - 1;\n            break;\n        }\n\n        const newValue = values[newIndex];\n        if (newValue) {\n          const tabElement = document.querySelector(\n            `[data-compa11y-tab][data-value=\"${newValue}\"]`\n          ) as HTMLElement;\n          tabElement?.focus();\n\n          if (activationMode === 'automatic') {\n            setSelectedValue(newValue);\n          }\n        }\n      },\n      [getTabValues, selectedValue, setSelectedValue, activationMode]\n    );\n\n    const keyboardProps = useKeyboard(\n      {\n        ArrowRight: () => {\n          if (orientation === 'horizontal') navigateToTab('next');\n        },\n        ArrowLeft: () => {\n          if (orientation === 'horizontal') navigateToTab('previous');\n        },\n        ArrowDown: () => {\n          if (orientation === 'vertical') navigateToTab('next');\n        },\n        ArrowUp: () => {\n          if (orientation === 'vertical') navigateToTab('previous');\n        },\n        Home: () => navigateToTab('first'),\n        End: () => navigateToTab('last'),\n      },\n      { preventDefault: true }\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        keyboardProps.onKeyDown(event);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n        data-compa11y-tablist\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport interface TabProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  /** Value identifying this tab */\n  value: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value, disabled = false, children, onClick, ...props },\n  ref\n) {\n  const {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    registerTab,\n    unregisterTab,\n  } = useTabsContext();\n  const { announce } = useAnnouncer();\n\n  React.useEffect(() => {\n    registerTab(value);\n    return () => unregisterTab(value);\n  }, [value, registerTab, unregisterTab]);\n\n  const isSelected = selectedValue === value;\n  const tabId = `${baseId}-tab-${value}`;\n  const panelId = `${baseId}-panel-${value}`;\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (!event.defaultPrevented && !disabled) {\n      setSelectedValue(value);\n      announce(`${value} tab selected`);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={tabId}\n      aria-selected={isSelected}\n      aria-controls={panelId}\n      aria-disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={handleClick}\n      disabled={disabled}\n      data-selected={isSelected}\n      data-disabled={disabled}\n      data-value={value}\n      data-compa11y-tab\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value identifying this panel (must match a Tab value) */\n  value: string;\n  /** Whether to keep panel mounted when not selected */\n  forceMount?: boolean;\n  children: React.ReactNode;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanel({ value, forceMount = false, children, ...props }, ref) {\n    const { selectedValue, baseId } = useTabsContext();\n\n    const isSelected = selectedValue === value;\n    const tabId = `${baseId}-tab-${value}`;\n    const panelId = `${baseId}-panel-${value}`;\n\n    if (!isSelected && !forceMount) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        id={panelId}\n        aria-labelledby={tabId}\n        tabIndex={0}\n        hidden={!isSelected}\n        data-selected={isSelected}\n        data-compa11y-tabpanel\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport const TabsCompound = Object.assign(Tabs, {\n  List: TabList,\n  Tab: Tab,\n  Panel: TabPanel,\n});\n"]}

package/dist/chunk-E265U2RK.js

@@ -0,0 +1,234 @@
+import { useAnnouncer } from './chunk-OND5B7UG.js';
+import { useKeyboard } from './chunk-JXYOE7SH.js';
+import { useId } from './chunk-WURPAE3R.js';
+import React, { createContext, forwardRef, useState, useRef, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs compound components must be used within a Tabs component"
+    );
+  }
+  return context;
+}
+var TabsProvider = TabsContext.Provider;
+var Tabs = forwardRef(function Tabs2({
+  defaultValue = "",
+  value: controlledValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  ...props
+}, ref) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const selectedValue = controlledValue ?? uncontrolledValue;
+  const tabsRef = useRef([]);
+  const baseId = useId("tabs");
+  const setSelectedValue = useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setUncontrolledValue(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const registerTab = useCallback((value) => {
+    if (!tabsRef.current.includes(value)) {
+      tabsRef.current.push(value);
+    }
+  }, []);
+  const unregisterTab = useCallback((value) => {
+    const index = tabsRef.current.indexOf(value);
+    if (index > -1) {
+      tabsRef.current.splice(index, 1);
+    }
+  }, []);
+  const getTabValues = useCallback(() => [...tabsRef.current], []);
+  const contextValue = {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    orientation,
+    activationMode,
+    registerTab,
+    unregisterTab,
+    getTabValues
+  };
+  return /* @__PURE__ */ jsx(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      "data-compa11y-tabs": true,
+      ...props,
+      children
+    }
+  ) });
+});
+var TabList = forwardRef(
+  function TabList2({ children, "aria-label": ariaLabel, onKeyDown, ...props }, ref) {
+    const {
+      orientation,
+      selectedValue,
+      setSelectedValue,
+      getTabValues,
+      activationMode
+    } = useTabsContext();
+    const navigateToTab = useCallback(
+      (direction) => {
+        const values = getTabValues();
+        if (values.length === 0) return;
+        const currentIndex = values.indexOf(selectedValue);
+        let newIndex;
+        switch (direction) {
+          case "next":
+            newIndex = (currentIndex + 1) % values.length;
+            break;
+          case "previous":
+            newIndex = (currentIndex - 1 + values.length) % values.length;
+            break;
+          case "first":
+            newIndex = 0;
+            break;
+          case "last":
+            newIndex = values.length - 1;
+            break;
+        }
+        const newValue = values[newIndex];
+        if (newValue) {
+          const tabElement = document.querySelector(
+            `[data-compa11y-tab][data-value="${newValue}"]`
+          );
+          tabElement?.focus();
+          if (activationMode === "automatic") {
+            setSelectedValue(newValue);
+          }
+        }
+      },
+      [getTabValues, selectedValue, setSelectedValue, activationMode]
+    );
+    const keyboardProps = useKeyboard(
+      {
+        ArrowRight: () => {
+          if (orientation === "horizontal") navigateToTab("next");
+        },
+        ArrowLeft: () => {
+          if (orientation === "horizontal") navigateToTab("previous");
+        },
+        ArrowDown: () => {
+          if (orientation === "vertical") navigateToTab("next");
+        },
+        ArrowUp: () => {
+          if (orientation === "vertical") navigateToTab("previous");
+        },
+        Home: () => navigateToTab("first"),
+        End: () => navigateToTab("last")
+      },
+      { preventDefault: true }
+    );
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        "data-compa11y-tablist": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var Tab = forwardRef(function Tab2({ value, disabled = false, children, onClick, ...props }, ref) {
+  const {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    registerTab,
+    unregisterTab
+  } = useTabsContext();
+  const { announce } = useAnnouncer();
+  React.useEffect(() => {
+    registerTab(value);
+    return () => unregisterTab(value);
+  }, [value, registerTab, unregisterTab]);
+  const isSelected = selectedValue === value;
+  const tabId = `${baseId}-tab-${value}`;
+  const panelId = `${baseId}-panel-${value}`;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && !disabled) {
+      setSelectedValue(value);
+      announce(`${value} tab selected`);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      id: tabId,
+      "aria-selected": isSelected,
+      "aria-controls": panelId,
+      "aria-disabled": disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onClick: handleClick,
+      disabled,
+      "data-selected": isSelected,
+      "data-disabled": disabled,
+      "data-value": value,
+      "data-compa11y-tab": true,
+      ...props,
+      children
+    }
+  );
+});
+var TabPanel = forwardRef(
+  function TabPanel2({ value, forceMount = false, children, ...props }, ref) {
+    const { selectedValue, baseId } = useTabsContext();
+    const isSelected = selectedValue === value;
+    const tabId = `${baseId}-tab-${value}`;
+    const panelId = `${baseId}-panel-${value}`;
+    if (!isSelected && !forceMount) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: panelId,
+        "aria-labelledby": tabId,
+        tabIndex: 0,
+        hidden: !isSelected,
+        "data-selected": isSelected,
+        "data-compa11y-tabpanel": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var TabsCompound = Object.assign(Tabs, {
+  List: TabList,
+  Tab,
+  Panel: TabPanel
+});
+
+export { Tab, TabList, TabPanel, Tabs, TabsCompound, useTabsContext };
+//# sourceMappingURL=chunk-E265U2RK.js.map
+//# sourceMappingURL=chunk-E265U2RK.js.map

package/dist/chunk-E265U2RK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tabs/tabs-context.ts","../src/components/tabs/tabs.tsx"],"names":["Tabs","TabList","Tab","TabPanel"],"mappings":"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","file":"chunk-E265U2RK.js","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface TabsContextValue {\n  /** Currently selected tab value */\n  selectedValue: string;\n  /** Change selected tab */\n  setSelectedValue: (value: string) => void;\n  /** Base ID for ARIA relationships */\n  baseId: string;\n  /** Orientation of tabs */\n  orientation: 'horizontal' | 'vertical';\n  /** Whether tabs are activated on focus or on click */\n  activationMode: 'automatic' | 'manual';\n  /** Register a tab */\n  registerTab: (value: string) => void;\n  /** Unregister a tab */\n  unregisterTab: (value: string) => void;\n  /** Get all tab values */\n  getTabValues: () => string[];\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      'Tabs compound components must be used within a Tabs component'\n    );\n  }\n  return context;\n}\n\nexport const TabsProvider = TabsContext.Provider;\n","import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport {\n  TabsProvider,\n  useTabsContext,\n  type TabsContextValue,\n} from './tabs-context';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Default selected tab value */\n  defaultValue?: string;\n  /** Controlled selected value */\n  value?: string;\n  /** Called when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of tabs */\n  orientation?: 'horizontal' | 'vertical';\n  /** Activation mode */\n  activationMode?: 'automatic' | 'manual';\n  children: React.ReactNode;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    defaultValue = '',\n    value: controlledValue,\n    onValueChange,\n    orientation = 'horizontal',\n    activationMode = 'automatic',\n    children,\n    ...props\n  },\n  ref\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const selectedValue = controlledValue ?? uncontrolledValue;\n  const tabsRef = useRef<string[]>([]);\n  const baseId = useId('tabs');\n\n  const setSelectedValue = useCallback(\n    (value: string) => {\n      if (controlledValue === undefined) {\n        setUncontrolledValue(value);\n      }\n      onValueChange?.(value);\n    },\n    [controlledValue, onValueChange]\n  );\n\n  const registerTab = useCallback((value: string) => {\n    if (!tabsRef.current.includes(value)) {\n      tabsRef.current.push(value);\n    }\n  }, []);\n\n  const unregisterTab = useCallback((value: string) => {\n    const index = tabsRef.current.indexOf(value);\n    if (index > -1) {\n      tabsRef.current.splice(index, 1);\n    }\n  }, []);\n\n  const getTabValues = useCallback(() => [...tabsRef.current], []);\n\n  const contextValue: TabsContextValue = {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    orientation,\n    activationMode,\n    registerTab,\n    unregisterTab,\n    getTabValues,\n  };\n\n  return (\n    <TabsProvider value={contextValue}>\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-compa11y-tabs\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsProvider>\n  );\n});\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the tab list */\n  'aria-label'?: string;\n  children: React.ReactNode;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(\n    { children, 'aria-label': ariaLabel, onKeyDown, ...props },\n    ref\n  ) {\n    const {\n      orientation,\n      selectedValue,\n      setSelectedValue,\n      getTabValues,\n      activationMode,\n    } = useTabsContext();\n\n    const navigateToTab = useCallback(\n      (direction: 'next' | 'previous' | 'first' | 'last') => {\n        const values = getTabValues();\n        if (values.length === 0) return;\n\n        const currentIndex = values.indexOf(selectedValue);\n        let newIndex: number;\n\n        switch (direction) {\n          case 'next':\n            newIndex = (currentIndex + 1) % values.length;\n            break;\n          case 'previous':\n            newIndex = (currentIndex - 1 + values.length) % values.length;\n            break;\n          case 'first':\n            newIndex = 0;\n            break;\n          case 'last':\n            newIndex = values.length - 1;\n            break;\n        }\n\n        const newValue = values[newIndex];\n        if (newValue) {\n          const tabElement = document.querySelector(\n            `[data-compa11y-tab][data-value=\"${newValue}\"]`\n          ) as HTMLElement;\n          tabElement?.focus();\n\n          if (activationMode === 'automatic') {\n            setSelectedValue(newValue);\n          }\n        }\n      },\n      [getTabValues, selectedValue, setSelectedValue, activationMode]\n    );\n\n    const keyboardProps = useKeyboard(\n      {\n        ArrowRight: () => {\n          if (orientation === 'horizontal') navigateToTab('next');\n        },\n        ArrowLeft: () => {\n          if (orientation === 'horizontal') navigateToTab('previous');\n        },\n        ArrowDown: () => {\n          if (orientation === 'vertical') navigateToTab('next');\n        },\n        ArrowUp: () => {\n          if (orientation === 'vertical') navigateToTab('previous');\n        },\n        Home: () => navigateToTab('first'),\n        End: () => navigateToTab('last'),\n      },\n      { preventDefault: true }\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        keyboardProps.onKeyDown(event);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n        data-compa11y-tablist\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport interface TabProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  /** Value identifying this tab */\n  value: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value, disabled = false, children, onClick, ...props },\n  ref\n) {\n  const {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    registerTab,\n    unregisterTab,\n  } = useTabsContext();\n  const { announce } = useAnnouncer();\n\n  React.useEffect(() => {\n    registerTab(value);\n    return () => unregisterTab(value);\n  }, [value, registerTab, unregisterTab]);\n\n  const isSelected = selectedValue === value;\n  const tabId = `${baseId}-tab-${value}`;\n  const panelId = `${baseId}-panel-${value}`;\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (!event.defaultPrevented && !disabled) {\n      setSelectedValue(value);\n      announce(`${value} tab selected`);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={tabId}\n      aria-selected={isSelected}\n      aria-controls={panelId}\n      aria-disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={handleClick}\n      disabled={disabled}\n      data-selected={isSelected}\n      data-disabled={disabled}\n      data-value={value}\n      data-compa11y-tab\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value identifying this panel (must match a Tab value) */\n  value: string;\n  /** Whether to keep panel mounted when not selected */\n  forceMount?: boolean;\n  children: React.ReactNode;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanel({ value, forceMount = false, children, ...props }, ref) {\n    const { selectedValue, baseId } = useTabsContext();\n\n    const isSelected = selectedValue === value;\n    const tabId = `${baseId}-tab-${value}`;\n    const panelId = `${baseId}-panel-${value}`;\n\n    if (!isSelected && !forceMount) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        id={panelId}\n        aria-labelledby={tabId}\n        tabIndex={0}\n        hidden={!isSelected}\n        data-selected={isSelected}\n        data-compa11y-tabpanel\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport const TabsCompound = Object.assign(Tabs, {\n  List: TabList,\n  Tab: Tab,\n  Panel: TabPanel,\n});\n"]}