fancy-ui-react 0.2.0

package/dist/components/pulse-beam/pulse-beam-data.js

@@ -0,0 +1,306 @@
+"use client";
+const PALETTES = {
+  colorful: [
+    [255, 50, 100],
+    [40, 140, 255],
+    [50, 200, 80],
+    [30, 185, 170],
+    [100, 70, 255],
+    [40, 140, 255],
+    [255, 120, 40],
+    [240, 50, 180],
+    [180, 40, 240]
+  ],
+  mono: [
+    [180, 180, 180],
+    [140, 140, 140],
+    [160, 160, 160],
+    [130, 130, 130],
+    [170, 170, 170],
+    [150, 150, 150],
+    [190, 190, 190],
+    [145, 145, 145],
+    [165, 165, 165]
+  ],
+  ocean: [
+    [100, 80, 220],
+    [60, 120, 255],
+    [80, 100, 200],
+    [50, 140, 220],
+    [120, 80, 255],
+    [70, 130, 255],
+    [140, 100, 240],
+    [90, 110, 230],
+    [130, 70, 255]
+  ],
+  sunset: [
+    [255, 80, 50],
+    [255, 160, 40],
+    [255, 120, 60],
+    [255, 200, 50],
+    [255, 100, 80],
+    [255, 180, 60],
+    [255, 60, 60],
+    [255, 140, 50],
+    [255, 90, 70]
+  ]
+};
+const SLOTS = [
+  { x: "33%", y: "-7.4%", quad: "tl", region: 1 },
+  { x: "12%", y: "-5%", quad: "tl", region: 2 },
+  { x: "2.1%", y: "68.3%", quad: "bl", region: 3 },
+  { x: "2.1%", y: "68.3%", quad: "bl", region: 1 },
+  { x: "74.4%", y: "100%", quad: "br", region: 2 },
+  { x: "55%", y: "100%", quad: "br", region: 3 },
+  { x: "93.9%", y: "0%", quad: "tr", region: 1 },
+  { x: "100%", y: "27.1%", quad: "tr", region: 2 },
+  { x: "100%", y: "27.1%", quad: "tr", region: 3 }
+];
+const INNER_STROKE = [
+  { slot: 0, w: 70, h: 40 },
+  { slot: 1, w: 60, h: 35 },
+  { slot: 2, w: 40, h: 70 },
+  { slot: 3, w: 20, h: 35 },
+  { slot: 4, w: 180, h: 32 },
+  { slot: 5, w: 85, h: 26 },
+  { slot: 6, w: 74, h: 32 },
+  { slot: 7, w: 26, h: 42 },
+  { slot: 8, w: 52, h: 48 }
+];
+const INNER_GLOW = [
+  { slot: 0, w: 65, h: 35 },
+  { slot: 1, w: 55, h: 30 },
+  { slot: 2, w: 35, h: 65 },
+  { slot: 3, w: 15, h: 30 },
+  { slot: 4, w: 173, h: 28 },
+  { slot: 5, w: 80, h: 22 },
+  { slot: 6, w: 69, h: 28 },
+  { slot: 7, w: 22, h: 38 },
+  { slot: 8, w: 47, h: 44 }
+];
+const INNER_BLOOM = [
+  { slot: 0, w: 84, h: 48 },
+  { slot: 1, w: 72, h: 42 },
+  { slot: 2, w: 48, h: 84 },
+  { slot: 4, w: 216, h: 38 },
+  { slot: 5, w: 102, h: 31 },
+  { slot: 6, w: 89, h: 38 },
+  { slot: 8, w: 62, h: 58 }
+];
+const OUTSIDE_STROKE = [
+  { slot: 0, w: 80, h: 19, x: "27%", y: "0%" },
+  { slot: 6, w: 74, h: 11, x: "73%", y: "-1%" },
+  { slot: 7, w: 15, h: 44, x: "100%", y: "33%" },
+  { slot: 8, w: 19, h: 38, x: "101%", y: "72%" },
+  { slot: 4, w: 84, h: 13, x: "67%", y: "100%" },
+  { slot: 1, w: 60, h: 21, x: "24%", y: "101%" },
+  { slot: 2, w: 17, h: 40, x: "0%", y: "60%" },
+  { slot: 3, w: 13, h: 32, x: "-1%", y: "28%" }
+];
+const OUTSIDE_GLOW = OUTSIDE_STROKE;
+const OUTSIDE_BLOOM = [
+  { slot: 0, w: 110, h: 30, x: "27%", y: "3%" },
+  { slot: 6, w: 100, h: 20, x: "73%", y: "1%" },
+  { slot: 7, w: 26, h: 62, x: "100%", y: "33%" },
+  { slot: 8, w: 30, h: 56, x: "101%", y: "72%" },
+  { slot: 4, w: 120, h: 22, x: "67%", y: "99%" },
+  { slot: 1, w: 88, h: 32, x: "24%", y: "99%" },
+  { slot: 2, w: 28, h: 58, x: "0%", y: "60%" }
+];
+const LAYER_PRESETS = {
+  inner: {
+    dark: {
+      stroke: 1.54,
+      glow: 0.44,
+      bloom: 0.66,
+      brightness: 0.75,
+      saturation: 1.2,
+      glowBlur: 0,
+      bloomBlur: 8
+    },
+    light: {
+      stroke: 0.32,
+      glow: 0.4,
+      bloom: 0.8,
+      brightness: 1.3,
+      saturation: 0.75,
+      glowBlur: 0,
+      bloomBlur: 8
+    }
+  },
+  outside: {
+    dark: {
+      stroke: 0.94,
+      glow: 0.34,
+      bloom: 0.3,
+      brightness: 1.9,
+      saturation: 1.2,
+      glowBlur: 3,
+      bloomBlur: 22.5
+    },
+    light: {
+      stroke: 1.96,
+      glow: 1.04,
+      bloom: 0.42,
+      brightness: 1.7,
+      saturation: 0.6,
+      glowBlur: 6,
+      bloomBlur: 15
+    }
+  }
+};
+const MOTION = {
+  inner: {
+    dark: { sp: 0.28, dr: 33, op: 0.48, gh: 0.34, bs: 1.9, ss: 2.6, ghs: 2.4, huePeriod: 16 },
+    light: { sp: 0.28, dr: 40, op: 0.45, gh: 0.22, bs: 2.6, ss: 4.6, ghs: 5.5, huePeriod: 16 }
+  },
+  outside: {
+    dark: { sp: 0.28, dr: 14, op: 0.46, gh: 0.16, bs: 2.3, ss: 6.4, ghs: 2.4, huePeriod: 14 },
+    light: { sp: 0.36, dr: 19, op: 0, gh: 0.58, bs: 3.7, ss: 4.6, ghs: 3.8, huePeriod: 14 }
+  }
+};
+function motionPreset(variant, tone, speed = 1) {
+  const base = MOTION[variant][tone];
+  const s = Number.isFinite(speed) && speed > 0 ? speed : 1;
+  return { ...base, bs: base.bs / s, ss: base.ss / s, ghs: base.ghs / s };
+}
+function oscillate(o, t) {
+  const phase = (t - o.delay) / o.period;
+  const k = (1 - Math.cos(Math.PI * 2 * phase)) / 2;
+  return o.a + (o.b - o.a) * k;
+}
+function buildOscillators(m) {
+  const { sp, dr, op, gh, bs, ss, ghs } = m;
+  const n = (prop, a, b, period, delay = 0) => ({
+    prop,
+    a,
+    b,
+    period,
+    delay,
+    unit: ""
+  });
+  const px = (prop, a, b, period) => ({
+    prop,
+    a,
+    b,
+    period,
+    delay: 0,
+    unit: "px"
+  });
+  return [
+    n("--pb-bw1", 1 - sp, 1 + sp * 1.1, ss * 0.9),
+    n("--pb-bh1", 1 + sp * 0.9, 1 - sp * 0.85, ss * 1.26),
+    px("--pb-bx1", -dr, dr * 0.9, bs * 1.6),
+    px("--pb-by1", dr * 0.55, -dr * 0.7, bs * 1.6),
+    n("--pb-bw2", 1 + sp, 1 - sp * 0.85, ss * 1.1),
+    n("--pb-bh2", 1 - sp * 0.8, 1 + sp * 1.05, ss * 0.81),
+    px("--pb-bx2", dr * 0.8, -dr * 0.9, bs * 1.88),
+    px("--pb-by2", -dr, dr * 0.65, bs * 1.88),
+    n("--pb-bw3", 1 - sp * 0.6, 1 + sp * 1.15, ss * 0.98),
+    n("--pb-bh3", 1 + sp * 0.75, 1 - sp, ss * 1.4),
+    px("--pb-bx3", -dr * 0.6, dr, bs * 1.45),
+    px("--pb-by3", -dr * 0.85, dr * 0.45, bs * 1.45),
+    n("--pb-gh", 1 - gh, 1 + gh, ghs),
+    n("--pb-op-tl", 1 - op, 1, bs),
+    n("--pb-op-tr", 1 - op, 1, bs * 1.32, bs * 0.28),
+    n("--pb-op-bl", 1 - op, 1, bs * 0.84, bs * 0.55),
+    n("--pb-op-br", 1 - op, 1, bs * 1.58, bs * 0.83)
+  ];
+}
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const RGB_RE = /^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})/i;
+const RGB_ALPHA_RE = /^rgba?\(\s*\d{1,3}\s*[, ]\s*\d{1,3}\s*[, ]\s*\d{1,3}\s*[,/]\s*([0-9]*\.?[0-9]+)(%?)\s*\)$/i;
+function parseRgb(input) {
+  const s = input.trim();
+  const hex = HEX_RE.exec(s);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
+    return [
+      parseInt(full.slice(0, 2), 16),
+      parseInt(full.slice(2, 4), 16),
+      parseInt(full.slice(4, 6), 16)
+    ];
+  }
+  const rgb = RGB_RE.exec(s);
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  return null;
+}
+function parseRgbAlpha(input) {
+  const m = RGB_ALPHA_RE.exec(input.trim());
+  if (!m) return null;
+  const n = Number(m[1]);
+  if (!Number.isFinite(n)) return null;
+  return Math.min(1, Math.max(0, m[2] ? n / 100 : n));
+}
+function withAlpha(color, alpha) {
+  if (typeof color !== "string") return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${alpha})`;
+  const rgb = parseRgb(color);
+  if (rgb) {
+    const own = parseRgbAlpha(color);
+    const a = own === null || own === 1 ? alpha : `calc(${alpha} * ${own})`;
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})`;
+  }
+  return `color-mix(in srgb, ${color} calc(${alpha} * 100%), transparent)`;
+}
+function slotColors(palette, colors) {
+  const base = PALETTES[palette];
+  if (!colors || colors.length === 0) return base;
+  return base.map((c, i) => {
+    const override = colors[i % colors.length];
+    return override && override.trim() ? override : c;
+  });
+}
+function animatedBlob(b, color, scaled) {
+  const s = SLOTS[b.slot];
+  const r = s.region;
+  const sx = scaled ? " * var(--pb-sx, 1)" : "";
+  const sy = scaled ? " * var(--pb-sy, 1)" : "";
+  const w = `calc(${b.w}px * var(--pb-bw${r}, 1)${sx})`;
+  const h = `calc(${b.h}px * var(--pb-bh${r}, 1) * var(--pb-gh, 1)${sy})`;
+  const x = `calc(${b.x ?? s.x} + var(--pb-bx${r}, 0px))`;
+  const y = `calc(${b.y ?? s.y} + var(--pb-by${r}, 0px))`;
+  return `radial-gradient(ellipse ${w} ${h} at ${x} ${y}, ${withAlpha(color, `var(--pb-op-${s.quad}, 1)`)}, transparent)`;
+}
+function staticBlob(b, color, alpha, scaled) {
+  const s = SLOTS[b.slot];
+  const w = scaled ? `calc(${b.w}px * var(--pb-sx, 1))` : `${b.w}px`;
+  const h = scaled ? `calc(${b.h}px * var(--pb-sy, 1))` : `${b.h}px`;
+  const a = +alpha.toFixed(3);
+  return `radial-gradient(ellipse ${w} ${h} at ${b.x ?? s.x} ${b.y ?? s.y}, ${withAlpha(color, String(a))}, transparent)`;
+}
+function cornerDots(tone) {
+  const rgb = tone === "dark" ? "255, 255, 255" : "0, 0, 0";
+  const a = tone === "dark" ? 0.18 : 0.08;
+  const corners = [
+    ["0%", "0%", "tl"],
+    ["100%", "0%", "tr"],
+    ["0%", "100%", "bl"],
+    ["100%", "100%", "br"]
+  ];
+  return corners.map(
+    ([x, y, q]) => `radial-gradient(ellipse 60px 60px at ${x} ${y}, rgba(${rgb}, calc(${a} * var(--pb-op-${q}, 1))), transparent 70%)`
+  );
+}
+function buildLayerBackgrounds(o) {
+  const colors = slotColors(o.palette, o.colors);
+  const outside = o.variant === "outside";
+  const strokeBlobs = outside ? OUTSIDE_STROKE : INNER_STROKE;
+  const glowBlobs = outside ? OUTSIDE_GLOW : INNER_GLOW;
+  const bloomBlobs = outside ? OUTSIDE_BLOOM : INNER_BLOOM;
+  const bloomAlpha = 1 - o.op * 0.5;
+  const stroke = strokeBlobs.map((b) => animatedBlob(b, colors[b.slot], outside));
+  const glow = glowBlobs.map((b) => animatedBlob(b, colors[b.slot], outside));
+  if (!outside) glow.push(...cornerDots(o.tone));
+  const bloom = bloomBlobs.map((b) => staticBlob(b, colors[b.slot], bloomAlpha, outside));
+  return { stroke: stroke.join(", "), glow: glow.join(", "), bloom: bloom.join(", ") };
+}
+export {
+  LAYER_PRESETS,
+  PALETTES,
+  buildLayerBackgrounds,
+  buildOscillators,
+  motionPreset,
+  oscillate,
+  parseRgb
+};

package/dist/components/pulse-beam/pulse-beam-loop.d.ts

@@ -0,0 +1,26 @@
+/**
+ * PulseBeam — one shared requestAnimationFrame loop for every mounted instance.
+ *
+ * Each instance registers its host element plus its oscillator set; the loop
+ * writes the animated custom properties straight onto `el.style` (no Svelte
+ * reactivity in the hot path). One loop for N instances keeps them in phase and
+ * keeps the frame budget to a single callback.
+ *
+ * Throttled to ~30 fps: the blobs are soft and slow, 60 fps is invisible here
+ * and doubles the style-recalc cost. Paused entries are skipped; when every
+ * entry is paused the loop stops rescheduling and restarts on the next
+ * `setPaused(false)`.
+ *
+ * Nothing here touches `window` at module evaluation time — safe under SSR.
+ */
+import { type Oscillator } from "./pulse-beam-data.js";
+export interface PulseHandle {
+    setPaused(paused: boolean): void;
+    unregister(): void;
+}
+/** Register a host element; returns a handle to pause or remove it. */
+export declare function registerPulse(el: HTMLElement, oscillators: Oscillator[], hue: {
+    period: number;
+} | null): PulseHandle;
+/** Test hook: number of registered instances. */
+export declare function pulseEntryCount(): number;

package/dist/components/pulse-beam/pulse-beam-loop.js

@@ -0,0 +1,58 @@
+"use client";
+import { oscillate } from "./pulse-beam-data.js";
+const MIN_DT = 1e3 / 30 - 2;
+const entries = /* @__PURE__ */ new Set();
+let rafId = null;
+let last = -Infinity;
+function write(e, t) {
+  const s = e.el.style;
+  for (const o of e.oscillators) {
+    const v = oscillate(o, t);
+    s.setProperty(o.prop, o.unit === "px" ? `${v.toFixed(2)}px` : v.toFixed(4));
+  }
+  if (e.hue) {
+    const deg = t / e.hue.period % 1 * 360;
+    s.setProperty("--pb-hue", `${deg.toFixed(2)}deg`);
+  }
+}
+function tick(now) {
+  let live = 0;
+  for (const e of entries) if (!e.paused) live++;
+  if (live === 0) {
+    rafId = null;
+    return;
+  }
+  rafId = requestAnimationFrame(tick);
+  if (now - last < MIN_DT) return;
+  last = now;
+  const t = now / 1e3;
+  for (const e of entries) if (!e.paused) write(e, t);
+}
+function ensureRunning() {
+  if (rafId !== null) return;
+  if (typeof requestAnimationFrame !== "function") return;
+  rafId = requestAnimationFrame(tick);
+}
+function stop() {
+  if (rafId !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
+  rafId = null;
+  last = -Infinity;
+}
+function registerPulse(el, oscillators, hue) {
+  const entry = { el, oscillators, hue, paused: false };
+  entries.add(entry);
+  ensureRunning();
+  return {
+    setPaused(paused) {
+      entry.paused = paused;
+      if (!paused) ensureRunning();
+    },
+    unregister() {
+      entries.delete(entry);
+      if (entries.size === 0) stop();
+    }
+  };
+}
+export {
+  registerPulse
+};

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+export type RadioGroupOrientation = "horizontal" | "vertical";
+export interface RadioGroupProps {
+    /**
+     * The selected value. `""` means nothing is selected. Controlled when
+     * supplied: pair it with `onValueChange`, the React counterpart of the
+     * Svelte source's `bind:value`. Left out, the group keeps the selection
+     * itself and starts at `""`.
+     */
+    value?: string;
+    /** Called with the new value whenever the selection changes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The `name` shared by every item's native radio input. Generated when
+     * omitted — see the README — so two groups on the same page never fight
+     * over each other's selection.
+     */
+    name?: string;
+    /** Disables every item in the group. */
+    disabled?: boolean;
+    /** Marks the group required for native form validation. */
+    required?: boolean;
+    /** Marks the group invalid — sets `aria-invalid` on the group. */
+    invalid?: boolean;
+    /** The list's stacking axis. */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Accessible name for the group, standalone. Inside a `FormField` that
+     * rendered its own label, `field.labelId` wins instead — see the
+     * README — since this root is a `<div role="radiogroup">`, not
+     * something `<label for>` can target; only a FormField with no
+     * `label` of its own falls back to this prop.
+     */
+    label?: string;
+    /** The `RadioGroupItem`s. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off
+     * by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A set of `RadioGroupItem`s sharing one selection and one native radio
+ * `name`.
+ *
+ * The root element arrives through the ref channel rather than a `ref`
+ * prop, per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`, so the port carries no wider
+ * attribute surface than the component it mirrors.
+ */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { RADIO_GROUP_KEY } from "./types.js";
+const RadioGroup = forwardRef(function RadioGroup2({
+  value,
+  onValueChange,
+  name,
+  disabled = false,
+  required = false,
+  invalid = false,
+  orientation = "vertical",
+  label,
+  children,
+  className,
+  sound = false
+}, ref) {
+  const field = useField();
+  const uid = useFancyId();
+  const generatedName = `${uid}-name`;
+  const resolvedName = name ?? generatedName;
+  const [uncontrolledValue, setUncontrolledValue] = useState("");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const effectiveDisabled = field?.disabled ?? disabled;
+  const effectiveRequired = field?.required ?? required;
+  const effectiveInvalid = field?.invalid ?? invalid;
+  const playCue = useSoundCue(sound);
+  const select = useCallback(
+    (itemValue) => {
+      if (effectiveDisabled) return;
+      const changed = currentValue !== itemValue;
+      if (!isControlled) setUncontrolledValue(itemValue);
+      if (changed) playCue("select");
+      onValueChange?.(itemValue);
+    },
+    [effectiveDisabled, currentValue, isControlled, playCue, onValueChange]
+  );
+  const context = useMemo(
+    () => ({
+      name: resolvedName,
+      value: currentValue,
+      disabled: effectiveDisabled,
+      required: effectiveRequired,
+      invalid: effectiveInvalid,
+      isSelected(itemValue) {
+        return currentValue === itemValue;
+      },
+      select
+    }),
+    [resolvedName, currentValue, effectiveDisabled, effectiveRequired, effectiveInvalid, select]
+  );
+  const classes = cn(
+    "ft-radio-group inline-flex",
+    orientation === "vertical" ? "flex-col gap-[10px]" : "flex-row flex-wrap gap-x-[20px] gap-y-[10px]",
+    className
+  );
+  return /* @__PURE__ */ jsx(RADIO_GROUP_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id: field?.controlId,
+      className: classes,
+      role: "radiogroup",
+      "data-orientation": orientation,
+      "aria-label": field?.labelId ? void 0 : label,
+      "aria-labelledby": field?.labelId,
+      "aria-describedby": field?.describedBy,
+      "aria-invalid": effectiveInvalid ? "true" : void 0,
+      "aria-required": effectiveRequired ? "true" : void 0,
+      children
+    }
+  ) });
+});
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioGroup
+};

package/dist/components/radio-group/RadioGroupItem.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface RadioGroupItemProps {
+    /** This item's value — what the group's `value` becomes when it is picked. */
+    value: string;
+    /** Disables just this item, independent of the group's own `disabled`. */
+    disabled?: boolean;
+    /** Visible label text, rendered next to the control. Falls back to `children`, then to `value`. */
+    label?: string;
+    /** Custom content rendered in place of `label`, e.g. richer markup. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the wrapping `<label>`. */
+    className?: string;
+}
+/**
+ * One item of a `RadioGroup` — a real `<input type="radio">` inside the
+ * `<label>` that names it.
+ *
+ * The native input arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/radio-group/RadioGroupItem.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { cn } from "../../utils.js";
+import { RADIO_GROUP_KEY } from "./types.js";
+/* empty css                     */
+const RadioGroupItem = forwardRef(
+  function RadioGroupItem2({ value, disabled = false, label, children, className }, ref) {
+    const group = useContext(RADIO_GROUP_KEY);
+    const isDisabled = disabled || (group?.disabled ?? false);
+    const isChecked = group?.isSelected(value) ?? false;
+    function handleChange() {
+      if (isDisabled) return;
+      group?.select(value);
+    }
+    const labelClasses = cn(
+      "ft-radio-item inline-flex items-center gap-[10px] text-[13px] cursor-pointer",
+      isDisabled && "cursor-not-allowed opacity-50",
+      className
+    );
+    const controlClasses = cn(
+      "ft-radio-item-control",
+      group?.invalid && !isChecked ? "border-destructive" : "border-input"
+    );
+    return /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "radio",
+          className: controlClasses,
+          value,
+          ...group ? { checked: isChecked } : { defaultChecked: false },
+          disabled: isDisabled,
+          required: group?.required,
+          name: group?.name,
+          onChange: handleChange
+        }
+      ),
+      children != null ? children : label ?? value
+    ] });
+  }
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+export {
+  RadioGroupItem
+};

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,6 @@
+export { RadioGroup } from "./RadioGroup.js";
+export type { RadioGroupProps, RadioGroupOrientation } from "./RadioGroup.js";
+export { RadioGroupItem } from "./RadioGroupItem.js";
+export type { RadioGroupItemProps } from "./RadioGroupItem.js";
+export { RADIO_GROUP_KEY } from "./types.js";
+export type { RadioGroupContext } from "./types.js";

package/dist/components/radio-group/types.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The contract between the radio group root and its items.
+ *
+ * Unlike ToggleGroup, this context does not reimplement roving focus,
+ * arrow-key navigation or the tab stop: every item is a real
+ * `<input type="radio">` sharing one `name`, and the browser already gives
+ * all three away for free, correctly, on every platform. This context only
+ * carries what the browser cannot infer on its own — which value is
+ * selected, the shared `name` those inputs must all carry, and the
+ * group-level `disabled`/`required` an item's own attributes fold into.
+ */
+/** What the root publishes. Items read it; only the root writes it. */
+export interface RadioGroupContext {
+    /**
+     * The `name` every item's native radio must share so the browser treats
+     * them as one group. Always a real string, generated per instance with
+     * `useFancyId()` when the caller omits `name` — see `RadioGroup` — so it
+     * is correct from the very first server-rendered paint, not just once
+     * hydrated.
+     */
+    readonly name: string;
+    /** The selected value, or `""` when nothing is selected. */
+    readonly value: string;
+    /** Disables every item, regardless of its own `disabled` prop. */
+    readonly disabled: boolean;
+    /** Marks every item's native radio `required`, so the group counts as one required control for native form validation. */
+    readonly required: boolean;
+    /** Whether the group (or its surrounding FormField) is in an error state. */
+    readonly invalid: boolean;
+    /** Whether `itemValue` is the current selection. */
+    isSelected(itemValue: string): boolean;
+    /** Makes `itemValue` the selection and fires the group's `onValueChange`. */
+    select(itemValue: string): void;
+}
+/**
+ * The context a `RadioGroupItem` reads to learn the shared `name`, the
+ * selection and the group-level flags. The Svelte source publishes it under a
+ * `Symbol` context key; React's own context object plays that role here, so
+ * the exported name is kept and the value is a `React.Context` rather than a
+ * symbol:
+ *
+ * ```tsx
+ * const group = useContext(RADIO_GROUP_KEY);
+ * ```
+ *
+ * Read it as optional — an item rendered outside a `RadioGroup` gets
+ * `undefined` rather than throwing, and renders as a plain, unchecked,
+ * standalone radio.
+ */
+export declare const RADIO_GROUP_KEY: import("react").Context<RadioGroupContext | undefined>;

package/dist/components/radio-group/types.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+const RADIO_GROUP_KEY = createContext(void 0);
+RADIO_GROUP_KEY.displayName = "RadioGroupContext";
+export {
+  RADIO_GROUP_KEY
+};

package/dist/components/rainbow-button/RainbowButton.d.ts

@@ -0,0 +1,21 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+type BaseProps = {
+    /** Animation speed in seconds */
+    speed?: number;
+    /** Custom CSS class */
+    className?: string;
+    /** Render as anchor element */
+    href?: string;
+    /** Button content */
+    children?: ReactNode;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+};
+type RainbowButtonElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps>;
+export interface RainbowButtonProps extends BaseProps, RainbowButtonElementProps {
+}
+export declare const RainbowButton: import("react").ForwardRefExoticComponent<RainbowButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};