@dxos/react-ui-tabs 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -1,5 +1,6 @@
 // packages/ui/react-ui-tabs/src/Tabs.tsx
-import { useFocusFinders } from "@fluentui/react-tabster";
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import { useFocusFinders, useArrowNavigationGroup, 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";
@@ -15,134 +16,171 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
   orientation: "vertical"
 });
 var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
-  const [activePart = "list", setActivePart] = useControllableState({
-    prop: propsActivePart,
-    onChange: onActivePartChange,
-    defaultProp: defaultActivePart
-  });
-  const [value, setValue] = useControllableState({
-    prop: propsValue,
-    onChange: onValueChange,
-    defaultProp: defaultValue
-  });
-  const handleValueChange = useCallback((nextValue) => {
-    setActivePart("panel");
-    setValue(nextValue);
-  }, [
-    value
-  ]);
-  const { findFirstFocusable } = useFocusFinders();
-  const tabsRoot = useRef(null);
-  useLayoutEffect(() => {
-    if (tabsRoot.current) {
-      findFirstFocusable(tabsRoot.current)?.focus();
-    }
-  }, [
-    activePart
-  ]);
-  return /* @__PURE__ */ React.createElement(TabsContextProvider, {
-    orientation,
-    activePart,
-    setActivePart,
-    value,
-    attendableId,
-    verticalVariant
-  }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
-    activationMode,
-    "data-active": activePart,
-    orientation,
-    ...props,
-    value,
-    onValueChange: handleValueChange,
-    className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
-    ref: tabsRoot
-  }, children));
+  var _effect = _useSignals();
+  try {
+    const _1 = useArrowNavigationGroup();
+    const _2 = useFocusableGroup();
+    const [activePart = "list", setActivePart] = useControllableState({
+      prop: propsActivePart,
+      onChange: onActivePartChange,
+      defaultProp: defaultActivePart
+    });
+    const [value, setValue] = useControllableState({
+      prop: propsValue,
+      onChange: onValueChange,
+      defaultProp: defaultValue
+    });
+    const handleValueChange = useCallback((nextValue) => {
+      setActivePart("panel");
+      setValue(nextValue);
+    }, [
+      value
+    ]);
+    const { findFirstFocusable } = useFocusFinders();
+    const tabsRoot = useRef(null);
+    useLayoutEffect(() => {
+      if (tabsRoot.current) {
+        findFirstFocusable(tabsRoot.current)?.focus();
+      }
+    }, [
+      activePart
+    ]);
+    return /* @__PURE__ */ React.createElement(TabsContextProvider, {
+      orientation,
+      activePart,
+      setActivePart,
+      value,
+      attendableId,
+      verticalVariant
+    }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
+      activationMode,
+      "data-active": activePart,
+      orientation,
+      ...props,
+      value,
+      onValueChange: handleValueChange,
+      className: 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 }) => {
-  const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    ...props,
-    "data-active": activePart,
-    className: 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);
+  var _effect = _useSignals();
+  try {
+    const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      ...props,
+      "data-active": activePart,
+      className: 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 }) => {
-  const { orientation, verticalVariant } = useTabsContext("TabsTablist");
-  return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
-    ...props,
-    className: 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);
+  var _effect = _useSignals();
+  try {
+    const { orientation, verticalVariant } = useTabsContext("TabsTablist");
+    return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
+      ...props,
+      className: 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 }) => {
-  const { setActivePart } = useTabsContext("TabsBackButton");
-  const handleClick = useCallback((event) => {
-    setActivePart("list");
-    return onClick?.(event);
-  }, [
-    onClick,
-    setActivePart
-  ]);
-  return /* @__PURE__ */ React.createElement(Button, {
-    ...props,
-    classNames: [
-      "is-full text-start @md:hidden mbe-2",
-      classNames
-    ],
-    onClick: handleClick
-  });
+  var _effect = _useSignals();
+  try {
+    const { setActivePart } = useTabsContext("TabsBackButton");
+    const handleClick = useCallback((event) => {
+      setActivePart("list");
+      return onClick?.(event);
+    }, [
+      onClick,
+      setActivePart
+    ]);
+    return /* @__PURE__ */ React.createElement(Button, {
+      ...props,
+      classNames: [
+        "is-full text-start @md:hidden mbe-2",
+        classNames
+      ],
+      onClick: handleClick
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
-  return /* @__PURE__ */ React.createElement("h2", {
-    ...props,
-    className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
-  }, children);
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("h2", {
+      ...props,
+      className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
-  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) => {
-      setActivePart("panel");
-      onClick?.(event);
-    },
-    [
-      setActivePart,
-      onClick
-    ]
-  );
-  return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
-    value,
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(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" && ghostSelectedContainerMd,
-      ghostHover,
-      classNames
-    ]
-  }, children));
+  var _effect = _useSignals();
+  try {
+    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) => {
+        setActivePart("panel");
+        onClick?.(event);
+      },
+      [
+        setActivePart,
+        onClick
+      ]
+    );
+    return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
+      value,
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(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" && ghostSelectedContainerMd,
+        ghostHover,
+        classNames
+      ]
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTabpanel = ({ classNames, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
-    ...props,
-    className: mx("dx-focus-ring-inset-over-all", classNames)
-  }, children);
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
+      ...props,
+      className: mx("dx-focus-ring-inset-over-all", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var Tabs = {
   Root: TabsRoot,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Tabs.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } 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  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": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "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"]
+  "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": ["useFocusFinders", "useArrowNavigationGroup", "useFocusableGroup", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "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", "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/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22249,"imports":[{"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":489,"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/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11985},"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs":{"imports":[{"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":5541},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5637}}}
+{"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/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12419},"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs":{"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}}}