@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/forms/input/input.scss

@@ -0,0 +1,547 @@
+/// Input component styles
+/// Wrapper div pattern with floating label, error shake, success state,
+/// character counter, clear button, loading spinner, and polished prefix/suffix.
+///
+/// Uses stable border-width to prevent layout shift on hover/focus.
+/// State changes only modify border-color; focus emphasis via box-shadow ring().
+///
+/// @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;
+
+// ============================================
+// Base wrapper
+// ============================================
+
+.ui-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  cursor: text;
+  position: relative;
+  inline-size: 100%;
+  --_scroll-bg: var(--color-surface);
+  background-color: var(--_scroll-bg);
+
+  // Stable border — width never changes across states to prevent layout shift.
+  border: borders.border(control);
+
+  // Motion-safe transitions — entrance easing on shadow for smooth focus ring
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-border),
+      box-shadow var(--motion-duration-normal) var(--motion-easing-entrance),
+      var(--motion-transition-color),
+      background-color var(--motion-duration-fast) var(--motion-easing-standard);
+  }
+
+  // Caret color, error background wash, adaptive selection color
+  @include form-anim.form-field-polish('.ui-input-field');
+
+  // Spinner inherits error/success color
+  @include form-anim.form-spinner-adaptive('.ui-input-loading');
+
+  // Required asterisk on floating label
+  @include form-anim.form-required-indicator('.ui-input-label');
+}
+
+// ============================================
+// Inner input — fully reset
+// ============================================
+
+.ui-input-field {
+  appearance: none;
+  border: none;
+  background: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  flex: 1;
+  min-inline-size: 0;
+  inline-size: 100%;
+
+  &::placeholder {
+    color: var(--color-text-muted);
+    opacity: shared.$placeholder-opacity;
+
+    @include a11y.motion-safe {
+      transition: opacity var(--motion-duration-fast)
+        var(--motion-easing-standard);
+    }
+  }
+
+  // On-brand text selection
+  &::selection {
+    background-color: color-mix(
+      in oklch,
+      var(--color-primary) calc(var(--state-selected-opacity) * 100%),
+      transparent
+    );
+    color: inherit;
+  }
+
+  // Override browser autofill yellow/blue background.
+  // Uses explicit tokens instead of inherit — browser autofill pseudo-element
+  // resolves inherit against its own forced style, not the element's computed style.
+  // Hardcoded box-shadow spread (1000px) and transition delay (5000s) are
+  // intentional browser hacks — no design token equivalents exist for these.
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--color-text);
+    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  // Hide number input spinners — cleaner look
+  &[type='number'] {
+    appearance: textfield;
+    -moz-appearance: textfield; // Firefox
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+
+// ============================================
+// Focus — bridge inner input focus to wrapper
+// Subtle background tint so active field stands out from siblings.
+// Excluded on readonly — readonly inputs are focusable but shouldn't
+// visually react like editable ones.
+// ============================================
+
+.ui-input:not([data-readonly]):focus-within {
+  border-color: var(--color-focus-ring);
+  outline: none;
+  // Zero offset — ring hugs the border (no double-border gap)
+  --ring-offset: 0px;
+  // Ring + soft colored glow behind it for depth (Stripe/Linear style).
+  // Glow spread matches ring-width, intensity from state-selected-opacity.
+  box-shadow:
+    borders.ring(),
+    0 0 var(--shadow-base-blur) var(--ring-width)
+      color-mix(
+        in oklch,
+        var(--ring-color) calc(var(--state-selected-opacity) * 100%),
+        transparent
+      );
+  background-color: var(--color-surface-bright);
+}
+
+// ============================================
+// Hover (not disabled, not readonly)
+// ============================================
+
+.ui-input:hover:not([data-disabled]):not([data-readonly]):not(:focus-within) {
+  background-color: var(--color-surface-bright);
+}
+
+.ui-input:hover:not([data-disabled]):not([data-readonly]):not(
+    :focus-within
+  ):not([data-error]):not([data-success]) {
+  border-color: var(--color-primary);
+}
+
+// ============================================
+// Sizes — font one step below control size
+// ============================================
+
+@each $size in shared.$control-sizes {
+  .ui-input[data-size='#{$size}'] {
+    font-size: map.get(shared.$control-font-sizes, $size);
+    min-block-size: var(--control-min-height-#{$size});
+    --_input-icon-size: #{map.get(shared.$control-icon-sizes, $size)};
+    --_form-btn-size: #{map.get(shared.$control-btn-sizes, $size)};
+  }
+}
+
+// ============================================
+// Success state
+// ============================================
+
+.ui-input[data-success] {
+  border-color: var(--color-success);
+
+  &:focus-within {
+    border-color: var(--color-success);
+    --ring-color: var(--color-success);
+  }
+}
+
+// ============================================
+// Error state (after success — source order wins)
+// ============================================
+
+.ui-input[data-error] {
+  border-color: var(--color-danger);
+
+  &:focus-within {
+    border-color: var(--color-danger);
+    --ring-color: var(--color-danger);
+  }
+}
+
+// ============================================
+// Error shake animation (shared keyframe)
+// ============================================
+
+@include form-anim.form-shake('.ui-input-shake');
+
+// ============================================
+// Helper + Error text — sit below the input in normal flow
+// (wrapped in a container div by Input.ts when needed)
+// ============================================
+
+// Helper + error text use shared .ui-form-helper / .ui-form-error classes
+// from _form-animations.scss — no component-specific overrides needed.
+
+// ============================================
+// Disabled state
+// ============================================
+
+.ui-input[data-disabled] {
+  opacity: var(--state-disabled-opacity);
+  cursor: not-allowed;
+
+  .ui-input-field {
+    cursor: not-allowed;
+  }
+}
+
+// ============================================
+// Readonly state
+// ============================================
+
+.ui-input[data-readonly] {
+  background-color: var(--color-surface-variant);
+
+  .ui-input-field {
+    cursor: default;
+  }
+}
+
+// ============================================
+// Floating Label — Inner Float Pattern
+// Label starts centered inside the input (like a placeholder), then
+// floats to the top-inside of the container on focus/fill.
+// The label NEVER leaves the container — no border interaction, no
+// notch, no background-color hack, no font-alignment fragility.
+//
+// Layout: extra padding-top makes room for the floated label.
+// Animation: `inset-block-start` + `transform` animate together so the label
+// visually rises from the placeholder position to the top of the field.
+// ============================================
+
+.ui-input[data-floating-label] {
+  // Asymmetric padding: extra top to make room for the floated mini-label,
+  // tighter bottom so input text sits lower. Uses the shorthand `padding`
+  // to guarantee it overrides the utility class (.u-control-*).
+  position: relative;
+}
+
+// Asymmetric padding per size — floating label needs extra block-start for the
+// mini-label and tighter block-end.  The u-control-* utility class is NOT applied
+// to floating-label inputs (skipped in Input.ts), so no specificity battle here.
+@each $size in shared.$control-sizes {
+  .ui-input[data-floating-label][data-size='#{$size}'] {
+    padding: calc(var(--control-padding-y-#{$size}) + 1em)
+      var(--control-padding-x-#{$size})
+      calc(var(--control-padding-y-#{$size}) * 0.4)
+      var(--control-padding-x-#{$size});
+  }
+}
+
+.ui-input-label {
+  position: absolute;
+  // Resting: vertically centered in the full container
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  transform-origin: inline-start top;
+  font-size: inherit;
+  color: var(--color-text-muted);
+  pointer-events: none;
+  white-space: nowrap;
+  line-height: 1;
+
+  @include a11y.motion-safe {
+    transition:
+      inset-block-start var(--motion-duration-normal)
+        var(--motion-easing-entrance),
+      transform var(--motion-duration-normal) var(--motion-easing-entrance),
+      padding-block-start var(--motion-duration-normal)
+        var(--motion-easing-entrance),
+      font-size var(--motion-duration-normal) var(--motion-easing-entrance),
+      color var(--motion-duration-fast) var(--motion-easing-standard);
+  }
+}
+
+// Label horizontal position per size
+@each $size in shared.$control-sizes {
+  .ui-input[data-size='#{$size}'] .ui-input-label {
+    inset-inline-start: var(--control-padding-x-#{$size});
+  }
+}
+
+// Floating state — label anchors to top-inside of the container.
+// Uses inset-block-start instead of translateY so it's padding-relative,
+// not height-relative — immune to font metric variance.
+.ui-input:not([data-readonly]):focus-within .ui-input-label,
+.ui-input[data-filled] .ui-input-label,
+.ui-input[data-readonly] .ui-input-label {
+  // Move to the top of the padding area
+  inset-block-start: 0;
+  transform: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-primary);
+  letter-spacing: var(--body-letter-spacing);
+  // Small vertical nudge so label text aligns with the top padding area
+  padding-block-start: var(--space-xs);
+}
+
+// Filled but not focused — muted label color
+.ui-input[data-filled]:not(:focus-within) .ui-input-label,
+.ui-input[data-readonly] .ui-input-label {
+  color: var(--color-text-muted);
+}
+
+// Error overrides label color
+.ui-input[data-error]:not([data-readonly]):focus-within .ui-input-label,
+.ui-input[data-error][data-filled] .ui-input-label {
+  color: var(--color-danger);
+}
+
+// Success overrides label color (error wins when both present)
+// Darkened via color-mix for WCAG 1.4.3 text contrast (≥4.5:1 vs surface)
+.ui-input[data-success]:not([data-error]):not([data-readonly]):focus-within
+  .ui-input-label,
+.ui-input[data-success]:not([data-error])[data-filled] .ui-input-label {
+  color: var(
+    --color-success-text,
+    color-mix(in oklch, var(--color-success) 66%, var(--color-text))
+  );
+}
+
+// Hide placeholder when label is in resting position (label covers it).
+// Readonly is excluded — label is always floated so placeholder is always visible.
+.ui-input[data-floating-label]:not(:focus-within):not([data-filled]):not(
+    [data-readonly]
+  )
+  .ui-input-field::placeholder {
+  opacity: 0;
+}
+
+// ============================================
+// Prefix / Suffix — polished grouping
+// ============================================
+
+.ui-input-prefix,
+.ui-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  line-height: 1;
+  background-color: var(--color-surface-variant);
+  align-self: stretch;
+}
+
+// Size-specific padding and negative margins for edge-to-edge grouping
+@each $size in shared.$control-sizes {
+  .ui-input[data-size='#{$size}'] {
+    > .ui-input-prefix {
+      margin-inline-start: calc(-1 * var(--control-padding-x-#{$size}));
+      margin-block: calc(-1 * var(--control-padding-y-#{$size}));
+      padding-inline: var(--space-sm);
+      border-inline-end: var(--border-width-hairline) solid var(--color-border);
+    }
+
+    > .ui-input-suffix {
+      margin-inline-end: calc(-1 * var(--control-padding-x-#{$size}));
+      margin-block: calc(-1 * var(--control-padding-y-#{$size}));
+      padding-inline: var(--space-sm);
+      border-inline-start: var(--border-width-hairline)
+        solid
+        var(--color-border);
+    }
+  }
+}
+
+// Border radius on exposed corners
+.ui-input-prefix {
+  border-start-start-radius: var(--radius-md);
+  border-end-start-radius: var(--radius-md);
+}
+
+.ui-input-suffix {
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+}
+
+// ============================================
+// Character Counter
+// ============================================
+
+.ui-input-counter {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  padding-inline-start: var(--space-xs);
+  white-space: nowrap;
+  // Hidden until input has value — "0/50" on empty field is noise
+  opacity: 0;
+
+  @include a11y.motion-safe {
+    transition:
+      color var(--motion-duration-fast) var(--motion-easing-standard),
+      opacity var(--motion-duration-normal) var(--motion-easing-standard);
+  }
+
+  // Fade in when wrapper has value or is focused (not readonly)
+  .ui-input[data-filled] &,
+  .ui-input:not([data-readonly]):focus-within & {
+    opacity: 1;
+  }
+}
+
+.ui-input-counter-warn {
+  color: var(--color-warning);
+}
+
+.ui-input-counter-danger {
+  color: var(--color-danger);
+  font-weight: var(--font-weight-medium);
+}
+
+// ============================================
+// Clear Button
+// ============================================
+
+.ui-input-clear {
+  @include form-anim.form-inline-button(var(--color-text));
+}
+
+// ============================================
+// State Icons (success / error)
+// ============================================
+
+.ui-input-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_input-icon-size);
+  block-size: var(--_input-icon-size);
+  line-height: 1;
+
+  @include a11y.motion-safe {
+    transition: var(--motion-transition-color);
+  }
+}
+
+.ui-input-state-icon-success {
+  color: var(--color-success);
+}
+
+// Applied on false→true transition (JS toggles this class)
+@include a11y.motion-safe {
+  .ui-input-state-icon-pop {
+    animation: var(--motion-animation-fade-scale-in)
+      var(--motion-duration-normal) var(--motion-easing-entrance);
+  }
+}
+
+.ui-input-state-icon-error {
+  color: var(--color-danger);
+}
+
+// ============================================
+// Password Toggle
+// ============================================
+
+.ui-input-password-toggle {
+  @include form-anim.form-inline-button(var(--color-text));
+
+  // Override border-radius — password toggle is rectangular, not circular
+  & {
+    border-radius: var(--radius-sm);
+  }
+}
+
+// ============================================
+// Loading Spinner
+// ============================================
+
+.ui-input.ui-input-loading::after {
+  content: '';
+  flex-shrink: 0;
+  inline-size: var(--_input-icon-size);
+  block-size: var(--_input-icon-size);
+  border: var(--border-width-thin) solid var(--color-text-muted);
+  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(--color-text-muted);
+    opacity: shared.$spinner-reduced-opacity;
+  }
+}
+
+// Loading state: truly hide action buttons (not just opacity:0)
+// so they don't receive focus or occupy space while spinner shows.
+.ui-input.ui-input-loading > .ui-input-clear,
+.ui-input.ui-input-loading > .ui-input-password-toggle {
+  display: none;
+}
+
+// Disabled / readonly: truly hide clear button.
+// Users cannot interact, so the button should not be visible or focusable.
+.ui-input[data-disabled] > .ui-input-clear,
+.ui-input[data-readonly] > .ui-input-clear {
+  display: none;
+}
+
+// ============================================
+// High Contrast / Forced Colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-input {
+    border: var(--border-width-hairline) solid ButtonText;
+  }
+
+  .ui-input[data-disabled] {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .ui-input:not([data-readonly]):focus-within {
+    @include a11y.focus-outline(Highlight);
+  }
+
+  .ui-input-label {
+    color: inherit;
+  }
+
+  .ui-input-clear,
+  .ui-input-password-toggle {
+    border: var(--border-width-hairline) solid ButtonText;
+    color: ButtonText;
+    background: Field;
+  }
+}

package/dist/atoms/forms/radio/Radio.d.ts

@@ -0,0 +1,54 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.radio",
+  "title": "<Radio> Form Atom",
+  "category": "feature"
+}
+*/
+import { type FormControlBaseProps } from '../../../shared/types';
+/** @codexApi {"parent":"pithy.ui-kit.radio","name":"RadioProps","stability":"stable","signature":"interface RadioProps extends FormControlBaseProps"} */
+export interface RadioProps extends FormControlBaseProps {
+    /** Radio name attribute — required for grouping (mutual exclusion + arrow nav) */
+    name: string;
+    /** Submitted value when this radio is selected */
+    value: string;
+    /** Checked state — static boolean or signal accessor for controlled radio */
+    checked?: boolean | (() => boolean);
+    /** Fires whenever the checked state changes to true */
+    onChange?: (checked: boolean, e: Event) => void;
+    /** Fires when the radio loses focus */
+    onBlur?: (e: FocusEvent) => void;
+    /** Fires when the radio gains focus */
+    onFocus?: (e: FocusEvent) => void;
+}
+/**
+ * Accessible radio button atom.
+ *
+ * Renders a `<label class="ui-radio">` wrapping a native `<input type="radio">`,
+ * a custom `<span class="ui-radio-circle">` (with an inner dot drawn from inline
+ * SVG), and a visible `<span class="ui-radio-label">`. Supports error/success
+ * states (with shake), helper/error text, loading, and full a11y wiring.
+ *
+ * Unlike checkboxes, a radio cannot be un-checked by the user — selecting
+ * another radio in the same `name` group un-checks the previous one. The
+ * native input is visually hidden (sr-only) but kept focusable so
+ * `<label>`-forwarded clicks and keyboard interaction still work. Arrow-key
+ * navigation across siblings with the same `name` is handled explicitly here
+ * because the sr-only technique prevents the UA from finding siblings via
+ * default tab-stops.
+ *
+ * This is a pure visual atom — no validation logic. Error/success are driven
+ * externally via props.
+ *
+ * @example
+ * ```html
+ * <Radio label="'Cheese'" name="'topping'" value="'cheese'" />
+ * <Radio label="'Subscribe'" name="'plan'" value="'pro'" checked="isPro" onChange="select" />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.radio","name":"Radio","stability":"stable","signature":"(props: RadioProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Radio({ id: externalId, name, value, checked, disabled, readonly: readonlyProp, required, error, errorMessage, helperText, success, size: rawSize, label, loading, onChange, onBlur, onFocus, }: RadioProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Radio.d.ts.map

package/dist/atoms/forms/radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/atoms/forms/radio/Radio.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAC;AAc/B,yJAAyJ;AACzJ,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACtD,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACpC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChD,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qLAAqL;AACrL,wBAAgB,KAAK,CAAC,EACpB,EAAE,EAAE,UAAU,EACd,IAAI,EACJ,KAAK,EACL,OAAe,EACf,QAAgB,EAChB,QAAQ,EAAE,YAAoB,EAC9B,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,UAAU,EACV,OAAe,EACf,IAAI,EAAE,OAAc,EACpB,KAAK,EACL,OAAe,EACf,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,UAAU,GAAG;IAAE,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA4R1E"}