@tcn/ui 0.9.0 → 0.11.0

package/dist/utils/dnd/hooks/use_drag_container.js

@@ -1,44 +1,47 @@
-import { useState as s, useRef as b, useCallback as o } from "react";
-import { useDraggable as k } from "./use_draggable.js";
-function m(g) {
-  const [u, a] = s([]), n = b(g.initialPosition ?? { x: 0, y: 0 }), [i, c] = s(n.current), [f, l] = s(!1);
-  k({
-    handles: u,
+import { useState as s, useRef as y, useCallback as o } from "react";
+import { useDraggable as D } from "./use_draggable.js";
+function C(u) {
+  const [l, a] = s([]), n = y(u.initialPosition ?? { x: 0, y: 0 }), [g, i] = s(n.current), [f, c] = s(!1);
+  D({
+    handles: l,
     startDragCallback: () => {
-      l(!0);
+      c(!0);
     },
     dragCallback: (t, e) => {
-      c({
+      i({
         x: n.current.x + t,
         y: n.current.y + e
       });
     },
-    endDragCallback: () => {
-      l(!1), n.current = i;
+    endDragCallback: (t, e) => {
+      n.current = {
+        x: n.current.x + t,
+        y: n.current.y + e
+      }, c(!1);
     }
   });
-  const d = o(
+  const x = o(
     (t) => {
-      c((e) => {
+      i((e) => {
         const r = typeof t == "function" ? t(e) : t;
         return n.current = r, r;
       });
     },
     []
-  ), p = o((t) => {
+  ), d = o((t) => {
     a((e) => [...e, t]);
-  }, []), D = o((t) => {
+  }, []), p = o((t) => {
     a((e) => e.filter((r) => r !== t));
   }, []);
   return {
-    registerHandle: p,
-    unregisterHandle: D,
-    position: i,
+    registerHandle: d,
+    unregisterHandle: p,
+    position: g,
     isDragging: f,
-    setPosition: d
+    setPosition: x
   };
 }
 export {
-  m as useMakeDragContainer
+  C as useMakeDragContainer
 };
 //# sourceMappingURL=use_drag_container.js.map

package/dist/utils/dnd/hooks/use_drag_container.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from './use_draggable.js';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: () => {\n      setIsDragging(false);\n      positionRef.current = position;\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,MAAM;AACrB,MAAAH,EAAc,EAAK,GACnBL,EAAY,UAAUE;AAAA,IACxB;AAAA,EAAA,CACD;AAED,QAAMO,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\nimport { useDraggable } from './use_draggable.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  /**\n   *  The value that triggers re-renders. It’s updated in dragCallback so the UI\n   *  moves while dragging, and it’s what the hook returns so the consumer can\n   *  render the element at that position\n   *  (e.g. style={{ left: position.x, top: position.y }}).\n   */\n  const [position, setPosition] = useState(positionRef.current);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: (deltaX, deltaY) => {\n      positionRef.current = {\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      };\n      setIsDragging(false);\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GAOxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GAEtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,CAACD,GAAQC,MAAW;AACnC,MAAAR,EAAY,UAAU;AAAA,QACpB,GAAGA,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,GAE7BH,EAAc,EAAK;AAAA,IACrB;AAAA,EAAA,CACD;AAED,QAAMI,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -140,8 +140,10 @@
   "dependencies": {
     "@fontsource/lato": "^5.2.7",
     "clsx": "^2.1.1",
+    "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.2.1",
+    "react-phone-number-input": "^3.4.16",
+    "@tcn/icons": "2.3.0",
     "@tcn/state": "1.2.0"
   },
   "scripts": {

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

@@ -33,8 +33,6 @@ export const HField = React.forwardRef(function HField(
   ref: React.Ref<HTMLDivElement>
 ) {
   const [finalId] = useState(() => id || `h-field-${idIndex++}`);
-  const labelId = `${finalId}-label`;
-  const descriptionId = `${finalId}-description`;
   const hasError = errorMessage ? true : false;
   const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
 
@@ -42,8 +40,6 @@ export const HField = React.forwardRef(function HField(
     <HStack
       ref={ref}
       as="div"
-      aria-labelledby={labelId}
-      aria-describedby={descriptionId}
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}

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

@@ -94,6 +94,14 @@ export function Baseline() {
       >
         <Input defaultValue="Disabled value" />
       </VField>
+      <Divider horizontal />
+      <VField
+        label="Aria enabled"
+        description="This field demonstrates the use of aria-labelledby and aria-describedby."
+        id="field-8"
+      >
+        <Input aria-labelledby="field-8-label" aria-describedby="field-8-description" />
+      </VField>
     </FieldSet>
   );
 }

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}