@dxos/react-ui 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

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

@@ -2,36 +2,38 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { activeSurface, baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
-
-import { withTheme } from '../../testing';
+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;
 };
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type BaseProps = Partial<{
+type DefaultStoryProps = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -41,7 +43,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
 
-const Wrapper = ({
+const DefaultStory = ({
   kind,
   label,
   description,
@@ -50,7 +52,7 @@ const Wrapper = ({
   validationValence,
   validationMessage,
   ...props
-}: BaseProps) => {
+}: DefaultStoryProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -58,82 +60,48 @@ const Wrapper = ({
       {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} />}
 
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
-        {validationMessage && (
-          <>
-            <Input.Validation>{validationMessage}</Input.Validation>{' '}
-          </>
-        )}
+        {validationMessage && <Input.Validation classNames='block'>{validationMessage}</Input.Validation>}
         <Input.Description>{description}</Input.Description>
       </Input.DescriptionAndValidation>
     </Input.Root>
   );
 };
 
-const DefaultStory = (props: BaseProps) => {
-  return (
-    <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4')}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx(activeSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<BaseProps> = {
-  title: 'ui/react-ui-core/Input',
-  component: Input.Root,
+const meta = {
+  title: 'ui/react-ui-core/components/Input',
+  component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayoutVariants()],
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<BaseProps & Variant>;
-
-export const Default: Story = {
-  args: {
-    kind: 'text',
-    label: 'Hello',
-    placeholder: 'This is an input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-  },
-};
+type Story = StoryObj<DefaultStoryProps & Variant>;
 
-export const DensityFine: Story = {
-  args: {
-    kind: 'text',
-    label: 'This is an Input with a density value of ‘fine’',
-    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 = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is a subdued input',
     disabled: false,
     description: undefined,
@@ -163,7 +131,7 @@ export const LabelVisuallyHidden: Story = {
   },
 };
 
-export const InputWithDescription: Story = {
+export const WithDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input',
@@ -172,7 +140,7 @@ export const InputWithDescription: Story = {
   },
 };
 
-export const InputWithErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described invalid input',
@@ -183,7 +151,7 @@ export const InputWithErrorAndDescription: Story = {
   },
 };
 
-export const InputWithValidationAndDescription: Story = {
+export const WithValidationAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input with validation message',
@@ -209,23 +177,135 @@ export const PinInput: Story = {
     label: 'This input is a PIN-style input',
     length: 6,
     description: 'Type in secret you received',
-    placeholder: '••••••',
+    pattern: '\\d*',
+    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',
     label: 'This is a checkbox',
-    description: 'It’s checked, indeterminate, or unchecked',
+    description: 'Checked, indeterminate, or unchecked',
     size: 5,
   },
 };
 
-export const Switch = {
+export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: 'It’s either off... or on.',
+    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,
+};