@zyncat/ui 0.8.0

package/src/components/primitives/input/OtpField.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import './input.css';
+import { useRef } from 'react';
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  CSSProperties,
+  FocusEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface OtpFieldOwnProps {
+  /** Number of slots. @default 6 */
+  length?: number;
+  /** Controlled value (digit string). */
+  value?: string;
+  /** Called with the next value string. */
+  onChange?: (value: string) => void;
+  /** Insert a separator every N slots (e.g. 3 - "-------"). */
+  group?: number;
+  /** Error state (red slots + ring). */
+  error?: boolean;
+  /** Disable every slot. */
+  disabled?: boolean;
+  /** Compact slot sizing. Only `sm`; omit for default. */
+  size?: 'sm';
+  /** Extra class(es) appended to the root wrapper. */
+  className?: string;
+  /** Inline styles merged onto the root wrapper. */
+  style?: CSSProperties;
+}
+
+export interface OtpFieldProps extends OtpFieldOwnProps {
+  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root wrapper. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof OtpFieldOwnProps> & DataAttributes;
+}
+
+export function OtpField({
+  length = 6,
+  value = '',
+  onChange,
+  group,
+  error,
+  disabled,
+  size,
+  className = '',
+  style,
+  htmlProps,
+}: OtpFieldProps) {
+  const refs = useRef<(HTMLInputElement | null)[]>([]);
+  const chars = String(value).slice(0, length).padEnd(length).split('');
+  const emit = (s: string) => onChange && onChange(s.replace(/ +$/, '').slice(0, length));
+  const setAt = (i: number, ch: string) => {
+    const a = chars.slice();
+    a[i] = ch || ' ';
+    emit(a.join(''));
+  };
+  const caretEnd = (el: HTMLInputElement | null) => {
+    if (!el) return;
+    const n = el.value.length;
+    try {
+      el.setSelectionRange(n, n);
+    } catch {}
+  };
+  const go = (j: number) => {
+    const el = refs.current[j];
+    if (el) {
+      el.focus();
+      caretEnd(el);
+    }
+  };
+
+  const cls = cx('otp', size === 'sm' && 'otp--sm', error && 'is-error', className);
+
+  const cells: ReactNode[] = [];
+  for (let i = 0; i < length; i++) {
+    if (group && i > 0 && i % group === 0) cells.push(<span key={`sep${i}`} className="otp__sep" />);
+    cells.push(
+      <input
+        key={i}
+        ref={(el) => {
+          refs.current[i] = el;
+        }}
+        className="otp__slot"
+        inputMode="numeric"
+        autoComplete="one-time-code"
+        disabled={disabled}
+        aria-invalid={error || undefined}
+        value={chars[i].trim()}
+        data-filled={chars[i].trim() ? 'true' : 'false'}
+        onFocus={(e: FocusEvent<HTMLInputElement>) => caretEnd(e.target)}
+        onMouseDown={(e: MouseEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          go(i);
+        }}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          const ch = e.target.value.replace(/[^\d]/g, '').slice(-1);
+          setAt(i, ch);
+          if (ch && i < length - 1) go(i + 1);
+        }}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Backspace' && !chars[i].trim() && i > 0) {
+            e.preventDefault();
+            setAt(i - 1, '');
+            go(i - 1);
+          } else if (e.key === 'ArrowLeft' && i > 0) {
+            e.preventDefault();
+            go(i - 1);
+          } else if (e.key === 'ArrowRight' && i < length - 1) {
+            e.preventDefault();
+            go(i + 1);
+          }
+        }}
+        onPaste={(e: ClipboardEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          const d = (e.clipboardData.getData('text') || '').replace(/[^\d]/g, '');
+          emit(chars.slice(0, i).join('') + d);
+          refs.current[Math.min(i + d.length, length - 1)]?.focus();
+        }}
+      />,
+    );
+  }
+  return (
+    <div className={cls} style={style} {...htmlProps}>
+      {cells}
+    </div>
+  );
+}

package/src/components/primitives/input/TextField.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import './input.css';
+import { useRef } from 'react';
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import { Icon } from '../../internal/icon/Icon';
+import { IconSlot } from '../../internal/icon/IconSlot';
+import { FieldLabel, FieldMessage, resolveFieldMessage, type FieldMessagingProps } from './field-chrome';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+/** The native <input> props TextField surfaces at the top level (the rest live in `htmlProps`). */
+type TextFieldNative = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
+  | 'placeholder'
+  | 'value'
+  | 'onChange'
+  | 'disabled'
+  | 'readOnly'
+  | 'maxLength'
+  | 'minLength'
+  | 'hidden'
+  | 'pattern'
+  | 'onKeyDown'
+>;
+
+interface TextFieldOwnProps extends FieldMessagingProps, TextFieldNative {
+  /** Leading icon - your own icon node (sized to the control). Decorative. */
+  leadingIcon?: ReactNode;
+  /** Show a clear button when there's a value. */
+  clearable?: boolean;
+  /** Control height: sm 28 - md 36 (default) - lg 40. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Extra class(es) merged onto the field root. */
+  className?: string;
+  /** Inline styles merged onto the field root. */
+  style?: CSSProperties;
+  /** Available text like types */
+  type?: 'text' | 'search' | 'email' | 'url' | 'password';
+}
+
+export interface TextFieldProps extends TextFieldOwnProps {
+  /** Standard <input> attributes (name, autoComplete, maxLength, aria-*, ...) forwarded to the input. */
+  htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof TextFieldOwnProps | 'size'> & DataAttributes;
+}
+
+export function TextField({
+  label,
+  helper,
+  error,
+  warning,
+  success,
+  leadingIcon,
+  clearable,
+  size,
+  value,
+  htmlProps,
+  className,
+  style,
+  optional,
+  ...rest
+}: TextFieldProps) {
+  const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const showClear = clearable && value && !rest.disabled && !rest.readOnly;
+
+  function clear() {
+    const el = inputRef.current;
+    if (!el) return;
+    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+    setValue.call(el, '');
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+    el.focus();
+  }
+  const cls = cx(
+    'fld',
+    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',
+    leadingIcon && 'fld--has-lead',
+    showClear && 'fld--has-action',
+    state,
+    className,
+  );
+
+  return (
+    <div className={cls} style={style}>
+      <FieldLabel id={rest.id} label={label} required={rest.required} optional={optional} />
+      <div className="fld__control">
+        {leadingIcon && (
+          <span className="fld__icon fld__icon--lead">
+            <IconSlot size={size}>{leadingIcon}</IconSlot>
+          </span>
+        )}
+        <input
+          ref={inputRef}
+          className="fld__input"
+          value={value}
+          aria-invalid={error ? true : undefined}
+          {...rest}
+          {...htmlProps}
+        />
+        {showClear && (
+          <button type="button" className="fld__action" aria-label="Clear" onClick={clear}>
+            <Icon name="close" size={size} />
+          </button>
+        )}
+      </div>
+      <FieldMessage message={msg} icon={msgIcon} />
+    </div>
+  );
+}

package/src/components/primitives/input/field-chrome.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import './input.css';
+import type { ReactNode } from 'react';
+import { Icon, type IconName } from '../../internal/icon/Icon';
+import { Collapse } from '../collapse/Collapse';
+
+export interface FieldIdProps {
+  /** Field id, ties the label to the control. */
+  id?: string;
+}
+
+export interface FieldRequirementProps {
+  /** Mark the control required - reaches the native element and shows a danger `*` after the label. */
+  required?: boolean;
+  /** Show a muted "(optional)" after the label. */
+  optional?: boolean;
+}
+
+export interface FieldCoreMessagingProps {
+  /** Label text (sentence case). */
+  label?: ReactNode;
+  /** Neutral helper text - shown when there's no validation message. */
+  helper?: ReactNode;
+  /** Error message - sets the error state (border + icon + colour). Wins over warning/success/helper. */
+  error?: ReactNode;
+}
+
+export interface FieldMessagingProps extends FieldIdProps, FieldRequirementProps, FieldCoreMessagingProps {
+  /** Warning message - amber state. Loses to `error`; wins over `success`/`helper`. */
+  warning?: ReactNode;
+  /** Success message - green state. Loses to `error`/`warning`; wins over `helper`. */
+  success?: ReactNode;
+}
+
+export interface FieldLabelProps extends FieldIdProps, FieldRequirementProps {
+  /** Label text (sentence case). */
+  label?: ReactNode;
+}
+
+export function FieldLabel({ id, label, required, optional }: FieldLabelProps) {
+  if (!label) return null;
+  return (
+    <label className="fld__label" htmlFor={id}>
+      {label}
+      {required && (
+        <span className="fld__req" aria-hidden="true">
+          *
+        </span>
+      )}
+      {optional && <span className="fld__optional">(optional)</span>}
+    </label>
+  );
+}
+
+export interface FieldMessageProps {
+  message?: ReactNode;
+  icon?: IconName | null;
+}
+
+export function FieldMessage({ message, icon }: FieldMessageProps) {
+  return (
+    <Collapse open={!!message} className="fld__msg-wrap">
+      <div className="fld__msg">
+        {icon && <Icon name={icon} size="sm" weight="fill" />}
+        {message}
+      </div>
+    </Collapse>
+  );
+}
+
+export function resolveFieldMessage(
+  error: ReactNode,
+  warning: ReactNode,
+  success: ReactNode,
+  helper: ReactNode,
+): { state: string; msg: ReactNode; msgIcon: IconName | null } {
+  return {
+    state: error ? 'is-error' : warning ? 'is-warning' : success ? 'is-success' : '',
+    msg: error || warning || success || helper,
+    msgIcon: error ? 'warning-circle' : warning ? 'warning' : success ? 'check-circle' : null,
+  };
+}

package/src/components/primitives/input/input.css

@@ -0,0 +1,333 @@
+/* input.css - inputs: TextField - NumberField - OtpField. */
+
+/* No row-gap - the label and message each own their adjacent gap, so an absent message reserves zero. */
+.fld {
+  display: grid;
+}
+.fld__label {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+  color: var(--text-body);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  line-height: 1;
+  margin-bottom: var(--space-2);
+}
+.fld__req {
+  color: var(--danger);
+}
+.fld__optional {
+  color: var(--text-subtle);
+  font-weight: var(--weight-regular);
+}
+
+.fld__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.fld__input {
+  width: 100%;
+  height: var(--control-height);
+  padding: 0 var(--space-3);
+  font: var(--type-body);
+  color: var(--text-strong);
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-md);
+  transition: var(--transition-control);
+  appearance: none;
+  -webkit-appearance: none;
+}
+.fld__input::placeholder {
+  color: var(--text-disabled);
+}
+.fld__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+.fld__input:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.fld__input:disabled {
+  background: var(--bg-muted);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+.fld__input[readonly] {
+  background: var(--bg-subtle);
+  color: var(--text-body);
+}
+
+/* On message TEXT change (normalanderrorandwarning), JS re-triggers .fld__msg--enter to fade and rise - never a hard pop. */
+.fld__msg {
+  font: var(--type-caption);
+  color: var(--text-subtle);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: 1em;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.fld__msg i {
+  font-size: var(--size-body);
+  flex: none;
+}
+.fld__msg--enter {
+  animation: fld-msg-in var(--duration-base) var(--ease-entrance);
+}
+@keyframes fld-msg-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--space-px) * -1));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fld__msg--enter {
+    animation: none;
+  }
+}
+
+/* Gap is the message's padding-top (not margin) so it lives inside the Collapse and clips to zero when closed. */
+.fld .fld__msg {
+  padding-top: var(--space-2);
+}
+
+.fld--sm .fld__input {
+  height: var(--control-height-sm);
+  font-size: var(--size-caption);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+}
+.fld--lg .fld__input {
+  height: var(--control-height-lg);
+}
+
+.fld__icon {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-subtle);
+  pointer-events: none;
+  transition: var(--transition-control);
+}
+.fld__icon i {
+  font-size: var(--icon-md);
+}
+.fld__icon--lead {
+  left: var(--space-2);
+}
+.fld__icon--trail {
+  right: var(--space-2);
+}
+.fld__control:focus-within .fld__icon {
+  color: var(--text-muted);
+}
+.fld--has-lead .fld__input {
+  padding-left: calc(var(--space-2) + var(--icon-md) + var(--space-2));
+}
+.fld--has-trail .fld__input {
+  padding-right: calc(var(--space-3) + var(--icon-md) + var(--space-2));
+}
+
+.fld__action {
+  position: absolute;
+  right: var(--space-2);
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: none;
+  color: var(--text-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition-control);
+}
+.fld__action i {
+  font-size: var(--icon-sm);
+}
+.fld__action:hover {
+  color: var(--text-strong);
+  background: var(--bg-muted);
+}
+.fld__action:focus-visible {
+  outline: none;
+  color: var(--text-strong);
+  box-shadow: var(--ring-accent);
+}
+.fld--has-action .fld__input {
+  padding-right: calc(var(--space-2) + var(--control-height-sm) + var(--space-1));
+}
+
+/* Per-state hover rule is required - the generic .fld__input:hover would otherwise win on specificity. */
+.fld.is-error .fld__input {
+  border-color: var(--danger);
+}
+.fld.is-error .fld__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--danger-text);
+}
+.fld.is-error .fld__input:focus {
+  box-shadow: var(--ring-danger);
+}
+.fld.is-error .fld__msg,
+.fld.is-error .fld__icon {
+  color: var(--danger-text);
+}
+.fld.is-warning .fld__input {
+  border-color: var(--warning);
+}
+.fld.is-warning .fld__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--warning-text);
+}
+.fld.is-warning .fld__input:focus {
+  box-shadow: var(--ring-warning);
+}
+.fld.is-warning .fld__msg {
+  color: var(--warning-text);
+}
+.fld.is-success .fld__input {
+  border-color: var(--success);
+}
+.fld.is-success .fld__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--success-text);
+}
+.fld.is-success .fld__input:focus {
+  box-shadow: var(--ring-success);
+}
+.fld.is-success .fld__msg {
+  color: var(--success-text);
+}
+
+/* Stepper column width is the single source of truth - every clearance derives from it via calc(), so geometry can't drift. */
+.numf {
+  --numf-stepper-w: var(--space-6);
+}
+.numf .fld__input {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum';
+  padding-right: calc(var(--numf-stepper-w) + var(--space-2));
+}
+.numf--unit .fld__input {
+  padding-right: calc(var(--numf-stepper-w) + var(--numf-unit-w, var(--control-height-lg)) + var(--space-2));
+}
+.numf__unit {
+  position: absolute;
+  right: calc(var(--numf-stepper-w) + var(--space-2));
+  color: var(--text-subtle);
+  font: var(--type-caption);
+  pointer-events: none;
+}
+.numf__steppers {
+  position: absolute;
+  top: var(--border-hairline);
+  right: var(--border-hairline);
+  bottom: var(--border-hairline);
+  width: var(--numf-stepper-w);
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  border-left: var(--border-hairline) solid var(--border-default);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  overflow: hidden;
+}
+.numf__step {
+  border: 0;
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: var(--transition-control);
+  padding: 0;
+}
+.numf__step i {
+  font-size: var(--size-caption);
+}
+.numf__step:hover {
+  background: var(--neutral-wash);
+  color: var(--text-strong);
+}
+.numf__step:active {
+  background: var(--bg-muted);
+}
+.numf__step:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  background: var(--bg-surface);
+}
+.numf__step + .numf__step {
+  border-top: var(--border-hairline) solid var(--border-default);
+}
+.numf .fld__input:focus ~ .numf__steppers {
+  border-color: var(--accent);
+}
+
+/* Intentional exception: slot (44x52 - sm 38x44) and separator (10x2) are bespoke px - the token ramp yields no correctly-proportioned code cell; do not "fix" to a token. */
+.otp {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.otp__slot {
+  width: 44px;
+  height: 52px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: var(--size-title);
+  font-weight: var(--weight-medium);
+  color: var(--text-strong);
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-md);
+  transition: var(--transition-control);
+  caret-color: var(--accent);
+  appearance: none;
+}
+.otp__slot:hover:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+.otp__slot:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.otp__slot[data-filled='true'] {
+  border-color: var(--border-strong);
+}
+.otp__slot:disabled {
+  background: var(--bg-muted);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+.otp__sep {
+  width: 10px;
+  height: 2px;
+  background: var(--border-strong);
+  border-radius: var(--border-hairline);
+  flex: none;
+}
+.otp--sm .otp__slot {
+  width: 38px;
+  height: 44px;
+  font-size: var(--size-heading);
+}
+.otp.is-error .otp__slot {
+  border-color: var(--danger);
+}
+.otp.is-error .otp__slot:hover:not(:disabled):not(:focus) {
+  border-color: var(--danger-text);
+}
+.otp.is-error .otp__slot:focus {
+  box-shadow: var(--ring-danger);
+}