@tcn/ui 0.0.3 → 0.0.4

package/src/form/field/common/field_header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { VStack } from '../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
@@ -27,7 +27,7 @@ export const FieldHeader = React.forwardRef(function FieldHeader(
       as="div"
       hAlign="start"
       gap="4px"
-      className={classNames('field-header', className)}
+      className={clsx('field-header', className)}
       ref={ref}
       {...props}
     >

package/src/form/field/common/status_input/status_input.tsx

@@ -5,7 +5,7 @@ import type { HStackOwnProps } from '../../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';
 import React from 'react';
 import { Loading } from '../../../../feedback/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './status_input.module.css';
 
 /*
@@ -25,10 +25,7 @@ const LoadingAdornment: React.FC = () => {
 
 const ErroredAdornment: React.FC = () => {
   return (
-    <AlertTriangleIcon
-      className={classNames(styles['field-error'], 'field-error')}
-      size="lg"
-    />
+    <AlertTriangleIcon className={clsx(styles['field-error'], 'field-error')} size="lg" />
   );
 };
 
@@ -66,7 +63,7 @@ export const FieldStatusInput = React.forwardRef(function StatusInput(
     <HStack
       ref={ref}
       data-state={state}
-      className={classNames(
+      className={clsx(
         'field-status-input',
         styles['field-status-input'],
         className,

package/src/form/field/field.stories.tsx

@@ -10,7 +10,7 @@ import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 import { theme } from '../../themes/index.js';
 
 export default {
-  title: 'Field/Field',
+  title: 'Form/Field',
   parameters: {
     docs: {
       description: {
@@ -19,6 +19,7 @@ export default {
       },
     },
   },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

package/src/form/field/h_field/h_field.stories.tsx

@@ -9,7 +9,16 @@ import { HStack } from '../../../stacks/h_stack.js';
 import { Spacer } from '../../../stacks/spacer.js';
 
 export default {
-  title: 'Field/HField',
+  title: 'Form/HField',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A horizontal field component that displays a label and input side by side.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

package/src/form/field/h_field/h_field.tsx

@@ -1,7 +1,7 @@
 import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useState } from 'react';
 import styles from './h_field.module.css';
 import type { FieldInput } from '../common/types.js';
@@ -47,7 +47,7 @@ export const HField = React.forwardRef(function HField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={classNames('base-field', styles['h-field'], 'h-field', className)}
+      className={clsx('base-field', styles['h-field'], 'h-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

package/src/form/field/v_field/v_field.stories.tsx

@@ -9,7 +9,16 @@ import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 import { FieldSet } from '../../field_set/field_set.js';
 
 export default {
-  title: 'Field/VField',
+  title: 'Form/VField',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A vertical field component that displays a label and input below each other.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

package/src/form/field/v_field/v_field.tsx

@@ -1,7 +1,7 @@
 import { VStack } from '../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useState } from 'react';
 import styles from './v_field.module.css';
 import { FieldControl } from '../common/field_control/field_control.js';
@@ -46,7 +46,7 @@ export const VField = React.forwardRef(function VField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={classNames('base-field', styles['v-field'], 'v-field', className)}
+      className={clsx('base-field', styles['v-field'], 'v-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

package/src/form/field_set/field_set.stories.tsx

@@ -15,7 +15,15 @@ import {
 import { HField } from '../field/h_field/h_field.js';
 
 export default {
-  title: 'Fieldset',
+  title: 'Form/Field Set',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A field set component that displays a legend and a group of fields.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

package/src/form/field_set/field_set.tsx

@@ -3,7 +3,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import type { VStackProps } from '../../stacks/v_stack.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useMemo } from 'react';
 import styles from './field_set.module.css';
 
@@ -37,13 +37,13 @@ export const FieldSet = React.forwardRef(function FieldSet(
       as="fieldset"
       aria-labelledby={labelId}
       ref={ref}
-      className={classnames(styles['field-set'], className, 'field-set')}
+      className={clsx(styles['field-set'], className, 'field-set')}
       {...props}
     >
       {legend && (
         <HStack
           id={labelId}
-          className={classnames('legend', 'field-set-legend')}
+          className={clsx('legend', 'field-set-legend')}
           hAlign="start"
           height={props.height}
         >
@@ -54,10 +54,7 @@ export const FieldSet = React.forwardRef(function FieldSet(
           {endAdornments}
         </HStack>
       )}
-      <VStack
-        className={classnames('field-set-body', styles['field-set-body'])}
-        {...props}
-      >
+      <VStack className={clsx('field-set-body', styles['field-set-body'])} {...props}>
         {children}
       </VStack>
     </VStack>

package/src/inputs/checkbox/checkbox.stories.tsx

@@ -17,7 +17,15 @@ function Base(props: CheckboxProps) {
 }
 
 export default {
-  title: 'Checkbox',
+  title: 'Inputs/Checkbox',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A checkbox component that allows the user to select a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Checkbox() {

package/src/inputs/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import styles from './checkbox.module.css';
 
@@ -36,7 +36,7 @@ export const Checkbox = React.forwardRef(function Checkbox(
         onChange && onChange(Boolean(e.currentTarget.checked), e);
       }}
       {...props}
-      className={classnames(className, styles.checkbox, 'checkbox')}
+      className={clsx(className, styles.checkbox, 'checkbox')}
       style={{ width, height, ...style }}
     />
   );

package/src/inputs/color_input/color_input.stories.tsx

@@ -8,7 +8,15 @@ function Base(props: ColorInputProps) {
 }
 
 export default {
-  title: 'Color Input',
+  title: 'Inputs/Color Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A color input component that allows the user to select a color.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function ColorInput() {

package/src/inputs/color_input/color_input.tsx

@@ -2,7 +2,7 @@ import { Box } from '../../stacks/box/box.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { HTMLAttributes } from 'react';
 import { ColorState } from 'react-color';
@@ -105,11 +105,7 @@ export function ColorInput({
           onClick={openPicker}
           width="70px"
           maxWidth="70px"
-          className={classNames(
-            styles['color-input-select'],
-            'color-input-select',
-            'select'
-          )}
+          className={clsx(styles['color-input-select'], 'color-input-select', 'select')}
           style={{
             borderStartStartRadius: 0,
             borderEndStartRadius: 0,

package/src/inputs/color_input/color_picker.tsx

@@ -1,6 +1,6 @@
 import { useForkRef } from '../../utils/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';
 import { ChromePicker, Color, type ColorResult } from 'react-color';
 import styles from './color_picker.module.css';
@@ -28,7 +28,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker(
       padding="8px"
       height="auto"
       width="auto"
-      className={classNames(styles['color-picker'], className)}
+      className={clsx(styles['color-picker'], className)}
       {...props}
     >
       <ChromePicker

package/src/inputs/combo_box/combo_box.stories.tsx

@@ -1,18 +1,27 @@
 import React, { useState } from 'react';
-import { ComboBox } from '../combo_box/combo_box.js';
+import { ComboBox as ComboBoxComponent } from './combo_box.js';
 import { Option } from '../options/option.js';
 
 export default {
-  title: 'ComboBox',
+  title: 'Inputs/ComboBox',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A combo box component that allows the user to select a value from a list of options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
-export function Default() {
+export function ComboBox() {
   const [value, setValue] = useState('');
   function onSuggestionSelect(value: string) {
     setValue(value);
   }
   return (
-    <ComboBox
+    <ComboBoxComponent
       value={value}
       onChange={setValue}
       onOptionSelect={onSuggestionSelect}
@@ -88,6 +97,6 @@ export function Default() {
       >
         Laura White
       </Option>
-    </ComboBox>
+    </ComboBoxComponent>
   );
 }

package/src/inputs/combo_box/combo_box.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 { Input, InputProps } from '../input/input.js';
@@ -127,7 +127,7 @@ export const ComboBox = React.forwardRef(function ComboBox(
     <>
       <Input
         ref={forkedRef}
-        className={classNames(className, 'combo-box-input')}
+        className={clsx(className, 'combo-box-input')}
         {...props}
         value={value}
         onKeyDown={handleKeyDown}

package/src/inputs/date_picker/date_picker.stories.tsx

@@ -4,20 +4,28 @@ import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import React from 'react';
 import { Button } from '../../actions/index.js';
-import { DatePicker } from './date_picker.js';
+import { DatePicker as DatePickerComponent } from './date_picker.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 
 export default {
-  title: 'Date Picker',
+  title: 'Inputs/Date Picker',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A date picker component that allows the user to select a date.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
-export function Baseline() {
-  return <DatePicker value={new Date()} />;
+export function DatePicker() {
+  return <DatePickerComponent value={new Date()} />;
 }
 
 export function BoundedTime() {
   return (
-    <DatePicker
+    <DatePickerComponent
       showTime
       value={new Date()}
       minVisibleTimeInMilliseconds={8 * 1000 * 60 * 60}
@@ -35,7 +43,7 @@ export function SmallValidRange() {
   min.setHours(10, 0, 0, 0);
   max.setHours(12, 0, 0, 0);
   return (
-    <DatePicker
+    <DatePickerComponent
       showTime
       value={new Date()}
       min={min}
@@ -53,7 +61,7 @@ export function MidValidRange() {
   max.setFullYear(max.getFullYear() + 10);
 
   return (
-    <DatePicker
+    <DatePickerComponent
       showTime
       value={new Date()}
       min={min}
@@ -65,7 +73,7 @@ export function MidValidRange() {
 }
 
 export function CountryCode() {
-  return <DatePicker countryCode="fr-FR" value={new Date()} />;
+  return <DatePickerComponent countryCode="fr-FR" value={new Date()} />;
 }
 
 function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
@@ -112,7 +120,7 @@ function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
 
 export function Actions() {
   return (
-    <DatePicker
+    <DatePickerComponent
       value={new Date()}
       renderActions={presenter => {
         return <DatePickerActions presenter={presenter} />;
@@ -122,5 +130,5 @@ export function Actions() {
 }
 
 export function Disabled() {
-  return <DatePicker disabled value={new Date()} />;
+  return <DatePickerComponent disabled value={new Date()} />;
 }

package/src/inputs/date_picker/date_picker.tsx

@@ -3,7 +3,7 @@ import { useResizeObserver } from '../../utils/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { DatePickerBody } from './date_picker_body.js';
 import { DatePickerHeader } from './date_picker_header.js';
@@ -128,7 +128,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
       ref={ref}
       width="auto"
       height="auto"
-      className={classNames(styles['date-picker'], 'date-picker')}
+      className={clsx(styles['date-picker'], 'date-picker')}
       tabIndex={0}
     >
       <VStack
@@ -136,7 +136,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
         inline
         height="auto"
         width="auto"
-        className={classNames(styles['date-picker-box'], 'date-picker-box')}
+        className={clsx(styles['date-picker-box'], 'date-picker-box')}
         data-is-disabled={disabled}
       >
         <VStack height="auto">

package/src/inputs/date_picker/date_picker_date.tsx

@@ -4,7 +4,7 @@ import { ZStack } from '../../stacks/z_stack.js';
 import type { CalendarDate } from '../../utils/calendar/calendar_date.js';
 import type { DatePickerPresenter } from './date_picker_presenter.js';
 import styles from './date_picker_date.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface DatePickerDateProps {
   date: CalendarDate;
@@ -77,7 +77,7 @@ export function DatePickerDate({ presenter, date: calendarDate }: DatePickerDate
   return (
     <button
       disabled={!isWithinMonth || isDisabled || !isWithinRange}
-      className={classNames(styles['date-picker-date'], 'date-picker-date')}
+      className={clsx(styles['date-picker-date'], 'date-picker-date')}
       onClick={select}
       data-is-within-month={String(isWithinMonth)}
       data-is-selected={String(isSelected)}
@@ -89,7 +89,7 @@ export function DatePickerDate({ presenter, date: calendarDate }: DatePickerDate
         <BodyText>{String(calendarDate.date)}</BodyText>
         {isToday && (
           <div
-            className={classNames(styles['date-picker-today'], 'date-picker-today')}
+            className={clsx(styles['date-picker-today'], 'date-picker-today')}
             data-is-selected={String(isSelected)}
           ></div>
         )}

package/src/inputs/date_picker/date_picker_header.tsx

@@ -11,7 +11,7 @@ import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
 import { Option, OptionProps } from '../options/option.js';
 import { DatePickerState } from './date_picker_presenter.js';
 import styles from './date_picker_header.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { DatePickerYearInput } from './date_picker_year_input.js';
 
 function makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {
@@ -61,7 +61,7 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
 
   return (
     <HStack
-      className={classNames(styles['date-picker-header'], 'date-picker-header')}
+      className={clsx(styles['date-picker-header'], 'date-picker-header')}
       minWidth="35px"
       width="100%"
     >

package/src/inputs/date_picker/date_picker_input.stories.tsx

@@ -4,11 +4,19 @@ import { Spacer } from '../../stacks/spacer.js';
 import { HStack } from '../../stacks/h_stack.js';
 import React, { useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { DatePickerInput } from './date_picker_input.js';
+import { DatePickerInput as DatePickerInputComponent } from './date_picker_input.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 
 export default {
-  title: 'Date Picker Input',
+  title: 'Inputs/Date Picker Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A date picker input component that allows the user to select a date.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
@@ -53,17 +61,17 @@ function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
   );
 }
 
-export function Baseline() {
+export function DatePickerInput() {
   const [value, setValue] = useState<Date | null>(null);
 
-  return <DatePickerInput value={value} onChange={setValue} width="300px" />;
+  return <DatePickerInputComponent value={value} onChange={setValue} width="300px" />;
 }
 
 export function WithTime() {
   const [value, setValue] = useState<Date | null>(null);
 
   return (
-    <DatePickerInput
+    <DatePickerInputComponent
       value={value}
       onChange={setValue}
       showTime
@@ -79,7 +87,7 @@ export function WithTimeInterval() {
   const [value, setValue] = useState<Date | null>(null);
 
   return (
-    <DatePickerInput
+    <DatePickerInputComponent
       value={value}
       onChange={setValue}
       showTime
@@ -96,7 +104,7 @@ export function CountryCode() {
   const [value, setValue] = useState<Date | null>(null);
 
   return (
-    <DatePickerInput
+    <DatePickerInputComponent
       value={value}
       onChange={setValue}
       countryCode="fr-FR"

package/src/inputs/date_picker/date_picker_input.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from '
 import { Hierarchy } from '../../utils/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { Popper } from '../../overlay/popper/popper.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { HTMLAttributes } from 'react';
 import { Button } from '../../actions/index.js';
 import { DatePicker } from './date_picker.js';
@@ -125,7 +125,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
       <>
         <Button
           ref={ref}
-          className={classNames(styles.button, 'select')}
+          className={clsx(styles.button, 'select')}
           hAlign="start"
           disabled={disabled}
           hierarchy={hierarchy}
@@ -153,7 +153,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
         >
           <ZStack
             padding="8px"
-            className={classNames(styles.popover, 'date-picker-popover')}
+            className={clsx(styles.popover, 'date-picker-popover')}
             onKeyDown={processKeyInput}
           >
             <DatePicker

package/src/inputs/date_picker/date_picker_time_selector.tsx

@@ -1,6 +1,6 @@
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button } from '../../actions/index.js';
 import styles from './date_picker_time_selector.module.css';
@@ -63,7 +63,7 @@ export function DatePickerTimeSelector({
         key={x}
         width="flex"
         hierarchy="tertiary"
-        className={classNames('selected-time', isSelected && styles['selected-time'])}
+        className={clsx('selected-time', isSelected && styles['selected-time'])}
         disabled={origin == null || disabled || isOutOfRange}
         onClick={() => {
           onSelect(date.getHours(), date.getMinutes(), date.getSeconds());
@@ -87,15 +87,12 @@ export function DatePickerTimeSelector({
       width="auto"
       height={height}
       data-is-disabled={disabled || origin == null}
-      className={classNames(styles['time-box'], 'time-box')}
+      className={clsx(styles['time-box'], 'time-box')}
     >
       <ZStack
-        className={classNames(
-          styles['time-box-title-container'],
-          'time-box-title-container'
-        )}
+        className={clsx(styles['time-box-title-container'], 'time-box-title-container')}
       >
-        <BodyText className={classNames(styles['time-box-title'], 'time-box-title')}>
+        <BodyText className={clsx(styles['time-box-title'], 'time-box-title')}>
           <ClockIcon size="lg" />
         </BodyText>
       </ZStack>

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -1,5 +1,5 @@
 import { Button } from '../../actions/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './date_picker_year_input.module.css';
 import { useState } from 'react';
 import { Popper } from '../../overlay/popper/popper.js';
@@ -29,7 +29,7 @@ export function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {
     <>
       <Button
         hierarchy="tertiary"
-        className={classNames('date-picker-year-select', styles['year-select'])}
+        className={clsx('date-picker-year-select', styles['year-select'])}
         width="auto"
         hAlign="start"
         onClick={open}