@tcn/ui 0.0.3 → 0.1.1

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,
@@ -21,6 +21,16 @@ import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
 import { Option, OptionProps } from '../options/option.js';
 import { SuggestionList } from '../suggestions/suggestion_list.js';
 import { stripNonNumericAfterCountryCode } from './utils.js';
+import { useForkRef } from '../../utils/index.js';
+
+const OBFUSCATED_CHARACTER = '•';
+
+function createObfuscatedMasks(masks: { mask: string; placeholder?: string }[]) {
+  return masks.map(m => ({
+    ...m,
+    placeholder: m.mask.replace(/[9a*]/g, OBFUSCATED_CHARACTER),
+  }));
+}
 
 const countryList = countriesPhoneInformation.map(i => ({
   name: i.name,
@@ -109,7 +119,12 @@ export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
   defaultCountry?: string;
-  onChange?: (value: string) => void;
+  /**
+   * Callback fired when the phone number value changes.
+   * @param value - The phone number value with country prefix
+   * @param obfuscate - Whether the selected phone number is obfuscated (e.g., from a phone book entry marked as obfuscated)
+   */
+  onChange?: (value: string, obfuscate: boolean) => void;
   countrySelectRef?: React.Ref<HTMLButtonElement>;
   phoneNumberInputRef?: React.Ref<HTMLInputElement>;
   disabled?: boolean;
@@ -161,6 +176,10 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   const [currentMasks, setCurrentMasks] = useState([
     ...countriesPhoneInformation[0].masks,
   ]);
+  const [obfuscateValue, setObfuscateValue] = useState(false);
+  const [shouldFocusAfterClear, setShouldFocusAfterClear] = useState(false);
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const forkedInputRef = useForkRef(numberRef, internalInputRef);
 
   const countryOptions = useMemo(() => {
     return createCountryOptions(allowedCountryCodes);
@@ -183,7 +202,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
 
     const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;
     lastOutputValueRef.current = value;
-    onChange && onChange(value);
+    onChange && onChange(value, false);
   }
 
   useLayoutEffect(() => {
@@ -202,9 +221,14 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);
     const outputValue = countryPrefix + lineNumber;
 
+    // Clear obfuscated state when user types manually
+    if (obfuscateValue) {
+      setObfuscateValue(false);
+    }
+
     lastOutputValueRef.current = outputValue;
     phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);
-    onChange && onChange(outputValue);
+    onChange && onChange(outputValue, false);
   }
 
   function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {
@@ -219,9 +243,15 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     setPhoneBookElement(null);
   }
 
-  function handlePhoneBookOptionSelect(value: string) {
+  function handlePhoneBookOptionSelect(
+    value: string,
+    _label: string | undefined,
+    _isSuggestion: boolean,
+    obfuscate: boolean
+  ) {
     // Update the phone number with the selected value
-    updatePhoneNumber(value);
+    setObfuscateValue(obfuscate);
+    updatePhoneNumber(value, obfuscate);
     closePhoneBook();
   }
 
@@ -244,8 +274,22 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     return value;
   }
 
+  function handleObfuscatedInputChange(newValue: string) {
+    // When user types on a obfuscated input, clear the obfuscated state and start fresh
+    // The newValue will be the digits the user typed (mask filters to valid input)
+    setShouldFocusAfterClear(true);
+    setObfuscateValue(false);
+    setPhoneNumber(newValue);
+
+    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;
+    const lineNumber = stripNonNumericAfterCountryCode(newValue);
+    const outputValue = countryPrefix + lineNumber;
+    lastOutputValueRef.current = outputValue;
+    onChange && onChange(outputValue, false);
+  }
+
   const updatePhoneNumber = useCallback(
-    (value: string) => {
+    (value: string, obfuscate = false) => {
       const oldValue = lastOutputValueRef.current;
       const countryInformation = getCountryCodeFromValue(
         value,
@@ -259,7 +303,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
 
       if (oldValue !== value) {
         setPhoneNumber(phoneNumber);
-        onChange && onChange(value);
+        onChange && onChange(value, obfuscate);
       }
     },
     [defaultCountry, selectedCountry, onChange]
@@ -269,45 +313,76 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     updatePhoneNumber(value);
   }, [value, updatePhoneNumber]);
 
+  // Focus the input after transitioning from obfuscated to normal mode
+  useLayoutEffect(() => {
+    if (shouldFocusAfterClear && !obfuscateValue && internalInputRef.current) {
+      internalInputRef.current.focus();
+      setShouldFocusAfterClear(false);
+    }
+  }, [shouldFocusAfterClear, obfuscateValue]);
+
   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}
+        value={obfuscateValue ? '' : countryCode}
         onChange={changeCountry}
-        disabled={disabled}
-        data-is-disabled={disabled}
+        disabled={disabled || obfuscateValue}
+        data-is-disabled={disabled || obfuscateValue}
+        data-is-obfuscated={obfuscateValue}
+        placeholder={obfuscateValue ? '––' : undefined}
       >
         {countryOptions}
       </Select>
-      <HStack width="flex" className={styles['phone-number-input-container']}>
-        <MaskInput
-          ref={numberRef}
-          value={phoneNumber}
-          mask={currentMasks}
-          onChange={transformValue}
-          disabled={disabled}
-          data-is-disabled={disabled}
-          data-has-phone-book={showPhoneBook}
-          className={classNames(styles['phone-number-input'], 'phone-number-input')}
-          preparePasteValue={preparePasteValue}
-        />
+      <HStack width="flex" className={clsx(styles['phone-number-input-container'])}>
+        {obfuscateValue ? (
+          <MaskInput
+            key="obfuscated"
+            ref={forkedInputRef}
+            value=""
+            mask={createObfuscatedMasks(currentMasks)}
+            onChange={handleObfuscatedInputChange}
+            disabled={disabled}
+            data-is-disabled={disabled}
+            data-has-phone-book={showPhoneBook}
+            data-is-obfuscated={true}
+            className={clsx(
+              styles['phone-number-input'],
+              styles['phone-number-input-obfuscated'],
+              'phone-number-input'
+            )}
+            preparePasteValue={() => ''}
+            prepareCopyValue={() => ''}
+            prepareCutValue={() => ''}
+          />
+        ) : (
+          <MaskInput
+            key="normal"
+            ref={forkedInputRef}
+            value={phoneNumber}
+            mask={currentMasks}
+            onChange={transformValue}
+            disabled={disabled}
+            data-is-disabled={disabled}
+            data-has-phone-book={showPhoneBook}
+            data-is-obfuscated={false}
+            className={clsx(styles['phone-number-input'], 'phone-number-input')}
+            preparePasteValue={preparePasteValue}
+          />
+        )}
       </HStack>
       {showPhoneBook && (
         <>
           <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';
 
@@ -6,7 +6,12 @@ export interface SuggestionItemProps {
   isFocused: boolean;
   isSelected: boolean;
   option: React.ReactElement;
-  onClick?: (value: string, label: string, isSuggestion: boolean) => void;
+  onClick?: (
+    value: string,
+    label: string,
+    isSuggestion: boolean,
+    obfuscate: boolean
+  ) => void;
 }
 
 export function SuggestionItem({
@@ -36,14 +41,19 @@ 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}
       disabled={isDisabled}
       onClick={() => {
         if (!isDisabled && onClick) {
-          onClick(option.props.value, option.props.label, true);
+          onClick(
+            option.props.value,
+            option.props.label,
+            true,
+            option.props.obfuscate ?? false
+          );
         }
       }}
     >

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';
@@ -25,7 +25,8 @@ export interface SuggestionListProps
   onOptionSelect?: (
     value: string,
     label: string | undefined,
-    isSuggestion: boolean
+    isSuggestion: boolean,
+    obfuscate: boolean
   ) => void;
   noSuggestionMessage?: React.ReactNode;
   trimCustomInput?: boolean;
@@ -112,7 +113,13 @@ export function SuggestionList({
             const optionValue = option?.props.value || value;
 
             requestAnimationFrame(() => {
-              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);
+              onOptionSelect &&
+                onOptionSelect(
+                  optionValue,
+                  label,
+                  isSuggestion,
+                  option?.props.obfuscate ?? false
+                );
             });
 
             break;
@@ -126,7 +133,13 @@ export function SuggestionList({
           }
 
           requestAnimationFrame(() => {
-            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);
+            onOptionSelect &&
+              onOptionSelect(
+                optionProps.value,
+                optionProps.label,
+                true,
+                optionProps.obfuscate ?? false
+              );
           });
           break;
         }
@@ -260,6 +273,12 @@ export function SuggestionList({
       const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];
       const optionValue = String(props.value).toLocaleLowerCase();
       const searchValue = value.toLocaleLowerCase();
+      const obfuscate = props.obfuscate ?? false;
+
+      // Obfuscated options can only be searched by label or keywords, not by value
+      if (obfuscate) {
+        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));
+      }
 
       return (
         label.includes(searchValue) ||
@@ -369,7 +388,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 +397,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 }}