@huin-core/react-tabs 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import React__default from 'react';
+import { Primitive } from '@huin-core/react-primitive';
+import * as RovingFocusGroup from '@huin-core/react-roving-focus';
+
+type Scope<C = any> = {
+    [scopeName: string]: React.Context<C>[];
+} | undefined;
+type ScopeHook = (scope: Scope) => {
+    [__scopeProp: string]: Scope;
+};
+interface CreateScope {
+    scopeName: string;
+    (): ScopeHook;
+}
+
+declare const createTabsScope: CreateScope;
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface TabsProps extends PrimitiveDivProps {
+    /** The value for the selected tab, if controlled */
+    value?: string;
+    /** The value of the tab to select by default, if uncontrolled */
+    defaultValue?: string;
+    /** A function called when a new tab is selected */
+    onValueChange?: (value: string) => void;
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     * @defaultValue horizontal
+     */
+    orientation?: RovingFocusGroupProps["orientation"];
+    /**
+     * The direction of navigation between toolbar items.
+     */
+    dir?: RovingFocusGroupProps["dir"];
+    /**
+     * Whether a tab is activated automatically or manually.
+     * @defaultValue automatic
+     * */
+    activationMode?: "automatic" | "manual";
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TabsListProps extends PrimitiveDivProps {
+    loop?: RovingFocusGroupProps["loop"];
+}
+declare const TabsList: React__default.ForwardRefExoticComponent<TabsListProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
+interface TabsTriggerProps extends PrimitiveButtonProps {
+    value: string;
+}
+declare const TabsTrigger: React__default.ForwardRefExoticComponent<TabsTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface TabsContentProps extends PrimitiveDivProps {
+    value: string;
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+declare const TabsContent: React__default.ForwardRefExoticComponent<TabsContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, createTabsScope };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import React__default from 'react';
+import { Primitive } from '@huin-core/react-primitive';
+import * as RovingFocusGroup from '@huin-core/react-roving-focus';
+
+type Scope<C = any> = {
+    [scopeName: string]: React.Context<C>[];
+} | undefined;
+type ScopeHook = (scope: Scope) => {
+    [__scopeProp: string]: Scope;
+};
+interface CreateScope {
+    scopeName: string;
+    (): ScopeHook;
+}
+
+declare const createTabsScope: CreateScope;
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface TabsProps extends PrimitiveDivProps {
+    /** The value for the selected tab, if controlled */
+    value?: string;
+    /** The value of the tab to select by default, if uncontrolled */
+    defaultValue?: string;
+    /** A function called when a new tab is selected */
+    onValueChange?: (value: string) => void;
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     * @defaultValue horizontal
+     */
+    orientation?: RovingFocusGroupProps["orientation"];
+    /**
+     * The direction of navigation between toolbar items.
+     */
+    dir?: RovingFocusGroupProps["dir"];
+    /**
+     * Whether a tab is activated automatically or manually.
+     * @defaultValue automatic
+     * */
+    activationMode?: "automatic" | "manual";
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TabsListProps extends PrimitiveDivProps {
+    loop?: RovingFocusGroupProps["loop"];
+}
+declare const TabsList: React__default.ForwardRefExoticComponent<TabsListProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
+interface TabsTriggerProps extends PrimitiveButtonProps {
+    value: string;
+}
+declare const TabsTrigger: React__default.ForwardRefExoticComponent<TabsTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface TabsContentProps extends PrimitiveDivProps {
+    value: string;
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+declare const TabsContent: React__default.ForwardRefExoticComponent<TabsContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, createTabsScope };

package/dist/index.js

@@ -0,0 +1,245 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/tabs/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  createTabsScope: () => createTabsScope
+});
+module.exports = __toCommonJS(src_exports);
+
+// packages/react/tabs/src/Tabs.tsx
+var React = __toESM(require("react"));
+var import_react_context = require("@huin-core/react-context");
+var import_react_roving_focus = require("@huin-core/react-roving-focus");
+var import_react_primitive = require("@huin-core/react-primitive");
+var import_react_direction = require("@huin-core/react-direction");
+var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
+var import_react_id = require("@huin-core/react-id");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TABS_NAME = "Tabs";
+var [createTabsContext, createTabsScope] = (0, import_react_context.createContextScope)(TABS_NAME, [
+  import_react_roving_focus.createRovingFocusGroupScope
+]);
+var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
+var Tabs = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "automatic",
+      ...tabsProps
+    } = props;
+    const direction = (0, import_react_direction.useDirection)(dir);
+    const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TabsProvider,
+      {
+        scope: __scopeTabs,
+        baseId: (0, import_react_id.useId)(),
+        value,
+        onValueChange: setValue,
+        orientation,
+        dir: direction,
+        activationMode,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_primitive.Primitive.div,
+          {
+            dir: direction,
+            "data-orientation": orientation,
+            ...tabsProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Tabs.displayName = TABS_NAME;
+
+// packages/react/tabs/src/TabsList.tsx
+var import_react = __toESM(require("react"));
+var import_react_primitive2 = require("@huin-core/react-primitive");
+var import_react_roving_focus2 = require("@huin-core/react-roving-focus");
+var RovingFocusGroup = __toESM(require("@huin-core/react-roving-focus"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TAB_LIST_NAME = "TabsList";
+var useRovingFocusGroupScope = (0, import_react_roving_focus2.createRovingFocusGroupScope)();
+var TabsList = import_react.default.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, loop = true, ...listProps } = props;
+    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      RovingFocusGroup.Root,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation: context.orientation,
+        dir: context.dir,
+        loop,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_primitive2.Primitive.div,
+          {
+            role: "tablist",
+            "aria-orientation": context.orientation,
+            ...listProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+TabsList.displayName = TAB_LIST_NAME;
+
+// packages/react/tabs/src/TabsTrigger.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_primitive4 = require("@huin-core/react-primitive");
+
+// packages/react/tabs/src/TabsContent.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_primitive3 = require("@huin-core/react-primitive");
+var import_react_presence = require("@huin-core/react-presence");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CONTENT_NAME = "TabsContent";
+var TabsContent = import_react2.default.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+    const context = useTabsContext(CONTENT_NAME, __scopeTabs);
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    const isMountAnimationPreventedRef = import_react2.default.useRef(isSelected);
+    import_react2.default.useEffect(() => {
+      const rAF = requestAnimationFrame(
+        () => isMountAnimationPreventedRef.current = false
+      );
+      return () => cancelAnimationFrame(rAF);
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_presence.Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_primitive3.Primitive.div,
+      {
+        "data-state": isSelected ? "active" : "inactive",
+        "data-orientation": context.orientation,
+        role: "tabpanel",
+        "aria-labelledby": triggerId,
+        hidden: !present,
+        id: contentId,
+        tabIndex: 0,
+        ...contentProps,
+        ref: forwardedRef,
+        style: {
+          ...props.style,
+          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
+        },
+        children: present && children
+      }
+    ) });
+  }
+);
+TabsContent.displayName = CONTENT_NAME;
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+
+// packages/react/tabs/src/TabsTrigger.tsx
+var RovingFocusGroup2 = __toESM(require("@huin-core/react-roving-focus"));
+var import_primitive = require("@huin-core/primitive");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TRIGGER_NAME = "TabsTrigger";
+var TabsTrigger = import_react3.default.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
+    const context = useTabsContext(TRIGGER_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RovingFocusGroup2.Item,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_react_primitive4.Primitive.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isSelected,
+            "aria-controls": contentId,
+            "data-state": isSelected ? "active" : "inactive",
+            "data-disabled": disabled ? "" : void 0,
+            disabled,
+            id: triggerId,
+            ...triggerProps,
+            ref: forwardedRef,
+            onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => {
+              if (!disabled && event.button === 0 && event.ctrlKey === false) {
+                context.onValueChange(value);
+              } else {
+                event.preventDefault();
+              }
+            }),
+            onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
+              if ([" ", "Enter"].includes(event.key))
+                context.onValueChange(value);
+            }),
+            onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
+              const isAutomaticActivation = context.activationMode !== "manual";
+              if (!isSelected && !disabled && isAutomaticActivation) {
+                context.onValueChange(value);
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TabsTrigger.displayName = TRIGGER_NAME;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/Tabs.tsx", "../src/TabsList.tsx", "../src/TabsTrigger.tsx", "../src/TabsContent.tsx"],
+  "sourcesContent": ["\"use client\";\nexport { createTabsScope, Tabs } from \"./Tabs\";\nexport { TabsList } from \"./TabsList\";\nexport { TabsTrigger } from \"./TabsTrigger\";\nexport { TabsContent } from \"./TabsContent\";\n\nexport type { TabsProps } from \"./Tabs\";\nexport type { TabsListProps } from \"./TabsList\";\nexport type { TabsTriggerProps } from \"./TabsTrigger\";\nexport type { TabsContentProps } from \"./TabsContent\";\n", "import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { useDirection } from \"@huin-core/react-direction\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { useId } from \"@huin-core/react-id\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = \"Tabs\";\n\nexport type ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n]);\n\ntype TabsContextValue = {\n  baseId: string;\n  value?: string;\n  onValueChange: (value: string) => void;\n  orientation?: TabsProps[\"orientation\"];\n  dir?: TabsProps[\"dir\"];\n  activationMode?: TabsProps[\"activationMode\"];\n};\n\nexport const [TabsProvider, useTabsContext] =\n  createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\nexport type RovingFocusGroupProps = React.ComponentPropsWithoutRef<\n  typeof RovingFocusGroup.Root\n>;\nexport type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n  /** The value for the selected tab, if controlled */\n  value?: string;\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string;\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void;\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps[\"orientation\"];\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps[\"dir\"];\n  /**\n   * Whether a tab is activated automatically or manually.\n   * @defaultValue automatic\n   * */\n  activationMode?: \"automatic\" | \"manual\";\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n  (props: ScopedProps<TabsProps>, forwardedRef) => {\n    const {\n      __scopeTabs,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation = \"horizontal\",\n      dir,\n      activationMode = \"automatic\",\n      ...tabsProps\n    } = props;\n    const direction = useDirection(dir);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChange,\n      defaultProp: defaultValue,\n    });\n\n    return (\n      <TabsProvider\n        scope={__scopeTabs}\n        baseId={useId()}\n        value={value}\n        onValueChange={setValue}\n        orientation={orientation}\n        dir={direction}\n        activationMode={activationMode}\n      >\n        <Primitive.div\n          dir={direction}\n          data-orientation={orientation}\n          {...tabsProps}\n          ref={forwardedRef}\n        />\n      </TabsProvider>\n    );\n  }\n);\n\nTabs.displayName = TABS_NAME;\n\nconst Root = Tabs;\n\nexport {\n  createTabsScope,\n  //\n  Tabs,\n  //\n  Root,\n};\nexport type { TabsProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n  PrimitiveDivProps,\n  RovingFocusGroupProps,\n  ScopedProps,\n  useTabsContext,\n} from \"./Tabs\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\n\nconst TAB_LIST_NAME = \"TabsList\";\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n  loop?: RovingFocusGroupProps[\"loop\"];\n}\nexport const useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n  (props: ScopedProps<TabsListProps>, forwardedRef) => {\n    const { __scopeTabs, loop = true, ...listProps } = props;\n    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    return (\n      <RovingFocusGroup.Root\n        asChild\n        {...rovingFocusGroupScope}\n        orientation={context.orientation}\n        dir={context.dir}\n        loop={loop}\n      >\n        <Primitive.div\n          role=\"tablist\"\n          aria-orientation={context.orientation}\n          {...listProps}\n          ref={forwardedRef}\n        />\n      </RovingFocusGroup.Root>\n    );\n  }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\nexport { TabsList };\nexport type { TabsListProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useTabsContext } from \"./Tabs\";\nimport { useRovingFocusGroupScope } from \"./TabsList\";\nimport { makeContentId, makeTriggerId } from \"./TabsContent\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"TabsTrigger\";\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n  typeof Primitive.button\n>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n  value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n  (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n    const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n    const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    return (\n      <RovingFocusGroup.Item\n        asChild\n        {...rovingFocusGroupScope}\n        focusable={!disabled}\n        active={isSelected}\n      >\n        <Primitive.button\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={isSelected}\n          aria-controls={contentId}\n          data-state={isSelected ? \"active\" : \"inactive\"}\n          data-disabled={disabled ? \"\" : undefined}\n          disabled={disabled}\n          id={triggerId}\n          {...triggerProps}\n          ref={forwardedRef}\n          onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n            // but not when the control key is pressed (avoiding MacOS right click)\n            if (!disabled && event.button === 0 && event.ctrlKey === false) {\n              context.onValueChange(value);\n            } else {\n              // prevent focus to avoid accidental activation\n              event.preventDefault();\n            }\n          })}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if ([\" \", \"Enter\"].includes(event.key))\n              context.onValueChange(value);\n          })}\n          onFocus={composeEventHandlers(props.onFocus, () => {\n            // handle \"automatic\" activation if necessary\n            // ie. activate tab following focus\n            const isAutomaticActivation = context.activationMode !== \"manual\";\n            if (!isSelected && !disabled && isAutomaticActivation) {\n              context.onValueChange(value);\n            }\n          })}\n        />\n      </RovingFocusGroup.Item>\n    );\n  }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\nexport { TabsTrigger };\nexport type { TabsTriggerProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { PrimitiveDivProps, ScopedProps, useTabsContext } from \"./Tabs\";\nimport { Presence } from \"@huin-core/react-presence\";\n\nconst CONTENT_NAME = \"TabsContent\";\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n  value: string;\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n  (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n    const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n    React.useEffect(() => {\n      const rAF = requestAnimationFrame(\n        () => (isMountAnimationPreventedRef.current = false)\n      );\n      return () => cancelAnimationFrame(rAF);\n    }, []);\n    return (\n      <Presence present={forceMount || isSelected}>\n        {({ present }) => (\n          <Primitive.div\n            data-state={isSelected ? \"active\" : \"inactive\"}\n            data-orientation={context.orientation}\n            role=\"tabpanel\"\n            aria-labelledby={triggerId}\n            hidden={!present}\n            id={contentId}\n            tabIndex={0}\n            {...contentProps}\n            ref={forwardedRef}\n            style={{\n              ...props.style,\n              animationDuration: isMountAnimationPreventedRef.current\n                ? \"0s\"\n                : undefined,\n            }}\n          >\n            {present && children}\n          </Primitive.div>\n        )}\n      </Presence>\n    );\n  }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`;\n}\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`;\n}\n\nexport { TabsContent };\nexport type { TabsContentProps };\n"],
+  "mappings": "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",
+  "names": ["import_react_primitive", "import_react_roving_focus", "import_jsx_runtime", "React", "import_react", "import_react_primitive", "import_react", "import_react_primitive", "import_jsx_runtime", "React", "RovingFocusGroup", "import_jsx_runtime", "React"]
+}

package/dist/index.mjs

@@ -0,0 +1,213 @@
+"use client";
+
+// packages/react/tabs/src/Tabs.tsx
+import * as React from "react";
+import { createContextScope } from "@huin-core/react-context";
+import { createRovingFocusGroupScope } from "@huin-core/react-roving-focus";
+import { Primitive } from "@huin-core/react-primitive";
+import { useDirection } from "@huin-core/react-direction";
+import { useControllableState } from "@huin-core/react-use-controllable-state";
+import { useId } from "@huin-core/react-id";
+import { jsx } from "react/jsx-runtime";
+var TABS_NAME = "Tabs";
+var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
+  createRovingFocusGroupScope
+]);
+var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
+var Tabs = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "automatic",
+      ...tabsProps
+    } = props;
+    const direction = useDirection(dir);
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue
+    });
+    return /* @__PURE__ */ jsx(
+      TabsProvider,
+      {
+        scope: __scopeTabs,
+        baseId: useId(),
+        value,
+        onValueChange: setValue,
+        orientation,
+        dir: direction,
+        activationMode,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            dir: direction,
+            "data-orientation": orientation,
+            ...tabsProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Tabs.displayName = TABS_NAME;
+
+// packages/react/tabs/src/TabsList.tsx
+import React2 from "react";
+import { Primitive as Primitive2 } from "@huin-core/react-primitive";
+import { createRovingFocusGroupScope as createRovingFocusGroupScope2 } from "@huin-core/react-roving-focus";
+import * as RovingFocusGroup from "@huin-core/react-roving-focus";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TAB_LIST_NAME = "TabsList";
+var useRovingFocusGroupScope = createRovingFocusGroupScope2();
+var TabsList = React2.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, loop = true, ...listProps } = props;
+    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    return /* @__PURE__ */ jsx2(
+      RovingFocusGroup.Root,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation: context.orientation,
+        dir: context.dir,
+        loop,
+        children: /* @__PURE__ */ jsx2(
+          Primitive2.div,
+          {
+            role: "tablist",
+            "aria-orientation": context.orientation,
+            ...listProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+TabsList.displayName = TAB_LIST_NAME;
+
+// packages/react/tabs/src/TabsTrigger.tsx
+import React4 from "react";
+import { Primitive as Primitive4 } from "@huin-core/react-primitive";
+
+// packages/react/tabs/src/TabsContent.tsx
+import React3 from "react";
+import { Primitive as Primitive3 } from "@huin-core/react-primitive";
+import { Presence } from "@huin-core/react-presence";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CONTENT_NAME = "TabsContent";
+var TabsContent = React3.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+    const context = useTabsContext(CONTENT_NAME, __scopeTabs);
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    const isMountAnimationPreventedRef = React3.useRef(isSelected);
+    React3.useEffect(() => {
+      const rAF = requestAnimationFrame(
+        () => isMountAnimationPreventedRef.current = false
+      );
+      return () => cancelAnimationFrame(rAF);
+    }, []);
+    return /* @__PURE__ */ jsx3(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx3(
+      Primitive3.div,
+      {
+        "data-state": isSelected ? "active" : "inactive",
+        "data-orientation": context.orientation,
+        role: "tabpanel",
+        "aria-labelledby": triggerId,
+        hidden: !present,
+        id: contentId,
+        tabIndex: 0,
+        ...contentProps,
+        ref: forwardedRef,
+        style: {
+          ...props.style,
+          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
+        },
+        children: present && children
+      }
+    ) });
+  }
+);
+TabsContent.displayName = CONTENT_NAME;
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+
+// packages/react/tabs/src/TabsTrigger.tsx
+import * as RovingFocusGroup2 from "@huin-core/react-roving-focus";
+import { composeEventHandlers } from "@huin-core/primitive";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TRIGGER_NAME = "TabsTrigger";
+var TabsTrigger = React4.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
+    const context = useTabsContext(TRIGGER_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    return /* @__PURE__ */ jsx4(
+      RovingFocusGroup2.Item,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */ jsx4(
+          Primitive4.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isSelected,
+            "aria-controls": contentId,
+            "data-state": isSelected ? "active" : "inactive",
+            "data-disabled": disabled ? "" : void 0,
+            disabled,
+            id: triggerId,
+            ...triggerProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
+              if (!disabled && event.button === 0 && event.ctrlKey === false) {
+                context.onValueChange(value);
+              } else {
+                event.preventDefault();
+              }
+            }),
+            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+              if ([" ", "Enter"].includes(event.key))
+                context.onValueChange(value);
+            }),
+            onFocus: composeEventHandlers(props.onFocus, () => {
+              const isAutomaticActivation = context.activationMode !== "manual";
+              if (!isSelected && !disabled && isAutomaticActivation) {
+                context.onValueChange(value);
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TabsTrigger.displayName = TRIGGER_NAME;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  createTabsScope
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Tabs.tsx", "../src/TabsList.tsx", "../src/TabsTrigger.tsx", "../src/TabsContent.tsx"],
+  "sourcesContent": ["import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { useDirection } from \"@huin-core/react-direction\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { useId } from \"@huin-core/react-id\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = \"Tabs\";\n\nexport type ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n]);\n\ntype TabsContextValue = {\n  baseId: string;\n  value?: string;\n  onValueChange: (value: string) => void;\n  orientation?: TabsProps[\"orientation\"];\n  dir?: TabsProps[\"dir\"];\n  activationMode?: TabsProps[\"activationMode\"];\n};\n\nexport const [TabsProvider, useTabsContext] =\n  createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\nexport type RovingFocusGroupProps = React.ComponentPropsWithoutRef<\n  typeof RovingFocusGroup.Root\n>;\nexport type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n  /** The value for the selected tab, if controlled */\n  value?: string;\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string;\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void;\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps[\"orientation\"];\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps[\"dir\"];\n  /**\n   * Whether a tab is activated automatically or manually.\n   * @defaultValue automatic\n   * */\n  activationMode?: \"automatic\" | \"manual\";\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n  (props: ScopedProps<TabsProps>, forwardedRef) => {\n    const {\n      __scopeTabs,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation = \"horizontal\",\n      dir,\n      activationMode = \"automatic\",\n      ...tabsProps\n    } = props;\n    const direction = useDirection(dir);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChange,\n      defaultProp: defaultValue,\n    });\n\n    return (\n      <TabsProvider\n        scope={__scopeTabs}\n        baseId={useId()}\n        value={value}\n        onValueChange={setValue}\n        orientation={orientation}\n        dir={direction}\n        activationMode={activationMode}\n      >\n        <Primitive.div\n          dir={direction}\n          data-orientation={orientation}\n          {...tabsProps}\n          ref={forwardedRef}\n        />\n      </TabsProvider>\n    );\n  }\n);\n\nTabs.displayName = TABS_NAME;\n\nconst Root = Tabs;\n\nexport {\n  createTabsScope,\n  //\n  Tabs,\n  //\n  Root,\n};\nexport type { TabsProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n  PrimitiveDivProps,\n  RovingFocusGroupProps,\n  ScopedProps,\n  useTabsContext,\n} from \"./Tabs\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\n\nconst TAB_LIST_NAME = \"TabsList\";\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n  loop?: RovingFocusGroupProps[\"loop\"];\n}\nexport const useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n  (props: ScopedProps<TabsListProps>, forwardedRef) => {\n    const { __scopeTabs, loop = true, ...listProps } = props;\n    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    return (\n      <RovingFocusGroup.Root\n        asChild\n        {...rovingFocusGroupScope}\n        orientation={context.orientation}\n        dir={context.dir}\n        loop={loop}\n      >\n        <Primitive.div\n          role=\"tablist\"\n          aria-orientation={context.orientation}\n          {...listProps}\n          ref={forwardedRef}\n        />\n      </RovingFocusGroup.Root>\n    );\n  }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\nexport { TabsList };\nexport type { TabsListProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useTabsContext } from \"./Tabs\";\nimport { useRovingFocusGroupScope } from \"./TabsList\";\nimport { makeContentId, makeTriggerId } from \"./TabsContent\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"TabsTrigger\";\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n  typeof Primitive.button\n>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n  value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n  (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n    const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n    const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    return (\n      <RovingFocusGroup.Item\n        asChild\n        {...rovingFocusGroupScope}\n        focusable={!disabled}\n        active={isSelected}\n      >\n        <Primitive.button\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={isSelected}\n          aria-controls={contentId}\n          data-state={isSelected ? \"active\" : \"inactive\"}\n          data-disabled={disabled ? \"\" : undefined}\n          disabled={disabled}\n          id={triggerId}\n          {...triggerProps}\n          ref={forwardedRef}\n          onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n            // but not when the control key is pressed (avoiding MacOS right click)\n            if (!disabled && event.button === 0 && event.ctrlKey === false) {\n              context.onValueChange(value);\n            } else {\n              // prevent focus to avoid accidental activation\n              event.preventDefault();\n            }\n          })}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if ([\" \", \"Enter\"].includes(event.key))\n              context.onValueChange(value);\n          })}\n          onFocus={composeEventHandlers(props.onFocus, () => {\n            // handle \"automatic\" activation if necessary\n            // ie. activate tab following focus\n            const isAutomaticActivation = context.activationMode !== \"manual\";\n            if (!isSelected && !disabled && isAutomaticActivation) {\n              context.onValueChange(value);\n            }\n          })}\n        />\n      </RovingFocusGroup.Item>\n    );\n  }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\nexport { TabsTrigger };\nexport type { TabsTriggerProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { PrimitiveDivProps, ScopedProps, useTabsContext } from \"./Tabs\";\nimport { Presence } from \"@huin-core/react-presence\";\n\nconst CONTENT_NAME = \"TabsContent\";\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n  value: string;\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n  (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n    const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n    React.useEffect(() => {\n      const rAF = requestAnimationFrame(\n        () => (isMountAnimationPreventedRef.current = false)\n      );\n      return () => cancelAnimationFrame(rAF);\n    }, []);\n    return (\n      <Presence present={forceMount || isSelected}>\n        {({ present }) => (\n          <Primitive.div\n            data-state={isSelected ? \"active\" : \"inactive\"}\n            data-orientation={context.orientation}\n            role=\"tabpanel\"\n            aria-labelledby={triggerId}\n            hidden={!present}\n            id={contentId}\n            tabIndex={0}\n            {...contentProps}\n            ref={forwardedRef}\n            style={{\n              ...props.style,\n              animationDuration: isMountAnimationPreventedRef.current\n                ? \"0s\"\n                : undefined,\n            }}\n          >\n            {present && children}\n          </Primitive.div>\n        )}\n      </Presence>\n    );\n  }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`;\n}\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`;\n}\n\nexport { TabsContent };\nexport type { TabsContentProps };\n"],
+  "mappings": "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",
+  "names": ["React", "Primitive", "createRovingFocusGroupScope", "jsx", "React", "Primitive", "React", "Primitive", "React", "Primitive", "jsx", "React", "Primitive", "RovingFocusGroup", "jsx", "React", "Primitive"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huin-core/react-tabs",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "exports": {
     ".": {
@@ -20,7 +20,8 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "package.json"
   ],
   "sideEffects": false,
   "scripts": {