atlasui-lib 0.1.0

package/src/components/utility/index.tsx

@@ -0,0 +1,411 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+// ─── ThemeSwitcher ─────────────────────────────────────────────────────────
+
+export type Theme = "light" | "dark" | "system";
+
+export interface ThemeSwitcherProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "onChange"> {
+  value?: Theme;
+  onChange?: (theme: Theme) => void;
+  variant?: "icon" | "toggle" | "select";
+}
+
+const ThemeSwitcher = React.forwardRef<HTMLDivElement, ThemeSwitcherProps>(
+  ({ className, value = "system", onChange, variant = "icon", ...props }, ref) => {
+    const icons: Record<Theme, React.ReactNode> = {
+      light: (
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" />
+        </svg>
+      ),
+      dark: (
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      ),
+      system: (
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      ),
+    };
+
+    const themes: Theme[] = ["light", "dark", "system"];
+
+    if (variant === "icon") {
+      const next: Record<Theme, Theme> = { light: "dark", dark: "system", system: "light" };
+      return (
+        <div ref={ref} className={cn("atlas-theme-switcher", className)} {...props}>
+          <button
+            type="button"
+            onClick={() => onChange?.(next[value])}
+            aria-label={`Current theme: ${value}. Switch to ${next[value]}`}
+            className="h-9 w-9 flex items-center justify-center rounded-md border border-border hover:bg-accent transition-colors"
+          >
+            {icons[value]}
+          </button>
+        </div>
+      );
+    }
+
+    if (variant === "toggle") {
+      return (
+        <div ref={ref} className={cn("atlas-theme-switcher inline-flex rounded-md border border-border overflow-hidden", className)} {...props} role="group" aria-label="Theme selection">
+          {themes.map((theme) => (
+            <button
+              key={theme}
+              type="button"
+              onClick={() => onChange?.(theme)}
+              aria-pressed={value === theme}
+              aria-label={`${theme} theme`}
+              className={cn(
+                "flex h-8 w-8 items-center justify-center border-r last:border-r-0 border-border transition-colors",
+                value === theme ? "bg-accent text-accent-foreground" : "hover:bg-muted"
+              )}
+            >
+              {icons[theme]}
+            </button>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div ref={ref} className={cn("atlas-theme-switcher", className)} {...props}>
+        <select
+          value={value}
+          onChange={(e) => onChange?.(e.target.value as Theme)}
+          aria-label="Select theme"
+          className="h-9 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          {themes.map((theme) => (
+            <option key={theme} value={theme} className="capitalize">
+              {theme.charAt(0).toUpperCase() + theme.slice(1)}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+);
+ThemeSwitcher.displayName = "ThemeSwitcher";
+
+// ─── CopyButton ────────────────────────────────────────────────────────────
+
+export interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  timeout?: number;
+  onCopied?: () => void;
+  size?: "sm" | "md" | "lg";
+  variant?: "icon" | "button";
+  label?: string;
+}
+
+const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({ className, text, timeout = 2000, onCopied, size = "md", variant = "icon", label = "Copy", ...props }, ref) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        onCopied?.();
+        setTimeout(() => setCopied(false), timeout);
+      } catch {
+        // Fallback
+        const el = document.createElement("textarea");
+        el.value = text;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        document.body.removeChild(el);
+        setCopied(true);
+        setTimeout(() => setCopied(false), timeout);
+      }
+    };
+
+    const iconSize = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={handleCopy}
+        aria-label={copied ? "Copied!" : label}
+        className={cn(
+          "atlas-copy-button inline-flex items-center justify-center gap-1.5 rounded-md transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          variant === "icon" && [
+            size === "sm" && "h-7 w-7",
+            size === "md" && "h-8 w-8",
+            size === "lg" && "h-9 w-9",
+            "border border-border hover:bg-accent text-muted-foreground hover:text-foreground",
+          ],
+          variant === "button" && [
+            "px-3 border border-border hover:bg-accent text-sm",
+            size === "sm" && "h-7 text-xs",
+            size === "md" && "h-8",
+            size === "lg" && "h-9",
+          ],
+          copied && "text-success border-success/30",
+          className
+        )}
+        {...props}
+      >
+        {copied ? (
+          <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+          </svg>
+        ) : (
+          <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+            />
+          </svg>
+        )}
+        {variant === "button" && <span>{copied ? "Copied!" : label}</span>}
+      </button>
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+
+// ─── KeyboardShortcut ──────────────────────────────────────────────────────
+
+export interface KeyboardShortcutProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color" | "size"> {
+  keys: string[];
+  separator?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const KeyboardShortcut = React.forwardRef<HTMLSpanElement, KeyboardShortcutProps>(
+  ({ className, keys, separator = "+", size = "md", ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("atlas-kbd inline-flex items-center gap-0.5", className)}
+      aria-label={`Keyboard shortcut: ${keys.join(separator)}`}
+      {...props}
+    >
+      {keys.map((key, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && (
+            <span className="text-muted-foreground/60 mx-0.5 text-xs">{separator}</span>
+          )}
+          <kbd
+            className={cn(
+              "inline-flex items-center justify-center rounded border border-border bg-muted font-mono font-medium",
+              "shadow-[inset_0_-1px_0_0_rgb(0_0_0_/_0.1)] dark:shadow-[inset_0_-1px_0_0_rgb(255_255_255_/_0.05)]",
+              size === "sm" && "h-5 min-w-[1.25rem] px-1 text-[10px]",
+              size === "md" && "h-6 min-w-[1.5rem] px-1.5 text-xs",
+              size === "lg" && "h-7 min-w-[1.75rem] px-2 text-sm",
+            )}
+          >
+            {key}
+          </kbd>
+        </React.Fragment>
+      ))}
+    </span>
+  )
+);
+KeyboardShortcut.displayName = "KeyboardShortcut";
+
+// ─── ResizablePanel ────────────────────────────────────────────────────────
+
+export interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  direction?: "horizontal" | "vertical";
+  onResize?: (size: number) => void;
+}
+
+const ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(
+  ({
+    className,
+    children,
+    defaultSize = 300,
+    minSize = 100,
+    maxSize = 800,
+    direction = "horizontal",
+    onResize,
+    style,
+    ...props
+  }, ref) => {
+    const [size, setSize] = React.useState(defaultSize);
+    const isDragging = React.useRef(false);
+    const startPos = React.useRef(0);
+    const startSize = React.useRef(defaultSize);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      isDragging.current = true;
+      startPos.current = direction === "horizontal" ? e.clientX : e.clientY;
+      startSize.current = size;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        if (!isDragging.current) return;
+        const pos = direction === "horizontal" ? e.clientX : e.clientY;
+        const delta = pos - startPos.current;
+        const newSize = Math.min(maxSize, Math.max(minSize, startSize.current + delta));
+        setSize(newSize);
+        onResize?.(newSize);
+      };
+
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("atlas-resizable-panel relative overflow-hidden", className)}
+        style={{
+          ...(direction === "horizontal" ? { width: size } : { height: size }),
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+        <div
+          onMouseDown={handleMouseDown}
+          role="separator"
+          aria-orientation={direction}
+          aria-label="Resize panel"
+          tabIndex={0}
+          className={cn(
+            "atlas-resize-handle absolute z-10 flex items-center justify-center",
+            "bg-transparent hover:bg-primary/20 transition-colors cursor-col-resize group",
+            direction === "horizontal"
+              ? "right-0 top-0 h-full w-1.5 cursor-col-resize"
+              : "bottom-0 left-0 w-full h-1.5 cursor-row-resize"
+          )}
+        >
+          <div className={cn(
+            "rounded-full bg-border group-hover:bg-primary/50 transition-colors",
+            direction === "horizontal" ? "h-8 w-1" : "w-8 h-1"
+          )} />
+        </div>
+      </div>
+    );
+  }
+);
+ResizablePanel.displayName = "ResizablePanel";
+
+// ─── DragDropArea ──────────────────────────────────────────────────────────
+
+export interface DragDropAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop" | "onDragOver"> {
+  onDrop?: (items: DataTransfer) => void;
+  onDragOver?: (e: React.DragEvent) => void;
+  accept?: string[];
+  disabled?: boolean;
+  active?: boolean;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  hint?: React.ReactNode;
+}
+
+const DragDropArea = React.forwardRef<HTMLDivElement, DragDropAreaProps>(
+  ({
+    className,
+    onDrop,
+    accept,
+    disabled,
+    active: externalActive,
+    label,
+    icon,
+    hint,
+    children,
+    ...props
+  }, ref) => {
+    const [internalActive, setInternalActive] = React.useState(false);
+    const active = externalActive ?? internalActive;
+    const [dragCounter, setDragCounter] = React.useState(0);
+
+    const handleDragEnter = (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragCounter((c) => c + 1);
+      setInternalActive(true);
+    };
+
+    const handleDragLeave = () => {
+      setDragCounter((c) => {
+        const next = c - 1;
+        if (next <= 0) setInternalActive(false);
+        return next;
+      });
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragCounter(0);
+      setInternalActive(false);
+      if (!disabled) {
+        onDrop?.(e.dataTransfer);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        aria-label="Drop zone"
+        aria-disabled={disabled}
+        className={cn(
+          "atlas-drag-drop flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 text-center",
+          "transition-colors duration-150",
+          active && !disabled && "border-primary bg-primary/5",
+          !active && "border-border hover:border-primary/50 hover:bg-muted/30",
+          disabled && "opacity-50 cursor-not-allowed border-border",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <div className={cn(
+              "rounded-full p-3 transition-colors",
+              active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+            )}>
+              {icon ?? (
+                <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+              )}
+            </div>
+            <div>
+              <p className="text-sm font-medium">
+                {label ?? (active ? "Release to drop" : "Drag & drop files here")}
+              </p>
+              {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
+              {accept && (
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Accepted: {accept.join(", ")}
+                </p>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+);
+DragDropArea.displayName = "DragDropArea";
+
+export { ThemeSwitcher, CopyButton, KeyboardShortcut, ResizablePanel, DragDropArea };

package/src/hooks/index.ts

@@ -0,0 +1,271 @@
+import * as React from "react";
+
+// ─── useDisclosure ─────────────────────────────────────────────────────────
+
+export interface UseDisclosureOptions {
+  defaultOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+/**
+ * Manages open/close state for modals, drawers, popovers — anything
+ * that needs to toggle. Returns stable callbacks so child components
+ * don't re-render on every parent render.
+ */
+export function useDisclosure(options: UseDisclosureOptions = {}) {
+  const [isOpen, setIsOpen] = React.useState(options.defaultOpen ?? false);
+
+  const open = React.useCallback(() => {
+    setIsOpen(true);
+    options.onOpen?.();
+  }, [options]);
+
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+    options.onClose?.();
+  }, [options]);
+
+  const toggle = React.useCallback(() => {
+    setIsOpen((prev) => {
+      if (prev) options.onClose?.();
+      else options.onOpen?.();
+      return !prev;
+    });
+  }, [options]);
+
+  return { isOpen, open, close, toggle, onOpenChange: setIsOpen };
+}
+
+// ─── useMediaQuery ─────────────────────────────────────────────────────────
+
+/**
+ * Subscribes to a CSS media query and returns whether it currently matches.
+ * SSR-safe — returns false on the server.
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(query);
+    setMatches(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}
+
+// ─── useBreakpoint ─────────────────────────────────────────────────────────
+
+const breakpoints = {
+  sm: "(min-width: 640px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 1024px)",
+  xl: "(min-width: 1280px)",
+  "2xl": "(min-width: 1536px)",
+};
+
+/**
+ * Returns true when the viewport is at or above the given Tailwind breakpoint.
+ *
+ * @example
+ * const isDesktop = useBreakpoint("lg");
+ */
+export function useBreakpoint(bp: keyof typeof breakpoints): boolean {
+  return useMediaQuery(breakpoints[bp]);
+}
+
+// ─── useClipboard ──────────────────────────────────────────────────────────
+
+export interface UseClipboardOptions {
+  timeout?: number;
+}
+
+/**
+ * Copies text to the clipboard and briefly flips `copied` to true.
+ * Falls back to execCommand for older browsers (looking at you, Safari).
+ *
+ * @example
+ * const { copy, copied } = useClipboard();
+ * <button onClick={() => copy(code)}>{copied ? "Copied!" : "Copy"}</button>
+ */
+export function useClipboard(options: UseClipboardOptions = {}) {
+  const [copied, setCopied] = React.useState(false);
+
+  const copy = React.useCallback(async (text: string) => {
+    if (typeof navigator === "undefined") return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), options.timeout ?? 2000);
+    } catch {
+      // execCommand fallback — deprecated but still works in some envs
+      const el = document.createElement("textarea");
+      el.value = text;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      setCopied(true);
+      setTimeout(() => setCopied(false), options.timeout ?? 2000);
+    }
+  }, [options.timeout]);
+
+  return { copy, copied };
+}
+
+// ─── useLocalStorage ──────────────────────────────────────────────────────
+
+/**
+ * useState that persists to localStorage. Reads the initial value
+ * from storage on mount and syncs back on every set call.
+ * Safe to use with SSR — reads from storage only inside useEffect timing.
+ */
+export function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+  const [value, setValue] = React.useState<T>(() => {
+    if (typeof window === "undefined") return defaultValue;
+    try {
+      const stored = window.localStorage.getItem(key);
+      return stored ? (JSON.parse(stored) as T) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  });
+
+  const set = React.useCallback((newValue: T | ((prev: T) => T)) => {
+    setValue((prev) => {
+      const next = typeof newValue === "function" ? (newValue as (p: T) => T)(prev) : newValue;
+      try {
+        window.localStorage.setItem(key, JSON.stringify(next));
+      } catch { /* quota exceeded or private mode — silently ignore */ }
+      return next;
+    });
+  }, [key]);
+
+  return [value, set];
+}
+
+// ─── useTheme ──────────────────────────────────────────────────────────────
+
+export type AtlasTheme = "light" | "dark" | "system";
+
+/**
+ * Read and set the current AtlasUI theme.
+ * Persists the selection to localStorage under "atlas-theme".
+ * Applies the "dark" class to <html> so Tailwind's dark: utilities kick in.
+ *
+ * @example
+ * const { theme, setTheme } = useTheme();
+ * <button onClick={() => setTheme("dark")}>Go dark</button>
+ */
+export function useTheme() {
+  const [theme, setThemeState] = useLocalStorage<AtlasTheme>("atlas-theme", "system");
+
+  const resolvedTheme = React.useMemo<"light" | "dark">(() => {
+    if (theme === "system") {
+      return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+    return theme;
+  }, [theme]);
+
+  const setTheme = React.useCallback((t: AtlasTheme) => {
+    setThemeState(t);
+    if (typeof document !== "undefined") {
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      if (t !== "system") root.classList.add(t);
+    }
+  }, [setThemeState]);
+
+  return { theme, resolvedTheme, setTheme };
+}
+
+// ─── useDebounce ───────────────────────────────────────────────────────────
+
+/**
+ * Delays updating the returned value until `delay` ms have passed
+ * without the input changing. Classic use case: search inputs.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+// ─── useOnClickOutside ────────────────────────────────────────────────────
+
+/**
+ * Fires the handler when a click happens outside of the ref'd element.
+ * Used heavily inside AtlasUI popovers, dropdowns, and comboboxes.
+ */
+export function useOnClickOutside<T extends HTMLElement>(
+  ref: React.RefObject<T>,
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  React.useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+
+// ─── useKeydown ───────────────────────────────────────────────────────────
+
+/**
+ * Attaches a keydown listener to window for the given key.
+ * Supports modifier checks (Ctrl, Meta, Shift).
+ * Pass `enabled: false` to temporarily disable without removing the hook call.
+ *
+ * @example
+ * useKeydown("k", openCommandPalette, { metaKey: true });
+ */
+export function useKeydown(
+  key: string,
+  handler: (event: KeyboardEvent) => void,
+  options: { ctrlKey?: boolean; metaKey?: boolean; shiftKey?: boolean; enabled?: boolean } = {}
+) {
+  React.useEffect(() => {
+    if (options.enabled === false) return;
+    const listener = (event: KeyboardEvent) => {
+      if (event.key !== key) return;
+      if (options.ctrlKey && !event.ctrlKey) return;
+      if (options.metaKey && !event.metaKey) return;
+      if (options.shiftKey && !event.shiftKey) return;
+      handler(event);
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [key, handler, options]);
+}
+
+// ─── useMounted ───────────────────────────────────────────────────────────
+
+/**
+ * Returns true after the component has mounted on the client.
+ * Use this to guard any DOM-dependent code in SSR environments
+ * (Next.js, Remix, etc.) without suppressHydrationWarning hacks.
+ */
+export function useMounted(): boolean {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
+export { useId } from "react";