@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/forms/textarea/textarea.scss

@@ -0,0 +1,486 @@
+/// Textarea component styles
+/// Wrapper div pattern with floating label, auto-resize, error shake,
+/// success state, character counter, clear button, loading spinner.
+///
+/// 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-textarea {
+  // Default scroll-shadow bg — overridden by error/success/focus/hover states
+  --_scroll-bg: var(--color-surface);
+  --_textarea-scrollbar-size: #{shared.$scrollbar-thumb-size};
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  cursor: text;
+  position: relative;
+  inline-size: 100%;
+  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-textarea-field');
+
+  // Spinner inherits error/success color
+  @include form-anim.form-spinner-adaptive('.ui-textarea-loading');
+
+  // Required asterisk on floating label
+  @include form-anim.form-required-indicator('.ui-textarea-label');
+}
+
+// ============================================
+// Inner textarea — fully reset
+// ============================================
+
+.ui-textarea-field {
+  appearance: none;
+  border: none;
+  background: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  inline-size: 100%;
+  resize: vertical;
+
+  &::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;
+  }
+}
+
+// ============================================
+// Auto-resize — CSS field-sizing progressive enhancement
+// ============================================
+
+.ui-textarea[data-auto-resize] .ui-textarea-field {
+  field-sizing: content;
+  // Use auto, not hidden — field-sizing:content grows to fit so no scrollbar
+  // appears until max-block-size caps growth, then scrollbar activates.
+  overflow-y: auto;
+  resize: none;
+}
+
+// Thin scrollbar for long content
+// Note: scroll-shadows mixin is NOT used here because the field must stay
+// background: none (transparent) so the wrapper's background (including
+// error/success wash and hover tint) shows through without a blink.
+.ui-textarea-field {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+
+  &::-webkit-scrollbar {
+    inline-size: var(--_textarea-scrollbar-size);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: var(--radius-sm);
+  }
+}
+
+// ============================================
+// Focus — bridge inner textarea focus to wrapper
+// ============================================
+
+.ui-textarea:not([data-readonly]):focus-within {
+  border-color: var(--color-focus-ring);
+  outline: none;
+  --ring-offset: 0px;
+  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
+      );
+  --_scroll-bg: var(--color-surface-bright);
+  background-color: var(--_scroll-bg);
+}
+
+// ============================================
+// Hover (not disabled, not readonly)
+// ============================================
+
+.ui-textarea:hover:not([data-disabled]):not([data-readonly]):not(
+    :focus-within
+  ) {
+  --_scroll-bg: var(--color-surface-bright);
+  background-color: var(--_scroll-bg);
+}
+
+.ui-textarea: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-textarea[data-size='#{$size}'] {
+    font-size: map.get(shared.$control-font-sizes, $size);
+    --_textarea-icon-size: #{map.get(shared.$control-icon-sizes, $size)};
+    --_form-btn-size: #{map.get(shared.$control-btn-sizes, $size)};
+  }
+}
+
+// ============================================
+// Success state
+// ============================================
+
+.ui-textarea[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-textarea[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-textarea-shake');
+
+// Helper + error text use shared .ui-form-helper / .ui-form-error classes
+// from _form-animations.scss — no component-specific overrides needed.
+
+// ============================================
+// Disabled state
+// ============================================
+
+.ui-textarea[data-disabled] {
+  opacity: var(--state-disabled-opacity);
+  cursor: not-allowed;
+
+  .ui-textarea-field {
+    cursor: not-allowed;
+    resize: none;
+  }
+}
+
+// ============================================
+// Readonly state
+// ============================================
+
+.ui-textarea[data-readonly] {
+  --_scroll-bg: var(--color-surface-variant);
+  background-color: var(--_scroll-bg);
+
+  .ui-textarea-field {
+    cursor: default;
+  }
+}
+
+// ============================================
+// Floating Label — Inner Float Pattern
+// Same approach as Input — label starts centered, floats to top on focus/fill.
+// ============================================
+
+.ui-textarea[data-floating-label] {
+  position: relative;
+}
+
+@each $size in shared.$control-sizes {
+  .ui-textarea[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-textarea-label {
+  position: absolute;
+  inset-block-start: var(--space-md);
+  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-textarea[data-size='#{$size}'] .ui-textarea-label {
+    inset-inline-start: var(--control-padding-x-#{$size});
+  }
+}
+
+// Floating state — label anchors to top-inside
+.ui-textarea:not([data-readonly]):focus-within .ui-textarea-label,
+.ui-textarea[data-filled] .ui-textarea-label,
+.ui-textarea[data-readonly] .ui-textarea-label {
+  inset-block-start: 0;
+  transform: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-primary);
+  letter-spacing: var(--body-letter-spacing);
+  padding-block-start: var(--space-xs);
+}
+
+// Filled but not focused — muted label color
+.ui-textarea[data-filled]:not(:focus-within) .ui-textarea-label,
+.ui-textarea[data-readonly] .ui-textarea-label {
+  color: var(--color-text-muted);
+}
+
+// Error overrides label color
+.ui-textarea[data-error]:not([data-readonly]):focus-within .ui-textarea-label,
+.ui-textarea[data-error][data-filled] .ui-textarea-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-textarea[data-success]:not([data-error]):not([data-readonly]):focus-within
+  .ui-textarea-label,
+.ui-textarea[data-success]:not([data-error])[data-filled] .ui-textarea-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
+.ui-textarea[data-floating-label]:not(:focus-within):not([data-filled]):not(
+    [data-readonly]
+  )
+  .ui-textarea-field::placeholder {
+  opacity: 0;
+}
+
+// ============================================
+// Action row — clear button, state icon, counter
+// ============================================
+
+.ui-textarea-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding-block-end: var(--space-xs);
+}
+
+// ============================================
+// Character Counter
+// ============================================
+
+.ui-textarea-counter {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin-inline-start: auto;
+  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);
+  }
+
+  .ui-textarea[data-filled] &,
+  .ui-textarea:not([data-readonly]):focus-within & {
+    opacity: 1;
+  }
+}
+
+.ui-textarea-counter-warn {
+  color: var(--color-warning);
+}
+
+.ui-textarea-counter-danger {
+  color: var(--color-danger);
+  font-weight: var(--font-weight-medium);
+}
+
+// ============================================
+// Clear Button
+// ============================================
+
+.ui-textarea-clear {
+  @include form-anim.form-inline-button(var(--color-text));
+
+  // Override: position in the top-right corner of the wrapper
+  & {
+    position: absolute;
+    inset-block-start: var(--space-xs);
+    inset-inline-end: var(--space-xs);
+    z-index: 1;
+  }
+}
+
+// ============================================
+// State Icons (success / error)
+// ============================================
+
+.ui-textarea-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_textarea-icon-size);
+  block-size: var(--_textarea-icon-size);
+  line-height: 1;
+
+  @include a11y.motion-safe {
+    transition: var(--motion-transition-color);
+  }
+}
+
+.ui-textarea-state-icon-success {
+  color: var(--color-success);
+}
+
+@include a11y.motion-safe {
+  .ui-textarea-state-icon-pop {
+    animation: var(--motion-animation-fade-scale-in)
+      var(--motion-duration-normal) var(--motion-easing-entrance);
+  }
+}
+
+.ui-textarea-state-icon-error {
+  color: var(--color-danger);
+}
+
+// ============================================
+// Loading Spinner
+// ============================================
+
+// Spinner on the wrapper ::after — always available regardless of action row
+.ui-textarea.ui-textarea-loading::after {
+  content: '';
+  position: absolute;
+  inset-block-end: var(--space-xs);
+  inset-inline-end: var(--space-xs);
+  inline-size: var(--_textarea-icon-size);
+  block-size: var(--_textarea-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: hide clear button
+.ui-textarea.ui-textarea-loading > .ui-textarea-clear {
+  display: none;
+}
+
+// Disabled / readonly: hide clear button
+.ui-textarea[data-disabled] > .ui-textarea-clear,
+.ui-textarea[data-readonly] > .ui-textarea-clear {
+  display: none;
+}
+
+// ============================================
+// High Contrast / Forced Colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-textarea {
+    border: var(--border-width-hairline) solid ButtonText;
+  }
+
+  .ui-textarea[data-disabled] {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .ui-textarea:not([data-readonly]):focus-within {
+    @include a11y.focus-outline(Highlight);
+  }
+
+  .ui-textarea-label {
+    color: inherit;
+  }
+
+  .ui-textarea-clear {
+    border: var(--border-width-hairline) solid ButtonText;
+    color: ButtonText;
+    background: Field;
+  }
+}

package/dist/atoms/forms/toggle/Toggle.d.ts

@@ -0,0 +1,47 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.toggle",
+  "title": "<Toggle> Form Atom",
+  "category": "feature"
+}
+*/
+import { type FormControlBaseProps } from '../../../shared/types';
+/** @codexApi {"parent":"pithy.ui-kit.toggle","name":"ToggleProps","stability":"stable","signature":"interface ToggleProps extends FormControlBaseProps"} */
+export interface ToggleProps extends FormControlBaseProps {
+    /** Toggle name attribute */
+    name?: string;
+    /** Submitted value when the toggle is on (default: "on") */
+    value?: string;
+    /** Checked (on) state — static boolean or signal accessor for controlled toggle */
+    checked?: boolean | (() => boolean);
+    /** Fires whenever the checked state changes */
+    onChange?: (checked: boolean, e: Event) => void;
+    /** Fires when the toggle loses focus */
+    onBlur?: (e: FocusEvent) => void;
+    /** Fires when the toggle gains focus */
+    onFocus?: (e: FocusEvent) => void;
+}
+/**
+ * Accessible toggle / switch atom.
+ *
+ * Renders a `<label class="ui-toggle">` wrapping a native
+ * `<input type="checkbox" role="switch">`, a custom track + thumb
+ * drawn from CSS, and a visible label. Supports error/success states
+ * (with shake), helper/error text, loading, and full a11y wiring.
+ *
+ * This is a pure visual atom — no validation logic. Error/success are
+ * driven externally via props.
+ *
+ * @example
+ * ```html
+ * <Toggle label="'Dark mode'" />
+ * <Toggle label="'Notifications'" checked="isEnabled" onChange="toggle" />
+ * <Toggle label="'Auto-save'" checked="true" disabled="true" />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.toggle","name":"Toggle","stability":"stable","signature":"(props: ToggleProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Toggle({ id: externalId, name, value, checked, disabled, readonly: readonlyProp, required, error, errorMessage, helperText, success, size: rawSize, label, loading, onChange, onBlur, onFocus, }: ToggleProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/atoms/forms/toggle/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/atoms/forms/toggle/Toggle.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAC;AAc/B,4JAA4J;AAC5J,MAAM,WAAW,WAAY,SAAQ,oBAAoB;IACvD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACpC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChD,wCAAwC;IACxC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wLAAwL;AACxL,wBAAgB,MAAM,CAAC,EACrB,EAAE,EAAE,UAAU,EACd,IAAI,EACJ,KAAY,EACZ,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,WAAW,GAAG;IAAE,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAkQ3E"}