@tcn/ui 0.0.3 → 0.1.1

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}

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,9 +1,10 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
-import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 import styles from './input.module.css';
 
-export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   type?: React.HTMLInputTypeAttribute;
   width?: string;
   height?: string;
@@ -21,7 +22,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/options/option.tsx

@@ -9,6 +9,7 @@ export interface OptionProps {
   keywords?: string[];
   selected?: boolean;
   disabled?: boolean;
+  obfuscate?: boolean;
 }
 
 export function Option({ children }: OptionProps) {

package/src/inputs/phone_number_input/phone_number_input.module.css

@@ -48,3 +48,15 @@
   max-height: calc(26px * var(--scalar, 1)) !important;
   max-width: calc(26px * var(--scalar, 1)) !important;
 }
+
+.phone-number-input-obfuscated {
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+  width: 100%;
+  height: 100%;
+}
+
+.phone-number-input-obfuscated::selection {
+  background: transparent;
+}

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({
@@ -81,6 +90,14 @@ export function PhoneNumberInput() {
               >
                 Bob Johnson - +1 (435) 586-5955
               </Option>
+              <Option
+                value="+14355865956"
+                label="Obfuscated Number"
+                keywords={['obfuscated', 'number']}
+                obfuscate={true}
+              >
+                Obfuscated Number
+              </Option>
             </Base>
           </td>
         </tr>