@pienter/ui 0.2.0 → 0.5.0

package/components/form/checkbox/Checkbox.astro

@@ -1,79 +0,0 @@
----
-import './checkbox.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  checked?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  checked = false,
-  required = false,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('checkbox');
-const hintId = `${inputId}-hint`;
-const errorsId = `${inputId}-errors`;
-
-const hasErrors = errors.length > 0;
-const computedStatus = status ?? (hasErrors ? 'error' : undefined);
-
-const describedByIds: string[] = [];
-if (hint) describedByIds.push(hintId);
-if (hasErrors) describedByIds.push(errorsId);
-const describedBy =
-  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
-
-const ariaChecked = checked ? 'true' : 'false';
----
-
-<div class="pui-field" data-layout="inline" data-status={computedStatus}>
-  <input
-    class="pui-checkbox"
-    type="checkbox"
-    id={inputId}
-    name={name}
-    checked={checked}
-    required={required}
-    disabled={disabled}
-    aria-checked={ariaChecked}
-    aria-invalid={hasErrors ? 'true' : undefined}
-    aria-describedby={describedBy}
-    {...rest}
-  />
-  <label class="pui-field__label" for={inputId}>
-    {label}
-  </label>
-  {
-    hint && (
-      <p id={hintId} class="pui-field__hint">
-        {hint}
-      </p>
-    )
-  }
-  {
-    hasErrors && (
-      <ul id={errorsId} class="pui-field__hint" role="alert">
-        {errors.map((error) => (
-          <li>{error}</li>
-        ))}
-      </ul>
-    )
-  }
-</div>

package/components/form/date-input/DateInput.astro

@@ -1,105 +0,0 @@
----
-import './date-input.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  /**
-   * Native input type. `month` and `week` are intentionally out of
-   * scope for v1 because their browser support is uneven (notably
-   * Safari) — see CONVENTIONS DateInput audit entry.
-   */
-  type?: 'date' | 'time' | 'datetime-local';
-  /**
-   * Current ISO-formatted value. The exact shape depends on `type`:
-   *  - `date` → `YYYY-MM-DD`
-   *  - `time` → `HH:MM` (or `HH:MM:SS` when `step` enables seconds)
-   *  - `datetime-local` → `YYYY-MM-DDTHH:MM`
-   */
-  value?: string;
-  /** Lower bound, in the same ISO shape as `value`. Forwarded to native `min`. */
-  min?: string;
-  /** Upper bound, in the same ISO shape as `value`. Forwarded to native `max`. */
-  max?: string;
-  /**
-   * Native step granularity. Useful for `type="time"`:
-   * `step="60"` (default) gives minute precision; `step="1"`
-   * exposes seconds in the picker.
-   */
-  step?: number | string;
-  required?: boolean;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  type = 'date',
-  value = '',
-  min,
-  max,
-  step,
-  required = false,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('input');
-const hintId = `${inputId}-hint`;
-const errorsId = `${inputId}-errors`;
-
-const hasErrors = errors.length > 0;
-const computedStatus = status ?? (hasErrors ? 'error' : undefined);
-
-const describedByIds: string[] = [];
-if (hint) describedByIds.push(hintId);
-if (hasErrors) describedByIds.push(errorsId);
-const describedBy =
-  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
----
-
-<div class="pui-field" data-status={computedStatus}>
-  <label class="pui-field__label" for={inputId}>
-    {label}
-  </label>
-  <input
-    class="pui-input"
-    id={inputId}
-    type={type}
-    name={name}
-    value={value}
-    min={min}
-    max={max}
-    step={step}
-    required={required}
-    disabled={disabled}
-    aria-invalid={hasErrors ? 'true' : undefined}
-    aria-describedby={describedBy}
-    {...rest}
-  />
-  {
-    hint && (
-      <p id={hintId} class="pui-field__hint">
-        {hint}
-      </p>
-    )
-  }
-  {
-    hasErrors && (
-      <ul id={errorsId} class="pui-field__hint" role="alert">
-        {errors.map((error) => (
-          <li>{error}</li>
-        ))}
-      </ul>
-    )
-  }
-</div>

package/components/form/form/Form.astro

@@ -1,106 +0,0 @@
----
-import './form.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  /** Stable form ID — used by the consumer's `mountForm` script. */
-  id?: string;
-  submitLabel?: string;
-  busy?: boolean;
-  /** Top-level errors rendered in the error summary. */
-  errors?: string[];
-  /** Success/status message rendered in the polite live region. */
-  statusMessage?: string;
-}
-
-const {
-  id,
-  submitLabel = 'Submit',
-  busy = false,
-  errors = [],
-  statusMessage,
-} = Astro.props;
-
-const formId = id ?? generateId('form');
----
-
-<form
-  class="pui-form"
-  id={formId}
-  data-pui-form
-  novalidate
-  aria-busy={busy ? 'true' : undefined}
->
-  {
-    errors.length > 0 && (
-      <div class="pui-form__error-summary" role="alert" aria-live="assertive">
-        <p class="pui-form__error-summary-title">There was a problem</p>
-        <ul class="pui-form__error-summary-list">
-          {errors.map((error) => (
-            <li>{error}</li>
-          ))}
-        </ul>
-      </div>
-    )
-  }
-
-  <slot />
-
-  {
-    statusMessage && (
-      <div class="pui-form__status" aria-live="polite">
-        {statusMessage}
-      </div>
-    )
-  }
-
-  <div class="pui-form__actions">
-    <slot name="actions">
-      <button
-        class="pui-btn"
-        data-variant="primary"
-        type="submit"
-        disabled={busy}
-      >
-        {submitLabel}
-      </button>
-    </slot>
-  </div>
-</form>
-
-{
-  /*
-  Form.astro renders chrome only — it deliberately does NOT auto-mount
-  `mountForm`. The controller takes `validators` and an async `onSubmit`
-  handler, both of which are functions that can't be passed as Astro
-  props. Consumers wire the controller themselves from a `<script>`
-  block:
-
-      ---
-      import Form from '@pienter/ui/components/Form.astro';
-      import TextInput from '@pienter/ui/components/TextInput.astro';
-      ---
-      <Form id="signup" submitLabel="Create account">
-        <TextInput label="Email" name="email" type="email" />
-      </Form>
-      <script>
-        import { mountForm } from '@pienter/ui/utils/controllers/form.js';
-        import { isRequired, isEmail } from '@pienter/ui/utils/validation/rules.js';
-        const el = document.getElementById('signup');
-        if (el instanceof HTMLFormElement) {
-          mountForm(el, {
-            validators: { email: [isRequired(), isEmail()] },
-            onSubmit: async (data) => {
-              const res = await fetch('/api/signup', { method: 'POST', body: data });
-              if (res.ok) return { ok: true, statusMessage: 'Account created' };
-              const body = await res.json();
-              return { ok: false, fieldErrors: body.fieldErrors, errors: body.errors };
-            },
-          });
-        }
-      </script>
-
-  This explicit mount pattern is the locked Astro Form contract per the
-  Form audit entry in CONVENTIONS.md.
-*/
-}

package/components/form/input-otp/InputOTP.astro

@@ -1,147 +0,0 @@
----
-import './input-otp.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  /**
-   * Initial OTP string. Length matches `length` (Astro pads with empty
-   * characters or trims as needed before rendering slots).
-   */
-  value?: string;
-  /** Number of slots (default 6). */
-  length?: number;
-  /**
-   * Per-character validation pattern as a string (regex source). Default
-   * is digits-only `^[0-9]$`. Pass an alphanumeric pattern as a regex
-   * source string when the OTP code includes letters. The string is
-   * stored on a `data-pattern` attribute so the controller can rehydrate
-   * the regex post-mount.
-   */
-  pattern?: string;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  value = '',
-  length = 6,
-  pattern,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const firstSlotId = id ?? generateId('input');
-const hintId = `${firstSlotId}-hint`;
-const errorsId = `${firstSlotId}-errors`;
-
-const hasErrors = errors.length > 0;
-const computedStatus = status ?? (hasErrors ? 'error' : undefined);
-
-const describedByIds: string[] = [];
-if (hint) describedByIds.push(hintId);
-if (hasErrors) describedByIds.push(errorsId);
-const describedBy =
-  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
-
-// Pad / trim seed value to the slot count.
-const slots = Array.from({ length }, (_, i) => value[i] ?? '');
----
-
-<div class="pui-field" data-status={computedStatus}>
-  <label class="pui-field__label" for={firstSlotId}>
-    {label}
-  </label>
-  <div
-    class="pui-input-otp"
-    data-pui-input-otp
-    data-disabled={disabled ? 'true' : undefined}
-    data-pattern={pattern}
-    role="group"
-  >
-    {
-      slots.map((char, i) => (
-        <input
-          class="pui-input-otp__slot pui-input"
-          type="text"
-          inputmode="numeric"
-          autocomplete="one-time-code"
-          maxlength="1"
-          id={i === 0 ? firstSlotId : `${firstSlotId}-slot-${i + 1}`}
-          aria-label={`Digit ${i + 1} of ${length}`}
-          value={char}
-          disabled={disabled}
-          aria-invalid={i === 0 && hasErrors ? 'true' : undefined}
-          aria-describedby={i === 0 ? describedBy : undefined}
-          {...(i === 0 ? rest : {})}
-        />
-      ))
-    }
-    {
-      name && (
-        <input
-          class="pui-input-otp__hidden"
-          type="hidden"
-          name={name}
-          value={value}
-        />
-      )
-    }
-  </div>
-  {
-    hint && (
-      <p id={hintId} class="pui-field__hint">
-        {hint}
-      </p>
-    )
-  }
-  {
-    hasErrors && (
-      <ul id={errorsId} class="pui-field__hint" role="alert">
-        {errors.map((error) => (
-          <li>{error}</li>
-        ))}
-      </ul>
-    )
-  }
-</div>
-
-<script>
-  import { mountInputOTP } from '@pienter/ui/utils/controllers/otp.js';
-
-  // Hoisted module script — Astro de-dupes across instances.
-  function mountAll(): void {
-    const wrappers = document.querySelectorAll<HTMLElement>(
-      '[data-pui-input-otp]',
-    );
-    wrappers.forEach((wrapper) => {
-      if (wrapper.dataset.vInputOtpMounted === 'true') return;
-      let pattern: RegExp | undefined;
-      if (wrapper.dataset.pattern) {
-        try {
-          pattern = new RegExp(wrapper.dataset.pattern);
-        } catch {
-          pattern = undefined;
-        }
-      }
-      mountInputOTP(wrapper, { pattern });
-      wrapper.dataset.vInputOtpMounted = 'true';
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
-  } else {
-    mountAll();
-  }
-</script>

package/components/form/label/Label.astro

@@ -1,13 +0,0 @@
----
-import './label.css';
-
-interface Props {
-  for?: string;
-}
-
-const { for: htmlFor, ...rest } = Astro.props;
----
-
-<label class="pui-field__label" for={htmlFor} {...rest}>
-  <slot />
-</label>

package/components/form/number-field/NumberField.astro

@@ -1,142 +0,0 @@
----
-import './number-field.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  /**
-   * Initial numeric value. Astro renders the value once at SSR time;
-   * dynamic updates are handled by the consumer's own scripts (see
-   * the consumer-wires-their-own-script pattern in CONVENTIONS) or
-   * by the increment/decrement buttons via `mountNumberField`.
-   */
-  value?: number | string;
-  min?: number;
-  max?: number;
-  step?: number | string;
-  placeholder?: string;
-  required?: boolean;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  value,
-  min,
-  max,
-  step,
-  placeholder,
-  required = false,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('input');
-const hintId = `${inputId}-hint`;
-const errorsId = `${inputId}-errors`;
-
-const hasErrors = errors.length > 0;
-const computedStatus = status ?? (hasErrors ? 'error' : undefined);
-
-const describedByIds: string[] = [];
-if (hint) describedByIds.push(hintId);
-if (hasErrors) describedByIds.push(errorsId);
-const describedBy =
-  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
----
-
-<div class="pui-field" data-status={computedStatus}>
-  <label class="pui-field__label" for={inputId}>
-    {label}
-  </label>
-  <div class="pui-number-field" data-pui-number-field>
-    <input
-      class="pui-number-field__input pui-input"
-      type="number"
-      id={inputId}
-      name={name}
-      min={min}
-      max={max}
-      step={step}
-      placeholder={placeholder}
-      required={required}
-      disabled={disabled}
-      value={value}
-      aria-invalid={hasErrors ? 'true' : undefined}
-      aria-describedby={describedBy}
-      {...rest}
-    />
-    <div class="pui-number-field__steppers">
-      <button
-        type="button"
-        class="pui-number-field__step"
-        data-direction="increment"
-        aria-label="Increase"
-        disabled={disabled}
-      >
-        <span aria-hidden="true">+</span>
-      </button>
-      <button
-        type="button"
-        class="pui-number-field__step"
-        data-direction="decrement"
-        aria-label="Decrease"
-        disabled={disabled}
-      >
-        <span aria-hidden="true">&#x2212;</span>
-      </button>
-    </div>
-  </div>
-  {
-    hint && (
-      <p id={hintId} class="pui-field__hint">
-        {hint}
-      </p>
-    )
-  }
-  {
-    hasErrors && (
-      <ul id={errorsId} class="pui-field__hint" role="alert">
-        {errors.map((error) => (
-          <li>{error}</li>
-        ))}
-      </ul>
-    )
-  }
-</div>
-
-<script>
-  import { mountNumberField } from '@pienter/ui/utils/controllers/number-field.js';
-
-  // Hoisted module script — Astro de-dupes this across every NumberField
-  // instance on the page. Mount the controller on each [data-pui-number-field]
-  // wrapper present at DOM-ready. See CONVENTIONS § hoisted-vs-inline rule.
-  function mountAll(): void {
-    const wrappers = document.querySelectorAll<HTMLElement>(
-      '[data-pui-number-field]',
-    );
-    wrappers.forEach((wrapper) => {
-      // Idempotency guard: skip wrappers that have already been mounted
-      // (e.g. on Astro view transitions / partial re-renders).
-      if (wrapper.dataset.vNumberFieldMounted === 'true') return;
-      mountNumberField(wrapper);
-      wrapper.dataset.vNumberFieldMounted = 'true';
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
-  } else {
-    mountAll();
-  }
-</script>

package/components/form/radio-group/RadioGroup.astro

@@ -1,105 +0,0 @@
----
-import './radio-group.css';
-import { generateId } from '../../../utils/a11y/id.js';
-import type { RadioOption } from './types.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name: string;
-  options: RadioOption[];
-  value?: string;
-  disabled?: boolean;
-  orientation?: 'vertical' | 'horizontal';
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  options,
-  value,
-  disabled = false,
-  orientation = 'vertical',
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const fieldId = id ?? generateId('radiogroup');
-const hintId = `${fieldId}-hint`;
-const errorsId = `${fieldId}-errors`;
-
-const hasErrors = errors.length > 0;
-const computedStatus = status ?? (hasErrors ? 'error' : undefined);
-
-const describedByIds: string[] = [];
-if (hint) describedByIds.push(hintId);
-if (hasErrors) describedByIds.push(errorsId);
-const describedBy =
-  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
----
-
-<fieldset
-  id={fieldId}
-  class="pui-field"
-  data-status={computedStatus}
-  role="radiogroup"
-  aria-describedby={describedBy}
-  aria-invalid={hasErrors ? 'true' : undefined}
-  {...rest}
->
-  {
-    /* aria-invalid lives on the <fieldset> (group-level signal) AND, when the
-      Astro mountForm controller is wired, on the first radio. The redundancy
-      is intentional — see CONVENTIONS.md "RadioGroup audit → ARIA
-      expectations" for the rationale. Do NOT remove either binding without
-      coordinating with the form controller. */
-  }
-  <legend class="pui-field__label">{label}</legend>
-  {
-    hint && (
-      <p id={hintId} class="pui-field__hint">
-        {hint}
-      </p>
-    )
-  }
-  <div class="pui-radio-group" data-orientation={orientation}>
-    {
-      options.map((option) => {
-        const isChecked = value === option.value;
-        const isDisabled = option.disabled || disabled;
-        return (
-          <label
-            class="pui-radio-group__item"
-            data-disabled={isDisabled ? 'true' : undefined}
-          >
-            <input
-              class="pui-radio"
-              type="radio"
-              name={name}
-              value={option.value}
-              checked={isChecked}
-              disabled={isDisabled}
-              aria-checked={isChecked ? 'true' : 'false'}
-            />
-            <span class="pui-radio-group__label">{option.label}</span>
-          </label>
-        );
-      })
-    }
-  </div>
-  {
-    hasErrors && (
-      <ul id={errorsId} class="pui-field__hint" role="alert">
-        {errors.map((error) => (
-          <li>{error}</li>
-        ))}
-      </ul>
-    )
-  }
-</fieldset>