@dxos/react-ui-tabs 0.8.3 → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "description": "Components for facilitating a Tabs pattern.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -32,25 +33,25 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/react-ui-attention": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "vite": "7.1.1",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
@@ -12,6 +13,41 @@ import { Tabs as NaturalTabs } from './Tabs';
 
 faker.seed(1234);
 
+export const DefaultStory = () => {
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay blockAlign='start'>
+        <Dialog.Content classNames='is-[calc(100dvw-4rem)] !max-is-full'>
+          <NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
+            <NaturalTabs.Viewport>
+              <NaturalTabs.Tablist>
+                {Object.entries(content).map(([id, { title }]) => {
+                  return (
+                    <NaturalTabs.Tab key={id} value={id}>
+                      {title}
+                    </NaturalTabs.Tab>
+                  );
+                })}
+              </NaturalTabs.Tablist>
+              {Object.entries(content).map(([id, { panel }]) => {
+                return (
+                  <NaturalTabs.Tabpanel key={id} value={id} classNames='m-1'>
+                    <NaturalTabs.BackButton density='fine'>
+                      <Icon icon='ph--arrow-left--bold' size={4} />
+                      <span>Back to tab list</span>
+                    </NaturalTabs.BackButton>
+                    <p className='pli-1'>{panel}</p>
+                  </NaturalTabs.Tabpanel>
+                );
+              })}
+            </NaturalTabs.Viewport>
+          </NaturalTabs.Root>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
 const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; panel: string } }, _, index) => {
   acc[`t${index}`] = {
     title: faker.commerce.productName(),
@@ -20,46 +56,15 @@ const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; pa
   return acc;
 }, {});
 
-export default {
+const meta = {
   title: 'ui/react-ui-tabs/Tabs',
   component: NaturalTabs.Root,
+  render: DefaultStory,
   decorators: [withTheme],
-  // parameters: { translations },
-};
+} satisfies Meta<typeof DefaultStory>;
 
-export const Tabs = {
-  render: () => {
-    return (
-      <Dialog.Root open>
-        <Dialog.Overlay blockAlign='start'>
-          <Dialog.Content classNames='is-[calc(100dvw-4rem)] !max-is-full'>
-            <NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
-              <NaturalTabs.Viewport>
-                <NaturalTabs.Tablist>
-                  {Object.entries(content).map(([id, { title }]) => {
-                    return (
-                      <NaturalTabs.Tab key={id} value={id}>
-                        {title}
-                      </NaturalTabs.Tab>
-                    );
-                  })}
-                </NaturalTabs.Tablist>
-                {Object.entries(content).map(([id, { panel }]) => {
-                  return (
-                    <NaturalTabs.Tabpanel key={id} value={id} classNames='m-1'>
-                      <NaturalTabs.BackButton density='fine'>
-                        <Icon icon='ph--arrow-left--bold' size={4} />
-                        <span>Back to tab list</span>
-                      </NaturalTabs.BackButton>
-                      <p className='pli-1'>{panel}</p>
-                    </NaturalTabs.Tabpanel>
-                  );
-                })}
-              </NaturalTabs.Viewport>
-            </NaturalTabs.Root>
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Root>
-    );
-  },
-};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/Tabs.tsx

@@ -2,15 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';
 
-import { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import { Button, type ButtonProps, IconButton, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
+import { ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
 
 type TabsActivePart = 'list' | 'panel';
 
@@ -144,6 +144,7 @@ const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
   return (
     <TabsPrimitive.List
       {...props}
+      data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
       className={mx(
         'max-bs-full is-full',
         // NOTE: Padding should be common to Toolbar.
@@ -185,6 +186,7 @@ type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
 const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {
   const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');
   const { hasAttention } = useAttention(attendableId);
+
   const handleClick = useCallback(
     // NOTE: This handler is only called if the tab is *already active*.
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -204,10 +206,8 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
         {...props}
         onClick={handleClick}
         classNames={[
-          'pli-2 rounded-sm',
           orientation === 'vertical' && 'block justify-start text-start is-full',
           orientation === 'vertical' && ghostSelectedContainerMd,
-          ghostHover,
           classNames,
         ]}
       >
@@ -217,6 +217,40 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
   );
 };
 
+type TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
+
+const TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {
+  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');
+  const { hasAttention } = useAttention(attendableId);
+
+  // NOTE: This handler is only called if the tab is *already active*.
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      setActivePart('panel');
+      onClick?.(event);
+    },
+    [setActivePart, onClick],
+  );
+
+  return (
+    <TabsPrimitive.Trigger value={value} asChild>
+      <IconButton
+        density='fine'
+        variant={
+          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'
+        }
+        {...props}
+        onClick={handleClick}
+        classNames={[
+          orientation === 'vertical' && 'justify-start text-start is-full',
+          orientation === 'vertical' && ghostSelectedContainerMd,
+          classNames,
+        ]}
+      />
+    </TabsPrimitive.Trigger>
+  );
+};
+
 type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
 
 const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
@@ -233,6 +267,7 @@ export const Tabs = {
   Root: TabsRoot,
   Tablist: TabsTablist,
   Tab: TabsTab,
+  IconTab: TabsIconTab,
   TabPrimitive: TabsPrimitive.Trigger,
   TabGroupHeading: TabsTabGroupHeading,
   Tabpanel: TabsTabpanel,

package/dist/lib/node/index.cjs

@@ -1,231 +0,0 @@
-"use strict";
-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);
-var node_exports = {};
-__export(node_exports, {
-  Tabs: () => Tabs
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_react_tabster = require("@fluentui/react-tabster");
-var import_react_context = require("@radix-ui/react-context");
-var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var TABS_NAME = "Tabs";
-var [TabsContextProvider, useTabsContext] = (0, import_react_context.createContext)(TABS_NAME, {
-  activePart: "list",
-  setActivePart: () => {
-  },
-  orientation: "vertical"
-});
-var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const _1 = (0, import_react_tabster.useArrowNavigationGroup)();
-    const _2 = (0, import_react_tabster.useFocusableGroup)();
-    const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: propsActivePart,
-      onChange: onActivePartChange,
-      defaultProp: defaultActivePart
-    });
-    const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: propsValue,
-      onChange: onValueChange,
-      defaultProp: defaultValue
-    });
-    const handleValueChange = (0, import_react.useCallback)((nextValue) => {
-      setActivePart("panel");
-      setValue(nextValue);
-    }, [
-      value
-    ]);
-    const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
-    const tabsRoot = (0, import_react.useRef)(null);
-    (0, import_react.useLayoutEffect)(() => {
-      if (tabsRoot.current) {
-        findFirstFocusable(tabsRoot.current)?.focus();
-      }
-    }, [
-      activePart
-    ]);
-    return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
-      orientation,
-      activePart,
-      setActivePart,
-      value,
-      attendableId,
-      verticalVariant
-    }, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
-      activationMode,
-      "data-active": activePart,
-      orientation,
-      ...props,
-      value,
-      onValueChange: handleValueChange,
-      className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
-      ref: tabsRoot
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var TabsViewport = ({ classNames, children, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      role: "none",
-      ...props,
-      "data-active": activePart,
-      className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
-        "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
-        "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
-      ], classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var TabsTablist = ({ children, classNames, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { orientation, verticalVariant } = useTabsContext("TabsTablist");
-    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
-      ...props,
-      className: (0, import_react_ui_theme.mx)(
-        "max-bs-full is-full",
-        // NOTE: Padding should be common to Toolbar.
-        orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
-        orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
-        classNames
-      )
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var TabsBackButton = ({ onClick, classNames, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { setActivePart } = useTabsContext("TabsBackButton");
-    const handleClick = (0, import_react.useCallback)((event) => {
-      setActivePart("list");
-      return onClick?.(event);
-    }, [
-      onClick,
-      setActivePart
-    ]);
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
-      ...props,
-      classNames: [
-        "is-full text-start @md:hidden mbe-2",
-        classNames
-      ],
-      onClick: handleClick
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react.default.createElement("h2", {
-      ...props,
-      className: (0, import_react_ui_theme.mx)("mlb-1 pli-2 text-sm text-unAccent", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
-    const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
-    const handleClick = (0, import_react.useCallback)(
-      // NOTE: This handler is only called if the tab is *already active*.
-      (event) => {
-        setActivePart("panel");
-        onClick?.(event);
-      },
-      [
-        setActivePart,
-        onClick
-      ]
-    );
-    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Trigger, {
-      value,
-      asChild: true
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
-      density: "fine",
-      variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
-      ...props,
-      onClick: handleClick,
-      classNames: [
-        "pli-2 rounded-sm",
-        orientation === "vertical" && "block justify-start text-start is-full",
-        orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
-        import_react_ui_theme.ghostHover,
-        classNames
-      ]
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var TabsTabpanel = ({ classNames, children, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
-      ...props,
-      className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset-over-all", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var Tabs = {
-  Root: TabsRoot,
-  Tablist: TabsTablist,
-  Tab: TabsTab,
-  TabPrimitive: TabsPrimitive.Trigger,
-  TabGroupHeading: TabsTabGroupHeading,
-  Tabpanel: TabsTabpanel,
-  BackButton: TabsBackButton,
-  Viewport: TabsViewport
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Tabs
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/Tabs.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n  activePart: TabsActivePart;\n  setActivePart: (nextActivePart: TabsActivePart) => void;\n  attendableId?: string;\n  verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n  activePart: 'list',\n  setActivePart: () => {},\n  orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n  Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n  Partial<{\n    onActivePartChange: (nextActivePart: TabsActivePart) => void;\n    defaultActivePart: TabsActivePart;\n  }>;\n\nconst TabsRoot = ({\n  children,\n  classNames,\n  activePart: propsActivePart,\n  onActivePartChange,\n  defaultActivePart,\n  value: propsValue,\n  onValueChange,\n  defaultValue,\n  orientation = 'vertical',\n  activationMode = 'manual',\n  verticalVariant = 'stateful',\n  attendableId,\n  ...props\n}: TabsRootProps) => {\n  // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n  const _1 = useArrowNavigationGroup();\n  const _2 = useFocusableGroup();\n  const [activePart = 'list', setActivePart] = useControllableState({\n    prop: propsActivePart,\n    onChange: onActivePartChange,\n    defaultProp: defaultActivePart,\n  });\n\n  const [value, setValue] = useControllableState({\n    prop: propsValue,\n    onChange: onValueChange,\n    defaultProp: defaultValue,\n  });\n\n  const handleValueChange = useCallback(\n    (nextValue: string) => {\n      setActivePart('panel');\n      setValue(nextValue);\n    },\n    [value],\n  );\n\n  const { findFirstFocusable } = useFocusFinders();\n  const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (tabsRoot.current) {\n      findFirstFocusable(tabsRoot.current)?.focus();\n    }\n  }, [activePart]);\n\n  return (\n    <TabsContextProvider\n      orientation={orientation}\n      activePart={activePart}\n      setActivePart={setActivePart}\n      value={value}\n      attendableId={attendableId}\n      verticalVariant={verticalVariant}\n    >\n      <TabsPrimitive.Root\n        activationMode={activationMode}\n        data-active={activePart}\n        orientation={orientation}\n        {...props}\n        value={value}\n        onValueChange={handleValueChange}\n        className={mx(\n          'overflow-hidden',\n          orientation === 'vertical' &&\n            verticalVariant === 'stateful' &&\n            '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n          classNames,\n        )}\n        ref={tabsRoot}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContextProvider>\n  );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n  const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n  return (\n    <div\n      role='none'\n      {...props}\n      data-active={activePart}\n      className={mx(\n        orientation === 'vertical' &&\n          verticalVariant === 'stateful' && [\n            'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n            '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n          ],\n        classNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n  const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n  return (\n    <TabsPrimitive.List\n      {...props}\n      className={mx(\n        'max-bs-full is-full',\n        // NOTE: Padding should be common to Toolbar.\n        orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n        orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n        classNames,\n      )}\n    >\n      {children}\n    </TabsPrimitive.List>\n  );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n  const { setActivePart } = useTabsContext('TabsBackButton');\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('list');\n      return onClick?.(event);\n    },\n    [onClick, setActivePart],\n  );\n\n  return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n  return (\n    <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n      {children}\n    </h2>\n  );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n  const { hasAttention } = useAttention(attendableId);\n  const handleClick = useCallback(\n    // NOTE: This handler is only called if the tab is *already active*.\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('panel');\n      onClick?.(event);\n    },\n    [setActivePart, onClick],\n  );\n\n  return (\n    <TabsPrimitive.Trigger value={value} asChild>\n      <Button\n        density='fine'\n        variant={\n          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n        }\n        {...props}\n        onClick={handleClick}\n        classNames={[\n          'pli-2 rounded-sm',\n          orientation === 'vertical' && 'block justify-start text-start is-full',\n          orientation === 'vertical' && ghostSelectedContainerMd,\n          ghostHover,\n          classNames,\n        ]}\n      >\n        {children}\n      </Button>\n    </TabsPrimitive.Trigger>\n  );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n  return (\n    <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n      {children}\n    </TabsPrimitive.Content>\n  );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n  Root: TabsRoot,\n  Tablist: TabsTablist,\n  Tab: TabsTab,\n  TabPrimitive: TabsPrimitive.Trigger,\n  TabGroupHeading: TabsTabGroupHeading,\n  Tabpanel: TabsTabpanel,\n  BackButton: TabsBackButton,\n  Viewport: TabsViewport,\n};\n\nexport type {\n  TabsActivePart,\n  TabsRootProps,\n  TabsTablistProps,\n  TabsTabProps,\n  TabsTabPrimitiveProps,\n  TabsTabGroupHeadingProps,\n  TabsTabpanelProps,\n  TabsViewportProps,\n};\n"],
-  "mappings": "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",
-  "names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "_1", "useArrowNavigationGroup", "_2", "useFocusableGroup", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
-}

package/dist/lib/node/meta.json

@@ -1 +0,0 @@
-{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":23899,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":457,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12419},"packages/ui/react-ui-tabs/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":6494},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":6590}}}