@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

package/src/components/divider/divider.css

@@ -0,0 +1,170 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Divider
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.a1-divider {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  border: 0;
+  color: var(--semantic-color-border-subtle);
+
+  /* All orientation-dependent properties driven by custom properties.
+     Orientation classes (and responsive overrides) set these vars. */
+  width: var(--a1-divider-width, 100%);
+  height: var(--a1-divider-height, 0);
+  min-height: var(--a1-divider-min-height, 0);
+  border-block-start: var(--a1-divider-border-bs, none);
+  border-inline-start: var(--a1-divider-border-is, none);
+  align-self: var(--a1-divider-align-self, auto);
+  margin-block: var(--a1-divider-margin-block, 0);
+  margin-inline: var(--a1-divider-margin-inline, 0);
+}
+
+/* ── Orientation ─────────────────────────────────────────────────────────── */
+
+/* Horizontal — also the xs-h responsive class */
+.a1-divider--horizontal,
+.a1-divider--xs-h {
+  --a1-divider-width: 100%;
+  --a1-divider-height: 0;
+  --a1-divider-min-height: 0;
+  --a1-divider-border-bs: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+  --a1-divider-border-is: 0;
+  --a1-divider-align-self: auto;
+  --a1-divider-margin-block: var(--a1-divider-space-value, 0);
+  --a1-divider-margin-inline: 0;
+}
+
+/* Vertical — also the xs-v responsive class */
+.a1-divider--vertical,
+.a1-divider--xs-v {
+  --a1-divider-width: 0;
+  --a1-divider-height: auto;
+  --a1-divider-min-height: var(--base-spacing-24);
+  --a1-divider-border-bs: 0;
+  --a1-divider-border-is: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+  --a1-divider-align-self: stretch;
+  --a1-divider-margin-block: 0;
+  --a1-divider-margin-inline: var(--a1-divider-space-value, 0);
+}
+
+/* ── Responsive orientation ──────────────────────────────────────────────── */
+
+@media (--bp-sm-up) {
+  .a1-divider--sm-h {
+    --a1-divider-width: 100%;
+    --a1-divider-height: 0;
+    --a1-divider-min-height: 0;
+    --a1-divider-border-bs: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-border-is: 0;
+    --a1-divider-align-self: auto;
+    --a1-divider-margin-block: var(--a1-divider-space-value, 0);
+    --a1-divider-margin-inline: 0;
+  }
+  .a1-divider--sm-v {
+    --a1-divider-width: 0;
+    --a1-divider-height: auto;
+    --a1-divider-min-height: var(--base-spacing-24);
+    --a1-divider-border-bs: 0;
+    --a1-divider-border-is: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-align-self: stretch;
+    --a1-divider-margin-block: 0;
+    --a1-divider-margin-inline: var(--a1-divider-space-value, 0);
+  }
+}
+
+@media (--bp-md-up) {
+  .a1-divider--md-h {
+    --a1-divider-width: 100%;
+    --a1-divider-height: 0;
+    --a1-divider-min-height: 0;
+    --a1-divider-border-bs: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-border-is: 0;
+    --a1-divider-align-self: auto;
+    --a1-divider-margin-block: var(--a1-divider-space-value, 0);
+    --a1-divider-margin-inline: 0;
+  }
+  .a1-divider--md-v {
+    --a1-divider-width: 0;
+    --a1-divider-height: auto;
+    --a1-divider-min-height: var(--base-spacing-24);
+    --a1-divider-border-bs: 0;
+    --a1-divider-border-is: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-align-self: stretch;
+    --a1-divider-margin-block: 0;
+    --a1-divider-margin-inline: var(--a1-divider-space-value, 0);
+  }
+}
+
+@media (--bp-lg-up) {
+  .a1-divider--lg-h {
+    --a1-divider-width: 100%;
+    --a1-divider-height: 0;
+    --a1-divider-min-height: 0;
+    --a1-divider-border-bs: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-border-is: 0;
+    --a1-divider-align-self: auto;
+    --a1-divider-margin-block: var(--a1-divider-space-value, 0);
+    --a1-divider-margin-inline: 0;
+  }
+  .a1-divider--lg-v {
+    --a1-divider-width: 0;
+    --a1-divider-height: auto;
+    --a1-divider-min-height: var(--base-spacing-24);
+    --a1-divider-border-bs: 0;
+    --a1-divider-border-is: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-align-self: stretch;
+    --a1-divider-margin-block: 0;
+    --a1-divider-margin-inline: var(--a1-divider-space-value, 0);
+  }
+}
+
+@media (--bp-xl) {
+  .a1-divider--xl-h {
+    --a1-divider-width: 100%;
+    --a1-divider-height: 0;
+    --a1-divider-min-height: 0;
+    --a1-divider-border-bs: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-border-is: 0;
+    --a1-divider-align-self: auto;
+    --a1-divider-margin-block: var(--a1-divider-space-value, 0);
+    --a1-divider-margin-inline: 0;
+  }
+  .a1-divider--xl-v {
+    --a1-divider-width: 0;
+    --a1-divider-height: auto;
+    --a1-divider-min-height: var(--base-spacing-24);
+    --a1-divider-border-bs: 0;
+    --a1-divider-border-is: var(--a1-divider-size) var(--a1-divider-style) currentColor;
+    --a1-divider-align-self: stretch;
+    --a1-divider-margin-block: 0;
+    --a1-divider-margin-inline: var(--a1-divider-space-value, 0);
+  }
+}
+
+/* ── Thickness ───────────────────────────────────────────────────────────── */
+
+.a1-divider--xs { --a1-divider-size: var(--component-divider-size-xs); }
+.a1-divider--sm { --a1-divider-size: var(--component-divider-size-sm); }
+.a1-divider--md { --a1-divider-size: var(--component-divider-size-md); }
+.a1-divider--lg { --a1-divider-size: var(--component-divider-size-lg); }
+
+/* ── Variant ─────────────────────────────────────────────────────────────── */
+
+.a1-divider--subtle  { --a1-divider-style: solid;  color: var(--semantic-color-border-subtle); }
+.a1-divider--strong  { --a1-divider-style: solid;  color: var(--semantic-color-border-strong); }
+.a1-divider--accent  { --a1-divider-style: solid;  color: var(--semantic-color-text-accent); }
+.a1-divider--dashed  { --a1-divider-style: dashed; color: var(--semantic-color-border-subtle); }
+.a1-divider--dotted  { --a1-divider-style: dotted; color: var(--semantic-color-border-subtle); }
+
+/* ── Space ───────────────────────────────────────────────────────────────── */
+/* --a1-divider-space-value is routed to margin-block or margin-inline
+   by the active orientation class.                                         */
+
+.a1-divider--space-none { --a1-divider-space-value: 0; }
+.a1-divider--space-xs   { --a1-divider-space-value: var(--base-spacing-4); }
+.a1-divider--space-sm   { --a1-divider-space-value: var(--base-spacing-8); }
+.a1-divider--space-md   { --a1-divider-space-value: var(--base-spacing-16); }
+.a1-divider--space-lg   { --a1-divider-space-value: var(--base-spacing-24); }
+.a1-divider--space-xl   { --a1-divider-space-value: var(--base-spacing-32); }
+.a1-divider--space-xxl  { --a1-divider-space-value: var(--base-spacing-40); }

package/src/components/field/CreditCardField.jsx

@@ -0,0 +1,131 @@
+import { useState, useRef, useLayoutEffect } from "react";
+import { TextField } from "./TextField.jsx";
+import { buildDisplay, extractDigits, maskMaxDigits, nextSlotIndex } from "./maskUtils.js";
+import "./credit-card.css";
+
+const CARD_TYPES = [
+  { type: "amex",       label: "Amex", pattern: /^3[47]/,                    mask: "#### ###### #####"  },
+  { type: "mastercard", label: "MC",   pattern: /^(5[1-5]|2[2-7])/,         mask: "#### #### #### ####" },
+  { type: "discover",   label: "Disc", pattern: /^6(?:011|22|4[4-9]|5)/,    mask: "#### #### #### ####" },
+  { type: "visa",       label: "Visa", pattern: /^4/,                        mask: "#### #### #### ####" },
+];
+
+const DEFAULT_MASK = "#### #### #### ####";
+
+function detectCard(digits) {
+  return CARD_TYPES.find(c => c.pattern.test(digits)) ?? null;
+}
+
+export function CreditCardField({
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown: externalKeyDown,
+  onFocus:   externalFocus,
+  onClick:   externalClick,
+  className = "",
+  ...props
+}) {
+  const [digits, setDigits] = useState(() =>
+    value != null
+      ? extractDigits(String(value)).slice(0, 16)
+      : defaultValue != null
+      ? extractDigits(String(defaultValue)).slice(0, 16)
+      : ""
+  );
+
+  const inputRef   = useRef(null);
+  const nextCursor = useRef(null);
+
+  const currentDigits = value != null
+    ? extractDigits(String(value)).slice(0, 16)
+    : digits;
+
+  const card    = currentDigits.length > 0 ? detectCard(currentDigits) : null;
+  const mask    = card?.mask ?? DEFAULT_MASK;
+  const maxLen  = maskMaxDigits(mask);
+  const trimmed = currentDigits.slice(0, maxLen);
+  const display = buildDisplay(trimmed, mask);
+
+  useLayoutEffect(() => {
+    if (nextCursor.current !== null && inputRef.current) {
+      const pos = nextCursor.current;
+      inputRef.current.setSelectionRange(pos, pos);
+      nextCursor.current = null;
+    }
+  });
+
+  function updateDigits(newDigits) {
+    const card    = newDigits.length > 0 ? detectCard(newDigits) : null;
+    const newMask = card?.mask ?? DEFAULT_MASK;
+    const clamped = newDigits.slice(0, maskMaxDigits(newMask));
+    if (value == null) setDigits(clamped);
+    onChange?.({ target: { value: buildDisplay(clamped, newMask) } });
+    nextCursor.current = nextSlotIndex(clamped.length, newMask);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key >= "0" && e.key <= "9") {
+      e.preventDefault();
+      const { selectionStart, selectionEnd } = e.target;
+      const base = selectionStart !== selectionEnd ? "" : currentDigits.slice(0, maxLen);
+      if (base.length < maxLen) updateDigits(base + e.key);
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      e.preventDefault();
+      const { selectionStart, selectionEnd } = e.target;
+      if (selectionStart !== selectionEnd) updateDigits("");
+      else if (currentDigits.length > 0) updateDigits(currentDigits.slice(0, -1));
+    }
+    externalKeyDown?.(e);
+  }
+
+  function handleChange(e) {
+    const newDigits = extractDigits(e.target.value).slice(0, 16);
+    updateDigits(newDigits);
+  }
+
+  function handleFocus(e) {
+    const pos = nextSlotIndex(trimmed.length, mask);
+    requestAnimationFrame(() => { inputRef.current?.setSelectionRange(pos, pos); });
+    externalFocus?.(e);
+  }
+
+  function handleClick(e) {
+    const pos = nextSlotIndex(trimmed.length, mask);
+    requestAnimationFrame(() => { inputRef.current?.setSelectionRange(pos, pos); });
+    externalClick?.(e);
+  }
+
+  const splitAt = nextSlotIndex(trimmed.length, mask);
+  const inputOverlay = (
+    <>
+      <div className="a1-field__mask-overlay" aria-hidden="true">
+        <span className="a1-field__mask-typed">{display.slice(0, splitAt)}</span>
+        <span className="a1-field__mask-placeholder">{display.slice(splitAt)}</span>
+      </div>
+      {card && (
+        <span className="a1-credit-card__badge" aria-hidden="true">{card.label}</span>
+      )}
+    </>
+  );
+
+  const classes = ["a1-credit-card", card && "a1-credit-card--detected", className]
+    .filter(Boolean).join(" ").trim();
+
+  return (
+    <TextField
+      ref={inputRef}
+      type="tel"
+      inputMode="numeric"
+      autoComplete="cc-number"
+      value={display}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      inputOverlay={inputOverlay}
+      className={classes}
+      {...props}
+    />
+  );
+}

package/src/components/field/DateField.jsx

@@ -0,0 +1,11 @@
+import { TextField } from "./TextField.jsx";
+
+export function DateField({ className = "", ...props }) {
+  return (
+    <TextField
+      type="date"
+      className={`a1-field--fit ${className}`.trim()}
+      {...props}
+    />
+  );
+}

package/src/components/field/NumberField.jsx

@@ -0,0 +1,11 @@
+import { TextField } from "./TextField.jsx";
+
+export function NumberField({ className = "", ...props }) {
+  return (
+    <TextField
+      type="number"
+      className={className}
+      {...props}
+    />
+  );
+}

package/src/components/field/PhoneField.jsx

@@ -0,0 +1,107 @@
+import { useState, useRef, useLayoutEffect } from "react";
+import { TextField } from "./TextField.jsx";
+import { buildDisplay, extractDigits, maskMaxDigits, nextSlotIndex } from "./maskUtils.js";
+
+const DEFAULT_MASK = "#-###-###-####";
+
+export function PhoneField({
+  mask = DEFAULT_MASK,
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown: externalKeyDown,
+  onFocus:   externalFocus,
+  onClick:   externalClick,
+  ...props
+}) {
+  const maxLen = maskMaxDigits(mask);
+
+  const [digits, setDigits] = useState(() =>
+    value != null
+      ? extractDigits(String(value)).slice(0, maxLen)
+      : defaultValue != null
+      ? extractDigits(String(defaultValue)).slice(0, maxLen)
+      : ""
+  );
+
+  const inputRef   = useRef(null);
+  const nextCursor = useRef(null);
+
+  // In controlled mode derive digits from value prop; otherwise use internal state
+  const currentDigits = value != null
+    ? extractDigits(String(value)).slice(0, maxLen)
+    : digits;
+
+  const display = buildDisplay(currentDigits, mask);
+
+  useLayoutEffect(() => {
+    if (nextCursor.current !== null && inputRef.current) {
+      const pos = nextCursor.current;
+      inputRef.current.setSelectionRange(pos, pos);
+      nextCursor.current = null;
+    }
+  });
+
+  function updateDigits(newDigits) {
+    if (value == null) setDigits(newDigits);
+    onChange?.({ target: { value: buildDisplay(newDigits, mask) } });
+    nextCursor.current = nextSlotIndex(newDigits.length, mask);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key >= "0" && e.key <= "9") {
+      e.preventDefault();
+      const { selectionStart, selectionEnd } = e.target;
+      const base = selectionStart !== selectionEnd ? "" : currentDigits;
+      if (base.length < maxLen) updateDigits(base + e.key);
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      e.preventDefault();
+      const { selectionStart, selectionEnd } = e.target;
+      if (selectionStart !== selectionEnd) updateDigits("");
+      else if (currentDigits.length > 0) updateDigits(currentDigits.slice(0, -1));
+    }
+    externalKeyDown?.(e);
+  }
+
+  function handleChange(e) {
+    // Handles paste and browser autocomplete
+    const newDigits = extractDigits(e.target.value).slice(0, maxLen);
+    updateDigits(newDigits);
+  }
+
+  function handleFocus(e) {
+    const pos = nextSlotIndex(currentDigits.length, mask);
+    requestAnimationFrame(() => { inputRef.current?.setSelectionRange(pos, pos); });
+    externalFocus?.(e);
+  }
+
+  function handleClick(e) {
+    const pos = nextSlotIndex(currentDigits.length, mask);
+    requestAnimationFrame(() => { inputRef.current?.setSelectionRange(pos, pos); });
+    externalClick?.(e);
+  }
+
+  const splitAt = nextSlotIndex(currentDigits.length, mask);
+  const inputOverlay = (
+    <div className="a1-field__mask-overlay" aria-hidden="true">
+      <span className="a1-field__mask-typed">{display.slice(0, splitAt)}</span>
+      <span className="a1-field__mask-placeholder">{display.slice(splitAt)}</span>
+    </div>
+  );
+
+  return (
+    <TextField
+      ref={inputRef}
+      type="tel"
+      inputMode="numeric"
+      autoComplete="tel"
+      value={display}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      inputOverlay={inputOverlay}
+      {...props}
+    />
+  );
+}

package/src/components/field/SelectField.jsx

@@ -0,0 +1,86 @@
+import { useId, forwardRef, useContext } from "react";
+import { useLabel } from "../labels/Labels.jsx";
+import { MessageBadge } from "../message/Message.jsx";
+import { Icon } from "../icon/Icon.jsx";
+import { FieldsetContext } from "../fieldset/FieldsetContext.js";
+import "./field.css";
+
+const SIZES           = ["comfortable", "default", "compact"];
+const LABEL_POSITIONS = ["above", "side"];
+
+export const SelectField = forwardRef(function SelectField({
+  label,
+  hint,
+  error,
+  size,
+  labelPosition,
+  required = false,
+  disabled = false,
+  id: providedId,
+  className = "",
+  inputOverlay,
+  children,
+  ...props
+}, ref) {
+  const ctx     = useContext(FieldsetContext);
+  const autoId  = useId();
+  const id      = providedId ?? autoId;
+  const hintId  = `${id}-hint`;
+  const errorId = `${id}-error`;
+
+  const resolvedSize     = SIZES.includes(size)                   ? size          : (ctx?.size          ?? "default");
+  const resolvedPosition = LABEL_POSITIONS.includes(labelPosition) ? labelPosition : (ctx?.labelPosition ?? "above");
+
+  const classes = [
+    "a1-field",
+    `a1-field--${resolvedSize}`,
+    `a1-field--label-${resolvedPosition}`,
+    error    && "a1-field--error",
+    required && "a1-field--required",
+    disabled && "a1-field--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const describedBy = [error ? errorId : hint ? hintId : null]
+    .filter(Boolean).join(" ") || undefined;
+
+  const requiredText = useLabel("field.required", "Required");
+
+  return (
+    <div className={classes}>
+      {label && (
+        <label className="a1-field__label" htmlFor={id}>
+          {label}
+          {required && resolvedSize === "comfortable" ? (
+            <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+          ) : required ? (
+            <span className="a1-field__asterisk" aria-hidden="true"> *</span>
+          ) : null}
+        </label>
+      )}
+      <div className="a1-field__control">
+        <select
+          ref={ref}
+          id={id}
+          className="a1-field__select"
+          required={required}
+          disabled={disabled}
+          aria-describedby={describedBy}
+          aria-invalid={error ? "true" : undefined}
+          {...props}
+        >
+          {children}
+        </select>
+        <span className="a1-field__chevron" aria-hidden="true">
+          <Icon name="expand_more" />
+        </span>
+        {inputOverlay}
+      </div>
+      {error ? (
+        <p className="a1-field__message a1-field__message--error" id={errorId} role="alert">{error}</p>
+      ) : hint ? (
+        <p className="a1-field__message a1-field__message--hint" id={hintId}>{hint}</p>
+      ) : null}
+    </div>
+  );
+});

package/src/components/field/TextField.jsx

@@ -0,0 +1,83 @@
+import { useId, forwardRef, useContext } from "react";
+import { useLabel } from "../labels/Labels.jsx";
+import { MessageBadge } from "../message/Message.jsx";
+import { FieldsetContext } from "../fieldset/FieldsetContext.js";
+import "./field.css";
+
+const SIZES           = ["comfortable", "default", "compact"];
+const LABEL_POSITIONS = ["above", "side"];
+
+export const TextField = forwardRef(function TextField({
+  label,
+  hint,
+  error,
+  size,
+  labelPosition,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  id: providedId,
+  className = "",
+  placeholder: _removed,
+  inputOverlay,
+  ...props
+}, ref) {
+  const ctx     = useContext(FieldsetContext);
+  const autoId  = useId();
+  const id      = providedId ?? autoId;
+  const hintId  = `${id}-hint`;
+  const errorId = `${id}-error`;
+
+  const resolvedSize     = SIZES.includes(size)           ? size          : (ctx?.size          ?? "default");
+  const resolvedPosition = LABEL_POSITIONS.includes(labelPosition) ? labelPosition : (ctx?.labelPosition ?? "above");
+
+  const classes = [
+    "a1-field",
+    `a1-field--${resolvedSize}`,
+    `a1-field--label-${resolvedPosition}`,
+    error    && "a1-field--error",
+    required && "a1-field--required",
+    disabled && "a1-field--disabled",
+    readOnly && "a1-field--readonly",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const describedBy = [error ? errorId : hint ? hintId : null]
+    .filter(Boolean).join(" ") || undefined;
+
+  const requiredText = useLabel("field.required", "Required");
+
+  return (
+    <div className={classes}>
+      {label && (
+        <label className="a1-field__label" htmlFor={id}>
+          {label}
+          {required && resolvedSize === "comfortable" ? (
+            <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+          ) : required ? (
+            <span className="a1-field__asterisk" aria-hidden="true"> *</span>
+          ) : null}
+        </label>
+      )}
+      <div className="a1-field__control">
+        <input
+          ref={ref}
+          id={id}
+          className="a1-field__input"
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-describedby={describedBy}
+          aria-invalid={error ? "true" : undefined}
+          {...props}
+        />
+        {inputOverlay}
+      </div>
+      {error ? (
+        <p className="a1-field__message a1-field__message--error" id={errorId} role="alert">{error}</p>
+      ) : hint ? (
+        <p className="a1-field__message a1-field__message--hint" id={hintId}>{hint}</p>
+      ) : null}
+    </div>
+  );
+});