@ethlete/components 1.0.0-next.77 → 1.0.0-next.78

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.0-next.78
+
+### Patch Changes
+
+- Design: add a `textarea()` control mock to `@ethlete/components/design/form-field`, drawn like `input()`.
+
 ## 1.0.0-next.77
 
 ### Patch Changes

package/design/config.json

@@ -0,0 +1,19 @@
+{
+  "products": {
+    "sdk": {
+      "tokens": [
+        "foundations/colors"
+      ],
+      "presets": {
+        "phone": {
+          "width": 390,
+          "height": 844
+        },
+        "desktop": {
+          "width": 1440,
+          "height": 900
+        }
+      }
+    }
+  }
+}

package/design/form-field.ts

@@ -5,6 +5,8 @@ import suffixOverlap from '../src/lib/forms/form-field/form-field-suffix-overlap
 import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
 import hint from '../src/lib/forms/form-field/hint.component.css?inline';
 import inputBase from '../src/lib/forms/input/input.component.css?inline';
+import textareaBase from '../src/lib/forms/textarea/textarea.component.css?inline';
+import textareaAutosize from '../src/lib/forms/textarea/textarea-autosize-styles.component.css?inline';
 import iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
 
 /** The field state a control draws itself from. */
@@ -75,7 +77,16 @@ export type InputMockOptions = {
   textAlign?: 'start' | 'center' | 'end';
 };
 
-/** The stylesheets `formField()` and `input()` draw with: the real `et-form-field` CSS. */
+export type TextareaMockOptions = {
+  value?: string;
+  placeholder?: string;
+  rows?: number;
+  /** Grows with its content, from `minRows` (default `rows`). On by default, like the real textarea. */
+  autosize?: boolean;
+  minRows?: number;
+};
+
+/** The stylesheets `formField()`, `input()` and `textarea()` draw with: the real `et-form-field` CSS. */
 export const formFieldStyles = /* @__PURE__ */ [
   interactiveStyles,
   iconStyles,
@@ -85,6 +96,8 @@ export const formFieldStyles = /* @__PURE__ */ [
   label,
   hint,
   inputBase,
+  textareaBase,
+  textareaAutosize,
   `.et-design-panel-anchor { position: relative; }
 .et-design-panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 0.3rem); z-index: 1; }`,
 ].join('\n');
@@ -114,6 +127,32 @@ export const input = (options: InputMockOptions = {}): FormFieldControlMock => (
   },
 });
 
+/** Draws `<et-textarea>` as a control for `formField()`. */
+export const textarea = (options: TextareaMockOptions = {}): FormFieldControlMock => ({
+  controlType: 'textarea',
+  hasValue: !!options.value,
+  html: (state) => {
+    const rows = options.rows ?? 3;
+    const autosize = options.autosize ?? true;
+    const attributes = attributesOf([
+      'class="et-textarea-native"',
+      `rows="${rows}"`,
+      state.disabled && 'disabled',
+      state.readonly && 'readonly',
+      state.required && 'required',
+      options.placeholder && `placeholder="${options.placeholder}"`,
+      state.invalid && 'aria-invalid="true"',
+      state.describedBy && `aria-describedby="${state.describedBy}"`,
+      state.labelId && `aria-labelledby="${state.labelId}"`,
+      `data-resize="${autosize ? 'none' : 'vertical'}"`,
+      autosize && 'data-et-textarea-autosize=""',
+      autosize && `style="--et-textarea-min-rows: ${options.minRows ?? rows}"`,
+    ]);
+
+    return `<et-textarea class="et-color-interactive et-textarea"><textarea ${attributes}>${options.value ?? ''}</textarea></et-textarea>`;
+  },
+});
+
 /** Draws `<et-form-field>` with a control, its label, affixes and messages, as the component renders them. */
 export const formField = (options: FormFieldMockOptions) => {
   const control: FormFieldControlMock =

package/design/icon-set.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+
+const modules = /* @__PURE__ */ import.meta.glob<Record<string, unknown>>(
+  ['../src/lib/icon/headless/*-icon.ts', '../src/lib/icon/headless/*-icons.ts'],
+  { eager: true },
+);
+
+const isIconDefinition = (value: unknown): value is IconDefinition =>
+  !!value &&
+  typeof value === 'object' &&
+  typeof (value as IconDefinition).name === 'string' &&
+  typeof (value as IconDefinition).data === 'string';
+
+/** Every icon the SDK ships, read from the icon source files and sorted by name. */
+export const SDK_ICONS: readonly IconDefinition[] = /* @__PURE__ */ Object.values(modules)
+  .flatMap((module) => Object.values(module))
+  .filter(isIconDefinition)
+  .sort((a, b) => a.name.localeCompare(b.name));

package/design/icon.ts

@@ -0,0 +1,9 @@
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+
+/** Draws `<i etIcon>` as the icon directive renders it: the icon's classes around its trimmed SVG. */
+export const iconMarkup = (icon: IconDefinition, className?: string) => {
+  const base = `et-icon et-icon--${icon.name}`;
+  const classes = [className, base, icon.variant ? `${base}--${icon.variant}` : undefined].filter(Boolean).join(' ');
+
+  return `<i etIcon="${icon.name}" aria-hidden="true" class="${classes}">${icon.data.trim()}</i>`;
+};

package/design/sdk/components/button/button.ts

@@ -0,0 +1,39 @@
+import { button, buttonStyles, ButtonMockOptions } from '@ethlete/components/design/button';
+import { definePart, drawing, forceInteraction, interactionRows } from '@design-system';
+
+type ButtonInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = ButtonMockOptions & { interaction?: ButtonInteraction };
+
+const control = ({ interaction, ...options }: Props) => {
+  const markup = button(options).replace(/^<(button|a) /, '<$1 data-et-control="button" data-can-animate ');
+
+  return interaction ? forceInteraction(markup, interaction) : markup;
+};
+
+export const { states, grid } = interactionRows<
+  Props,
+  'filled' | 'outline' | 'tonal' | 'transparent' | 'pressed' | 'danger' | 'small' | 'disabled',
+  ButtonInteraction
+>(
+  {
+    filled: { label: 'Save', variant: 'filled' },
+    outline: { label: 'Cancel', variant: 'outline' },
+    tonal: { label: 'Filter', variant: 'tonal' },
+    transparent: { label: 'More', variant: 'transparent' },
+    pressed: { label: 'Grid', variant: 'outline', pressed: true },
+    danger: { label: 'Delete', variant: 'filled', color: 'danger' },
+    small: { label: 'Save', variant: 'filled', size: 'sm' },
+    disabled: { label: 'Save', variant: 'filled', disabled: true },
+  },
+  { interactions: ['hover', 'active', 'focus-visible'], force: (props, interaction) => ({ ...props, interaction }) },
+);
+
+export default definePart({
+  note: 'The SDK button, drawn by its mock from @ethlete/components/design.',
+  madeBy: ['claude-opus-5-5'],
+  states,
+  grid,
+  controls: { button: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true } },
+  render: (props: Props) => drawing({ body: control(props), styles: buttonStyles }),
+});

package/design/sdk/components/form-field/form-field.ts

@@ -0,0 +1,100 @@
+import {
+  formField,
+  formFieldStyles,
+  input,
+  textarea,
+  type FormFieldMockOptions,
+} from '@ethlete/components/design/form-field';
+import { definePart, drawing, interactionRows } from '@design-system';
+
+type FieldInteraction = 'hover' | 'focus-visible';
+
+type FieldControl = 'input' | 'textarea';
+
+type Axes = Pick<FormFieldMockOptions, 'appearance' | 'fill' | 'labelMode' | 'size'>;
+
+type Props = Axes & {
+  control?: FieldControl;
+  value?: string;
+  hint?: string;
+  error?: string;
+  focused?: boolean;
+  disabled?: boolean;
+  interaction?: FieldInteraction;
+};
+
+const multiLine = 'Ada Lovelace\nAnalytical Engine notes';
+
+const axisRow: Props = { value: 'Ada Lovelace' };
+
+const AXES = {
+  appearance: ['box', 'underline'],
+  fill: ['transparent', 'filled'],
+  labelMode: ['static', 'inline', 'floating-inside', 'floating-outside'],
+  size: ['sm', 'md', 'lg'],
+} as const satisfies { [K in keyof Axes]-?: readonly NonNullable<Axes[K]>[] };
+
+const axisRows = Object.fromEntries(
+  Object.entries(AXES).flatMap(([axis, values]) =>
+    values.map((value) => [`${axis}-${value}`, { ...axisRow, [axis]: value }]),
+  ),
+) as Record<string, Props>;
+
+const { states, grid } = interactionRows(
+  {
+    empty: { hint: 'Shown on your profile' },
+    filled: { value: 'Ada Lovelace' },
+    error: { error: 'This field is required' },
+    'textarea-empty': { control: 'textarea', hint: 'Shown on your profile' },
+    'textarea-filled': { control: 'textarea', value: multiLine },
+    'textarea-error': { control: 'textarea', error: 'This field is required' },
+    ...axisRows,
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'focus-visible'],
+    force: (props: Props, interaction: FieldInteraction): Props => ({ ...props, interaction }),
+  },
+);
+
+const markControl = (markup: string, control: FieldControl, interaction: FieldInteraction | undefined) => {
+  const frame = ['data-et-control-part', interaction && `data-et-force="${interaction}"`].filter(Boolean);
+  const native = control === 'input' ? '<input class="et-input-native"' : '<textarea class="et-textarea-native"';
+
+  return markup
+    .replace('<et-form-field ', `<et-form-field data-et-control="${control}" `)
+    .replace('<div class="et-form-field-control-frame"', `<div class="et-form-field-control-frame" ${frame.join(' ')}`)
+    .replace(native, native.replace(' class=', ' data-et-control-part class='));
+};
+
+export default definePart<Props>({
+  note: 'The SDK form field with a text input and a textarea, drawn by its mocks from @ethlete/components/design.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...states,
+    focused: { value: 'Ada', focused: true },
+    disabled: { value: 'Ada Lovelace', disabled: true },
+    'textarea-focused': { control: 'textarea', value: 'Ada', focused: true },
+    'textarea-disabled': { control: 'textarea', value: multiLine, disabled: true },
+  },
+  grid,
+  widths: [320],
+  controls: {
+    input: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
+    textarea: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ control = 'input', value, interaction, ...field }) =>
+    drawing({
+      body: markControl(
+        formField({
+          id: 'name',
+          label: 'Name',
+          errorColor: 'danger-on-light',
+          control: control === 'input' ? input({ value }) : textarea({ value }),
+          ...field,
+        }),
+        control,
+        interaction,
+      ),
+      styles: formFieldStyles,
+    }),
+});

package/design/sdk/components/select/select.css

@@ -0,0 +1,5 @@
+@layer components {
+  et-form-field:where(:not([data-readonly]):not([data-disabled])) .et-form-field-control-frame:active {
+    border-color: var(--et-surface-interaction-active-solid, currentColor);
+  }
+}

package/design/sdk/components/select/select.ts

@@ -0,0 +1,16 @@
+import { selectStyles } from '@ethlete/components/design/select';
+import { definePart, drawing } from '@design-system';
+import styles from './select.css?inline';
+import { grid, moreStates, selectBody, SelectProps, states } from './shared/select-part';
+
+export default definePart<SelectProps>({
+  note: 'The SDK select inside a form field, drawn by its mock from @ethlete/components/design.',
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
+  states: { ...states, ...moreStates },
+  grid,
+  widths: [320],
+  controls: {
+    select: { kind: 'select', input: ['pointer', 'keyboard'], disabled: true, surfaces: { open: 'open' } },
+  },
+  render: (props) => drawing({ body: selectBody(props), styles: [selectStyles, styles].join('\n') }),
+});

package/design/sdk/components/select/shared/select-part.ts

@@ -0,0 +1,60 @@
+import { formField } from '@ethlete/components/design/form-field';
+import { select } from '@ethlete/components/design/select';
+import { interactionRows } from '@design-system';
+
+type FieldInteraction = 'hover' | 'active' | 'focus-visible';
+
+export type SelectProps = {
+  value?: string;
+  open?: boolean;
+  active?: string;
+  pointerActive?: boolean;
+  disabled?: boolean;
+  interaction?: FieldInteraction;
+};
+
+const OPTIONS = [
+  { value: 'drafts', label: 'Drafts' },
+  { value: 'review', label: 'In review' },
+  { value: 'merged', label: 'Merged' },
+];
+
+const markControl = (markup: string, { interaction, pointerActive }: SelectProps) => {
+  const frame = ['data-et-control-part', interaction && `data-et-force="${interaction}"`].filter(Boolean);
+  const marked = markup
+    .replace('<et-form-field ', '<et-form-field data-et-control="select" ')
+    .replace('<div class="et-form-field-control-frame"', `<div class="et-form-field-control-frame" ${frame.join(' ')}`)
+    .replace('class="et-select-trigger"', 'data-et-control-part class="et-select-trigger"')
+    .replace('<et-select-panel ', '<et-select-panel data-et-surface="select.open" ');
+
+  return pointerActive
+    ? marked.replace('data-active-source="keyboard"', 'data-active-source="pointer" data-et-force="hover"')
+    : marked;
+};
+
+export const { states, grid } = interactionRows<SelectProps, 'placeholder' | 'selected', FieldInteraction>(
+  {
+    placeholder: {},
+    selected: { value: 'review' },
+  },
+  { interactions: ['hover', 'active', 'focus-visible'], force: (props, interaction) => ({ ...props, interaction }) },
+);
+
+export const moreStates = {
+  disabled: { value: 'review', disabled: true },
+  open: { value: 'review', open: true, active: 'merged' },
+  'open-option-hover': { value: 'review', open: true, active: 'drafts', pointerActive: true },
+} satisfies Record<string, SelectProps>;
+
+export const selectBody = (props: SelectProps) =>
+  markControl(
+    formField({
+      id: 'status',
+      label: 'Status',
+      errorColor: 'danger',
+      open: props.open,
+      disabled: props.disabled,
+      control: select({ options: OPTIONS, value: props.value, active: props.active, placeholder: 'Pick a status' }),
+    }),
+    props,
+  );