@tcn/ui 0.0.2 → 0.0.4

package/src/inputs/multiselect/mutliselect.stories.tsx

@@ -5,7 +5,16 @@ import { Option } from '../options/option.js';
 import styles from '../__storybook__/stories.module.css';
 
 export default {
-  title: 'Multiselect',
+  title: 'Inputs/Multiselect',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A multiselect component that allows the user to select multiple values from a list of options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base(props: Omit<React.ComponentProps<typeof Component>, 'children'>) {

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -7,7 +7,16 @@ import { Option } from '../options/option.js';
 import styles from '../__storybook__/stories.module.css';
 
 export default {
-  title: 'Phone Number Input',
+  title: 'Inputs/Phone Number Input',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A phone number input component that allows the user to enter a phone number.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base({

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -1,5 +1,5 @@
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, {
   useCallback,
   useLayoutEffect,
@@ -272,15 +272,12 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   return (
     <HStack
       ref={ref}
-      className={classNames(styles['phone-number-input'], 'phone-number-input')}
+      className={clsx(styles['phone-number-input'], 'phone-number-input')}
       height="auto"
       {...props}
     >
       <Select
-        className={classNames(
-          styles['phone-number-input-select'],
-          'phone-number-input-select'
-        )}
+        className={clsx(styles['phone-number-input-select'], 'phone-number-input-select')}
         ref={countryRef}
         width="auto"
         value={countryCode}
@@ -290,7 +287,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
       >
         {countryOptions}
       </Select>
-      <HStack width="flex" className={styles['phone-number-input-container']}>
+      <HStack width="flex" className={clsx(styles['phone-number-input-container'])}>
         <MaskInput
           ref={numberRef}
           value={phoneNumber}
@@ -299,7 +296,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
           disabled={disabled}
           data-is-disabled={disabled}
           data-has-phone-book={showPhoneBook}
-          className={classNames(styles['phone-number-input'], 'phone-number-input')}
+          className={clsx(styles['phone-number-input'], 'phone-number-input')}
           preparePasteValue={preparePasteValue}
         />
       </HStack>
@@ -307,7 +304,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         <>
           <SlimButton
             disabled={disabled}
-            className={classNames(
+            className={clsx(
               styles['phone-number-input-phone-book'],
               'phone-number-input-phone-book'
             )}

package/src/inputs/radio/radio.stories.tsx

@@ -1,20 +1,28 @@
 import React from 'react';
-import { Radio } from './radio.js';
+import { Radio as RadioComponent } from './radio.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 
 export default {
-  title: 'Radio',
+  title: 'Inputs/Radio',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A radio component that allows the user to select a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
-export function Default() {
+export function Radio() {
   return (
     <HStack hAlign="center" height="auto">
-      <Radio name="options" id="1" value="option-1" label="Option 1" />
+      <RadioComponent name="options" id="1" value="option-1" label="Option 1" />
       <Spacer width="8px" />
-      <Radio name="options" id="2" value="option-2" label="Option 2" />
+      <RadioComponent name="options" id="2" value="option-2" label="Option 2" />
       <Spacer width="8px" />
-      <Radio name="options" id="3" value="option-3" label="Option 3" />
+      <RadioComponent name="options" id="3" value="option-3" label="Option 3" />
     </HStack>
   );
 }

package/src/inputs/radio/radio.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import styles from './radio.module.css';
 import { HStack } from '../../stacks/h_stack.js';
@@ -39,7 +39,7 @@ export const Radio = React.forwardRef(function Radio(
     <HStack inline width="auto">
       <input
         ref={ref}
-        className={classnames(className, styles.radio, 'radio')}
+        className={clsx(className, styles.radio, 'radio')}
         type="radio"
         id={finalId}
         name={name}

package/src/inputs/select/select.stories.tsx

@@ -1,20 +1,29 @@
 import React, { useState } from 'react';
 import { Option } from '../options/option.js';
-import { Select, SelectProps } from './select.js';
+import { Select as SelectComponent, SelectProps } from './select.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Headline } from '../../typography/headline/headline.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
 
 export default {
-  title: 'Select',
+  title: 'Inputs/Select',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A select component that allows the user to select a value from a list of options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
-export function Default(_: Omit<SelectProps, 'children'>) {
+export function Select(_: Omit<SelectProps, 'children'>) {
   const [value, setValue] = useState<string>('');
 
   return (
-    <Select value={value} onChange={setValue}>
+    <SelectComponent value={value} onChange={setValue}>
       <Option value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
         Apple
       </Option>
@@ -58,7 +67,7 @@ export function Default(_: Omit<SelectProps, 'children'>) {
       >
         Really Really Long Options
       </Option>
-    </Select>
+    </SelectComponent>
   );
 }
 
@@ -66,7 +75,7 @@ export function CustomWidth(_: Omit<SelectProps, 'children'>) {
   const [value, setValue] = useState<string>('');
 
   return (
-    <Select value={value} onChange={setValue} width="100px">
+    <SelectComponent value={value} onChange={setValue} width="100px">
       <Option value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
         Apple
       </Option>
@@ -110,7 +119,7 @@ export function CustomWidth(_: Omit<SelectProps, 'children'>) {
       >
         Really Really Long Options
       </Option>
-    </Select>
+    </SelectComponent>
   );
 }
 
@@ -118,7 +127,7 @@ export function CustomOptions() {
   const [value, setValue] = useState<string>('');
 
   return (
-    <Select value={value} onChange={setValue} width="100px">
+    <SelectComponent value={value} onChange={setValue} width="100px">
       <Option value="new-york" label="New York" keywords={['city', 'usa', 'big apple']}>
         <HStack height="auto" gap="8px" padding="4px">
           <span>🗽</span>
@@ -168,6 +177,6 @@ export function CustomOptions() {
           </VStack>
         </HStack>
       </Option>
-    </Select>
+    </SelectComponent>
   );
 }

package/src/inputs/select/select.tsx

@@ -1,5 +1,5 @@
 import { useForkRef } from '../../utils/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useRef, useState } from 'react';
 import { SuggestionList } from '../suggestions/suggestion_list.js';
 import { OptionProps } from '../options/option.js';
@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={classNames(className, 'select', styles.select)}
+        className={clsx(className, 'select', styles.select)}
         width="100%"
         {...props}
         hAlign="start"

package/src/inputs/slider/slider.stories.tsx

@@ -16,7 +16,15 @@ function BaseWithValue(props: SliderProps) {
 }
 
 export default {
-  title: 'Slider',
+  title: 'Inputs/Slider',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A slider component that allows the user to select a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Slider() {

package/src/inputs/slider/slider.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useLayoutEffect, useRef } from 'react';
 import { HTMLAttributes } from 'react';
 import styles from './slider.module.css';
@@ -41,7 +41,7 @@ export const Slider = React.forwardRef(function Slider(
   return (
     <input
       type="range"
-      className={classnames(className, styles.slider, 'slider')}
+      className={clsx(className, styles.slider, 'slider')}
       data-is-disabled={props.disabled || false}
       ref={forkedRef}
       onChange={e => {

package/src/inputs/suggestions/suggestion_item.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import styles from './suggestion_item.module.css';
 
@@ -36,7 +36,7 @@ export function SuggestionItem({
     <button
       tabIndex={-1}
       ref={buttonRef}
-      className={classNames(styles['suggestion-item'], 'suggestion-item')}
+      className={clsx(styles['suggestion-item'], 'suggestion-item')}
       data-is-selected={isSelected}
       data-is-focused={isFocused}
       data-disabled={isDisabled}

package/src/inputs/suggestions/suggestion_list.stories.tsx

@@ -1,19 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { SuggestionList } from './suggestion_list.js';
+import { SuggestionList as SuggestionListComponent } from './suggestion_list.js';
 import { Option } from '../options/option.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { BodyText, Headline } from '../../typography/index.js';
 
-const meta: Meta<typeof SuggestionList> = {
-  title: 'SuggestionList',
+const meta: Meta<typeof SuggestionListComponent> = {
+  title: 'Inputs/Suggestion List',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A suggestion list component that displays a list of suggestions and allows the user to select a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const SuggestionList: Story = {
   render: () => {
     const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -30,7 +39,7 @@ export const Default: Story = {
           style={{ width: '100%', padding: '8px' }}
         />
         {isOpen && anchorElement && (
-          <SuggestionList
+          <SuggestionListComponent
             value={value}
             anchorElement={anchorElement}
             onChange={setValue}
@@ -67,7 +76,7 @@ export const Default: Story = {
             >
               🫐 Elderberry
             </Option>
-          </SuggestionList>
+          </SuggestionListComponent>
         )}
       </div>
     );
@@ -91,7 +100,7 @@ export const WithCustomContent: Story = {
           style={{ width: '100%', padding: '8px' }}
         />
         {isOpen && anchorElement && (
-          <SuggestionList
+          <SuggestionListComponent
             value={label}
             anchorElement={anchorElement}
             onChange={setLabel}
@@ -132,7 +141,7 @@ export const WithCustomContent: Story = {
                 </VStack>
               </HStack>
             </Option>
-          </SuggestionList>
+          </SuggestionListComponent>
         )}
       </div>
     );
@@ -156,7 +165,7 @@ export const WithDisabledOptions: Story = {
           style={{ width: '100%', padding: '8px' }}
         />
         {isOpen && anchorElement && (
-          <SuggestionList
+          <SuggestionListComponent
             value={value}
             anchorElement={anchorElement}
             onChange={setValue}
@@ -206,7 +215,7 @@ export const WithDisabledOptions: Story = {
             <Option value="grape" label="Grape" keywords={['fruit', 'purple', 'bunch']}>
               🍇 Grape
             </Option>
-          </SuggestionList>
+          </SuggestionListComponent>
         )}
       </div>
     );
@@ -329,7 +338,7 @@ export const PerformanceTest: Story = {
           style={{ width: '100%', padding: '8px' }}
         />
         {isOpen && anchorElement && (
-          <SuggestionList
+          <SuggestionListComponent
             value={label}
             anchorElement={anchorElement}
             onChange={setLabel}
@@ -340,7 +349,7 @@ export const PerformanceTest: Story = {
             onClose={() => setIsOpen(false)}
           >
             {PERFORMANCE_TEST_ITEMS}
-          </SuggestionList>
+          </SuggestionListComponent>
         )}
       </div>
     );

package/src/inputs/suggestions/suggestion_list.tsx

@@ -1,7 +1,7 @@
 import { BodyText } from '../../typography/index.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useLayoutEffect, Children, isValidElement } from 'react';
 import { useRef, useState } from 'react';
 import { FocusRedirect } from '../../utils/index.js';
@@ -369,7 +369,7 @@ export function SuggestionList({
         minWidth={suggestionsWidth}
         width="auto"
         hAlign="start"
-        className={classNames(styles['suggestion-list'], 'suggestion-list')}
+        className={clsx(styles['suggestion-list'], 'suggestion-list')}
       >
         <input
           ref={internalInputRef}
@@ -378,7 +378,7 @@ export function SuggestionList({
           onKeyUp={handleKeyUp}
           onKeyDown={handleKeyDown}
           onChange={handleChange}
-          className={classNames(styles.input, 'suggestion-list-search-input')}
+          className={clsx(styles.input, 'suggestion-list-search-input')}
           {...props}
         />
         <VStack>

package/src/inputs/switch/switch.stories.tsx

@@ -3,7 +3,15 @@ import { Switch as Component, SwitchProps } from './switch.js';
 import styles from '../__storybook__/stories.module.css';
 
 export default {
-  title: 'Switch',
+  title: 'Inputs/Switch',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A switch component that allows the user to toggle a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base(props: SwitchProps) {

package/src/inputs/switch/switch.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, HTMLAttributes, ChangeEvent } from 'react';
 import { useForkRef } from '../../utils/index.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './switch.module.css';
 import { CheckIcon } from '@tcn/icons/check_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -55,18 +55,18 @@ export const Switch = React.forwardRef(function Switch(
       data-is-checked={Boolean(checked)}
       data-is-disabled={props.disabled || false}
       data-width="fixed"
-      className={classnames(styles['switch-wrapper'], className, 'switch-wrapper')}
+      className={clsx(styles['switch-wrapper'], className, 'switch-wrapper')}
     >
       {!omitIcons && (
         <Icon
-          className={classnames(styles['switch-icon'], 'switch-icon')}
+          className={clsx(styles['switch-icon'], 'switch-icon')}
           data-is-checked={checked}
         />
       )}
       <input
         ref={forkedInputRef}
         type="checkbox"
-        className={classnames(styles.switch, 'switch')}
+        className={clsx(styles.switch, 'switch')}
         onBlur={blur}
         onFocus={focus}
         style={{ ...style, ...customStyles }}

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.module.css

@@ -1,4 +1,5 @@
 .h-body {
-  gap: var(--gap-medium);
-  padding: var(--padding-medium);
+  min-width: 0;
+  flex-grow: 1;
+  height: 100%;
 }

package/src/layouts/body/h_body.tsx

@@ -1,19 +1,20 @@
 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'> {}
 
 export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
-  { children, className, ...props }: HBodyProps,
+  { children, className, overflowX = 'auto', ...props }: HBodyProps,
   ref
 ) {
   return (
     <HStack
       ref={ref}
-      as="section"
-      className={classNames(styles['h-body'], className, 'h-body', 'body')}
+      as="div"
+      overflowX={overflowX}
+      className={clsx(styles['h-body'], className, 'tcn-h-body', 'body')}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.module.css

@@ -1,4 +1,5 @@
 .v-body {
-  gap: var(--gap-medium);
-  padding: var(--padding-medium);
+  min-height: 0;
+  flex-grow: 1;
+  width: 100%;
 }

package/src/layouts/body/v_body.tsx

@@ -1,19 +1,20 @@
 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'> {}
 
 export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
-  { children, className, ...props }: VBodyProps,
+  { children, className, overflowY = 'auto', ...props }: VBodyProps,
   ref
 ) {
   return (
     <VStack
       ref={ref}
-      as="section"
-      className={classNames(styles['v-body'], className, 'v-body', 'body')}
+      as="div"
+      overflowY={overflowY}
+      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}