fancy-ui-react 0.2.0

package/dist/internals/use-float.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Floating element positioning — the DOM-observing half of `float.ts`.
+ *
+ * `attachFloat` is the framework-free core (the Svelte `float` action's exact
+ * body, ported as-is: same rAF coalescing, same ResizeObserver watch on the
+ * float and its anchor, same visibility hiding while a getter anchor has
+ * nothing to point at). `useFloat` is a thin React binding on top, shaped
+ * like `use-anchor-position.ts`: a node-first hook that mounts and destroys
+ * the core in a layout effect (a post-paint position is a visible jump from
+ * the origin) and returns the placement as actually resolved.
+ */
+import type { FloatOptions, FloatPlacement } from "./float.js";
+/**
+ * Internal-only extension of `FloatOptions`: a hook can't observe the
+ * placement `attachFloat` writes onto `node.dataset.placement` without a
+ * callback, so the hook layer threads one through here. Not part of the
+ * public `FloatOptions` shape — the ported action test never passes it, and
+ * omitting it reproduces the exact original behaviour.
+ */
+interface AttachFloatOptions extends FloatOptions {
+    onPlacement?: (placement: FloatPlacement) => void;
+}
+export interface FloatHandle {
+    /** Swaps the options and re-syncs — the action's `update` under a new name. */
+    update(next: AttachFloatOptions): void;
+    /** Detaches every listener/observer and strips the node's own styles. */
+    destroy(): void;
+}
+/**
+ * Positions `node` with `position: fixed` against a live anchor, using
+ * `computeFloatPosition`. Recomputes on scroll/resize (coalesced into one
+ * rAF) and on a ResizeObserver watching both the float and its anchor
+ * element. SSR-safe: does nothing when `window` is unavailable.
+ */
+export declare function attachFloat(node: HTMLElement, opts: AttachFloatOptions): FloatHandle;
+export interface UseFloatResult {
+    /** The placement as actually resolved — flipped when the requested side ran out of room. */
+    readonly placement: FloatPlacement;
+}
+/**
+ * Positions `node` with `position: fixed` against `options.anchor`. Mirrors
+ * `useAnchorPosition`'s shape: one layout effect keyed `[node]` mounts and
+ * destroys the core, a second re-syncs whenever an option that affects
+ * geometry changes, and the resolved placement is returned rather than
+ * discarded — the same collapse `useAnchorPosition`'s `onPlacement` return
+ * value buys its own callers.
+ */
+export declare function useFloat(node: HTMLElement | null, options: FloatOptions): UseFloatResult;
+export type { FloatOptions, FloatPlacement, FloatRect } from "./float.js";

package/dist/internals/use-float.js

@@ -0,0 +1,150 @@
+"use client";
+import { useRef, useState } from "react";
+import { useEventCallback } from "./dom/use-event-callback.js";
+import { useIsomorphicLayoutEffect } from "./dom/ssr.js";
+import { computeFloatPosition } from "./float.js";
+const DEFAULT_PLACEMENT = "bottom-start";
+function readAnchor(anchor) {
+  if (typeof anchor === "function") return anchor();
+  if (typeof anchor.getBoundingClientRect === "function") {
+    const { x, y, width, height } = anchor.getBoundingClientRect();
+    return { x, y, width, height };
+  }
+  return anchor;
+}
+function anchorElement(anchor) {
+  if (typeof anchor !== "object" || anchor === null) return null;
+  return typeof anchor.getBoundingClientRect === "function" ? anchor : null;
+}
+function attachFloat(node, opts) {
+  if (typeof window === "undefined") {
+    return { update() {
+    }, destroy() {
+    } };
+  }
+  let options = opts;
+  let frame = null;
+  let listening = false;
+  let sizes = null;
+  let reportedPlacement = null;
+  const position = () => {
+    node.style.position = "fixed";
+    node.style.visibility = "";
+    const anchor = readAnchor(options.anchor);
+    if (!anchor) {
+      node.style.visibility = "hidden";
+      return;
+    }
+    node.style.width = options.matchWidth ? `${anchor.width}px` : "";
+    const box = node.getBoundingClientRect();
+    const { top, left, placement } = computeFloatPosition(
+      anchor,
+      { width: box.width, height: box.height },
+      { width: window.innerWidth, height: window.innerHeight },
+      {
+        placement: options.placement ?? "bottom-start",
+        offset: options.offset ?? 6,
+        padding: options.padding ?? 8
+      }
+    );
+    node.style.top = `${top}px`;
+    node.style.left = `${left}px`;
+    node.dataset.placement = placement;
+    if (placement !== reportedPlacement) {
+      reportedPlacement = placement;
+      options.onPlacement?.(placement);
+    }
+  };
+  const schedule = () => {
+    if (frame !== null) return;
+    frame = requestAnimationFrame(() => {
+      frame = null;
+      position();
+    });
+  };
+  const observeSizes = () => {
+    if (typeof ResizeObserver === "undefined") return;
+    sizes ??= new ResizeObserver(schedule);
+    sizes.disconnect();
+    sizes.observe(node);
+    const anchor = anchorElement(options.anchor);
+    if (anchor) sizes.observe(anchor);
+  };
+  const listen = (on) => {
+    if (on === listening) return;
+    listening = on;
+    if (on) {
+      window.addEventListener("scroll", schedule, { capture: true, passive: true });
+      window.addEventListener("resize", schedule, { passive: true });
+    } else {
+      window.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+      sizes?.disconnect();
+      sizes = null;
+    }
+  };
+  const reset = () => {
+    if (frame !== null) cancelAnimationFrame(frame);
+    frame = null;
+    node.style.position = "";
+    node.style.top = "";
+    node.style.left = "";
+    node.style.width = "";
+    node.style.visibility = "";
+    delete node.dataset.placement;
+  };
+  const sync = () => {
+    if (options.enabled === false) {
+      listen(false);
+      reset();
+      return;
+    }
+    listen(true);
+    observeSizes();
+    position();
+  };
+  sync();
+  return {
+    update(next) {
+      options = next;
+      sync();
+    },
+    destroy() {
+      listen(false);
+      sizes?.disconnect();
+      sizes = null;
+      reset();
+    }
+  };
+}
+function useFloat(node, options) {
+  const handleRef = useRef(null);
+  const [placement, setPlacement] = useState(options.placement ?? DEFAULT_PLACEMENT);
+  const onPlacement = useEventCallback((next) => setPlacement(next));
+  useIsomorphicLayoutEffect(() => {
+    if (!node) return;
+    const handle = attachFloat(node, { ...options, onPlacement });
+    handleRef.current = handle;
+    return () => {
+      handle.destroy();
+      handleRef.current = null;
+    };
+  }, [node]);
+  useIsomorphicLayoutEffect(() => {
+    handleRef.current?.update({ ...options, onPlacement });
+  }, [
+    node,
+    options.anchor,
+    options.placement,
+    options.offset,
+    options.padding,
+    options.matchWidth,
+    options.enabled,
+    onPlacement
+  ]);
+  return { placement };
+}
+export {
+  attachFloat,
+  useFloat
+};

package/dist/internals/use-id.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A unique, SSR-stable id string for the calling component instance, e.g.
+ * "fui-«r0»". Stable across the server render and hydration, and stable for
+ * the life of the component.
+ *
+ * Call it once and suffix the result for every id the component needs; a
+ * second call is a second seed, not a second id off the same one.
+ *
+ * @param prefix - Prefix for the generated id (defaults to "fui").
+ */
+export declare function useFancyId(prefix?: string): string;
+/**
+ * Returns a unique, stable id string, e.g. "fui-1", "fui-2", ...
+ *
+ * Client-only: throws when called on the server, since the id produced
+ * there would not match the one the client regenerates on hydration. Call
+ * this only from browser-only code paths (effects, event handlers) — use
+ * `useFancyId()` for ids that must survive SSR + hydration.
+ *
+ * @param prefix - Prefix for the generated id (defaults to "fui").
+ */
+export declare function uid(prefix?: string): string;

package/dist/internals/use-id.js

@@ -0,0 +1,20 @@
+"use client";
+import { useId } from "react";
+let n = 0;
+function useFancyId(prefix = "fui") {
+  const id = useId();
+  return `${prefix}-${id}`;
+}
+function uid(prefix = "fui") {
+  if (typeof window === "undefined") {
+    throw new Error(
+      "uid() is client-only and must not be called during SSR; use useFancyId() for SSR-stable ids."
+    );
+  }
+  n += 1;
+  return `${prefix}-${n}`;
+}
+export {
+  uid,
+  useFancyId
+};

package/dist/internals/use-text-stream.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Text stream
+ *
+ * The consumer pushes a growing string — the whole text so far, not the
+ * delta — and this turns each growth step into a short-lived "fresh" segment
+ * so a view can tint what just arrived. After `settleMs` the segment stops
+ * being fresh and is merged back into its settled neighbours, so a long
+ * stream never accumulates more than a handful of spans.
+ *
+ * A push that is not a continuation of the current text (a regenerated
+ * answer, or chunks arriving out of order) is treated as a replacement: the
+ * new text lands already settled, with nothing to animate from.
+ *
+ * Nothing is scheduled until the first push, so building one during a render
+ * is safe.
+ */
+export interface StreamSegment {
+    /** Stable key for a keyed list; segments keep their id across merges. */
+    id: number;
+    text: string;
+    /** True while the segment is still animating in. */
+    fresh: boolean;
+}
+export interface TextStreamOptions {
+    /**
+     * How long a delta stays fresh before it settles, in ms. Pass a getter
+     * when the value can change after construction: it is read once per
+     * push, so a later duration applies to later chunks instead of only to
+     * the CSS.
+     */
+    settleMs?: number | (() => number);
+    /** Set false to skip the animation entirely: every push settles at once. */
+    animate?: boolean;
+}
+export interface TextStream {
+    /** The current segments, oldest first. Reactive. */
+    readonly segments: StreamSegment[];
+    /** The full text pushed so far. Reactive. */
+    readonly text: string;
+    /** Hand over the whole text so far; the delta is worked out from it. */
+    push(fullText: string): void;
+    /** Drop everything and start again from `text`, already settled. */
+    reset(text?: string): void;
+    /** Settle every currently-fresh segment immediately, cancelling their timers. */
+    flush(): void;
+    /** Cancel pending settle timers. Call from the consumer's teardown. */
+    destroy(): void;
+    /**
+     * Re-arm a settle timer for every segment still marked fresh with nothing
+     * left to settle it. Not part of the Svelte source's surface: it exists
+     * because a React effect can be torn down and replayed without the
+     * component ever unmounting (StrictMode's mount rehearsal), which runs
+     * `destroy()` between a push and its settle. The replayed push is a no-op
+     * — the full text is already stored — so without this the segment would
+     * stay `fresh` for ever and `done` would never become true.
+     */
+    resume(): void;
+    /**
+     * Subscribe to every change of `segments`/`text`. Not part of the Svelte
+     * source's surface — the React counterpart of the `$state.raw` runes that
+     * made them reactive there; `useTextStream` is what actually reads this.
+     */
+    subscribe(listener: () => void): () => void;
+}
+export declare function createTextStream(initial?: string, opts?: TextStreamOptions): TextStream;
+export interface UseTextStreamResult {
+    readonly text: string;
+    readonly segments: StreamSegment[];
+    push(fullText: string): void;
+    reset(text?: string): void;
+    flush(): void;
+    /** True once nothing in `segments` is still animating in. */
+    readonly done: boolean;
+}
+/**
+ * Built once from `initial`/`options` (matching `createTextStream`'s own
+ * single construction call on the Svelte side) and subscribed through
+ * `useSyncExternalStore`; the segment-list snapshot is identity-cached by
+ * the store itself — unchanged between publishes — so React never loops.
+ * `destroy()` is removed from the returned surface and called in the hook's
+ * own cleanup instead (D-5): a pacing timer left running past unmount can no
+ * longer happen.
+ *
+ * That cleanup can run WITHOUT an unmount, though — StrictMode rehearses
+ * every effect as mount/cleanup/mount — and the typical consumer pushes from
+ * a mount effect of its own. First pass: push stores the text and starts a
+ * settle timer. Cleanup: the timer is cancelled. Replay: the push is a no-op,
+ * because the full text is already stored, so nothing reschedules the settle
+ * and the segment stays `fresh` for ever — `done` never turns true and the
+ * enter animation never ends. `resume()` on the way back in is what closes
+ * that, and it is a no-op on a first mount and on any stream with timers
+ * still in flight.
+ */
+export declare function useTextStream(initial?: string, options?: TextStreamOptions): UseTextStreamResult;

package/dist/internals/use-text-stream.js

@@ -0,0 +1,133 @@
+"use client";
+import { useSyncExternalStore, useEffect } from "react";
+import { useConstant } from "./dom/ssr.js";
+const DEFAULT_SETTLE_MS = 350;
+function createTextStream(initial = "", opts = {}) {
+  const settleOption = opts.settleMs;
+  const settleAt = typeof settleOption === "function" ? settleOption : () => settleOption ?? DEFAULT_SETTLE_MS;
+  const animate = opts.animate !== false;
+  let list = [];
+  let full = "";
+  let nextId = 0;
+  const timers = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Set();
+  let view = [];
+  let textView = "";
+  function notify() {
+    for (const listener of listeners) listener();
+  }
+  function publish() {
+    view = list.map((s) => ({ ...s }));
+    textView = full;
+    notify();
+  }
+  function clearTimers() {
+    for (const timer of timers) clearTimeout(timer);
+    timers.clear();
+  }
+  function merge() {
+    const merged = [];
+    for (const seg of list) {
+      const last = merged[merged.length - 1];
+      if (last && !last.fresh && !seg.fresh) last.text += seg.text;
+      else merged.push({ ...seg });
+    }
+    list = merged;
+  }
+  function settle(id) {
+    const seg = list.find((s) => s.id === id);
+    if (!seg) return;
+    seg.fresh = false;
+    merge();
+    publish();
+  }
+  function reset(text = "") {
+    clearTimers();
+    full = text;
+    list = text ? [{ id: nextId++, text, fresh: false }] : [];
+    publish();
+  }
+  function scheduleSettle(id) {
+    const timer = setTimeout(
+      () => {
+        timers.delete(timer);
+        settle(id);
+      },
+      Math.max(0, settleAt())
+    );
+    timers.add(timer);
+  }
+  function push(fullText) {
+    if (fullText === full) return;
+    if (!fullText.startsWith(full)) {
+      reset(fullText);
+      return;
+    }
+    const seg = {
+      id: nextId++,
+      text: fullText.slice(full.length),
+      fresh: animate
+    };
+    full = fullText;
+    list.push(seg);
+    if (!animate) {
+      merge();
+      publish();
+      return;
+    }
+    publish();
+    scheduleSettle(seg.id);
+  }
+  function resume() {
+    if (!animate || timers.size > 0) return;
+    for (const seg of list) {
+      if (seg.fresh) scheduleSettle(seg.id);
+    }
+  }
+  function flush() {
+    if (timers.size === 0 && !list.some((s) => s.fresh)) return;
+    clearTimers();
+    for (const seg of list) seg.fresh = false;
+    merge();
+    publish();
+  }
+  reset(initial);
+  return {
+    get segments() {
+      return view;
+    },
+    get text() {
+      return textView;
+    },
+    push,
+    reset,
+    flush,
+    destroy: clearTimers,
+    resume,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+function useTextStream(initial = "", options = {}) {
+  const stream = useConstant(() => createTextStream(initial, options));
+  const segments = useSyncExternalStore(stream.subscribe, () => stream.segments, () => stream.segments);
+  const text = useSyncExternalStore(stream.subscribe, () => stream.text, () => stream.text);
+  useEffect(() => {
+    stream.resume();
+    return stream.destroy;
+  }, [stream]);
+  return {
+    text,
+    segments,
+    push: stream.push,
+    reset: stream.reset,
+    flush: stream.flush,
+    done: !segments.some((s) => s.fresh)
+  };
+}
+export {
+  createTextStream,
+  useTextStream
+};

package/dist/internals/waveform-core.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Waveform rendering primitives.
+ *
+ * Pure drawing math kept out of the component so it can be unit-tested against
+ * a stub 2D context: given a context and a set of 0..1 samples, paint one frame
+ * of vertical bars. No canvas, timing, or DOM access lives here.
+ */
+export interface WaveformStyle {
+    /** Any canvas fill style — solid colour, gradient string, etc. */
+    color: string;
+    /** Bar thickness in pixels. */
+    barWidth: number;
+    /** Empty space between bars, in pixels. */
+    gap: number;
+    /** Amplitude floor (0..1) so an idle signal still reads as a waveform. */
+    minAmp: number;
+    /** True centres each bar vertically; false grows it up from the bottom. */
+    mirror: boolean;
+}
+/**
+ * Paints one frame: clears the surface, then draws `floor(width / (barWidth +
+ * gap))` bars. Each bar covers its own slice of the buffer and takes that
+ * slice's peak, so the last bar reaches the end of the buffer and a transient
+ * between two sample points is never skipped. Bar height is
+ * `max(minAmp, sample) * height`, so a silent signal still shows a floor.
+ */
+export declare function drawWaveformFrame(ctx: CanvasRenderingContext2D, samples: ArrayLike<number>, width: number, height: number, style: WaveformStyle): void;
+/**
+ * Stand-in amplitude for an idle or unmetered source: layered sines of the bar
+ * index and the elapsed time. Deterministic — same arguments, same value — so
+ * frames stay reproducible in tests and across a re-render.
+ */
+export declare function fakeWaveSample(i: number, tMs: number): number;

package/dist/internals/waveform-core.js

@@ -0,0 +1,39 @@
+"use client";
+function clamp01(value) {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function drawWaveformFrame(ctx, samples, width, height, style) {
+  ctx.clearRect(0, 0, width, height);
+  const step = style.barWidth + style.gap;
+  if (step <= 0 || width <= 0 || height <= 0) return;
+  const barCount = Math.floor(width / step);
+  if (barCount <= 0) return;
+  const floorAmp = clamp01(style.minAmp);
+  const sampleCount = samples.length;
+  ctx.fillStyle = style.color;
+  const perBar = sampleCount / barCount;
+  for (let i = 0; i < barCount; i++) {
+    let sample = 0;
+    if (sampleCount > 0) {
+      const from = Math.min(Math.floor(i * perBar), sampleCount - 1);
+      const to = i === barCount - 1 ? sampleCount : Math.max(Math.floor((i + 1) * perBar), from + 1);
+      for (let s = from; s < to; s++) sample = Math.max(sample, clamp01(samples[s] ?? 0));
+    }
+    const barHeight = Math.max(floorAmp, sample) * height;
+    const x = i * step;
+    const y = (height - barHeight) / 2;
+    ctx.fillRect(x, y, style.barWidth, barHeight);
+  }
+}
+function fakeWaveSample(i, tMs) {
+  return clamp01(
+    0.5 + 0.2 * Math.sin(i * 0.35 + tMs * 4e-3) + 0.15 * Math.sin(i * 0.13 - tMs * 2e-3) + 0.1 * Math.sin(tMs * 8e-3)
+  );
+}
+export {
+  drawWaveformFrame,
+  fakeWaveSample
+};

package/dist/sound/SoundToggle.d.ts

@@ -0,0 +1,23 @@
+export type SoundToggleSize = "sm" | "md" | "lg";
+export type SoundToggleVariant = "outline" | "ghost";
+export interface SoundToggleProps {
+    /** Visual size of the control; `md` matches header-style triggers */
+    size?: SoundToggleSize;
+    /** `"outline"` keeps a resting border, `"ghost"` shows one only on hover */
+    variant?: SoundToggleVariant;
+    /** Renders the label and the On/Off word beside the icon; icon-only otherwise */
+    showLabel?: boolean;
+    /** Accessible name of the switch. Stays constant — the state is announced through aria-checked */
+    label?: string;
+    /** Visible state word when `showLabel` is set */
+    labelOn?: string;
+    /** Visible state word when `showLabel` is set */
+    labelOff?: string;
+    /** Disables the control. A browser with no Web Audio also disables it — but only while sound is off, so a stored "on" can always be undone */
+    disabled?: boolean;
+    /** Called after the preference flips, with the new value */
+    onEnabledChange?: (enabled: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const SoundToggle: import("react").ForwardRefExoticComponent<SoundToggleProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/sound/SoundToggle.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../utils.js";
+import { sound } from "./sound.js";
+import { useSoundEnabled, useSoundEngineState } from "./use-sound.js";
+/* empty css                 */
+const SIZE_CLASSES = {
+  sm: "h-8 gap-1 rounded-md px-1.5 text-xs",
+  md: "h-9 gap-1.5 rounded-md px-2 text-sm",
+  lg: "h-10 gap-2 rounded-md px-2.5 text-sm"
+};
+const ICON_SIZE = { sm: 14, md: 16, lg: 18 };
+const SoundToggle = forwardRef(function SoundToggle2({
+  size = "md",
+  variant = "outline",
+  showLabel = false,
+  label = "Sound",
+  labelOn = "On",
+  labelOff = "Off",
+  disabled = false,
+  onEnabledChange,
+  className
+}, ref) {
+  const enabled = useSoundEnabled();
+  const unsupported = useSoundEngineState() === "unsupported";
+  const effectiveDisabled = disabled || unsupported && !enabled;
+  const classes = cn(
+    "ft-sound-toggle text-foreground inline-flex shrink-0 items-center font-medium transition-colors",
+    "focus-visible:outline-none",
+    "disabled:pointer-events-none disabled:opacity-50",
+    SIZE_CLASSES[size],
+    variant === "outline" ? "border-border bg-background hover:bg-accent hover:text-accent-foreground border" : "hover:bg-accent hover:text-accent-foreground",
+    className
+  );
+  function handleClick() {
+    if (effectiveDisabled) return;
+    const next = sound.toggle();
+    if (next) {
+      void sound.unlock().then((ok) => {
+        if (ok) sound.play("toggle-on");
+      });
+    }
+    onEnabledChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": enabled,
+      "aria-label": label,
+      disabled: effectiveDisabled,
+      title: unsupported ? "This browser has no Web Audio support" : void 0,
+      "data-sound-toggle": "",
+      "data-state": enabled ? "on" : "off",
+      "data-size": size,
+      "data-variant": variant,
+      className: classes,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "ft-sound-toggle-icon shrink-0",
+            width: ICON_SIZE[size],
+            height: ICON_SIZE[size],
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M11 5 6 9H2v6h4l5 4V5z" }),
+              /* @__PURE__ */ jsxs("g", { className: "ft-sound-toggle-glyph ft-sound-toggle-glyph-on", children: [
+                /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" }),
+                /* @__PURE__ */ jsx("path", { d: "M19 5a9 9 0 0 1 0 14" })
+              ] }),
+              /* @__PURE__ */ jsx("g", { className: "ft-sound-toggle-glyph ft-sound-toggle-glyph-off", children: /* @__PURE__ */ jsx("path", { d: "m16 9 6 6M22 9l-6 6" }) })
+            ]
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: label }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: enabled ? labelOn : labelOff })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  SoundToggle
+};