@tcn/ui 0.10.0 → 0.11.0

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

@@ -34,15 +34,12 @@ export const VField = React.forwardRef(function VField(
 ) {
   const [finalId] = useState(() => id || `v-field-${idIndex++}`);
   const hasError = errorMessage ? true : false;
-  const labelId = `${finalId}-label`;
-  const descriptionId = `${finalId}-description`;
   const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
+
   return (
     <VStack
       ref={ref}
       as="div"
-      aria-labelledby={labelId}
-      aria-describedby={descriptionId}
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}

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

@@ -28,6 +28,7 @@ export default {
 
 export function Baseline() {
   const [multiselectValues, setMultiselectValues] = useState<string[]>([]);
+  const [phoneNumberValue, setPhoneNumberValue] = useState<string | undefined>(undefined);
   const [freeformMultiselectValues, setFreeformMultiselectValues] = useState<string[]>(
     []
   );
@@ -47,7 +48,7 @@ export function Baseline() {
       </HField>
       <Divider />
       <HField label="Phone Number" id="field-4">
-        <PhoneNumberInput />
+        <PhoneNumberInput value={phoneNumberValue} onChange={setPhoneNumberValue} />
       </HField>
       <Divider />
       <HField label="Unit" id="field-5">

package/src/inputs/__docs__/inputs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as InputStories from './inputs.stories';
+import { Showcase } from '../../actions/__docs__/components/showcase';
+import { Gallery } from '../../actions/__docs__/components/gallery';
+
+<Meta title="Catalog/Inputs" of={InputStories} />
+
+# Inputs
+
+Form controls and data entry components for user input.
+
+- [Inputs](#inputs)
+  - [Text](#text)
+    - [Standard](#standard)
+    - [Specialized](#specialized)
+  - [Boolean](#boolean)
+  - [Date / Time](#date--time)
+  - [Selection](#selection)
+    - [Single / Constrained](#single--constrained)
+    - [Multiple](#multiple)
+
+## Text
+
+Free text entry and structured text input.
+
+### Standard
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Input" of={InputStories.InputBaseline} minWidth="240px" />
+  <Showcase title="Textarea" of={InputStories.TextareaBaseline} minWidth="280px" />
+  <Showcase title="Mask Input" of={InputStories.MaskInputBaseline} minWidth="200px" />
+</Gallery>
+
+### Specialized
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Phone Number Input" of={InputStories.PhoneNumberInputBaseline} minWidth="200px" />
+  <Showcase title="Color Input" of={InputStories.ColorInputBaseline} minWidth="200px" />
+  <Showcase title="Unit Input" of={InputStories.UnitInputBaseline} minWidth="200px" />
+  <Showcase title="Slider" of={InputStories.SliderBaseline} minWidth="280px" />
+</Gallery>
+
+## Boolean
+
+Toggle controls for on/off or true/false values.
+
+<Gallery minColumnWidth="120px">
+  <Showcase title="Checkbox" of={InputStories.CheckboxBaseline} minWidth="120px" />
+  <Showcase title="Switch" of={InputStories.SwitchBaseline} minWidth="100px" />
+</Gallery>
+
+## Date / Time
+
+Date and time selection.
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Date Picker" of={InputStories.DatePickerBaseline} minWidth="280px" />
+</Gallery>
+
+## Selection
+
+Components for choosing one or more values from options.
+
+### Single / Constrained
+
+Pick one value from a list, range, or specialized picker.
+
+<Gallery minColumnWidth="320px">
+  <Showcase title="Select" of={InputStories.SelectBaseline} minWidth="320px" />
+  <Showcase title="Radio" of={InputStories.RadioBaseline} minWidth="320px" />
+  <Showcase title="ComboBox" of={InputStories.ComboBoxBaseline} minWidth="320px" />
+</Gallery>
+
+### Multiple
+
+Pick multiple values from a list.
+
+<Gallery minColumnWidth="220px">
+  <Showcase title="Multiselect" of={InputStories.MultiselectBaseline} minWidth="220px" />
+  <Showcase title="Multi ComboBox" of={InputStories.MultiComboBoxBaseline} minWidth="220px" />
+</Gallery>

package/src/inputs/__docs__/inputs.stories.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from '../input/input.js';
+import { Checkbox } from '../checkbox/checkbox.js';
+import { Textarea } from '../textarea/textarea.js';
+import { Select } from '../select/select.js';
+import { Option } from '../options/option.js';
+import { Switch } from '../switch/switch.js';
+import { Slider } from '../slider/slider.js';
+import { Radio } from '../radio/radio.js';
+import { DatePicker } from '../date_picker/date_picker.js';
+import { ColorInput } from '../color_input/color_input.js';
+import { ComboBox } from '../combo_box/combo_box.js';
+import { Multiselect } from '../multiselect/multiselect.js';
+import { MaskInput } from '../mask_input/mask_input.js';
+import { PhoneNumberInput } from '../phone_number_input/phone_number_input.js';
+import { UnitInput } from '../unit_input/unit_input.js';
+import { MultiComboBox } from '../multi_combo_box/multi_combo_box.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Footnote, Headline } from '../../typography/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+/**
+ * Baseline stories for the inputs catalog. Used by inputs.mdx.
+ */
+const meta: Meta<typeof Input> = {
+  title: 'Catalog/Inputs',
+  component: Input,
+  parameters: {
+    docs: {
+      story: { exclude: ['style'] },
+    },
+  },
+  tags: ['!autodocs', '!dev'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const InputBaseline: Story = {
+  render: function InputBaseline() {
+    const [value, setValue] = useState('Hello world');
+    return <Input id="input-baseline" value={value} onChange={setValue} />;
+  },
+};
+
+export const CheckboxBaseline: Story = {
+  render: function CheckboxBaseline() {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox id="checkbox-baseline" checked={checked} onChange={setChecked} />;
+  },
+};
+
+export const TextareaBaseline: Story = {
+  render: function TextareaBaseline() {
+    const [value, setValue] = useState('');
+    return <Textarea id="textarea-baseline" value={value} onChange={setValue} />;
+  },
+};
+
+export const SelectBaseline: Story = {
+  render: function SelectBaseline() {
+    const [value, setValue] = useState('');
+    return (
+      <Select id="select-baseline" value={value} onChange={setValue} width="200px">
+        <Option value="apple" label="Apple" keywords={['fruit']}>
+          Apple
+        </Option>
+        <Option value="banana" label="Banana" keywords={['fruit']}>
+          Banana
+        </Option>
+        <Option value="cherry" label="Cherry" keywords={['fruit']}>
+          Cherry
+        </Option>
+      </Select>
+    );
+  },
+};
+
+export const SwitchBaseline: Story = {
+  render: function SwitchBaseline() {
+    const [checked, setChecked] = useState(false);
+    return <Switch id="switch-baseline" checked={checked} onChange={setChecked} />;
+  },
+};
+
+export const SliderBaseline: Story = {
+  render: function SliderBaseline() {
+    const [value, setValue] = useState('50');
+    return <Slider id="slider-baseline" value={value} onChange={setValue} />;
+  },
+};
+
+export const RadioBaseline: Story = {
+  render: function RadioBaseline() {
+    return (
+      <HStack height="auto" gap="8px">
+        <Radio name="demo" id="radio-baseline-1" value="a" label="Option A" />
+        <Radio name="demo" id="radio-baseline-2" value="b" label="Option B" />
+        <Radio name="demo" id="radio-baseline-3" value="c" label="Option C" />
+      </HStack>
+    );
+  },
+};
+
+export const DatePickerBaseline: Story = {
+  render: function DatePickerBaseline() {
+    return <DatePicker value={new Date()} showTime />;
+  },
+};
+
+export const ColorInputBaseline: Story = {
+  render: function ColorInputBaseline() {
+    const [value, setValue] = useState('#3b82f6');
+    return <ColorInput id="color-input-baseline" value={value} onChange={setValue} />;
+  },
+};
+
+export const ComboBoxBaseline: Story = {
+  render: function ComboBoxBaseline() {
+    const [value, setValue] = useState('');
+    return (
+      <ComboBox
+        id="combo-box-baseline"
+        value={value}
+        onChange={setValue}
+        onOptionSelect={setValue}
+        noOptionMatchedMessage="Press Enter for custom"
+        width="200px"
+      >
+        <Option value="John" label="John" keywords={['john']}>
+          John Doe
+        </Option>
+        <Option value="Jane" label="Jane" keywords={['jane']}>
+          Jane Smith
+        </Option>
+        <Option value="Bob" label="Bob" keywords={['bob']}>
+          Bob Wilson
+        </Option>
+      </ComboBox>
+    );
+  },
+};
+
+export const MultiselectBaseline: Story = {
+  render: function MultiselectBaseline() {
+    const [values, setValues] = useState<string[]>([]);
+    return (
+      <Multiselect
+        id="multiselect-baseline"
+        value={values}
+        onChange={setValues}
+        width="200px"
+      >
+        <Option value="1" label="First">
+          First
+        </Option>
+        <Option value="2" label="Second">
+          Second
+        </Option>
+        <Option value="3" label="Third">
+          Third
+        </Option>
+      </Multiselect>
+    );
+  },
+};
+
+export const MaskInputBaseline: Story = {
+  render: function MaskInputBaseline() {
+    const [value, setValue] = useState('');
+    return (
+      <MaskInput
+        id="mask-input-baseline"
+        value={value}
+        onChange={setValue}
+        mask={{ mask: '99/99/9999', placeholder: 'mm/dd/yyyy' }}
+      />
+    );
+  },
+};
+
+export const PhoneNumberInputBaseline: Story = {
+  render: function PhoneNumberInputBaseline() {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <PhoneNumberInput
+        id="phone-number-input-baseline"
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+
+export const UnitInputBaseline: Story = {
+  render: function UnitInputBaseline() {
+    const [unit, setUnit] = useState({ value: 100, unit: 'px' });
+    return (
+      <UnitInput
+        id="unit-input-baseline"
+        value={unit.value}
+        unit={unit.unit}
+        onChange={(v, u) => setUnit({ value: v ?? 0, unit: u })}
+        width="120px"
+      >
+        <Option value="px" label="px" keywords={['pixel']}>
+          <HStack gap="8px" padding="4px" height="auto">
+            <ZStack minWidth="30px" width="auto">
+              <Headline>px</Headline>
+            </ZStack>
+            <VStack width="200px" hAlign="start" height="auto">
+              <Headline>Pixel</Headline>
+              <Footnote>1/96th of an inch</Footnote>
+            </VStack>
+          </HStack>
+        </Option>
+        <Option value="em" label="em" keywords={['em']}>
+          <HStack gap="8px" padding="4px" height="auto">
+            <ZStack minWidth="30px" width="auto">
+              <Headline>em</Headline>
+            </ZStack>
+            <VStack width="200px" hAlign="start" height="auto">
+              <Headline>Em</Headline>
+              <Footnote>Relative to font size</Footnote>
+            </VStack>
+          </HStack>
+        </Option>
+        <Option value="rem" label="rem" keywords={['rem']}>
+          <HStack gap="8px" padding="4px" height="auto">
+            <ZStack minWidth="30px" width="auto">
+              <Headline>rem</Headline>
+            </ZStack>
+            <VStack width="200px" hAlign="start" height="auto">
+              <Headline>Root Em</Headline>
+              <Footnote>Relative to root font</Footnote>
+            </VStack>
+          </HStack>
+        </Option>
+      </UnitInput>
+    );
+  },
+};
+
+export const MultiComboBoxBaseline: Story = {
+  render: function MultiComboBoxBaseline() {
+    const [values, setValues] = useState<string[]>([]);
+    return (
+      <MultiComboBox
+        id="multi-combo-box-baseline"
+        value={values}
+        onChange={setValues}
+        width="200px"
+      >
+        <Option value="1" label="First">
+          First
+        </Option>
+        <Option value="2" label="Second">
+          Second
+        </Option>
+        <Option value="3" label="Third">
+          Third
+        </Option>
+      </MultiComboBox>
+    );
+  },
+};

package/src/inputs/color_input/color_input.tsx

@@ -1,7 +1,6 @@
 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 { clsx } from 'clsx';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { HTMLAttributes } from 'react';
@@ -12,6 +11,7 @@ import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
 import { Popper } from '../../overlay/popper/legacy/popper.js';
+import { InputGroup } from '../input_group/input_group.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
@@ -77,7 +77,7 @@ export function ColorInput({
 
   return (
     <>
-      <HStack
+      <InputGroup
         height="auto"
         width={width}
         minWidth={minWidth}
@@ -85,20 +85,20 @@ export function ColorInput({
         className="tcn-color-input-wrapper"
         {...props}
       >
-        <ZStack width="flex">
-          <Input
-            disabled={disabled}
-            value={value}
-            style={{
-              borderEndEndRadius: 0,
-              borderStartEndRadius: 0,
-              textAlign: 'start',
-              paddingInlineEnd: '8px',
-            }}
-            className="tcn-color-input"
-            onChange={onChange}
-          />
-        </ZStack>
+        <Input
+          width="flex"
+          disabled={disabled}
+          value={value}
+          style={{
+            borderEndEndRadius: 0,
+            borderStartEndRadius: 0,
+            textAlign: 'start',
+            paddingInlineEnd: '8px',
+          }}
+          className="tcn-color-input"
+          onChange={onChange}
+        />
+
         <Button
           disabled={disabled}
           hierarchy={hierarchy}
@@ -133,7 +133,7 @@ export function ColorInput({
           </HStack>
           <Spacer width="4px" />
         </Button>
-      </HStack>
+      </InputGroup>
       <Popper
         anchorElement={anchorElement}
         onClose={closePicker}

package/src/inputs/combo_box/combo_box.tsx

@@ -29,6 +29,7 @@ export const ComboBox = React.forwardRef(function ComboBox(
   ref: React.Ref<HTMLInputElement>
 ) {
   const isAlreadyFocusedRef = useRef(false);
+  const [searchValue, setSearchValue] = useState(value);
   const valueRef = useRef(value);
   const isClosingRef = useRef(false);
   const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);
@@ -42,6 +43,7 @@ export const ComboBox = React.forwardRef(function ComboBox(
 
   function closeSuggestions() {
     isClosingRef.current = false;
+    setSearchValue('');
     setIsSuggestionsOpen(false);
   }
 
@@ -91,6 +93,8 @@ export const ComboBox = React.forwardRef(function ComboBox(
   function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
     const key = event.key;
 
+    setSearchValue(event.currentTarget.value);
+
     if (key === 'Enter') {
       if (isSuggestionsOpen) {
         closeSuggestions();
@@ -135,19 +139,19 @@ export const ComboBox = React.forwardRef(function ComboBox(
         onMouseDown={handlMouseDown}
         onMouseUp={handleMouseUp}
       />
-      {isSuggestionsOpen && (
-        <SuggestionList
-          anchorElement={anchorElement}
-          onClose={handleClose}
-          value={value}
-          trimCustomInput={trimCustomInput}
-          onOptionSelect={handleSelection}
-          noSuggestionMessage={noOptionMatchedMessage}
-          haveValueAsOption={true}
-        >
-          {children}
-        </SuggestionList>
-      )}
+      <SuggestionList
+        open={isSuggestionsOpen}
+        anchorElement={anchorElement}
+        onClose={handleClose}
+        value={value}
+        initialSearchValue={searchValue}
+        trimCustomInput={trimCustomInput}
+        onOptionSelect={handleSelection}
+        noSuggestionMessage={noOptionMatchedMessage}
+        haveValueAsOption={true}
+      >
+        {children}
+      </SuggestionList>
     </>
   );
 });

package/src/inputs/index.ts

@@ -54,3 +54,5 @@ export * from './switch/switch.js';
 export * from './textarea/textarea.js';
 
 export * from './unit_input/unit_input.js';
+
+export * from './input_group/input_group.js';

package/src/inputs/input/input.tsx

@@ -22,7 +22,7 @@ export const Input = React.forwardRef(function Input(
 ) {
   return (
     <input
-      className={clsx(styles.input, className, 'tcn-input')}
+      className={clsx(styles.input, className, 'tcn-input', 'tcn-control')}
       type={type}
       ref={ref}
       data-is-disabled={props.disabled || false}

package/src/inputs/input_group/input_group.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+export type InputGroupProps = HStackProps;
+
+export const InputGroup = React.forwardRef<HTMLElement, InputGroupProps>(
+  function InputGroup(
+    { children, as = 'div', className, ...props }: InputGroupProps,
+    ref
+  ) {
+    const clonedChildren = React.Children.map(children, child =>
+      React.isValidElement(child)
+        ? React.cloneElement(child, {
+            ...child.props,
+            className: clsx(child.props.className, 'tcn-input-group-slot'),
+          })
+        : child
+    );
+    return (
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-input-group')} {...props}>
+        {clonedChildren}
+      </HStack>
+    );
+  }
+);