@tcn/ui 0.0.3 → 0.1.1

package/src/inputs/textarea/textarea.stories.tsx

@@ -9,7 +9,15 @@ function Base(props: TextareaProps) {
 }
 
 export default {
-  title: 'Textarea',
+  title: 'Inputs/Textarea',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A textarea component that allows the user to enter a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Textarea() {

package/src/inputs/textarea/textarea.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { HTMLAttributes } from 'react';
 import styles from './textarea.module.css';
@@ -20,7 +20,7 @@ export const Textarea = React.forwardRef(function Textarea(
   return (
     <textarea
       style={{ width, height, ...style }}
-      className={classnames(className, styles.textarea, 'textarea')}
+      className={clsx(className, styles.textarea, 'textarea')}
       data-is-disabled={props.disabled || false}
       ref={ref}
       onChange={e => {

package/src/inputs/unit_input/unit_input.stories.tsx

@@ -7,7 +7,15 @@ import { ZStack } from '../../stacks/z_stack.js';
 import { Footnote, Headline } from '../../typography/index.js';
 
 export default {
-  title: 'Unit Input',
+  title: 'Inputs/Unit Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A unit input component that allows the user to select a unit.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base(props: Omit<UnitInputProps, 'children' | 'onChange'>) {

package/src/inputs/unit_input/unit_input.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useForkRef } from '../../utils/index.js';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import { Input } from '../input/input.js';
@@ -82,13 +82,13 @@ export const UnitInput = React.forwardRef(function UnitInput(
   return (
     <HStack
       ref={ref}
-      className={classNames(styles['unit-input'], 'unit-input')}
+      className={clsx(styles['unit-input'], 'unit-input')}
       height="auto"
       {...props}
     >
       <ZStack width="flex">
         <Input
-          className={classNames(styles['unit-input-number'], 'unit-input-number')}
+          className={clsx(styles['unit-input-number'], 'unit-input-number')}
           ref={forkedInputRef}
           onChange={valueHandler}
           disabled={disabled}
@@ -100,7 +100,7 @@ export const UnitInput = React.forwardRef(function UnitInput(
         />
       </ZStack>
       <Select
-        className={classNames(styles['unit-input-select'], 'unit-input-select')}
+        className={clsx(styles['unit-input-select'], 'unit-input-select')}
         ref={unitRef}
         width="auto"
         value={unit}

package/src/layouts/body/h_body.tsx

@@ -1,6 +1,6 @@
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './h_body.module.css';
 
 export interface HBodyProps extends Omit<HStackProps, 'as'> {}
@@ -14,7 +14,7 @@ export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
       ref={ref}
       as="div"
       overflowX={overflowX}
-      className={classNames(styles['h-body'], className, 'tcn-h-body', 'body')}
+      className={clsx(styles['h-body'], className, 'tcn-h-body', 'body')}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.tsx

@@ -1,6 +1,6 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './v_body.module.css';
 
 export interface VBodyProps extends Omit<VStackProps, 'as'> {}
@@ -14,7 +14,7 @@ export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
       ref={ref}
       as="div"
       overflowY={overflowY}
-      className={classNames(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
+      className={clsx(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
       {...props}
     >
       {children}

package/src/layouts/column/column.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './column.module.css';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
@@ -35,7 +35,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
       maxWidth={maxWidth}
       minHeight={minHeight}
       maxHeight={maxHeight}
-      className={classNames(className, styles['column'], 'column')}
+      className={clsx(className, styles['column'], 'column')}
       {...props}
     >
       <VStack
@@ -47,7 +47,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
         vAlign={vAlign}
         ref={ref}
         as="section"
-        className={classNames(styles['column-stack'], 'column-stack')}
+        className={clsx(styles['column-stack'], 'column-stack')}
         zIndex={0}
       >
         {children}

package/src/layouts/divider/__stories__/divider.stories.tsx

@@ -18,34 +18,46 @@ type DividerStoryProps = {
 };
 
 const meta: Meta<DividerStoryProps> = {
-  title: 'Divider',
+  title: 'Layouts/Divider',
   component: DividerComponent as React.ComponentType<DividerStoryProps>,
+  tags: ['autodocs'],
   parameters: {
     controls: {
       include: ['emphasis', 'thickness', 'length', 'height', 'width', 'squished'],
     },
+    docs: {
+      description: {
+        component: 'A divider component that separates content into sections.',
+      },
+    },
   },
   argTypes: {
     emphasis: {
       control: 'select',
       options: ['strong', 'normal', 'faint'],
+      description: 'The emphasis of the divider',
     },
     thickness: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
+      description: 'The thickness of the divider',
     },
     length: {
       control: 'select',
       options: ['sm', 'md', 'lg', 'full'],
+      description: 'The length of the divider',
     },
     height: {
       control: 'text',
+      description: 'The height of the divider',
     },
     width: {
       control: 'text',
+      description: 'The width of the divider',
     },
     squished: {
       control: 'boolean',
+      description: 'Whether the divider is squished',
     },
   },
 };
@@ -60,18 +72,30 @@ export const Vertical: Story = {
     squished: false,
   },
   render: args => (
-    <HStack hAlign="center" height="100%">
-      <VStack vAlign="center" height={args.squished ? '72px' : '100%'}>
-        <HStack style={{ gap: '16px' }}>
-          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
-          <DividerComponent vertical {...args} />
-          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
-          <DividerComponent vertical {...args} />
-          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
-          <DividerComponent vertical {...args} />
-          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
-        </HStack>
-      </VStack>
+    <HStack width="100%" height={args.squished ? '72px' : '300px'} gap="16px">
+      <Box
+        width={'100px'}
+        height={'100%'}
+        style={{ backgroundColor: 'var(--accent-color)' }}
+      />
+      <DividerComponent vertical {...args} />
+      <Box
+        width={'100px'}
+        height={'100%'}
+        style={{ backgroundColor: 'var(--accent-color)' }}
+      />
+      <DividerComponent vertical {...args} />
+      <Box
+        width={'100px'}
+        height={'100%'}
+        style={{ backgroundColor: 'var(--accent-color)' }}
+      />
+      <DividerComponent vertical {...args} />
+      <Box
+        width={'100px'}
+        height={'100%'}
+        style={{ backgroundColor: 'var(--accent-color)' }}
+      />
     </HStack>
   ),
 };
@@ -85,15 +109,31 @@ export const Horizontal: Story = {
   },
   render: args => (
     <HStack hAlign="center">
-      <VStack className="pad-md" vAlign="center" width={args.squished ? '72px' : '100%'}>
-        <VStack style={{ gap: '16px' }}>
-          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+      <VStack vAlign="center" width={args.squished ? '72px' : '100%'}>
+        <VStack gap="16px">
+          <Box
+            width={'100%'}
+            height={'100px'}
+            style={{ backgroundColor: 'var(--accent-color)' }}
+          />
           <DividerComponent horizontal {...args} />
-          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <Box
+            width={'100%'}
+            height={'100px'}
+            style={{ backgroundColor: 'var(--accent-color)' }}
+          />
           <DividerComponent horizontal {...args} />
-          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <Box
+            width={'100%'}
+            height={'100px'}
+            style={{ backgroundColor: 'var(--accent-color)' }}
+          />
           <DividerComponent horizontal {...args} />
-          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <Box
+            width={'100%'}
+            height={'100px'}
+            style={{ backgroundColor: 'var(--accent-color)' }}
+          />
         </VStack>
       </VStack>
     </HStack>

package/src/layouts/divider/divider.tsx

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import type { Emphasis, Size } from '../../utils/index.js';
 import styles from './divider.module.css';
@@ -59,7 +59,7 @@ export const Divider: React.FC<DividerProps> = ({
       data-thickness={thickness}
       data-length={length}
       data-orientation={orientation}
-      className={classnames(styles[`divider`], 'divider', 'tcn-divider', className)}
+      className={clsx(styles[`divider`], 'divider', 'tcn-divider', className)}
       {...props}
     >
       <div
@@ -68,7 +68,7 @@ export const Divider: React.FC<DividerProps> = ({
         data-length={length}
         data-orientation={orientation}
         style={cssVariables}
-        className={classnames(
+        className={clsx(
           styles[`divider-line`],
           'divider-line',
           'tcn-divider-line',

package/src/layouts/footer/footer.module.css

@@ -1,7 +1,6 @@
 .footer {
   width: 100%;
   min-height: 0;
-  border-top: 1px solid rgb(221, 221, 221);
   padding: var(--padding) var(--padding-large);
   gap: var(--gap);
 }

package/src/layouts/footer/footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
 import styles from './footer.module.css';
@@ -18,7 +18,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
     <HStack
       ref={ref}
       as="footer"
-      className={classNames(styles.footer, className, 'footer', 'tcn-footer')}
+      className={clsx(styles.footer, className, 'tcn-footer')}
       data-hierarchy={hierarchy}
       data-size={size}
       {...props}

package/src/layouts/grid/grid.stories.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import { Meta } from '@storybook/react-vite';
-import { Grid, GridProps } from './grid.js';
+import { Grid as GridComponent, GridProps } from './grid.js';
 import { Rect } from '../../stacks/story_components/rect.js';
 import { Circle } from '../../stacks/story_components/circle.js';
 import { StyleBox } from '../../stacks/story_components/style_box.js';
 import { VStack } from '../../stacks/v_stack.js';
 
 const meta: Meta<GridProps> = {
-  title: 'Grid',
-  component: Grid,
+  title: 'Layouts/Grid',
+  component: GridComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A grid component that lays out content in a grid.',
+      },
+    },
+  },
   args: {
     gap: '1rem',
     itemHeight: 100,
@@ -48,17 +56,17 @@ const meta: Meta<GridProps> = {
 
 export default meta;
 
-export function Default(props: GridProps) {
+export function Grid(props: GridProps) {
   return (
     <StyleBox>
-      <Grid {...props} gap="10px">
+      <GridComponent {...props} gap="10px">
         <Rect width="100%" height="100%" color="#ff6b6b" />
         <Rect width="100%" height="100%" color="#4ecdc4" />
         <Rect width="100%" height="100%" color="#45b7d1" />
         <Rect width="100%" height="100%" color="#96ceb4" />
         <Rect width="100%" height="100%" color="#feca57" />
         <Rect width="100%" height="100%" color="#ff9ff3" />
-      </Grid>
+      </GridComponent>
     </StyleBox>
   );
 }
@@ -69,29 +77,29 @@ export function AlignmentExamples() {
       <VStack vAlign="center" gap="2rem">
         <VStack hAlign="start">
           <h3>Start Alignment (Default)</h3>
-          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+          <GridComponent itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
-          </Grid>
+          </GridComponent>
         </VStack>
 
         <VStack hAlign="center">
           <h3>Center Alignment</h3>
-          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+          <GridComponent itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
-          </Grid>
+          </GridComponent>
         </VStack>
 
         <VStack hAlign="end">
           <h3>End Alignment</h3>
-          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+          <GridComponent itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
-          </Grid>
+          </GridComponent>
         </VStack>
       </VStack>
     </StyleBox>
@@ -104,32 +112,32 @@ export function DifferentGaps() {
       <VStack vAlign="start" gap="30px">
         <VStack hAlign="start">
           <h3>Small Gap</h3>
-          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="4px">
+          <GridComponent itemWidth={120} itemHeight={120} columnAmount={3} gap="4px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
-          </Grid>
+          </GridComponent>
         </VStack>
 
         <VStack hAlign="start">
           <h3>Large Gap</h3>
-          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="8px">
+          <GridComponent itemWidth={120} itemHeight={120} columnAmount={3} gap="8px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
-          </Grid>
+          </GridComponent>
         </VStack>
 
         <VStack hAlign="start">
           <h3>Different Row and Column Gaps</h3>
-          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="16px">
+          <GridComponent itemWidth={120} itemHeight={120} columnAmount={3} gap="16px">
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
             <Rect width="100%" height="100%" color="#96ceb4" />
             <Rect width="100%" height="100%" color="#feca57" />
             <Rect width="100%" height="100%" color="#ff9ff3" />
-          </Grid>
+          </GridComponent>
         </VStack>
       </VStack>
     </StyleBox>
@@ -142,50 +150,50 @@ export function MaxColumnsExamples() {
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
         <div>
           <h3>2 Columns</h3>
-          <Grid itemWidth={150} itemHeight={150} columnAmount={2}>
+          <GridComponent itemWidth={150} itemHeight={150} columnAmount={2}>
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
             <Rect width="100%" height="100%" color="#96ceb4" />
             <Rect width="100%" height="100%" color="#feca57" />
             <Rect width="100%" height="100%" color="#ff9ff3" />
-          </Grid>
+          </GridComponent>
         </div>
 
         <div>
           <h3>3 Columns</h3>
-          <Grid itemWidth={120} itemHeight={120} columnAmount={3}>
+          <GridComponent itemWidth={120} itemHeight={120} columnAmount={3}>
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
             <Rect width="100%" height="100%" color="#96ceb4" />
             <Rect width="100%" height="100%" color="#feca57" />
             <Rect width="100%" height="100%" color="#ff9ff3" />
-          </Grid>
+          </GridComponent>
         </div>
 
         <div>
           <h3>4 Columns</h3>
-          <Grid itemWidth={100} itemHeight={100} columnAmount={4}>
+          <GridComponent itemWidth={100} itemHeight={100} columnAmount={4}>
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
             <Rect width="100%" height="100%" color="#96ceb4" />
             <Rect width="100%" height="100%" color="#feca57" />
             <Rect width="100%" height="100%" color="#ff9ff3" />
-          </Grid>
+          </GridComponent>
         </div>
 
         <div>
           <h3>6 Columns</h3>
-          <Grid itemWidth={80} itemHeight={80} columnAmount={6}>
+          <GridComponent itemWidth={80} itemHeight={80} columnAmount={6}>
             <Rect width="100%" height="100%" color="#ff6b6b" />
             <Rect width="100%" height="100%" color="#4ecdc4" />
             <Rect width="100%" height="100%" color="#45b7d1" />
             <Rect width="100%" height="100%" color="#96ceb4" />
             <Rect width="100%" height="100%" color="#feca57" />
             <Rect width="100%" height="100%" color="#ff9ff3" />
-          </Grid>
+          </GridComponent>
         </div>
       </div>
     </StyleBox>
@@ -198,7 +206,7 @@ export function DifferentSizes() {
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
         <div>
           <h3>Small Items (80px x 80px)</h3>
-          <Grid itemWidth={80} itemHeight={80} columnAmount={6}>
+          <GridComponent itemWidth={80} itemHeight={80} columnAmount={6}>
             {Array.from({ length: 8 }, (_, i) => (
               <Rect
                 key={i}
@@ -207,12 +215,12 @@ export function DifferentSizes() {
                 color={`hsl(${i * 45}, 70%, 60%)`}
               />
             ))}
-          </Grid>
+          </GridComponent>
         </div>
 
         <div>
           <h3>Medium Items (120px x 120px)</h3>
-          <Grid itemWidth={120} itemHeight={120} columnAmount={4}>
+          <GridComponent itemWidth={120} itemHeight={120} columnAmount={4}>
             {Array.from({ length: 6 }, (_, i) => (
               <Rect
                 key={i}
@@ -221,12 +229,12 @@ export function DifferentSizes() {
                 color={`hsl(${i * 60}, 70%, 60%)`}
               />
             ))}
-          </Grid>
+          </GridComponent>
         </div>
 
         <div>
           <h3>Large Items (150px x 150px)</h3>
-          <Grid itemWidth={150} itemHeight={150} columnAmount={3}>
+          <GridComponent itemWidth={150} itemHeight={150} columnAmount={3}>
             {Array.from({ length: 4 }, (_, i) => (
               <Rect
                 key={i}
@@ -235,7 +243,7 @@ export function DifferentSizes() {
                 color={`hsl(${i * 90}, 70%, 60%)`}
               />
             ))}
-          </Grid>
+          </GridComponent>
         </div>
       </div>
     </StyleBox>
@@ -245,7 +253,7 @@ export function DifferentSizes() {
 export function WithCircles() {
   return (
     <StyleBox>
-      <Grid itemWidth={100} itemHeight={100} columnAmount={5}>
+      <GridComponent itemWidth={100} itemHeight={100} columnAmount={5}>
         <Circle size="80px" color="#ff6b6b" />
         <Circle size="80px" color="#4ecdc4" />
         <Circle size="80px" color="#45b7d1" />
@@ -254,7 +262,7 @@ export function WithCircles() {
         <Circle size="80px" color="#ff9ff3" />
         <Circle size="80px" color="#a55eea" />
         <Circle size="80px" color="#fd79a8" />
-      </Grid>
+      </GridComponent>
     </StyleBox>
   );
 }

package/src/layouts/grid/grid.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { CommonProps } from '../../stacks/types/common.js';
 import styles from './grid.module.css';
@@ -108,12 +108,7 @@ export const Grid = React.forwardRef(function Grid(
   });
 
   return (
-    <As
-      ref={ref}
-      className={classNames(styles.grid, className)}
-      style={gridStyles}
-      {...attr}
-    >
+    <As ref={ref} className={clsx(styles.grid, className)} style={gridStyles} {...attr}>
       {children}
     </As>
   );

package/src/layouts/header/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
 import styles from './header.module.css';
@@ -25,7 +25,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HStack
       ref={ref}
       as="header"
-      className={classNames(styles.header, className, 'tcn-header', 'header')}
+      className={clsx(styles.header, className, 'tcn-header', 'header')}
       data-hierarchy={hierarchy}
       data-size={size}
       height={height}

package/src/layouts/index.ts

@@ -1,3 +1,5 @@
+export * from './body/h_body.js';
+export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
 export * from './footer/footer.js';
@@ -8,5 +10,4 @@ export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './body/h_body.js';
-export * from './body/v_body.js';
+export * from './utility_bar/utility_bar.js';

package/src/layouts/list/item.tsx

@@ -1,17 +1,25 @@
 import React from 'react';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
+  selected?: boolean;
 }
 
 export const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
-  { children, className, ...props }: ItemProps,
+  { children, className, selected = false, ...props }: ItemProps,
   ref
 ) {
   return (
-    <HStack ref={ref} as="li" className={classnames('item', className)} {...props}>
+    <HStack
+      ref={ref}
+      as="li"
+      data-hierarchy={selected ? 'primary' : 'tertiary'}
+      data-is-selected={selected}
+      className={clsx('tcn-item', 'tcn-interactive', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );