fix(Tabs): quick example of u-tabs

packages/css/tabs.css

@@ -7,68 +7,68 @@
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
 }
 
-.ds-tabs__panel {
+& u-tabpanel {
   padding: var(--dsc-tabs-content-padding);
   color: var(--dsc-tabs-content-color);
 }
 
-.ds-tabs__tablist {
+& u-tablist {
   display: flex;
   flex-direction: row;
   border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);
   position: relative;
-}
 
-.ds-tabs__tab {
-  align-items: center;
-  background: none;
-  border: 0;
-  box-sizing: border-box;
-  color: var(--dsc-tabs-tab-color);
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-family: inherit;
-  font-size: inherit;
-  gap: var(--ds-spacing-1);
-  justify-content: center;
-  line-height: var(--ds-line-height-sm);
-  margin: 0;
-  padding: var(--dsc-tabs-tab-padding);
-  position: relative;
-  text-align: center;
+  & u-tab {
+    align-items: center;
+    background: none;
+    border: 0;
+    box-sizing: border-box;
+    color: var(--dsc-tabs-tab-color);
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    font-family: inherit;
+    font-size: inherit;
+    gap: var(--ds-spacing-1);
+    justify-content: center;
+    line-height: var(--ds-line-height-sm);
+    margin: 0;
+    padding: var(--dsc-tabs-tab-padding);
+    position: relative;
+    text-align: center;
 
-  &:not([data-size]) {
-    font-size: inherit; /* Ensure inheriting font-size when <button> */
-  }
+    &:not([data-size]) {
+      font-size: inherit; /* Ensure inheriting font-size when <button> */
+    }
 
-  &[aria-selected='true'] {
-    --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
-    --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
-  }
+    &[aria-selected='true'] {
+      --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
+      --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
+    }
 
-  @composes ds-focus from './base/base.css';
+    @composes ds-focus from './base/base.css';
 
-  /* We set z-index to make sure the active line does not bleed over the focus indicator */
-  &:focus-visible {
-    z-index: 2;
-  }
+    /* We set z-index to make sure the active line does not bleed over the focus indicator */
+    &:focus-visible {
+      z-index: 2;
+    }
 
-  &::after {
-    content: '';
-    display: block;
-    height: 3px;
-    width: 100%;
-    background-color: var(--dsc-tabs__tab-bottom-border-color);
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
+    &::after {
+      content: '';
+      display: block;
+      height: 3px;
+      width: 100%;
+      background-color: var(--dsc-tabs__tab-bottom-border-color);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
 
-  @media (hover: hover) and (pointer: fine) {
-    &:hover:not([aria-selected='true']) {
-      --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
-      --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover:not([aria-selected='true']) {
+        --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
+        --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
+      }
     }
   }
 }

packages/react/package.json

@@ -41,6 +41,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-virtual": "^3.10.7",
     "@u-elements/u-details": "^0.1.0",
+    "@u-elements/u-tabs": "^0.0.7",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

packages/react/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,8 @@
+import type { UHTMLTabsElement } from '@u-elements/u-tabs';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
-import { createContext, forwardRef, useState } from 'react';
-import type { Size } from '../../types';
+import { forwardRef, useState } from 'react';
+import '@u-elements/u-tabs';
 
 export type TabsProps = {
   /** Controlled state for `Tabs` component. */
@@ -13,16 +14,8 @@ export type TabsProps = {
   /**
    * Changes items size and paddings
    */
-  size?: Size;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
-
-export type ContextProps = {
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-};
-
-export const Context = createContext<ContextProps>({});
+  size?: 'sm' | 'md' | 'lg';
+} & HTMLAttributes<UHTMLTabsElement>;
 
 /**
  * Display a group of tabs that can be toggled between.
@@ -40,37 +33,40 @@ export const Context = createContext<ContextProps>({});
  * </Tabs>
  * ```
  */
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { size, value, defaultValue, className, onChange, ...rest },
+export const Tabs = forwardRef<UHTMLTabsElement, TabsProps>(function Tabs(
+  { size = 'md', value, defaultValue, className, onChange, ...rest },
   ref,
 ) {
   const isControlled = value !== undefined;
   const [uncontrolledValue, setUncontrolledValue] = useState<
     string | undefined
   >(defaultValue);
 
-  let onValueChange = onChange;
+  // let onValueChange = onChange;
   if (!isControlled) {
-    onValueChange = (newValue: string) => {
-      setUncontrolledValue(newValue);
-      onChange?.(newValue);
-    };
+    // onValueChange = (newValue: string) => {
+    //   setUncontrolledValue(newValue);
+    //   onChange?.(newValue);
+    // };
     value = uncontrolledValue;
   }
+  // onClick={() => tabs.onChange?.(value)}
+  // <Context.Provider
+  //   value={{
+  //     value,
+  //     defaultValue,
+  //     onChange: onValueChange,
+  //     size,
+  //   }}
+  // >
+  //   </Context.Provider>
+
   return (
-    <Context.Provider
-      value={{
-        value,
-        defaultValue,
-        onChange: onValueChange,
-      }}
-    >
-      <div
-        className={cl('ds-tabs', className)}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Context.Provider>
+    <u-tabs
+      class={cl('ds-tabs', className)}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   );
 });

packages/react/src/components/Tabs/TabsList.tsx

@@ -1,38 +1,23 @@
+import type { UHTMLTabListElement } from '@u-elements/u-tabs';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
+import '@u-elements/u-tabs';
 
-import { RovingFocusRoot } from '../../utilities/RovingFocus';
-
-import { Context } from './Tabs';
-
-export type TabsListProps = HTMLAttributes<HTMLDivElement>;
+export type TabsListProps = HTMLAttributes<UHTMLTabListElement>;
 
 /**
  * The container for all `Tab` components.
  * @example
  * ```tsx
  * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *  <Tabs.Tab>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab>Tab 2</Tabs.Tab>
  * </Tabs.List>
  * ```
  */
-export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
-  function TabsList({ children, className, ...rest }, ref) {
-    const { value } = useContext(Context);
-
-    return (
-      <RovingFocusRoot
-        role='tablist'
-        activeValue={value}
-        className={cl('ds-tabs__tablist', className)}
-        orientation='ambiguous'
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </RovingFocusRoot>
-    );
+export const TabsList = forwardRef<UHTMLTabListElement, TabsListProps>(
+  function TabsList({ className, ...rest }, ref) {
+    return <u-tablist class={className} ref={ref} {...rest} />;
   },
 );

packages/react/src/components/Tabs/TabsPanel.tsx

@@ -1,34 +1,18 @@
-import cl from 'clsx/lite';
+import type { UHTMLTabPanelElement } from '@u-elements/u-tabs';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 
-import { Context } from './Tabs';
-
-export type TabsPanelProps = {
-  /** When this value is selected as the current state, render this `TabsPanel` component*/
-  value: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
+export type TabsPanelProps = HTMLAttributes<UHTMLTabPanelElement>;
 
 /**
  * A single content item in a Tabs component.
  * @example
  * ```tsx
- * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ * <Tabs.Panel>content 1</Tabs.Panel>
  * ```
  */
-export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
-  function TabsPanel({ children, value, className, ...rest }, ref) {
-    const { value: tabsValue } = useContext(Context);
-    const active = value === tabsValue;
-
-    return (
-      <>
-        {active && (
-          <div className={cl('ds-tabs__panel', className)} ref={ref} {...rest}>
-            {children}
-          </div>
-        )}
-      </>
-    );
+export const TabsPanel = forwardRef<UHTMLTabPanelElement, TabsPanelProps>(
+  function TabsPanel({ className, ...rest }, ref) {
+    return <u-tabpanel class={className} ref={ref} {...rest} />;
   },
 );

packages/react/src/components/Tabs/TabsTab.tsx

@@ -1,38 +1,20 @@
-import cl from 'clsx/lite';
+import type { UHTMLTabElement } from '@u-elements/u-tabs';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useContext, useId } from 'react';
-
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
-import { Context } from './Tabs';
+import { forwardRef } from 'react';
 
 export type TabsTabProps = {
-  /** Value that will be set in the `Tabs` components state when the tab is activated */
-  value: string;
-} & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
+  selected?: boolean;
+} & HTMLAttributes<UHTMLTabElement>;
 
 /**
  * A single item in a Tabs component.
  * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ * <Tabs.Tab>Tab 1</Tabs.Tab>
  */
-export const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
-  function TabsTab({ className, value, ...rest }, ref) {
-    const tabs = useContext(Context);
-    const buttonId = `tab-${useId()}`;
-
+export const TabsTab = forwardRef<UHTMLTabElement, TabsTabProps>(
+  function TabsTab({ className, selected, ...rest }, ref) {
     return (
-      <RovingFocusItem value={value} {...rest} asChild>
-        <button
-          {...rest}
-          aria-selected={tabs.value === value}
-          className={cl('ds-tabs__tab', className)}
-          id={buttonId}
-          onClick={() => tabs.onChange?.(value)}
-          ref={ref}
-          role='tab'
-          type='button'
-        />
-      </RovingFocusItem>
+      <u-tab aria-selected={selected} {...rest} class={className} ref={ref} />
     );
   },
 );

packages/react/src/components/Tabs/index.ts

@@ -9,13 +9,13 @@ import { TabsTab } from './TabsTab';
  * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
- *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *     <Tabs.Tab selected>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab>Tab 3</Tabs.Tab>
  *   </Tabs.List>
- *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
- *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
- *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ *   <Tabs.Panel>content 1</Tabs.Panel>
+ *   <Tabs.Panel hidden>content 2</Tabs.Panel>
+ *   <Tabs.Panel hidden>content 3</Tabs.Panel>
  * </Tabs>
  * ```
  */

yarn.lock

@@ -1720,6 +1720,7 @@ __metadata:
     "@testing-library/react": "npm:^16.0.0"
     "@testing-library/user-event": "npm:^14.5.2"
     "@u-elements/u-details": "npm:^0.1.0"
+    "@u-elements/u-tabs": "npm:^0.0.7"
     clsx: "npm:^2.1.1"
     copyfiles: "npm:^2.4.1"
     jsdom: "npm:^24.1.1"
@@ -5246,6 +5247,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@u-elements/u-tabs@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "@u-elements/u-tabs@npm:0.0.7"
+  checksum: 10/349ad9e7c20285f2f1e3149e50805f39cfb74e480f39490a321af19d3f373d1e52a5e901a2c3023337dd90ba77d842855fd4442c597335b54d7fb4e675b60830
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"