@tcn/ui 0.0.3 → 0.0.4

package/src/inputs/date_picker/date_picker_year_selector.tsx

@@ -10,7 +10,7 @@ import { BodyText, Headline } from '../../typography/index.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import styles from './date_picker_year_selector.module.css';
 import { FocusRedirect } from '../../utils/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface DatePickerYearSelectorProps {
   presenter: DatePickerPresenter;
@@ -51,10 +51,7 @@ export function DatePickerYearSelector({
         key={x}
         width="flex"
         disabled={disabled}
-        className={classNames(
-          styles['date-picker-year-button'],
-          'date-picker-year-button'
-        )}
+        className={clsx(styles['date-picker-year-button'], 'date-picker-year-button')}
         data-is-disabled={String(disabled)}
         data-is-selected={String(date.getFullYear() === visibleYear)}
         onClick={() => {
@@ -98,10 +95,7 @@ export function DatePickerYearSelector({
       ref={containerRef}
       tabIndex={0}
       padding="8px"
-      className={classNames(
-        styles['date-picker-year-selector'],
-        'date-picker-year-selector'
-      )}
+      className={clsx(styles['date-picker-year-selector'], 'date-picker-year-selector')}
       gap="4px"
     >
       <HStack gap="4px">

package/src/inputs/input/input.stories.tsx

@@ -4,7 +4,15 @@ import styles from '../__storybook__/stories.module.css';
 import { VStack } from '../../stacks/v_stack.js';
 
 export default {
-  title: 'Input',
+  title: 'Inputs/Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A input component that allows the user to enter a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base(props: InputProps) {

package/src/inputs/input/input.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { HTMLAttributes } from 'react';
 import styles from './input.module.css';
@@ -21,7 +21,7 @@ export const Input = React.forwardRef(function Input(
 ) {
   return (
     <input
-      className={classnames(styles.input, className, 'input')}
+      className={clsx(styles.input, className, 'input')}
       type={type}
       ref={ref}
       data-is-disabled={props.disabled || false}

package/src/inputs/mask_input/key_capture_input.stories.tsx

@@ -7,7 +7,15 @@ import { ZStack } from '../../stacks/z_stack.js';
 import { KeyCaptureInput as Component, Range } from './key_capture_input.js';
 
 export default {
-  title: 'Key Capture Input',
+  title: 'Inputs/Key Capture Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A key capture input component that allows the user to capture a key.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function KeyCaptureInput() {

package/src/inputs/mask_input/mask_input.stories.tsx

@@ -3,7 +3,16 @@ import { MaskInput as Component, MaskInputProps } from './mask_input.js';
 import styles from '../__storybook__/stories.module.css';
 
 export default {
-  title: 'Mask Input',
+  title: 'Inputs/Mask Input',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A mask input component that allows the user to enter a value with a mask.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function Base(props: Omit<MaskInputProps, 'onChange'>) {

package/src/inputs/multi_combo_box/multi_combo_box.stories.tsx

@@ -4,7 +4,16 @@ import { Option } from '../options/option.js';
 import styles from '../__storybook__/stories.module.css';
 
 export default {
-  title: 'Multi Combo Box',
+  title: 'Inputs/Multi Combo Box',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A multi combo box 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/multi_combo_box/multi_combo_box.tsx

@@ -8,7 +8,7 @@ import { OptionProps } from '../options/option.js';
 import { Option } from '../options/option.js';
 
 import styles from './multi_combo_box.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 
 export interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {
@@ -107,7 +107,7 @@ export const MultiComboBox = React.forwardRef(function MultiComboBox(
     <VStack
       ref={ref}
       {...props}
-      className={classNames(styles['multi-combo-box-container'], className)}
+      className={clsx(styles['multi-combo-box-container'], className)}
     >
       <ComboBox
         ref={inputRef}

package/src/inputs/multiselect/multiselect_values.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './multiselect_values.module.css';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -50,7 +50,7 @@ export function MultiselectValues({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         styles['item-container'],
         className,
         'multiselect-values-container'

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 => {