@dxos/react-ui 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -56,7 +56,7 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
         const local = frame.fileName
           ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber)
           : undefined;
-        const name = frame.functionName ?? '<anonymous>';
+        const functionName = frame.functionName ?? '<anonymous>';
         return (
           <div
             key={i}
@@ -75,14 +75,15 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
               />
               <div className='absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500' />
             </div>
+
             {local ? (
               <a href={local.href} className='truncate self-center'>
-                {name}
+                {functionName}
               </a>
             ) : (
-              <span className='text-subdued truncate self-center'>{name}</span>
+              <span className='text-subdued truncate self-center'>{functionName}</span>
             )}
-            <span className='text-xs text-subdued truncate self-center'>{local?.fileName ?? ''}</span>
+            <span className='text-xs text-subdued truncate self-center truncate'>{local?.fileName ?? ''}</span>
             <span className='text-xs text-subdued text-right self-center'>
               {local ? `${frame.lineNumber}:${frame.columnNumber}` : ''}
             </span>
@@ -103,10 +104,15 @@ const parseLocalFrame = (fileUrl: string, line?: number, col?: number): LocalFra
     if (!pathname.startsWith('/@fs/')) {
       return undefined;
     }
-    const localPath = pathname.slice(4); // /@fs/Users/... → /Users/...
+
+    const FILE_PREFIX = '/@fs';
+    const localPath = pathname.slice(FILE_PREFIX.length); // /@fs/Users/... → /Users/...
+    const PKG_PREFIX = '/packages/';
+    const i = localPath.indexOf(PKG_PREFIX);
+    const path = i === -1 ? localPath : localPath.substring(i + PKG_PREFIX.length);
     return {
       href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
-      fileName: pathname.split('/').pop() ?? localPath,
+      fileName: path,
     };
   } catch {
     return undefined;

package/src/components/Focus/Focus.theme.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type FocusStyleProps = {
+  border?: boolean;
+};
+
+/**
+ * Focus ring styles shared by Focus.Group and Focus.Item.
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
+ * (inset box-shadow alone is obscured by children with backgrounds).
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
+ */
+const ring: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'dx-ring-pseudo outline-hidden',
+    'focus:after:ring-focus-ring-subtle',
+    'data-[focus-state=active]:after:ring-focus-ring-subtle',
+    'data-[focus-state=error]:after:ring-rose-500',
+    border && 'border border-separator',
+    ...etc,
+  );
+
+export const focusTheme: Theme<FocusStyleProps> = {
+  group: ring,
+  item: ring,
+};

package/src/components/Focus/Focus.tsx

@@ -21,10 +21,10 @@ import React, {
   useState,
 } from 'react';
 
-import { composableProps, slottable } from '@dxos/ui-theme';
 import { type Axis } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 
 //
 // Context

package/src/components/Icon/Icon.theme.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { getSize, mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+export type IconStyleProps = {
+  size?: Size;
+};
+
+export type IconBlockStyleProps = {
+  compact?: boolean;
+  /** Constrain to a square (1:1) slot rather than the default rail-item width. */
+  square?: boolean;
+};
+
+/**
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
+ */
+const root: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
+  return mx(
+    'shrink-0 text-[var(--icons-color,currentColor)]',
+    size
+      ? getSize(size)
+      : '[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]',
+    etc,
+  );
+};
+
+/**
+ * Static slot sized to `--dx-rail-item` so a wrapped `Icon` lines up with an `IconButton iconOnly`.
+ */
+const block: ComponentFunction<IconBlockStyleProps> = ({ compact, square }, ...etc) =>
+  mx(
+    'grid place-items-center',
+    square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
+    compact ? '' : 'h-[var(--dx-rail-item)]',
+    ...etc,
+  );
+
+export const iconTheme: Theme<IconStyleProps & IconBlockStyleProps> = {
+  root,
+  block,
+};

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo, useMemo } from 'react';
 
 import { type Size } from '@dxos/ui-types';
 
@@ -13,18 +13,25 @@ import { type ThemedClassName } from '../../util';
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
+  synchronized?: boolean;
 };
 
 /**
  * The Icon's size can be set directly or inherited from the `--dx-icon-size` CSS variable.
  */
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const spinDelay = useMemo(() => (synchronized ? `${-(Date.now() % 1_000)}ms` : undefined), [synchronized]);
     const href = useIconHref(icon);
 
     return (
-      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
+      <svg
+        {...props}
+        style={{ ...style, animationDelay: spinDelay }}
+        className={tx('icon.root', { size }, classNames)}
+        ref={forwardedRef}
+      >
         <use href={href} />
       </svg>
     );

package/src/components/Icon/IconBlock.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { IconBlockStyleProps } from './Icon.theme';
+
+export type IconBlockProps = ThemedClassName<ComponentPropsWithRef<'div'> & PropsWithChildren<IconBlockStyleProps>>;
+
+/**
+ * Static layout slot sized to `--dx-rail-item` (the same square that an `IconButton iconOnly`
+ * occupies). Use whenever a decorative `<Icon>` needs to share a row, column, or grid track with
+ * interactive `IconButton`s without drifting by a pixel.
+ *
+ * Defaults `aria-hidden='true'` — the slot wraps decorative chrome by default. Pass
+ * `aria-hidden={false}` when the slot's contents convey meaning that isn't already labelled
+ * elsewhere in the row.
+ */
+export const IconBlock = forwardRef<HTMLDivElement, IconBlockProps>(
+  ({ classNames, children, compact, square, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div
+        aria-hidden='true'
+        {...props}
+        className={tx('icon.block', { compact, square }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+IconBlock.displayName = 'IconBlock';

package/src/components/Icon/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Icon';
+export * from './IconBlock';

package/src/components/Image/Image.stories.tsx

@@ -15,7 +15,7 @@ const seed = Math.random();
 random.seed(seed);
 
 const meta = {
-  title: 'ui/react-ui-mosaic/Image',
+  title: 'ui/react-ui-core/components/Image',
   component: Image,
   render: (args) => (
     <div className='absolute inset-0 flex justify-center items-center'>

package/src/components/Image/Image.tsx

@@ -175,7 +175,9 @@ const extractDominantColor = (
       const alpha = pixels[i + 3];
 
       // Skip transparent pixels.
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
 
       // Calculate saturation to weight vibrant colors more.
       const max = Math.max(red, green, blue);
@@ -215,21 +217,29 @@ const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold:
   for (let x = 0; x < sampleSize; x++) {
     // Top edge.
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Bottom edge.
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   for (let y = 1; y < sampleSize - 1; y++) {
     // Left edge.
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Right edge.
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   return edgeTransparentPixels / edgePixels > threshold;

package/src/components/Input/Input.stories.tsx

@@ -10,17 +10,23 @@ import { type MessageValence } from '@dxos/ui-types';
 import { withLayoutVariants, withTheme } from '../../testing';
 import {
   type CheckboxProps,
+  type DateInputProps,
+  type DateTimeInputProps,
   Input,
   type PinInputProps,
   type SwitchProps,
   type TextAreaProps,
   type TextInputProps,
+  type TimeProps,
 } from './Input';
 
 type VariantMap = {
   text: TextInputProps;
   pin: PinInputProps;
   textarea: TextAreaProps;
+  time: TimeProps;
+  date: DateInputProps;
+  datetime: DateTimeInputProps;
   checkbox: CheckboxProps;
   switch: SwitchProps;
 };
@@ -54,6 +60,9 @@ const DefaultStory = ({
       {kind === 'text' && <Input.TextInput {...props} />}
       {kind === 'pin' && <Input.PinInput {...props} />}
       {kind === 'textarea' && <Input.TextArea {...props} />}
+      {kind === 'time' && <Input.Time {...props} />}
+      {kind === 'date' && <Input.Date {...props} />}
+      {kind === 'datetime' && <Input.DateTime {...props} />}
       {kind === 'checkbox' && <Input.Checkbox {...props} />}
       {kind === 'switch' && <Input.Switch {...props} />}
 
@@ -76,34 +85,17 @@ export default meta;
 
 type Story = StoryObj<DefaultStoryProps & Variant>;
 
-export const DensityCoarse: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is an input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'coarse',
-  },
-};
-
-export const DensityFine: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is a density:fine input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'fine',
-  },
+export const Density: Story = {
+  render: () => (
+    <div className='flex flex-col gap-4'>
+      {(['lg', 'md', 'sm', 'xs'] as const).map((density) => (
+        <Input.Root key={density}>
+          <Input.Label>{`density="${density}"`}</Input.Label>
+          <Input.TextInput density={density} placeholder={`This is a density:${density} input`} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
 };
 
 export const Subdued: Story = {
@@ -186,10 +178,86 @@ export const PinInput: Story = {
     length: 6,
     description: 'Type in secret you received',
     pattern: '\\d*',
-    density: 'coarse',
+    density: 'lg',
   },
 };
 
+export const Time: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time',
+    defaultValue: '09:30',
+  },
+};
+
+export const TimeUncontrolled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (uncontrolled)',
+    defaultValue: '14:00',
+  },
+};
+
+export const TimeAmPm: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (12-hour, AM/PM)',
+    defaultValue: '14:00',
+    hourCycle: 12,
+  } as any,
+};
+
+export const TimeDisabled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (disabled)',
+    defaultValue: '12:00',
+    disabled: true,
+  },
+};
+
+export const Date: Story = {
+  args: {
+    kind: 'date',
+    label: 'Date',
+    defaultValue: '1990-05-12',
+  },
+};
+
+export const DateTime: Story = {
+  args: {
+    kind: 'datetime',
+    label: 'Date & time',
+    defaultValue: '2026-06-01T15:30',
+  },
+};
+
+export const DateWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.Date defaultValue='2026-06-01' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
+export const DateTimeWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date & time (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.DateTime defaultValue='2026-06-01T15:30' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
 export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
@@ -206,3 +274,38 @@ export const Switch: Story = {
     description: 'On or off',
   },
 };
+
+/**
+ * Native HTML input types. `Input.TextInput` accepts every standard
+ * `<input type="…">` value via its `type` prop; this story exercises the most
+ * commonly used ones so the rendering across themes/browsers can be
+ * inspected at a glance.
+ */
+const TEXT_INPUT_TYPES: { type: string; placeholder: string }[] = [
+  { type: 'text', placeholder: 'Plain text' },
+  { type: 'email', placeholder: 'name@example.com' },
+  { type: 'password', placeholder: '••••••••' },
+  { type: 'search', placeholder: 'Search…' },
+  { type: 'tel', placeholder: '+1 (555) 555-5555' },
+  { type: 'url', placeholder: 'https://example.com' },
+  { type: 'number', placeholder: '42' },
+  { type: 'date', placeholder: '' },
+  { type: 'time', placeholder: '' },
+  { type: 'datetime-local', placeholder: '' },
+  { type: 'month', placeholder: '' },
+  { type: 'week', placeholder: '' },
+  { type: 'color', placeholder: '' },
+];
+
+export const TextInputTypes: Story = {
+  render: () => (
+    <div className='flex flex-col gap-3 min-w-[24rem]'>
+      {TEXT_INPUT_TYPES.map(({ type, placeholder }) => (
+        <Input.Root key={type}>
+          <Input.Label>{`type="${type}"`}</Input.Label>
+          <Input.TextInput type={type} placeholder={placeholder} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
+};

package/src/components/Input/Input.theme.ts

@@ -0,0 +1,191 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { densityDimensions, staticDisabled } from '@dxos/ui-theme';
+import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '@dxos/ui-theme';
+import {
+  type ComponentFragment,
+  type ComponentFunction,
+  type Density,
+  type Elevation,
+  type MessageValence,
+  type Size,
+} from '@dxos/ui-types';
+
+import { inputTextLabel } from './constants';
+
+export type InputStyleProps = Partial<{
+  variant: 'default' | 'subdued' | 'static';
+  density: Density;
+  disabled: boolean;
+  elevation: Elevation;
+  focused: boolean;
+  validationValence: MessageValence;
+  size: Size;
+  checked: boolean;
+}>;
+
+export type InputMetaStyleProps = Partial<{
+  srOnly: boolean;
+  validationValence: MessageValence;
+}>;
+
+const textInputSurfaceFocus =
+  'transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator';
+
+const textInputSurfaceHover = 'hover:bg-focus-surface';
+
+const booleanInputSurface =
+  'shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-bg aria-[checked=mixed]:bg-accent-bg';
+
+const booleanInputSurfaceHover =
+  'hover:bg-un-accent-hover hover:aria-checked:bg-accent-bg-hover hover:aria-[checked=mixed]:bg-accent-bg-hover';
+
+// TODO(burdon): Replace with semantic tokens.
+const valence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return 'shadow-emerald-500/50 dark:shadow-emerald-600/50';
+    case 'info':
+      return 'shadow-cyan-500/50 dark:shadow-cyan-600/50';
+    case 'warning':
+      return 'shadow-amber-500/50 dark:shadow-amber-600/50';
+    case 'error':
+      return 'shadow-rose-500/50 dark:shadow-rose-600/50';
+  }
+};
+
+const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
+  'dx-focus-subdued',
+  densityDimensions(props.density),
+  props.disabled && staticDisabled,
+];
+
+const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-fg rounded-xs placeholder-placeholder',
+  textInputSurfaceFocus,
+  densityDimensions(props.density),
+  props.disabled ? staticDisabled : textInputSurfaceHover,
+];
+
+const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-fg rounded-xs placeholder-placeholder',
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && 'bg-attention-surface',
+  valence(props.validationValence),
+  props.disabled && staticDisabled,
+  props.focused && 'dx-focus-static',
+];
+
+const input: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  props.variant === 'subdued'
+    ? mx(...sharedSubduedInputStyles(props), ...etc)
+    : props.variant === 'static'
+      ? mx(...sharedStaticInputStyles(props), ...etc)
+      : mx(
+          ...sharedDefaultInputStyles(props),
+          !props.disabled && 'dx-focus-ring',
+          valence(props.validationValence),
+          ...etc,
+        );
+
+const textArea: ComponentFunction<InputStyleProps> = (props, ...etc) => input(props, ...etc);
+
+const checkbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
+
+const checkboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
+  mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
+
+const switchRoot: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
+  mx(
+    getHeight(size),
+    getWidth(snapSize(sizeValue(size) * 1.75, 9)),
+    booleanInputSurface,
+    !disabled && booleanInputSurfaceHover,
+    // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
+    'cursor-pointer shrink-0 rounded-full px-1 mx-1 relative',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const switchThumb: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx(
+    getSize(size === 'px' ? 'px' : ((size - 2) as Size)),
+    'block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]',
+    ...etc,
+  );
+
+const withSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'font-mono selection:bg-transparent mx-auto',
+    props.density === 'lg'
+      ? 'text-lg'
+      : props.density === 'sm'
+        ? 'text-sm'
+        : props.density === 'xs'
+          ? 'text-xs'
+          : 'text-base pointer-fine:text-sm',
+    props.disabled && 'cursor-not-allowed',
+    ...etc,
+  );
+
+const segment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'flex items-center justify-center font-mono',
+    props.density === 'lg'
+      ? 'size-12 rounded-xs'
+      : props.density === 'sm'
+        ? 'size-7 rounded-xs'
+        : props.density === 'xs'
+          ? 'size-6 rounded-xs'
+          : 'size-10 pointer-fine:size-8 rounded-xs',
+    'bg-input-surface text-base-fg transition-colors border border-separator',
+    'data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle',
+    'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle',
+    valence(props.validationValence),
+    props.disabled && staticDisabled,
+    ...etc,
+  );
+
+const label: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('block', inputTextLabel, props.srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('text-description', props.srOnly && 'sr-only', ...etc);
+
+const descriptionAndValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('leading-none my-1.5', props.srOnly && 'sr-only', ...etc);
+
+const validation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx(inputTextLabel, props.srOnly ? 'sr-only' : textValence(props.validationValence), ...etc);
+
+const triggerIcon: ComponentFunction<{}> = (_p, ...etc) =>
+  mx(
+    'shrink-0 inline-flex items-center justify-center size-7 rounded-xs',
+    'bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+export const inputTheme = {
+  input,
+  textArea,
+  inputWithSegments: withSegmentsInput,
+  segment,
+  checkbox,
+  checkboxIndicator,
+  label,
+  description,
+  switch: switchRoot,
+  switchThumb,
+  validation,
+  descriptionAndValidation,
+  triggerIcon,
+};