@pienter/ui 0.2.0 → 0.5.0

package/components/form/select/Select.astro

@@ -1,105 +0,0 @@
----
-import './select.css';
-import Icon from '../../display/icon/Icon.astro';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label?: string;
-  name?: string;
-  value?: string;
-  disabled?: boolean;
-  options: { value: string; label: string }[];
-  placeholder?: string;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  value,
-  disabled = false,
-  options,
-  placeholder,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('select');
-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 && (
-      <label class="pui-field__label" for={inputId}>
-        {label}
-      </label>
-    )
-  }
-  <div class="pui-select">
-    <select
-      class="pui-select__control"
-      id={inputId}
-      name={name}
-      disabled={disabled}
-      aria-invalid={hasErrors ? 'true' : undefined}
-      aria-describedby={describedBy}
-      {...rest}
-    >
-      {
-        placeholder && (
-          <option
-            value=""
-            disabled
-            hidden
-            selected={value === undefined || value === ''}
-          >
-            {placeholder}
-          </option>
-        )
-      }
-      {
-        options.map((opt) => (
-          <option value={opt.value} selected={value === opt.value}>
-            {opt.label}
-          </option>
-        ))
-      }
-    </select>
-    <span class="pui-select__caret" aria-hidden="true">
-      <Icon name="chevron-down" size="sm" />
-    </span>
-  </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>

package/components/form/slider/Slider.astro

@@ -1,205 +0,0 @@
----
-import './slider.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  /**
-   * Initial value. Pass a `number` for single-thumb mode, a tuple for
-   * range. Astro renders the thumb DOM accordingly; the controller
-   * picks the matching mode at mount time.
-   */
-  value?: number | [number, number];
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  value = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const baseId = id ?? generateId('input');
-const hintId = `${baseId}-hint`;
-const errorsId = `${baseId}-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 isRange = Array.isArray(value);
-const values: number[] = isRange ? [value[0], value[1]] : [value as number];
-
-function pct(v: number): number {
-  if (max === min) return 0;
-  return ((v - min) / (max - min)) * 100;
-}
-
-const fillStart = isRange && values.length === 2 ? `${pct(values[0])}%` : '0%';
-const fillEnd =
-  isRange && values.length === 2 ? `${pct(values[1])}%` : `${pct(values[0])}%`;
-
-const trackStyle = `--pui-slider-fill-start: ${fillStart}; --pui-slider-fill-end: ${fillEnd};`;
----
-
-<div class="pui-field" data-status={computedStatus}>
-  <label class="pui-field__label" for={`${baseId}-thumb-0`}>
-    {label}
-  </label>
-  <div class="pui-slider-shell">
-    <div
-      class="pui-slider"
-      data-pui-slider
-      data-min={String(min)}
-      data-max={String(max)}
-      data-step={String(step)}
-      data-disabled={disabled ? 'true' : undefined}
-      data-range={isRange ? 'true' : undefined}
-      data-initial={JSON.stringify(values)}
-      style={trackStyle}
-      {...rest}
-    >
-      <div class="pui-slider__rail" aria-hidden="true"></div>
-      <div class="pui-slider__fill" aria-hidden="true"></div>
-      {
-        values.map((v, idx) => (
-          <button
-            id={`${baseId}-thumb-${idx}`}
-            type="button"
-            class="pui-slider__thumb"
-            role="slider"
-            aria-valuemin={String(min)}
-            aria-valuemax={String(max)}
-            aria-valuenow={String(v)}
-            aria-valuetext={
-              isRange
-                ? idx === 0
-                  ? `Lower bound: ${v}`
-                  : `Upper bound: ${v}`
-                : String(v)
-            }
-            aria-label={
-              isRange
-                ? idx === 0
-                  ? `${label} (lower bound)`
-                  : `${label} (upper bound)`
-                : label
-            }
-            aria-disabled={disabled ? 'true' : undefined}
-            aria-describedby={idx === 0 ? describedBy : undefined}
-            tabindex={disabled ? -1 : 0}
-            style={`inset-inline-start: ${pct(v)}%`}
-          />
-        ))
-      }
-    </div>
-    {
-      name && !isRange && (
-        <input
-          class="pui-slider__hidden"
-          type="hidden"
-          name={name}
-          value={String(values[0])}
-        />
-      )
-    }
-    {
-      name && isRange && (
-        <Fragment>
-          <input
-            class="pui-slider__hidden"
-            data-bound="lower"
-            type="hidden"
-            name={`${name}_lower`}
-            value={String(values[0])}
-          />
-          <input
-            class="pui-slider__hidden"
-            data-bound="upper"
-            type="hidden"
-            name={`${name}_upper`}
-            value={String(values[1])}
-          />
-        </Fragment>
-      )
-    }
-  </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 { mountSlider } from '@pienter/ui/utils/controllers/slider.js';
-
-  function mountAll(): void {
-    const tracks = document.querySelectorAll<HTMLElement>('[data-pui-slider]');
-    tracks.forEach((track) => {
-      if (track.dataset.vSliderMounted === 'true') return;
-      let initial: number | [number, number] | undefined;
-      if (track.dataset.initial) {
-        try {
-          const parsed: unknown = JSON.parse(track.dataset.initial);
-          if (
-            Array.isArray(parsed) &&
-            parsed.length === 2 &&
-            parsed.every((v) => typeof v === 'number')
-          ) {
-            initial = [parsed[0] as number, parsed[1] as number];
-          } else if (
-            Array.isArray(parsed) &&
-            parsed.length === 1 &&
-            typeof parsed[0] === 'number'
-          ) {
-            initial = parsed[0];
-          }
-        } catch {
-          initial = undefined;
-        }
-      }
-      mountSlider(track, { initialValue: initial });
-      track.dataset.vSliderMounted = 'true';
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
-  } else {
-    mountAll();
-  }
-</script>

package/components/form/switch/Switch.astro

@@ -1,75 +0,0 @@
----
-import './switch.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  checked = false,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('switch');
-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-layout="inline" data-status={computedStatus}>
-  <input
-    class="pui-switch"
-    type="checkbox"
-    role="switch"
-    id={inputId}
-    name={name}
-    checked={checked}
-    disabled={disabled}
-    aria-checked={checked ? 'true' : 'false'}
-    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/tags-input/TagsInput.astro

@@ -1,153 +0,0 @@
----
-import './tags-input.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  /**
-   * Initial tags array. Astro renders the pill DOM and seeds the
-   * controller via `data-initial-tags` so post-mount `mountTagsInput`
-   * stays in sync without re-reading attributes.
-   */
-  value?: string[];
-  placeholder?: string;
-  disabled?: boolean;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-  maxTags?: number;
-  separators?: string[];
-}
-
-const {
-  id,
-  label,
-  name,
-  value = [],
-  placeholder,
-  disabled = false,
-  hint,
-  errors = [],
-  status,
-  maxTags,
-  separators,
-  ...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;
-
-const maxReached = maxTags !== undefined && value.length >= maxTags;
----
-
-<div class="pui-field" data-status={computedStatus}>
-  <label class="pui-field__label" for={inputId}>
-    {label}
-  </label>
-  <div
-    class="pui-tags-input"
-    data-pui-tags-input
-    data-initial-tags={JSON.stringify(value)}
-    data-max-tags={maxTags !== undefined ? String(maxTags) : undefined}
-    data-separators={separators ? JSON.stringify(separators) : undefined}
-    data-disabled={disabled ? 'true' : undefined}
-  >
-    {
-      value.map((tag) => (
-        <span class="pui-tags-input__tag" data-tag-value={tag}>
-          <span class="pui-tags-input__tag-label">{tag}</span>
-          <button
-            type="button"
-            class="pui-tags-input__tag-remove"
-            aria-label={`Remove tag ${tag}`}
-            data-tags-remove
-            disabled={disabled}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </span>
-      ))
-    }
-    <input
-      class="pui-tags-input__entry"
-      type="text"
-      id={inputId}
-      name={name}
-      placeholder={placeholder}
-      disabled={disabled || maxReached}
-      aria-invalid={hasErrors ? 'true' : undefined}
-      aria-describedby={describedBy}
-      {...rest}
-    />
-  </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 { mountTagsInput } from '@pienter/ui/utils/controllers/tags-input.js';
-
-  // Hoisted module script — Astro de-dupes across instances. Mount on
-  // every [data-pui-tags-input] wrapper present at DOM-ready.
-  function mountAll(): void {
-    const wrappers = document.querySelectorAll<HTMLElement>(
-      '[data-pui-tags-input]',
-    );
-    wrappers.forEach((wrapper) => {
-      if (wrapper.dataset.vTagsInputMounted === 'true') return;
-      const maxTagsRaw = wrapper.dataset.maxTags;
-      const maxTags =
-        maxTagsRaw === undefined ? undefined : Number.parseInt(maxTagsRaw, 10);
-      let separators: string[] | undefined;
-      if (wrapper.dataset.separators) {
-        try {
-          const parsed: unknown = JSON.parse(wrapper.dataset.separators);
-          if (Array.isArray(parsed)) {
-            separators = parsed.filter(
-              (v): v is string => typeof v === 'string',
-            );
-          }
-        } catch {
-          separators = undefined;
-        }
-      }
-      mountTagsInput(wrapper, {
-        maxTags: Number.isFinite(maxTags) ? maxTags : undefined,
-        separators,
-      });
-      wrapper.dataset.vTagsInputMounted = 'true';
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
-  } else {
-    mountAll();
-  }
-</script>

package/components/form/text-input/TextInput.astro

@@ -1,84 +0,0 @@
----
-import './text-input.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  type?: string;
-  value?: string;
-  autocomplete?: string;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-}
-
-const {
-  id,
-  label,
-  name,
-  type = 'text',
-  value = '',
-  autocomplete,
-  required = false,
-  disabled = false,
-  placeholder,
-  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}
-    autocomplete={autocomplete}
-    required={required}
-    disabled={disabled}
-    placeholder={placeholder}
-    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/textarea/Textarea.astro

@@ -1,86 +0,0 @@
----
-import './textarea.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  label: string;
-  name?: string;
-  value?: string;
-  rows?: number;
-  autocomplete?: string;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  hint?: string;
-  errors?: string[];
-  status?: 'error' | 'success';
-  autoResize?: boolean;
-}
-
-const {
-  id,
-  label,
-  name,
-  value = '',
-  rows,
-  autocomplete,
-  required = false,
-  disabled = false,
-  placeholder,
-  hint,
-  errors = [],
-  status,
-  autoResize = false,
-  ...rest
-} = Astro.props;
-
-const inputId = id ?? generateId('textarea');
-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>
-  <textarea
-    class="pui-textarea"
-    id={inputId}
-    name={name}
-    rows={rows}
-    autocomplete={autocomplete}
-    required={required}
-    disabled={disabled}
-    placeholder={placeholder}
-    style={autoResize ? 'field-sizing: content' : undefined}
-    aria-invalid={hasErrors ? 'true' : undefined}
-    aria-describedby={describedBy}
-    {...rest}>{value}</textarea
-  >
-  {
-    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>