fancy-ui-react 0.2.0

package/dist/components/toast/index.d.ts

@@ -0,0 +1,6 @@
+export { Toast } from "./Toast.js";
+export type { ToastProps } from "./Toast.js";
+export { Toaster } from "./Toaster.js";
+export type { ToasterProps, ToasterPosition } from "./Toaster.js";
+export { toast, dismissToast } from "./store.js";
+export type { ToastVariant, ToastAction, ToastOptions, ToastItem } from "./store.js";

package/dist/components/toast/store.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Toast store — a module-level singleton, unlike every other reactive helper
+ * in this library (which is a per-instance factory a component calls).
+ * `toast()` has to be callable from anywhere — a submit handler, a promise
+ * rejection, code with no component instance in scope at all — so there can
+ * only be one stack per app, shared by whichever `<Toaster>` is mounted.
+ *
+ * This file owns the data and the timers. `Toast.tsx` and `Toaster.tsx`
+ * only render what this exposes; they never touch `items` or the timer map
+ * directly.
+ *
+ * Port note: the source's reactive module state becomes a plain module
+ * variable plus a listener set — `toastStore.subscribe` is port-added so a
+ * `<Toaster>` can read the stack through `useSyncExternalStore`. The
+ * consumer-facing surface (`toast`, `dismissToast`, `toastStore.items`) is
+ * unchanged.
+ */
+export type ToastVariant = "success" | "error" | "info" | "loading";
+export interface ToastAction {
+    /** Label for the toast's single optional action button, e.g. "Retry". */
+    label: string;
+    /** Called on activation. Does not dismiss the toast on its own — call `dismissToast` from inside if the action should also close it. */
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /** Primary line. */
+    title: string;
+    /** Secondary line, shown under the title. */
+    description?: string;
+    /** Controls the icon, the accent color, and the live region's politeness. Defaults to `"info"`. */
+    variant?: ToastVariant;
+    /**
+     * Milliseconds before auto-dismiss. `Infinity` means sticky — it never
+     * auto-dismisses. Defaults to 5000, except for `variant: "loading"`, which
+     * defaults to `Infinity`: a loading toast has no natural "done" time, and
+     * auto-dismissing it after a fixed delay would misreport an operation
+     * that is still running as finished.
+     */
+    duration?: number;
+    /** A single optional action button. */
+    action?: ToastAction;
+}
+export interface ToastItem {
+    readonly id: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly variant: ToastVariant;
+    readonly duration: number;
+    readonly action?: ToastAction;
+}
+/**
+ * Queues a toast and returns its id (usable with `dismissToast`). A no-op
+ * that returns `""` when called outside the browser: there is no client to
+ * show it to, and a module-level list surviving across requests on a
+ * long-lived server would leak toasts between unrelated users.
+ */
+export declare function toast(options: ToastOptions): string;
+/** Dismisses a toast immediately and clears its timer. Safe to call with an id that no longer exists. */
+export declare function dismissToast(id: string): void;
+/**
+ * Pauses a toast's auto-dismiss countdown — e.g. while the pointer or focus
+ * is on it — so `resumeToast` can continue it rather than restart it. A
+ * no-op for a sticky toast or one already paused (or already unarmed for
+ * some other reason, e.g. no `<Toaster>` currently mounted to run it).
+ */
+export declare function pauseToast(id: string): void;
+/**
+ * Resumes a paused toast's countdown from where it left off — the deadline
+ * shifts forward by exactly how long it spent paused, so the toast still
+ * gets the same amount of on-screen, unpaused time it was promised. A no-op
+ * if a live timer is already counting down (nothing to resume).
+ */
+export declare function resumeToast(id: string): void;
+/**
+ * Clears every pending timer's *handle* without touching the toasts or their
+ * deadlines. `<Toaster>` calls this when it unmounts. Deliberately does not
+ * touch `deadline`: unmounting isn't pausing — there is no pointer left
+ * hovering anything for a destroyed viewport, so the countdown a toast was
+ * promised keeps running in real time whether or not something is currently
+ * rendering it. `rearmToastTimers` is the other half of this: whatever a new
+ * `<Toaster>` inherits gets a live timer again, counting toward the same
+ * deadline. Also clears any stale `pausedAt` — a pause tied to a hover/focus
+ * on a now-destroyed element cannot mean anything to whatever mounts next.
+ */
+export declare function clearAllToastTimers(): void;
+/**
+ * Re-arms every timer left unarmed with nothing currently pausing it — i.e.
+ * every finite-duration toast whose previous `<Toaster>` went away before
+ * its time was up. Call this from a `<Toaster>`'s own mount: without it, a
+ * toast that outlives one viewport and is picked up by another stays
+ * visible forever with no timer ever going to dismiss it, since nothing else
+ * re-arms what `clearAllToastTimers` cleared. A deadline already in the past
+ * (the gap between viewports was longer than the time left) re-arms to a
+ * near-immediate dismiss through the same path, rather than a special case.
+ */
+export declare function rearmToastTimers(): void;
+/** Read-only view of the current toast stack, oldest first. `<Toaster>` renders this directly; nothing else should need to. */
+export declare const toastStore: {
+    readonly items: readonly ToastItem[];
+    /** Port-added: notifies on every stack change, for `useSyncExternalStore`. */
+    subscribe(listener: () => void): () => void;
+};

package/dist/components/toast/store.js

@@ -0,0 +1,118 @@
+"use client";
+const MAX_VISIBLE = 4;
+const DEFAULT_DURATION = 5e3;
+let items = [];
+let seq = 0;
+const listeners = /* @__PURE__ */ new Set();
+function setItems(next) {
+  items = next;
+  for (const listener of [...listeners]) {
+    listener();
+  }
+}
+const timers = /* @__PURE__ */ new Map();
+function clearHandle(id) {
+  const entry = timers.get(id);
+  if (entry?.handle !== void 0) {
+    clearTimeout(entry.handle);
+    entry.handle = void 0;
+  }
+}
+function armHandle(id) {
+  const entry = timers.get(id);
+  if (!entry) return;
+  const ms = Math.max(0, entry.deadline - Date.now());
+  entry.handle = setTimeout(() => dismissToast(id), ms);
+}
+function toast(options) {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  seq += 1;
+  const id = `toast-${seq}`;
+  const variant = options.variant ?? "info";
+  const duration = options.duration ?? (variant === "loading" ? Infinity : DEFAULT_DURATION);
+  const item = {
+    id,
+    title: options.title,
+    description: options.description,
+    variant,
+    duration,
+    action: options.action
+  };
+  const next = [...items, item];
+  if (next.length > MAX_VISIBLE) {
+    const evicted = next.shift();
+    if (evicted) {
+      clearHandle(evicted.id);
+      timers.delete(evicted.id);
+    }
+  }
+  setItems(next);
+  if (Number.isFinite(duration)) {
+    timers.set(id, { handle: void 0, deadline: Date.now() + duration, pausedAt: void 0 });
+    armHandle(id);
+  }
+  return id;
+}
+function dismissToast(id) {
+  setItems(items.filter((item) => item.id !== id));
+  clearHandle(id);
+  timers.delete(id);
+}
+function pauseToast(id) {
+  const entry = timers.get(id);
+  if (!entry || entry.handle === void 0) return;
+  clearHandle(id);
+  entry.pausedAt = Date.now();
+}
+function resumeToast(id) {
+  const entry = timers.get(id);
+  if (!entry || entry.handle !== void 0) return;
+  if (entry.pausedAt !== void 0) {
+    entry.deadline += Date.now() - entry.pausedAt;
+    entry.pausedAt = void 0;
+  }
+  if (entry.deadline <= Date.now()) {
+    dismissToast(id);
+    return;
+  }
+  armHandle(id);
+}
+function clearAllToastTimers() {
+  for (const entry of timers.values()) {
+    if (entry.handle !== void 0) {
+      clearTimeout(entry.handle);
+      entry.handle = void 0;
+    }
+    entry.pausedAt = void 0;
+  }
+}
+function rearmToastTimers() {
+  for (const [id, entry] of timers) {
+    if (entry.handle !== void 0) continue;
+    if (entry.pausedAt !== void 0) continue;
+    armHandle(id);
+  }
+}
+const toastStore = {
+  get items() {
+    return items;
+  },
+  /** Port-added: notifies on every stack change, for `useSyncExternalStore`. */
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+};
+export {
+  clearAllToastTimers,
+  dismissToast,
+  pauseToast,
+  rearmToastTimers,
+  resumeToast,
+  toast,
+  toastStore
+};

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleVariant = "ghost" | "outline";
+type BaseProps = {
+    /** Whether the toggle is currently pressed (active) */
+    pressed?: boolean;
+    /** Called with the new pressed state whenever the toggle is activated */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Visual size of the control */
+    size?: ToggleSize;
+    /** `"ghost"` has no resting border, `"outline"` keeps one at rest */
+    variant?: ToggleVariant;
+    /** Accessible name — required when `children` is icon-only */
+    label?: string;
+    /** Toggle content, typically a single glyph or a short label */
+    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;
+};
+export interface ToggleProps extends BaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {
+}
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css           */
+const SIZE_CLASSES = {
+  sm: "size-[30px] rounded-[6px] text-xs",
+  md: "size-[36px] rounded-[8px] text-sm",
+  lg: "size-[42px] rounded-[10px] text-base"
+};
+const Toggle = forwardRef(
+  ({
+    pressed: pressedProp,
+    onPressedChange,
+    disabled = false,
+    size = "md",
+    variant = "ghost",
+    label,
+    children,
+    className,
+    onClick,
+    sound = false,
+    ...restProps
+  }, ref) => {
+    const [pressed, setPressed] = useState(pressedProp ?? false);
+    const playCue = useSoundCue(sound);
+    const classes = cn(
+      // No `transition-colors` here: the colocated CSS below declares a
+      // `transition` shorthand on this same element, and it is loaded after
+      // Tailwind's utility layer, so the utility would have been silently
+      // replaced anyway. The colour channel is re-declared by hand there
+      // instead.
+      "ft-toggle inline-flex shrink-0 cursor-pointer items-center justify-center font-medium",
+      "focus-visible:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      SIZE_CLASSES[size],
+      variant === "outline" && "border border-border",
+      pressed ? "bg-secondary text-secondary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+      className
+    );
+    function toggle(event) {
+      onClick?.(event);
+      if (disabled) return;
+      const next = !pressed;
+      setPressed(next);
+      playCue(next ? "toggle-on" : "toggle-off");
+      onPressedChange?.(next);
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        "aria-pressed": pressed,
+        "aria-label": label,
+        disabled,
+        onClick: toggle,
+        ...restProps,
+        children
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+export {
+  Toggle
+};

package/dist/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle.js";
+export type { ToggleProps, ToggleSize, ToggleVariant } from "./Toggle.js";

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+export interface ToggleGroupProps {
+    /** Whether one item can be active at a time, or several. Defaults to `"single"`. */
+    type?: "single" | "multiple";
+    /**
+     * The active value(s) — a string when `type="single"`, an array of strings
+     * when `type="multiple"`. Omit it entirely to let the group own its own
+     * selection and report every change through `onValueChange`.
+     */
+    value?: string | string[];
+    /** Called with the new value, shaped to match `type`, whenever the selection changes. */
+    onValueChange?: (value: string | string[]) => void;
+    /** Disables every item in the group. */
+    disabled?: boolean;
+    /** Sizes every item. */
+    size?: "sm" | "md" | "lg";
+    /** The rail's stacking axis. Arrow keys work in both pairs regardless — see the README. */
+    orientation?: "horizontal" | "vertical";
+    /** Accessible name for the group. */
+    label?: string;
+    /** The `ToggleGroupItem`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 rail of mutually-aware toggles with one selection model and one roving
+ * tab stop.
+ *
+ * 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 ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-group/ToggleGroup.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { TOGGLE_GROUP_KEY } from "./types.js";
+/* empty css                 */
+const ToggleGroup = forwardRef(
+  ({
+    type = "single",
+    value: valueProp,
+    onValueChange,
+    disabled = false,
+    size = "md",
+    orientation = "horizontal",
+    label,
+    children,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const rootRef = useRef(null);
+    const setRootRef = useComposedRefs(forwardedRef, rootRef);
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+    const isControlled = valueProp !== void 0;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    function toArray(current) {
+      if (type === "single") {
+        if (Array.isArray(current)) return current.length > 0 ? [current[0]] : [];
+        return current === "" ? [] : [current];
+      }
+      return Array.isArray(current) ? current : current === "" ? [] : [current];
+    }
+    const selected = toArray(value);
+    const [registeredOrder, setRegisteredOrder] = useState([]);
+    const [focusedValueState, setFocusedValueState] = useState(null);
+    const playCue = useSoundCue(sound);
+    function isSelected(itemValue) {
+      return selected.includes(itemValue);
+    }
+    function commit(next) {
+      if (type === "single") {
+        const shaped = next[0] ?? "";
+        if (!isControlled) setUncontrolledValue(shaped);
+        onValueChange?.(shaped);
+      } else {
+        if (!isControlled) setUncontrolledValue(next);
+        onValueChange?.(next);
+      }
+    }
+    function toggle(itemValue) {
+      if (disabled) return;
+      const current = toArray(value);
+      const isOn = current.includes(itemValue);
+      playCue(type === "multiple" ? isOn ? "toggle-off" : "toggle-on" : "select");
+      if (type === "single") {
+        commit(isOn ? [] : [itemValue]);
+      } else {
+        commit(isOn ? current.filter((v) => v !== itemValue) : [...current, itemValue]);
+      }
+    }
+    const register = useCallback((itemValue) => {
+      setRegisteredOrder((order) => order.includes(itemValue) ? order : [...order, itemValue]);
+    }, []);
+    const unregister = useCallback((itemValue) => {
+      setRegisteredOrder((order) => {
+        const index = order.indexOf(itemValue);
+        if (index === -1) return order;
+        const next = order.slice();
+        next.splice(index, 1);
+        return next;
+      });
+    }, []);
+    const focus = useCallback((itemValue) => {
+      setFocusedValueState(itemValue);
+    }, []);
+    const orderedEnabledButtons = useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return [];
+      return Array.from(
+        root.querySelectorAll("[data-ft-toggle-item]:not(:disabled)")
+      );
+    }, []);
+    const goTo = useCallback((button) => {
+      const nextValue = button.dataset.value;
+      if (nextValue === void 0) return;
+      setFocusedValueState(nextValue);
+      button.focus();
+    }, []);
+    const move = useCallback(
+      (from, delta) => {
+        const buttons = orderedEnabledButtons();
+        if (buttons.length === 0) return;
+        const fromIndex = buttons.findIndex((el) => el.dataset.value === from);
+        const base = fromIndex === -1 ? 0 : fromIndex;
+        const nextIndex = ((base + delta) % buttons.length + buttons.length) % buttons.length;
+        goTo(buttons[nextIndex]);
+      },
+      [goTo, orderedEnabledButtons]
+    );
+    const moveToEdge = useCallback(
+      (edge) => {
+        const buttons = orderedEnabledButtons();
+        if (buttons.length === 0) return;
+        goTo(edge === "first" ? buttons[0] : buttons[buttons.length - 1]);
+      },
+      [goTo, orderedEnabledButtons]
+    );
+    let focusedValue = null;
+    if (focusedValueState !== null && registeredOrder.includes(focusedValueState)) {
+      focusedValue = focusedValueState;
+    } else if (registeredOrder.length > 0) {
+      focusedValue = registeredOrder.find((v) => selected.includes(v)) ?? registeredOrder[0];
+    }
+    const context = {
+      type,
+      value: selected,
+      disabled,
+      size,
+      orientation,
+      isSelected,
+      toggle,
+      register,
+      unregister,
+      focusedValue,
+      focus,
+      move,
+      moveToEdge
+    };
+    return /* @__PURE__ */ jsx(TOGGLE_GROUP_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRootRef,
+        className: cn(
+          "ft-toggle-group border-border bg-background inline-flex w-fit border",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        "data-orientation": orientation,
+        role: "group",
+        "aria-label": label,
+        children
+      }
+    ) });
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+export {
+  ToggleGroup
+};

package/dist/components/toggle-group/ToggleGroupItem.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface ToggleGroupItemProps {
+    /** This item's value — what gets added to or removed from the group's selection. */
+    value: string;
+    /** Disables just this item, independent of the group's own `disabled`. */
+    disabled?: boolean;
+    /** Accessible name, for icon-only content. Falls back to the rendered content. */
+    label?: string;
+    /** The item's content, typically a glyph or a short label. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * One toggle in a `ToggleGroup` rail.
+ *
+ * The 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, for the same reason as on the root.
+ */
+export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle-group/ToggleGroupItem.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { TOGGLE_GROUP_KEY } from "./types.js";
+/* empty css                      */
+const SIZE_CLASSES = {
+  sm: "h-[26px] min-w-[26px] rounded-[4px] px-2 text-xs",
+  md: "h-[30px] min-w-[32px] rounded-[6px] px-2.5 text-sm",
+  lg: "h-[34px] min-w-[36px] rounded-[8px] px-3 text-base"
+};
+const ToggleGroupItem = forwardRef(
+  ({ value, disabled = false, label, children, className }, forwardedRef) => {
+    const group = useContext(TOGGLE_GROUP_KEY);
+    const innerRef = useRef(null);
+    const setRef = useComposedRefs(forwardedRef, innerRef);
+    const isDisabled = disabled || (group?.disabled ?? false);
+    const isSelected = group?.isSelected(value) ?? false;
+    const size = group?.size ?? "md";
+    const tabIndexAttr = group ? group.focusedValue === value ? 0 : -1 : void 0;
+    const classes = cn(
+      // No `transition-colors`: the colocated stylesheet puts a `transition`
+      // shorthand on this same element, and its rules are unlayered while
+      // Tailwind utilities live in `@layer utilities`, so the utility
+      // would have been replaced without a trace. The colour channel is
+      // re-declared by hand there instead.
+      "ft-toggle-group-item inline-flex shrink-0 cursor-pointer items-center justify-center font-medium",
+      "focus-visible:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      SIZE_CLASSES[size],
+      isSelected ? "bg-secondary text-secondary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+      className
+    );
+    const register = group?.register;
+    const unregister = group?.unregister;
+    useEffect(() => {
+      if (!register || !unregister || isDisabled) return;
+      const registeredValue = value;
+      register(registeredValue);
+      return () => unregister(registeredValue);
+    }, [register, unregister, isDisabled, value]);
+    function handleClick() {
+      if (isDisabled) return;
+      group?.toggle(value);
+      group?.focus(value);
+      innerRef.current?.focus();
+    }
+    function handleFocus() {
+      if (isDisabled) return;
+      group?.focus(value);
+    }
+    function handleKeydown(event) {
+      if (!group || isDisabled) return;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          group.move(value, 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          group.move(value, -1);
+          break;
+        case "Home":
+          event.preventDefault();
+          group.moveToEdge("first");
+          break;
+        case "End":
+          event.preventDefault();
+          group.moveToEdge("last");
+          break;
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: setRef,
+        type: "button",
+        "data-ft-toggle-item": "",
+        "data-value": value,
+        "data-size": size,
+        className: classes,
+        disabled: isDisabled,
+        "aria-pressed": isSelected,
+        "aria-label": label,
+        tabIndex: tabIndexAttr,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onKeyDown: handleKeydown,
+        children: children !== void 0 ? children : label ?? value
+      }
+    );
+  }
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+export {
+  ToggleGroupItem
+};

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

@@ -0,0 +1,6 @@
+export { ToggleGroup } from "./ToggleGroup.js";
+export type { ToggleGroupProps } from "./ToggleGroup.js";
+export { ToggleGroupItem } from "./ToggleGroupItem.js";
+export type { ToggleGroupItemProps } from "./ToggleGroupItem.js";
+export { TOGGLE_GROUP_KEY } from "./types.js";
+export type { ToggleGroupContext } from "./types.js";