aplance-ui 1.0.1

package/registry/components/ui/input-fields/otp-input/otp-input.tsx

@@ -0,0 +1,291 @@
+import {
+  type ChangeEvent,
+  type ClipboardEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  type Ref,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import clsx from "clsx";
+import sCommon from "../common/input-field-common.module.css";
+import sButton from "../../button/button.module.css";
+import s from "./otp-input.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import type { BaseInputFieldProps } from "../common/types";
+
+type FormChangeEvent = { target: { name?: string; value: string } };
+
+export type OTPInputProps = Omit<
+  BaseInputFieldProps,
+  "iconStart" | "iconEnd"
+> & {
+  length?: number;
+  /** Combined string value (controlled). */
+  value?: string;
+  /** Combined string default value (uncontrolled). */
+  defaultValue?: string;
+  /** Fires whenever the combined value changes. RHF-compatible shape. */
+  onChange?: (event: FormChangeEvent) => void;
+  /** Fires once when every cell is filled. */
+  onComplete?: (value: string) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /** Focus the first empty cell on mount. */
+  autoFocus?: boolean;
+  /** Per-character validation regex. Default: digits only. */
+  charPattern?: RegExp;
+  /** Mobile keyboard hint. Default: "numeric". */
+  inputMode?: "numeric" | "text";
+  /** Render cells as password-style dots. */
+  mask?: boolean;
+  /** Per-cell placeholder character. */
+  placeholder?: string;
+  /**
+   * Forwarded to the first cell. RHF's `register` ref attaches here so
+   * focus-on-error works without extra wiring.
+   */
+  ref?: Ref<HTMLInputElement>;
+};
+
+const DEFAULT_PATTERN = /^[0-9]$/;
+
+const splitToCells = (input: string, length: number): string[] => {
+  const cells = new Array(length).fill("");
+  for (let i = 0; i < Math.min(input.length, length); i++) {
+    cells[i] = input[i] ?? "";
+  }
+  return cells;
+};
+
+export const OTPInput = ({
+  length = 6,
+  label,
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  onBlur,
+  errors,
+  info,
+  disabled,
+  readOnly,
+  required,
+  name,
+  id,
+  className,
+  style,
+  layout = "default",
+  layoutDirection = "default",
+  buttonStyle = "none",
+  autoFocus = false,
+  charPattern = DEFAULT_PATTERN,
+  inputMode = "numeric",
+  mask = false,
+  placeholder = "",
+  ref,
+}: OTPInputProps) => {
+  const hasButtonStyle = buttonStyle !== "none";
+  const buttonToneClass = hasButtonStyle
+    ? sButton[`tone_${buttonStyle}`]
+    : undefined;
+  const isControlled = value !== undefined;
+
+  const [internal, setInternal] = useState<string[]>(() =>
+    splitToCells(defaultValue ?? "", length),
+  );
+
+  const cells = isControlled ? splitToCells(value ?? "", length) : internal;
+  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
+  const completedRef = useRef(false);
+
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const hasErrors = (errors?.length ?? 0) > 0;
+
+  const focusCell = useCallback(
+    (idx: number) => {
+      const clamped = Math.max(0, Math.min(length - 1, idx));
+      inputsRef.current[clamped]?.focus();
+      inputsRef.current[clamped]?.select();
+    },
+    [length],
+  );
+
+  const emit = useCallback(
+    (next: string[]) => {
+      const joined = next.join("");
+      if (!isControlled) setInternal(next);
+      onChange?.({ target: { name, value: joined } });
+      const isComplete = next.length === length && next.every((c) => c !== "");
+      if (isComplete && !completedRef.current) {
+        completedRef.current = true;
+        onComplete?.(joined);
+      } else if (!isComplete) {
+        completedRef.current = false;
+      }
+    },
+    [isControlled, length, name, onChange, onComplete],
+  );
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    const firstEmpty = cells.findIndex((c) => c === "");
+    focusCell(firstEmpty >= 0 ? firstEmpty : 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const distribute = (raw: string, startIdx: number) => {
+    const cleaned = Array.from(raw).filter((c) => charPattern.test(c));
+    if (cleaned.length === 0) return;
+    const next = [...cells];
+    let writeIdx = startIdx;
+    for (const c of cleaned) {
+      if (writeIdx >= length) break;
+      next[writeIdx++] = c;
+    }
+    emit(next);
+    focusCell(Math.min(writeIdx, length - 1));
+  };
+
+  const handleCellChange =
+    (idx: number) => (e: ChangeEvent<HTMLInputElement>) => {
+      if (disabled || readOnly) return;
+      const raw = e.target.value;
+      // SMS autofill / fast paste: a multi-char value lands in one cell.
+      if (raw.length > 1) {
+        distribute(raw, idx);
+        return;
+      }
+      if (raw !== "" && !charPattern.test(raw)) return;
+      const next = [...cells];
+      next[idx] = raw;
+      emit(next);
+      if (raw && idx < length - 1) focusCell(idx + 1);
+    };
+
+  const handleKeyDown =
+    (idx: number) => (e: KeyboardEvent<HTMLInputElement>) => {
+      if (disabled || readOnly) return;
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        const next = [...cells];
+        if (next[idx]) {
+          next[idx] = "";
+          emit(next);
+        } else if (idx > 0) {
+          next[idx - 1] = "";
+          emit(next);
+          focusCell(idx - 1);
+        }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusCell(idx - 1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusCell(idx + 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusCell(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusCell(length - 1);
+      }
+    };
+
+  const handlePaste =
+    (idx: number) => (e: ClipboardEvent<HTMLInputElement>) => {
+      if (disabled || readOnly) return;
+      const text = e.clipboardData.getData("text").trim();
+      if (!text) return;
+      e.preventDefault();
+      distribute(text, idx);
+    };
+
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    e.target.select();
+  };
+
+  // Forward external ref to the first cell so RHF's registration ref can
+  // focus-on-error and so consumers calling .focus() get sensible behavior.
+  const refCallback = useCallback(
+    (el: HTMLInputElement | null) => {
+      inputsRef.current[0] = el;
+      if (!ref) return;
+      if (typeof ref === "function") ref(el);
+      else (ref as { current: HTMLInputElement | null }).current = el;
+    },
+    [ref],
+  );
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+      >
+        {label && (
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        )}
+        <div
+          className={s.cells}
+          role="group"
+          aria-label={label ?? "One-time code"}
+        >
+          {cells.map((cellValue, idx) => (
+            <input
+              key={idx}
+              id={idx === 0 ? inputId : undefined}
+              ref={
+                idx === 0
+                  ? refCallback
+                  : (el) => {
+                      inputsRef.current[idx] = el;
+                    }
+              }
+              name={idx === 0 ? name : undefined}
+              type={mask ? "password" : "text"}
+              inputMode={inputMode}
+              autoComplete={idx === 0 ? "one-time-code" : "off"}
+              maxLength={1}
+              value={cellValue}
+              onChange={handleCellChange(idx)}
+              onKeyDown={handleKeyDown(idx)}
+              onPaste={handlePaste(idx)}
+              onFocus={handleFocus}
+              onBlur={onBlur}
+              disabled={disabled}
+              readOnly={readOnly}
+              required={required && idx === 0}
+              placeholder={placeholder}
+              aria-label={`Digit ${idx + 1} of ${length}`}
+              aria-invalid={hasErrors || undefined}
+              className={clsx(
+                !hasButtonStyle && sCommon.field_default,
+                hasButtonStyle && [
+                  sCommon.field_button_variant,
+                  buttonToneClass,
+                  sButton.base,
+                  sButton[buttonStyle],
+                  sButton.input_focus,
+                ],
+                s.cell,
+              )}
+            />
+          ))}
+        </div>
+      </div>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

package/registry/components/ui/input-fields/select/select.tsx

@@ -0,0 +1,118 @@
+import { useId, type ComponentProps } from "react";
+import clsx from "clsx";
+import sCommon from "../common/input-field-common.module.css";
+import sButton from "../../button/button.module.css";
+import s from "../common/input-field-native.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import type { BaseInputFieldProps } from "../common/types";
+import { IconChevronDown } from "@tabler/icons-react";
+import { Icon } from "../../../primitives/icon/icon";
+
+type BaseProps = BaseInputFieldProps & {
+  placeholder?: string;
+  options: { value: string; label: string }[];
+};
+
+export type SelectProps = ComponentProps<"select"> & BaseProps;
+
+export const Select = ({
+  label,
+  errors,
+  info,
+  options,
+  placeholder,
+  className,
+  style,
+  id,
+  name,
+  layout = "default",
+  layoutDirection = "default",
+  buttonStyle = "none",
+  iconStart,
+  iconEnd,
+  ...props
+}: SelectProps) => {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const startActionCount = iconStart ? 1 : 0;
+  const endActionCount = (props.multiple ? 0 : 1) + (iconEnd ? 1 : 0); // 1 for chevron, 1 for iconEnd
+  const hasButtonStyle = buttonStyle !== "none";
+  const buttonToneClass = hasButtonStyle
+    ? sButton[`tone_${buttonStyle}`]
+    : undefined;
+
+  return (
+    <div className={clsx(sCommon.container, className)}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          className,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+        style={style}
+      >
+        {label && (
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        )}
+        <div 
+          className={clsx(
+            sCommon.field_wrapper,
+            s.native_field_wrapper,
+            hasButtonStyle && sCommon.field_wrapper_variant,
+            hasButtonStyle && buttonToneClass,
+          )}
+          data-start-actions={startActionCount > 0 ? startActionCount : undefined}
+          data-end-actions={endActionCount > 0 ? Math.min(3, endActionCount) : undefined}
+        >
+          {iconStart && <div className={sCommon.icon_start}>{iconStart}</div>}
+          <select
+            id={inputId}
+            name={name}
+            className={clsx(
+              hasButtonStyle
+                ? [
+                    sCommon.field_full_width,
+                    sCommon.field_cursor_default,
+                    sCommon.field_button_variant,
+                    buttonToneClass,
+                    sButton.base,
+                    sButton[buttonStyle],
+                    sButton.input_focus,
+                  ]
+                : sCommon.field_default,
+            )}
+            {...props}
+          >
+            {placeholder && (
+              <option value="" disabled hidden>
+                {placeholder}
+              </option>
+            )}
+            {options.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {endActionCount > 0 && (
+            <div className={sCommon.action_end_wrapper} style={{ pointerEvents: "none" }}>
+              {!props.multiple && (
+                <Icon className={s.native_select_chevron}>
+                  <IconChevronDown />
+                </Icon>
+              )}
+              {iconEnd}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <FieldMessage info={info} errors={errors} />
+    </div>
+  );
+};

package/registry/components/ui/input-fields/switch/switch.module.css

@@ -0,0 +1,70 @@
+/* Switch - toggle variant of input-fields family.
+   Uses the family shell from common/input-field-common.module.css;
+   this module only styles the track + thumb.
+
+   Geometry: thumb is anchored on top/bottom/left by --switch-pad and sized
+   via aspect-ratio:1/1 - guarantees identical inset on all four sides in the
+   off state. Travel = track-w − track-h, which keeps the right-side inset
+   identical when checked. Integer px sizing avoids sub-pixel rounding.
+
+   Theme: border-radius uses --radius-xl on both track and thumb so the
+   sharp/rounded/pill radius variants flow through (--radius-full is fixed
+   and would mute them).
+*/
+
+.track {
+  --switch-w: 38px;
+  --switch-h: 22px;
+  --switch-border: 1px;
+  --switch-pad: 3px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  background-color: var(--color-muted);
+  border: var(--switch-border) solid var(--color-border);
+  border-radius: var(--radius-md);
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: var(--switch-pad);
+    bottom: var(--switch-pad);
+    left: var(--switch-pad);
+    aspect-ratio: 1 / 1;
+    background-color: var(--color-background);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    transition:
+      transform var(--transition-fast),
+      background-color var(--transition-fast);
+  }
+
+  &:checked {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+
+    &::after {
+      transform: translateX(calc(var(--switch-w) - var(--switch-h)));
+      background-color: var(--color-primary-foreground);
+    }
+  }
+
+  &:not(:disabled):focus {
+    box-shadow: var(--shadow-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/registry/components/ui/input-fields/switch/switch.tsx

@@ -0,0 +1,59 @@
+import { useId, type ComponentProps } from "react";
+import clsx from "clsx";
+import sCommon from "../common/input-field-common.module.css";
+import s from "./switch.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import type { BaseInputFieldProps } from "../common/types";
+
+export type SwitchProps = Omit<ComponentProps<"input">, "type" | "size"> &
+  Omit<BaseInputFieldProps, "buttonStyle" | "iconStart" | "iconEnd">;
+
+export const Switch = ({
+  label,
+  errors,
+  info,
+  className,
+  style,
+  layout = "default",
+  layoutDirection = "default",
+  id,
+  name,
+  ref,
+  ...props
+}: SwitchProps) => {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+      >
+        {label && (
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        )}
+        <div className={clsx(sCommon.field_wrapper, sCommon.field_wrapper_fit)}>
+          <input
+            id={inputId}
+            name={name}
+            type="checkbox"
+            role="switch"
+            ref={ref}
+            className={s.track}
+            {...props}
+          />
+        </div>
+      </div>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

package/registry/components/ui/input-fields/textarea/textarea.tsx

@@ -0,0 +1,133 @@
+import { type ComponentProps, useId, useState } from "react";
+import clsx from "clsx";
+import sCommon from "../common/input-field-common.module.css";
+import sButton from "../../button/button.module.css";
+import s from "../common/input-field-native.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import type { BaseInputFieldProps } from "../common/types";
+
+type BaseProps = Omit<BaseInputFieldProps, "iconStart" | "iconEnd"> & {
+  charCount?: boolean;
+};
+
+export type TextareaProps = ComponentProps<"textarea"> & BaseProps;
+
+export const Textarea = ({
+  label,
+  errors,
+  info,
+  className,
+  style,
+  value,
+  maxLength,
+  charCount,
+  layout = "default",
+  layoutDirection = "default",
+  buttonStyle = "none",
+  ref,
+  onChange,
+  ...props
+}: TextareaProps) => {
+  const [currentLength, setCurrentLength] = useState(0);
+  const showCharCount = Boolean(charCount && maxLength);
+  const hasButtonStyle = buttonStyle !== "none";
+  const buttonToneClass = hasButtonStyle
+    ? sButton[`tone_${buttonStyle}`]
+    : undefined;
+  const generatedId = useId();
+  const inputId = props.id ?? generatedId;
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (charCount) {
+      setCurrentLength(e.target.value.length);
+    }
+
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  // Callback ref to read initial value and merge with external ref
+  const refCallback = (element: HTMLTextAreaElement | null) => {
+    if (element && charCount) {
+      setCurrentLength(element.value.length);
+    }
+
+    // Merge with external ref (e.g., from RHF)
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  };
+
+  return (
+    <div className={clsx(sCommon.container, className)}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+        style={style}
+      >
+        {(label || showCharCount) && (
+          <div
+            className={clsx(
+              showCharCount && sCommon.label_row,
+              showCharCount && !label && sCommon.field_justify_end,
+            )}
+          >
+            {label && (
+              <label className={sCommon.label} htmlFor={inputId}>
+                {label}
+              </label>
+            )}
+            {showCharCount && (
+              <small className={sCommon.label_meta}>
+                {currentLength} / {maxLength}
+              </small>
+            )}
+          </div>
+        )}
+        <div
+          className={clsx(
+            sCommon.field_wrapper,
+            s.native_field_wrapper,
+            hasButtonStyle && sCommon.field_wrapper_variant,
+            hasButtonStyle && buttonToneClass,
+          )}
+        >
+          <textarea
+            id={inputId}
+            value={value}
+            maxLength={maxLength}
+            className={clsx(
+              hasButtonStyle
+                ? [
+                    sCommon.field_full_width,
+                    sCommon.field_cursor_text,
+                    sCommon.field_button_variant,
+                    buttonToneClass,
+                    sButton.base,
+                    sButton[buttonStyle],
+                    sButton.input_focus,
+                    sCommon.textarea_button_variant_padding,
+                  ]
+                : [sCommon.field_default, sCommon.textarea_padding_y],
+            )}
+            ref={refCallback}
+            {...props}
+            onChange={handleTextareaChange}
+          />
+        </div>
+      </div>
+
+      <FieldMessage info={info} errors={errors} />
+    </div>
+  );
+};