@dxos/react-ui-tabs 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "Components for facilitating a Tabs pattern.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,25 +36,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.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/react-ui-attention": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -36,7 +36,7 @@ export const DefaultStory = () => {
                       <Icon icon='ph--arrow-left--bold' size={4} />
                       <span>Back to tab list</span>
                     </NaturalTabs.BackButton>
-                    <p className='pli-1'>{panel}</p>
+                    <p className='px-1'>{panel}</p>
                   </NaturalTabs.Tabpanel>
                 );
               })}
@@ -60,7 +60,7 @@ const meta = {
   title: 'ui/react-ui-tabs/Tabs',
   component: NaturalTabs.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/Tabs.tsx

@@ -24,7 +24,7 @@ import {
   useForwardedRef,
 } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { ghostSelectedContainerMd, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 type TabsActivePart = 'list' | 'panel';
 
@@ -50,6 +50,7 @@ type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
     defaultActivePart: TabsActivePart;
   }>;
 
+// TODO(burdon): Reconcile padding with Toolbar.
 const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(
   (
     {
@@ -147,8 +148,8 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
       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',
+            'grid w-[200%] grid-cols-2 data-[active=panel]:ms-[-100%]',
+            '@md:w-auto @md:data-[active=panel]:ms-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',
           ],
         classNames,
       )}
@@ -160,6 +161,7 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
 
 type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
 
+// TODO(burdon): Should have same geometry as Toolbar.
 const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
   const { orientation, verticalVariant } = useTabsContext('TabsTablist');
   return (
@@ -167,7 +169,7 @@ const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
       {...props}
       data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
       className={mx(
-        'max-bs-full is-full',
+        'max-h-full w-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',
@@ -189,14 +191,14 @@ const TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {
     [onClick, setActivePart],
   );
 
-  return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;
+  return <Button {...props} classNames={['w-full text-start @md:hidden mb-2', classNames]} onClick={handleClick} />;
 };
 
 type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
 
 const TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {
   return (
-    <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>
+    <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>
       {children}
     </h2>
   );
@@ -227,8 +229,8 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
         {...props}
         onClick={handleClick}
         classNames={[
-          orientation === 'vertical' && 'block justify-start text-start is-full',
-          orientation === 'vertical' && ghostSelectedContainerMd,
+          orientation === 'vertical' && 'block justify-start text-start w-full',
+          orientation === 'vertical' && 'dx-selected',
           classNames,
         ]}
       >
@@ -263,8 +265,8 @@ const TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps)
         {...props}
         onClick={handleClick}
         classNames={[
-          orientation === 'vertical' && 'justify-start text-start is-full',
-          orientation === 'vertical' && ghostSelectedContainerMd,
+          orientation === 'vertical' && 'justify-start text-start w-full',
+          orientation === 'vertical' && 'dx-selected',
           classNames,
         ]}
       />