@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/input/Button.svelte

@@ -0,0 +1,336 @@
+<!--
+  Button.svelte: Ripple button widget.
+  origin: slev12397/beautiful-ui@ff0f74d components/atoms/Button.tsx
+
+  A pill on --ripple-radius with the source's per-size rhythm (padding and gap
+  step with size) and a 12/13/14px medium type ladder. Colour transitions ride
+  var(--ripple-ease-out). No box-shadows: solid keys carry a faint gradient
+  face instead. Colours are token-driven; accent TEXT (link, lit ghost) is
+  --ripple-accent-text, never the fill token.
+
+  SPRING PRESS: on :active the button compresses to scale(0.965) and settles
+  with a spring, timed from resolvePreset('snappy'/'bouncy') easing and
+  FF_SPRING_TOKENS durations (80ms compress / 160ms release). Button.test.ts
+  asserts those custom properties; that test is the contract. Reduced motion
+  drops the transform and stops the loading spinner.
+
+  GHOST lights up in the accent text colour when pressed/selected (data-active).
+  DESTRUCTIVE darkens its fill toward black in scoped CSS so the white label
+  holds 4.5:1 in every state without touching the host's --destructive.
+
+  LINK reads as inline text: content-sized (w-fit, so a stretching column flex
+  cannot widen or centre it), no inline padding, left-aligned when it wraps,
+  a quiet resting underline that firms up on hover/focus, and no fixed height
+  so wrapped rows keep the chip rhythm; an ::after pad keeps the hit target.
+
+  A button with no label, aria-label, children, icon or spinner renders
+  nothing, so an empty spec node never leaves a nameless control in the tab
+  order.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+  import { Loader2 } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+  import { FF_SPRING_TOKENS, resolvePreset, springToCssTiming } from '@ripple-ui/core';
+  import type { ResolvedPhysics } from '@ripple-ui/core';
+
+  // 'snappy' and 'bouncy' always resolve to spring physics; narrow the union so
+  // springToCssTiming (which expects a spring shape) type-checks — same narrowing
+  // with-motion.ts does at runtime via a `type === 'spring'` guard.
+  type SpringPhysics = Extract<ResolvedPhysics, { type: 'spring' }>;
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    children?: Snippet;
+    hasChildren?: boolean;
+    leading?: Snippet;
+    trailing?: Snippet;
+    variant?: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    loading?: boolean;
+    /** Toggle/selected state. Drives ghost's "lights up in the accent" active look
+     *  and is reflected to aria-pressed. Leave undefined for a plain button. */
+    pressed?: boolean;
+    form?: string;
+    name?: string;
+    value?: string;
+    'aria-label'?: string;
+    onclick?: (e?: MouseEvent) => void;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    label,
+    children,
+    hasChildren = false,
+    leading,
+    trailing,
+    variant = 'default',
+    size = 'md',
+    type = 'button',
+    disabled = false,
+    loading = false,
+    pressed,
+    form,
+    name,
+    value,
+    'aria-label': ariaLabel,
+    onclick,
+  }: Props = $props();
+
+  // ── SPRING TIMING — reuse ripple's motion primitive for the press ────────────
+  // The press is a tap gesture: tap: { scale: 0.965 } with a spring. Rather than
+  // hand-roll a cubic-bezier, we pull the PHYSICS from the same primitives every
+  // other ripple animation uses, so the press feels consistent app-wide:
+  //   • EASING comes from springToCssTiming(resolvePreset(<preset>)) — the exact
+  //     spring→CSS overshoot cubic-bezier the motion runtime emits for a spring
+  //     preset (the "kiss past then settle" curve).
+  //   • DURATION comes from FF_SPRING_TOKENS — the FF-restrained authored timings.
+  //     springToCssTiming's 220ms floor is right for an ENTRANCE but too slow for a
+  //     tactile press, so we keep its EASING and swap in the FF token's short
+  //     duration (the sub-100ms snap that reads "Apple-level"), the same split
+  //     CheckboxGroup uses via ffTokenToCssTiming.
+  //
+  // COMPRESS (pointer down): snappy spring easing + FF `fast` (80ms) — instant, firm.
+  // RELEASE  (pointer up):   bouncy spring easing + FF `moderate` (160ms) — springs
+  //   back past rest then settles, the signature bounce-back.
+  // Module-constant strings (no $state) so there is no runes/vitest surface.
+  const COMPRESS_EASING = springToCssTiming(resolvePreset('snappy') as SpringPhysics).easing; // overshoot, restrained
+  const RELEASE_EASING = springToCssTiming(resolvePreset('bouncy') as SpringPhysics).easing; // overshoot, playful
+  const COMPRESS_MS = Math.round(FF_SPRING_TOKENS.fast.duration * 1000); // 80
+  const RELEASE_MS = Math.round(FF_SPRING_TOKENS.moderate.duration * 1000); // 160
+
+  const button = tv({
+    base: [
+      // box-border makes height immutable: any per-spec padding/border lives
+      // INSIDE the fixed size height, so every variant of a given size is the
+      // SAME height (canonical) regardless of border/padding/consumer preflight.
+      'ripple-btn box-border relative isolate inline-flex items-center justify-center whitespace-nowrap select-none cursor-pointer',
+      // Radius follows --ripple-radius so a button sits beside inputs and
+      // selects on one radius scale; only the icon size stays round.
+      'rounded-ripple font-medium tracking-[-0.01em] leading-none',
+      // Transitions are owned entirely by the scoped .ripple-btn block below:
+      // its shorthand overrides any Tailwind transition-* class set here, so a
+      // class here would only describe something that never applies. Colour
+      // rides a 150ms tween on the skin's ease; the TRANSFORM (press) rides the
+      // spring vars set per-state.
+      // Theme-driven focus ring, offset so it reads on any surface.
+      'outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      // Disabled: quiet, flat, non-interactive — no lingering depth.
+      'disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
+    ],
+    variants: {
+      variant: {
+        // Solid keys: layered depth via the scoped .ripple-solid rule (gradient
+        // overlay + inset top highlight + outer shadow). Token bg drives the hue.
+        default:
+          'ripple-solid bg-primary text-primary-foreground hover:bg-primary/95',
+        primary:
+          'ripple-solid bg-primary text-primary-foreground hover:bg-primary/95',
+        destructive:
+          'ripple-solid ripple-solid-destructive bg-destructive text-destructive-foreground',
+        // Secondary: a real filled neutral key with a softer edge + shadow.
+        secondary:
+          'ripple-raised bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        // Outline: bordered surface that lifts on hover.
+        outline:
+          'ripple-raised border border-border bg-background text-foreground hover:bg-muted hover:border-border/80',
+        // Ghost: transparent control with a quiet hover bg; lights up in the
+        // accent when active (.ripple-ghost + data-active handle the accent text).
+        ghost:
+          'ripple-ghost bg-transparent text-foreground hover:bg-muted',
+        link: 'bg-transparent text-ripple-accent-text underline decoration-current/40 underline-offset-2 hover:decoration-current focus-visible:decoration-current px-0 h-auto',
+      },
+      // The source's pill rhythm: roomier sides than a rounded rectangle needs
+      // (round caps eat visual space), and a gap that steps with the size.
+      size: {
+        sm: 'h-7 px-3 text-[12px] gap-1',
+        md: 'h-8 px-4 text-[13px] gap-1.5',
+        lg: 'h-10 px-5 text-sm gap-2',
+        icon: 'h-8 w-8 p-0 gap-0 rounded-full',
+      },
+    },
+    // link reads as text: no inline padding (size's px would otherwise win) and
+    // content-sized, so it keeps the left edge its siblings hold; a long label
+    // wraps inside the card, left-aligned. No fixed height keeps wrapped rows
+    // tight; the ::after pad restores a comfortable hit target.
+    compoundVariants: [
+      {
+        variant: 'link',
+        class:
+          "h-auto w-fit max-w-full px-0 justify-start whitespace-normal text-left leading-snug after:absolute after:-inset-x-1 after:-inset-y-2 after:content-['']",
+      },
+    ],
+    defaultVariants: { variant: 'default', size: 'md' },
+  });
+
+  const labelText = $derived(asText(label).trim());
+  // Nothing to show or name: render no element at all.
+  const isEmpty = $derived(!children && !labelText && !ariaLabel && !leading && !trailing && !loading);
+  const isDisabled = $derived(disabled || loading);
+  const state = $derived(loading ? 'loading' : disabled ? 'disabled' : 'idle');
+  // Ghost "lit" look: explicitly pressed/selected. link never lights up.
+  const isActive = $derived(pressed === true && variant !== 'link');
+
+  // Press spring CSS custom properties — injected so the scoped style can read the
+  // primitive-derived timing without templating CSS strings into a stylesheet.
+  const pressVars = $derived(
+    [
+      `--ripple-press-compress:${COMPRESS_MS}ms ${COMPRESS_EASING}`,
+      `--ripple-press-release:${RELEASE_MS}ms ${RELEASE_EASING}`,
+    ].join(';'),
+  );
+
+  const styleString = $derived(
+    (style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') + ';' : '') + pressVars,
+  );
+
+  const iconSize = $derived(size === 'sm' ? 14 : size === 'lg' ? 18 : 16);
+
+  function handleClick(e: MouseEvent) {
+    if (isDisabled) return;
+    onclick?.(e);
+  }
+</script>
+
+{#if !isEmpty}
+<button
+  {id}
+  {type}
+  {form}
+  {name}
+  {value}
+  class={cn(button({ variant, size }), className)}
+  style={styleString}
+  data-variant={variant}
+  data-size={size}
+  data-state={state}
+  data-active={isActive ? 'true' : undefined}
+  disabled={isDisabled}
+  aria-busy={loading ? 'true' : undefined}
+  aria-pressed={pressed === undefined ? undefined : pressed ? 'true' : 'false'}
+  aria-label={ariaLabel}
+  onclick={handleClick}
+>
+  {#if loading}
+    <span data-slot="button-spinner" class="inline-flex shrink-0">
+      <Loader2 size={iconSize} class="animate-spin motion-reduce:animate-none" />
+    </span>
+  {:else if leading}
+    <span data-slot="button-leading" class="inline-flex shrink-0">{@render leading()}</span>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {:else if labelText}
+    <span data-slot="button-label">{labelText}</span>
+  {/if}
+
+  {#if !loading && trailing}
+    <span data-slot="button-trailing" class="inline-flex shrink-0">{@render trailing()}</span>
+  {/if}
+</button>
+{/if}
+
+<style>
+  /* ── Fluid Functionalism depth + spring press ──────────────────────────────
+     Scoped so it can't leak. Colors stay token-driven; the ONLY hardcoded color
+     is the white inset top-edge highlight (a light overlay, not a theme hue). */
+
+  .ripple-btn {
+    /* Will-change the transform only while interactive; keeps the press composited. */
+    transform: translateZ(0);
+    /* RELEASE is the resting transition: when :active is removed the button
+       springs back along the bouncy overshoot curve. Falls back to a sane spring
+       if the custom prop is somehow absent. */
+    transition:
+      transform var(--ripple-press-release, 160ms cubic-bezier(0.34, 1.66, 0.4, 1)),
+      background-color 150ms var(--ripple-ease-out),
+      box-shadow 150ms var(--ripple-ease-out),
+      border-color 150ms var(--ripple-ease-out),
+      color 150ms var(--ripple-ease-out);
+  }
+
+  /* The signature press: compress + settle on a snappy spring. On pointer down
+     the COMPRESS transition takes over (faster, firmer); releasing falls back to
+     the resting RELEASE transition above (the bounce-back). */
+  .ripple-btn:active:not(:disabled) {
+    transform: scale(0.965) translateZ(0);
+    transition:
+      transform var(--ripple-press-compress, 80ms cubic-bezier(0.34, 1.39, 0.4, 1)),
+      background-color 150ms var(--ripple-ease-out),
+      box-shadow 150ms var(--ripple-ease-out);
+  }
+  /* link is text, not a physical key — it shouldn't compress. */
+  .ripple-btn[data-variant='link']:active {
+    transform: none;
+  }
+
+  /* ── Solid keys: flat fill + a barely-there gradient face (NO shadows) ──────
+     Captain wants flat buttons — all box-shadows removed. A faint top→base
+     gradient keeps a hint of dimension without any drop/inset shadow. The
+     tactile feel comes purely from the spring press (scale). */
+  .ripple-solid {
+    background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.06),
+      rgba(255, 255, 255, 0) 60%
+    );
+  }
+  .ripple-solid:active:not(:disabled) {
+    /* Pressed: face dims slightly (no shadow) — paired with the scale press. */
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.05),
+      rgba(0, 0, 0, 0) 60%
+    );
+  }
+
+  /* Destructive key: the host red deepened toward black so the white label
+     reads at 4.5:1 in both themes (raw it was 3.59 light, 2.89 dark). Each
+     state steps darker, so hover and press stay distinct from rest. */
+  .ripple-solid-destructive {
+    background-color: color-mix(in oklab, var(--destructive) 78%, black);
+  }
+  .ripple-solid-destructive:hover:not(:disabled) {
+    background-color: color-mix(in oklab, var(--destructive) 70%, black);
+  }
+  .ripple-solid-destructive:active:not(:disabled) {
+    background-color: color-mix(in oklab, var(--destructive) 64%, black);
+  }
+
+  /* ── Raised keys (secondary / outline): flat, no shadow (border/fill carry) ── */
+
+  /* ── Ghost: quiet control that lights up in the accent when active ──────────
+     No fill in either state. When pressed/selected (data-active) OR held down
+     (:active), the label + icons take the primary accent color. */
+  .ripple-ghost[data-active='true'],
+  .ripple-ghost:active:not(:disabled) {
+    color: var(--ripple-accent-text);
+    background-color: transparent;
+  }
+  /* Icons inherit currentColor, so the leading/trailing slots light up too. */
+
+  /* ── Reduced motion: honor the same policy as the motion runtime ────────────
+     Drop the press transform + collapse the transition to a near-instant fade of
+     color/shadow only. Mirrors reduce-motion.ts (movement dropped). */
+  @media (prefers-reduced-motion: reduce) {
+    .ripple-btn,
+    .ripple-btn:active:not(:disabled) {
+      transform: none;
+      transition:
+        background-color 100ms ease,
+        box-shadow 100ms ease,
+        color 100ms ease;
+    }
+  }
+</style>

package/dist/widgets/input/Button.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    children?: Snippet;
+    hasChildren?: boolean;
+    leading?: Snippet;
+    trailing?: Snippet;
+    variant?: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    loading?: boolean;
+    /** Toggle/selected state. Drives ghost's "lights up in the accent" active look
+     *  and is reflected to aria-pressed. Leave undefined for a plain button. */
+    pressed?: boolean;
+    form?: string;
+    name?: string;
+    value?: string;
+    'aria-label'?: string;
+    onclick?: (e?: MouseEvent) => void;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/widgets/input/Checkbox.svelte

@@ -0,0 +1,70 @@
+<!-- Updated: 2026-06-02 — pass a `name` to the bits-ui checkbox so it renders a
+     hidden form input; a static <form action> POST then submits the checked
+     state with JS off (ripple-iui #54).
+     Updated: 2026-06-09 — svelte-ignore state_referenced_locally on the
+     localChecked seed: it's intentionally mutated by handleChange + synced by
+     an $effect (controlled input with internal state), so it stays $state. -->
+<script lang="ts">
+  import { FIELD_LABEL } from '../../components/ui/control.js';
+  import { cn } from '../../utils.js';
+  import { Checkbox } from '../../components/ui/checkbox/index.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    /** Field name for native form submission. Defaults to the bind path via NodeRenderer. */
+    name?: string;
+    onchange?: (value?: unknown) => void;
+  }
+
+  let {
+    id, class: className, style, checked = false,
+    disabled = false, label, name, onchange
+  }: Props = $props();
+
+  // Local state that syncs with prop
+  // svelte-ignore state_referenced_locally
+  let localChecked = $state(checked);
+
+  $effect(() => {
+    localChecked = checked;
+  });
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  function handleChange(value: boolean) {
+    localChecked = value;
+    onchange?.(value);
+  }
+</script>
+
+{#if label}
+  <div class={cn('flex items-start gap-2', className)} style={styleString}>
+    <span class="flex h-[1.35em] shrink-0 items-center text-sm"><Checkbox
+      {id}
+      {name}
+      checked={localChecked}
+      {disabled}
+      onCheckedChange={handleChange}
+    /></span>
+    <label for={id} class={cn(FIELD_LABEL, 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70')}>
+      {label}
+    </label>
+  </div>
+{:else}
+  <Checkbox
+    {id}
+    {name}
+    checked={localChecked}
+    {disabled}
+    class={cn(className)}
+    style={styleString}
+    onCheckedChange={handleChange}
+  />
+{/if}

package/dist/widgets/input/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+import { Checkbox } from '../../components/ui/checkbox/index.js';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    /** Field name for native form submission. Defaults to the bind path via NodeRenderer. */
+    name?: string;
+    onchange?: (value?: unknown) => void;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;