feat(Tabs): Add Tabs component

package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-portal": "^1.0.1",
     "@radix-ui/react-roving-focus": "^1.0.1",
     "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toggle": "^1.0.1",
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.0",

src/lib/action-group/action-group.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .action-group-item--no-gap {

src/lib/button/button.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .button {
@@ -147,7 +147,6 @@
   } */
 
   .variant--flat {
-    border-color: transparent;
     background-color: transparent;
     color: theme('colors.on-surface');
 
@@ -160,7 +159,6 @@
     }
 
     &:where(:active, [data-state='open']) {
-      border-color: theme('colors.outline/0.15');
       background-color: theme('colors.on-surface/0.15');
     }
 
@@ -171,18 +169,6 @@
     &:where(.intent--danger) {
       color: theme('colors.error');
     }
-
-    /* ToggleButton */
-    &:where([data-state='on']) {
-      border-color: theme('colors.primary/0.4');
-      background-color: theme('colors.primary/0.1');
-      color: theme('colors.primary');
-
-      &:where(:hover, :focus, :active) {
-        border-color: theme('colors.primary/0.5');
-        background-color: theme('colors.primary/0.15');
-      }
-    }
   }
 
   .variant--link {

src/lib/checkbox/checkbox.module.css

@@ -1,4 +1,4 @@
-@layer lib, defaults;
+@import '../root.css';
 
 @layer lib {
   .field {

src/lib/chip/chip.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .chip {

src/lib/collapsible/collapsible.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .content {

src/lib/dialog/dialog.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .overlay {

src/lib/flex/flex.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .display--flex {

src/lib/form-field/form-field.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .form-field {

src/lib/heading/heading.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .heading {

src/lib/icon/icon.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .icon {

src/lib/index.ts

@@ -16,6 +16,7 @@ export { Portal } from './portal';
 export { Section } from './section';
 export { Spinner } from './spinner';
 export { Switch } from './switch';
+export { Tabs } from './tabs';
 export { Text } from './text';
 export { TextArea } from './text-area';
 export { TextField } from './text-field';

src/lib/menu-list/menu-list.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .menu-list {

src/lib/menu/menu.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .separator {

src/lib/picker/picker.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .scroll-direction-arrow {

src/lib/root.css

@@ -0,0 +1 @@
+@layer lib, utils;

src/lib/section/section.tsx

@@ -12,7 +12,7 @@ const Section = ({ title, children, cross = 'stretch', flow = 'column', gap = 'm
   const id = useId(propId);
   return (
     <Flex cross={cross} flow={flow} gap={gap} {...props}>
-      <Text id={id} textStyle="overline" tone="light" className="pr-2">
+      <Text id={id} textStyle="overline" tone="light">
         {title}
       </Text>
       <div role="group" aria-labelledby={id}>

src/lib/shared/floating-list.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .floating-list {

src/lib/shared/list-item.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .list-item {

src/lib/shared/popover.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .popover {

src/lib/spinner/spinner.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .spinner {

src/lib/switch/switch.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .label {

src/lib/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

src/lib/tabs/tabs.module.css

@@ -0,0 +1,87 @@
+@import '../root.css';
+
+@layer lib {
+  .list {
+    display: inline-flex;
+    &[data-orientation='vertical'] {
+      flex-flow: column;
+      border-inline-end: 2px solid theme('colors.outline/0.2');
+    }
+    &[data-orientation='horizontal'] {
+      flex-flow: row;
+      border-block-end: 2px solid theme('colors.outline/0.2');
+    }
+  }
+
+  .trigger {
+    padding: theme('spacing[1.5]');
+    outline: none;
+    position: relative;
+    transition: background-color 0.24s ease-in-out;
+    border-start-end-radius: theme('borderRadius.md');
+    border-start-start-radius: theme('borderRadius.md');
+
+    &::after {
+      --scale: 0.4;
+      position: absolute;
+      display: block;
+      content: '';
+      background-color: transparent;
+      transition: 0.14s ease-in-out;
+    }
+
+    &[data-orientation='horizontal']:after {
+      inset-inline-start: 0;
+      inset-block-end: 0;
+      transform-origin: bottom;
+      width: 100%;
+      height: 2px;
+      scale: var(--scale) 1;
+      translate: 0 100%;
+    }
+    &[data-orientation='vertical']:after {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+      width: 2px;
+      height: 100%;
+      transform-origin: end;
+      scale: 1 calc(var(--scale) * 0.8);
+      translate: 100% 0;
+    }
+
+    &:where(:not([aria-selected='true'])) {
+      &:hover {
+        & > .trigger-inner {
+          background-color: theme('colors.on-surface/0.1');
+        }
+      }
+    }
+    &:where([aria-selected='true']) {
+      color: theme('colors.primary');
+      & > .trigger-inner {
+        background-color: theme('colors.primary/0.1');
+      }
+      &:after {
+        --scale: 0.6;
+        background-color: theme('colors.primary');
+      }
+      &:where(:hover, :focus) {
+        & > .trigger-inner {
+          background-color: theme('colors.primary/0.15');
+        }
+      }
+    }
+  }
+
+  .trigger-inner {
+    padding-inline: theme('spacing.3');
+    border-radius: theme('borderRadius.md');
+    transition: background-color 0.14s ease-in-out;
+    font-size: theme('fontSize.sm');
+    line-height: theme('lineHeight.xl');
+  }
+
+  .content {
+    flex: 2;
+  }
+}

src/lib/tabs/tabs.tsx

@@ -0,0 +1,70 @@
+import * as RdxTabs from '@radix-ui/react-tabs';
+import { clsx } from 'clsx';
+import { Flex, FlexVariants } from '../flex/flex';
+
+import styles from './tabs.module.css';
+
+interface TabsProps extends Omit<RdxTabs.TabsProps, 'orientation'>, FlexVariants {}
+
+const orientationMap = {
+  'column': 'horizontal',
+  'column-reverse': 'horizontal',
+  'row': 'vertical',
+  'row-reverse': 'vertical',
+} satisfies Record<NonNullable<FlexVariants['flow']>, NonNullable<RdxTabs.TabsProps['orientation']>>;
+
+const Tabs = ({
+  children,
+  defaultValue,
+  value,
+  onValueChange,
+  dir,
+  activationMode,
+  flow = 'column',
+  gap = 'sm',
+  ...props
+}: TabsProps) => {
+  return (
+    <RdxTabs.Root
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={onValueChange}
+      orientation={orientationMap[flow]}
+      dir={dir}
+      activationMode={activationMode}
+      asChild
+    >
+      <Flex {...props} flow={flow} gap={gap}>
+        {children}
+      </Flex>
+    </RdxTabs.Root>
+  );
+};
+
+interface TabsListProps extends RdxTabs.TabsListProps {}
+
+const TabsList = (props: TabsListProps) => {
+  return <RdxTabs.List {...props} className={clsx(styles.list, props.className)} />;
+};
+
+interface TabsTriggerProps extends RdxTabs.TabsTriggerProps {}
+
+const Trigger = ({ children, className, ...props }: TabsTriggerProps) => {
+  return (
+    <RdxTabs.Trigger {...props} className={clsx(styles.trigger, className)}>
+      <div className={styles['trigger-inner']}>{children}</div>
+    </RdxTabs.Trigger>
+  );
+};
+
+interface TabsContentProps extends RdxTabs.TabsContentProps {}
+
+const Content = (props: TabsContentProps) => {
+  return <RdxTabs.Content {...props} className={clsx(styles.content, props.className)} />;
+};
+
+Tabs.List = TabsList;
+Tabs.Trigger = Trigger;
+Tabs.Content = Content;
+
+export { Tabs };

src/lib/text-area/text-area.module.css

@@ -1,4 +1,4 @@
-@layer lib, utils;
+@import '../root.css';
 
 @layer lib {
   .text-area {