@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/forms/radio/radio.scss

@@ -0,0 +1,459 @@
+/// Radio component styles — premium edition.
+/// Native input is visually hidden; the .ui-radio-circle element renders the
+/// outer ring and an inline SVG inner dot that scales in on checked.
+///
+/// @group atoms/forms
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '@pithyjs/design-system/borders/styles/tokens' as borders;
+@use '../../../shared/tokens' as shared;
+@use '../../../shared/form-animations' as form-anim;
+
+// ============================================
+// Wrapper <label>
+// ============================================
+
+.ui-radio {
+  --_cmp-color: var(--color-primary);
+  --_cmp-color-hover: var(--color-primary-hover);
+
+  @include a11y.touch-target-pseudo; // WCAG 2.5.5 — 44×44 invisible hit area
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs); // Lovers — circle ↔ label
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  color: var(--color-text);
+
+  @include a11y.motion-safe {
+    transition: var(--motion-transition-color);
+  }
+}
+
+// Field wrapper (when helper/error is rendered)
+// No gap — child .ui-form-helper / .ui-form-error already carry
+// margin-block-start: var(--space-xs), consistent with other form atoms.
+.ui-radio-field {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+// ============================================
+// Native input — visually hidden but functional
+// ============================================
+
+.ui-radio-input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ============================================
+// Custom circle
+// ============================================
+
+.ui-radio-circle {
+  --_cmp-shadow: 0 0 transparent;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_cmp-box-size);
+  block-size: var(--_cmp-box-size);
+  background-color: var(--color-surface);
+  border: borders.border(control);
+  border-radius: 50%;
+  position: relative;
+  color: var(--_cmp-color);
+  box-shadow: var(--_cmp-shadow);
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background),
+      var(--motion-transition-border),
+      var(--motion-transition-color),
+      box-shadow var(--motion-duration-normal) var(--motion-easing-entrance);
+  }
+}
+
+// ============================================
+// SVG inner dot — scales in on checked
+// ============================================
+
+.ui-radio-dot {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  overflow: visible;
+
+  circle {
+    transform-origin: center;
+    transform: scale(0);
+    opacity: 0;
+
+    @include a11y.motion-safe {
+      // Springy easing — dot overshoots slightly and settles, feels physical.
+      transition:
+        transform var(--motion-duration-slow) var(--motion-easing-springy),
+        opacity var(--motion-duration-normal) var(--motion-easing-entrance);
+    }
+  }
+}
+
+// ============================================
+// Visible label text
+// ============================================
+
+.ui-radio-label {
+  font-size: var(--_cmp-font-size);
+  line-height: var(--leading-snug);
+  color: inherit;
+
+  &::selection {
+    background-color: color-mix(
+      in oklch,
+      var(--_cmp-color) calc(var(--state-selected-opacity) * 100%),
+      transparent
+    );
+    color: inherit;
+  }
+}
+
+// ============================================
+// Sizes — set custom props per control size
+// ============================================
+
+@each $size in shared.$control-sizes {
+  .ui-radio[data-size='#{$size}'] {
+    --_cmp-box-size: #{map.get(shared.$control-indicator-sizes, $size)};
+    --_cmp-font-size: #{map.get(shared.$control-font-sizes, $size)};
+  }
+}
+
+// ============================================
+// Checked state — fills inner dot, tints ring
+// ============================================
+
+.ui-radio:has(.ui-radio-input:checked) .ui-radio-circle {
+  border-color: var(--_cmp-color);
+  --_cmp-shadow: 0 var(--shadow-base-offset-y) var(--shadow-base-blur)
+    calc(var(--shadow-base-offset-y) * -1)
+    color-mix(
+      in oklch,
+      var(--_cmp-color) #{shared.$checked-glow-opacity},
+      transparent
+    );
+
+  .ui-radio-dot circle {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@include form-anim.form-pop(
+  '.ui-radio:has(.ui-radio-input:checked) .ui-radio-circle'
+);
+
+// ============================================
+// Hover (not disabled / not readonly)
+// ============================================
+
+.ui-radio:hover:not([data-disabled]):not([data-readonly]):not(
+    :has(.ui-radio-input:disabled)
+  )
+  .ui-radio-circle {
+  border-color: var(--_cmp-color);
+}
+
+// Ghost dot preview — when hovering an unchecked radio, show a faint hint
+// of the inner dot so users know what will appear when they click.
+// Visual properties live outside motion-safe so the preview is visible even
+// in reduced-motion mode (the dot's transition is already gated in its
+// parent rule, so in reduced-motion the ghost appears instantly).
+.ui-radio:hover:not([data-disabled]):not([data-readonly]):not(
+    :has(.ui-radio-input:disabled)
+  ):not(:has(.ui-radio-input:checked))
+  .ui-radio-dot
+  circle {
+  transform: scale(shared.$ghost-dot-scale);
+  opacity: shared.$ghost-dot-opacity;
+}
+
+.ui-radio:hover:not([data-disabled]):not([data-readonly]):not(
+    :has(.ui-radio-input:disabled)
+  ):has(.ui-radio-input:checked)
+  .ui-radio-circle {
+  border-color: var(--_cmp-color-hover);
+  color: var(--_cmp-color-hover);
+}
+
+// ============================================
+// Focus — bridge native input focus to the circle
+// ============================================
+
+.ui-radio:has(.ui-radio-input:focus-visible) .ui-radio-circle {
+  outline: none;
+  --ring-offset: #{shared.$focus-ring-offset};
+  box-shadow: borders.ring(), var(--_cmp-shadow);
+}
+
+// ============================================
+// Active / pressed feedback
+// ============================================
+
+.ui-radio:not([data-disabled]):not([data-readonly]):not(
+    :has(.ui-radio-input:disabled)
+  ):active
+  .ui-radio-circle {
+  @include a11y.state-background(pressed, var(--_cmp-color));
+
+  @include a11y.motion-safe {
+    transform: scale(var(--motion-scale-big));
+    transition: transform var(--motion-duration-fast)
+      var(--motion-easing-standard);
+  }
+}
+
+// ============================================
+// Success state
+// ============================================
+
+.ui-radio[data-success] {
+  --_cmp-color: var(--color-success);
+  --_cmp-color-hover: var(--color-success-hover, var(--color-success));
+}
+
+.ui-radio[data-success] .ui-radio-circle {
+  border-color: var(--_cmp-color);
+}
+
+.ui-radio[data-success]:has(.ui-radio-input:focus-visible) .ui-radio-circle {
+  --ring-color: var(--color-success);
+  box-shadow: borders.ring(), var(--_cmp-shadow);
+}
+
+// ============================================
+// Error state (after success — source order wins)
+// ============================================
+
+.ui-radio[data-error] {
+  --_cmp-color: var(--color-danger);
+  --_cmp-color-hover: var(--color-danger-hover, var(--color-danger));
+}
+
+.ui-radio[data-error] .ui-radio-circle {
+  border-color: var(--_cmp-color);
+}
+
+.ui-radio[data-error]:has(.ui-radio-input:focus-visible) .ui-radio-circle {
+  --ring-color: var(--color-danger);
+  box-shadow: borders.ring(), var(--_cmp-shadow);
+}
+
+.ui-radio[data-error] .ui-radio-label {
+  color: var(--color-danger);
+}
+
+// ============================================
+// Error shake animation
+// ============================================
+
+@include form-anim.form-shake('.ui-radio-shake');
+
+// ============================================
+// Disabled state
+// ============================================
+
+.ui-radio[data-disabled] {
+  opacity: var(--state-disabled-opacity);
+  filter: saturate(shared.$disabled-saturation);
+  cursor: not-allowed;
+
+  .ui-radio-input {
+    cursor: not-allowed;
+  }
+}
+
+// Fieldset[disabled] cascade — when a radio is disabled via a parent
+// <fieldset disabled>, the native input is :disabled but the wrapper has no
+// [data-disabled] attribute. Opacity is already handled by the group's
+// .ui-radio-group[data-disabled] rule; we only add cursor + desaturation
+// so individual radios look properly deactivated.
+.ui-radio:not([data-disabled]):has(.ui-radio-input:disabled) {
+  filter: saturate(shared.$disabled-saturation);
+  cursor: not-allowed;
+
+  .ui-radio-input {
+    cursor: not-allowed;
+  }
+}
+
+// ============================================
+// Readonly state — looks normal, blocks toggling
+// ============================================
+
+.ui-radio[data-readonly] {
+  cursor: default;
+
+  .ui-radio-input {
+    cursor: default;
+  }
+
+  // Only override the unchecked background — checked radios keep their
+  // --color-primary ring so the dot stays legible.
+  .ui-radio-input:not(:checked) + .ui-radio-circle {
+    background-color: var(--color-surface-variant);
+  }
+}
+
+// ============================================
+// Required indicator on label text
+// ============================================
+
+.ui-radio[data-required] .ui-radio-label::after {
+  content: ' *';
+  color: var(--color-danger);
+  font-weight: var(--font-weight-medium);
+}
+
+// ============================================
+// Loading spinner — overlays the circle
+// ============================================
+
+.ui-radio.ui-radio-loading .ui-radio-dot {
+  opacity: 0;
+}
+
+.ui-radio.ui-radio-loading:not([data-error]):not([data-success])
+  .ui-radio-circle {
+  border-color: var(--color-primary);
+}
+
+.ui-radio.ui-radio-loading .ui-radio-circle {
+  --_cmp-spinner-color: var(--color-primary);
+}
+
+.ui-radio[data-error].ui-radio-loading .ui-radio-circle {
+  --_cmp-spinner-color: var(--color-danger);
+}
+
+// Scoped with :not([data-error]) so error always wins when both flags
+// are set (matches the circle border precedence contract).
+.ui-radio[data-success]:not([data-error]).ui-radio-loading .ui-radio-circle {
+  --_cmp-spinner-color: var(--color-success);
+}
+
+.ui-radio.ui-radio-loading .ui-radio-circle::before {
+  content: '';
+  position: absolute;
+  inset: shared.$spinner-inset;
+  border: var(--border-width-medium) solid var(--_cmp-spinner-color);
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+
+  @include a11y.motion-safe {
+    animation: var(--motion-animation-spin) var(--motion-duration-deliberate)
+      linear infinite;
+  }
+
+  @include a11y.motion-reduced {
+    border-inline-end-color: var(--_cmp-spinner-color);
+    opacity: shared.$spinner-reduced-opacity;
+  }
+}
+
+// State icon is kept detached (never in the DOM) — the custom circle conveys
+// all state. No CSS rule needed.
+
+// Helper + error text use shared .ui-form-helper / .ui-form-error classes.
+
+// ============================================
+// Forced colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-radio-circle {
+    border: var(--border-width-hairline) solid ButtonText;
+    background: Field;
+  }
+
+  .ui-radio:has(.ui-radio-input:checked) .ui-radio-circle {
+    border-color: Highlight;
+    color: Highlight;
+  }
+
+  .ui-radio:has(.ui-radio-input:checked) .ui-radio-dot circle {
+    fill: Highlight;
+  }
+
+  .ui-radio[data-disabled] {
+    color: GrayText;
+
+    .ui-radio-circle {
+      border-color: GrayText;
+    }
+  }
+
+  // Fieldset[disabled] cascade — when disabled via a parent fieldset, the
+  // wrapper has no [data-disabled] but the input matches :disabled.
+  .ui-radio:not([data-disabled]):has(.ui-radio-input:disabled) {
+    color: GrayText;
+
+    .ui-radio-circle {
+      border-color: GrayText;
+    }
+  }
+
+  .ui-radio:has(.ui-radio-input:focus-visible) .ui-radio-circle {
+    @include a11y.focus-outline(Highlight);
+  }
+}
+
+// ============================================
+// RadioGroup — fieldset wrapper
+// ============================================
+
+.ui-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm); // Close Friends — controls in a group
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
+.ui-radio-group-legend {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  margin-block-end: var(--space-xs);
+  padding: 0;
+}
+
+// Helper / error text reuses shared .ui-form-helper / .ui-form-error classes
+// from _form-animations.scss — no group-specific overrides needed.
+
+.ui-radio-group[data-disabled] {
+  opacity: var(--state-disabled-opacity);
+}
+
+@include a11y.forced-colors {
+  .ui-radio-group[data-error] .ui-radio-group-legend {
+    color: inherit;
+  }
+}

package/dist/atoms/forms/select/Select.d.ts

@@ -0,0 +1,57 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.select",
+  "title": "<Select> Form Atom",
+  "category": "feature"
+}
+*/
+import { type FormControlBaseProps } from '../../../shared/types';
+import { type SelectOption } from '../../../shared/select';
+/** @codexApi {"parent":"pithy.ui-kit.select","name":"SelectProps","stability":"stable","signature":"interface SelectProps extends FormControlBaseProps"} */
+export interface SelectProps extends FormControlBaseProps {
+    /** Select name attribute for form submission */
+    name?: string;
+    /** Options to display in the dropdown. Option values must be non-empty strings. */
+    options: SelectOption[] | (() => SelectOption[]);
+    /** Selected value — static string or signal accessor for controlled select */
+    value?: string | (() => string);
+    /** Placeholder text shown when no option is selected */
+    placeholder?: string;
+    /** Enable search/filter input in the dropdown (default: false) */
+    searchable?: boolean;
+    /** Show clear button when a value is selected (default: false) */
+    clearable?: boolean;
+    /** Fires when the selected value changes. An empty string indicates "cleared" (no selection). */
+    onChange?: (value: string, option: SelectOption | undefined) => void;
+    /** Fires when select loses focus */
+    onBlur?: (e: FocusEvent) => void;
+    /** Fires when the trigger gains focus */
+    onFocus?: (e: FocusEvent) => void;
+}
+/**
+ * Accessible custom select atom with searchable dropdown, keyboard navigation,
+ * and polished micro-interactions.
+ *
+ * Renders a trigger button with a dropdown listbox. Supports search filtering,
+ * success/error states with shake animation and state icons, helper text, error
+ * message, clear button, and loading spinner.
+ *
+ * This is a pure visual atom — no validation logic. Error/success states are
+ * driven externally via props.
+ *
+ * @param props - Select configuration
+ * @returns `{ el, destroy }` — mounted element and cleanup function
+ *
+ * @example
+ * ```html
+ * <Select label="'Country'" options="countries" placeholder="'Select a country'" />
+ * <Select label="'Status'" options="statuses" searchable="true" />
+ * <Select label="'Priority'" options="priorities" clearable="true" />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.select","name":"Select","stability":"stable","signature":"(props: SelectProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Select({ id: externalId, name, options: optionsProp, value, placeholder, disabled, readonly: readonlyProp, required, error, errorMessage, helperText, success, size: rawSize, label, searchable, clearable, loading, onChange, onBlur, onFocus, }: SelectProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Select.d.ts.map

package/dist/atoms/forms/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/atoms/forms/select/Select.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AA6B7E,4JAA4J;AAC5J,MAAM,WAAW,WAAY,SAAQ,oBAAoB;IACvD,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,OAAO,EAAE,YAAY,EAAE,GAAG,CAAC,MAAM,YAAY,EAAE,CAAC,CAAC;IACjD,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IACrE,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wLAAwL;AACxL,wBAAgB,MAAM,CAAC,EACrB,EAAE,EAAE,UAAU,EACd,IAAI,EACJ,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,YAAoB,EAC9B,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,UAAU,EACV,OAAe,EACf,IAAI,EAAE,OAAc,EACpB,KAAK,EACL,UAAkB,EAClB,SAAiB,EACjB,OAAe,EACf,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,WAAW,GAAG;IAAE,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAigB3E"}