@spacing-ui/core 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useContext, useState, useRef, useId, useCallback, useEffect, useMemo } from 'react';
+import { createContext, forwardRef, useState, useCallback, useId, useRef, useEffect, useMemo, useContext, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/select/select.tsx
@@ -19,7 +19,7 @@ var Root = ({ value, onValueChange, children }) => {
   const triggerRef = useRef(null);
   const listboxRef = useRef(null);
   const reactId = useId();
-  const triggerId = `${reactId}trigger`;
+  const triggerId2 = `${reactId}trigger`;
   const listboxId = `${reactId}listbox`;
   const optionIdPrefix = `${reactId}option-`;
   const getOptionId = useCallback(
@@ -58,7 +58,7 @@ var Root = ({ value, onValueChange, children }) => {
       onValueChange,
       activeValue,
       setActiveValue,
-      triggerId,
+      triggerId: triggerId2,
       listboxId,
       triggerRef,
       listboxRef,
@@ -71,7 +71,7 @@ var Root = ({ value, onValueChange, children }) => {
       value,
       onValueChange,
       activeValue,
-      triggerId,
+      triggerId2,
       listboxId,
       getOptionId,
       getOrderedOptions
@@ -250,7 +250,985 @@ var Select = Object.assign(Root, {
   Content,
   Option
 });
+var DEFAULT_DELAY_MS = 700;
+var DEFAULT_SKIP_DELAY_MS = 300;
+var ProviderContext = createContext(null);
+var Provider = ({
+  children,
+  delayDuration = DEFAULT_DELAY_MS,
+  skipDelayDuration = DEFAULT_SKIP_DELAY_MS
+}) => {
+  const lastCloseAt = useRef(0);
+  const isInSkipWindow = useCallback(
+    () => Date.now() - lastCloseAt.current < skipDelayDuration,
+    [skipDelayDuration]
+  );
+  const noteClose = useCallback(() => {
+    lastCloseAt.current = Date.now();
+  }, []);
+  const value = useMemo(
+    () => ({ delayDuration, skipDelayDuration, isInSkipWindow, noteClose }),
+    [delayDuration, skipDelayDuration, isInSkipWindow, noteClose]
+  );
+  return /* @__PURE__ */ jsx(ProviderContext.Provider, { value, children });
+};
+var TooltipContext = createContext(null);
+function useTooltipContext(component) {
+  const ctx = useContext(TooltipContext);
+  if (!ctx) {
+    throw new Error(`<Tooltip.${component}> must be rendered inside <Tooltip>`);
+  }
+  return ctx;
+}
+var Root2 = ({
+  children,
+  delayDuration,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange
+}) => {
+  const provider = useContext(ProviderContext);
+  const effectiveDelay = delayDuration ?? provider?.delayDuration ?? DEFAULT_DELAY_MS;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const openTimerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const reactId = useId();
+  const contentId2 = `${reactId}content`;
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+      if (!next) provider?.noteClose();
+    },
+    [isControlled, onOpenChange, provider]
+  );
+  const scheduleOpen = useCallback(() => {
+    clearOpenTimer();
+    if (provider?.isInSkipWindow()) {
+      setOpen(true);
+      return;
+    }
+    openTimerRef.current = setTimeout(() => {
+      setOpen(true);
+      openTimerRef.current = null;
+    }, effectiveDelay);
+  }, [clearOpenTimer, effectiveDelay, provider, setOpen]);
+  const closeImmediately = useCallback(() => {
+    clearOpenTimer();
+    setOpen(false);
+  }, [clearOpenTimer, setOpen]);
+  useEffect(() => clearOpenTimer, [clearOpenTimer]);
+  const setTriggerRef = useCallback((node) => {
+    triggerRef.current = node;
+  }, []);
+  const triggerProps = useMemo(
+    () => ({
+      onMouseEnter: () => scheduleOpen(),
+      onMouseLeave: () => closeImmediately(),
+      onFocus: () => {
+        clearOpenTimer();
+        setOpen(true);
+      },
+      onBlur: () => closeImmediately(),
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && open) {
+          closeImmediately();
+        }
+      },
+      "aria-describedby": open ? contentId2 : void 0
+    }),
+    [scheduleOpen, closeImmediately, clearOpenTimer, setOpen, open, contentId2]
+  );
+  const value = useMemo(
+    () => ({ open, contentId: contentId2, triggerProps, setTriggerRef }),
+    [open, contentId2, triggerProps, setTriggerRef]
+  );
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value, children });
+};
+function composeRef(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function composeHandler(...handlers) {
+  return (e) => {
+    for (const handler of handlers) {
+      handler?.(e);
+      if (typeof e.defaultPrevented === "boolean" && e.defaultPrevented) {
+        return;
+      }
+    }
+  };
+}
+var Trigger3 = ({ children }) => {
+  const ctx = useTooltipContext("Trigger");
+  if (!isValidElement(children)) {
+    throw new Error("<Tooltip.Trigger> expects a single React element child.");
+  }
+  const child = children;
+  const childProps = child.props;
+  const childRef = child.ref;
+  const merged = {
+    ...childProps,
+    onMouseEnter: composeHandler(
+      childProps.onMouseEnter,
+      ctx.triggerProps.onMouseEnter
+    ),
+    onMouseLeave: composeHandler(
+      childProps.onMouseLeave,
+      ctx.triggerProps.onMouseLeave
+    ),
+    onFocus: composeHandler(
+      childProps.onFocus,
+      ctx.triggerProps.onFocus
+    ),
+    onBlur: composeHandler(
+      childProps.onBlur,
+      ctx.triggerProps.onBlur
+    ),
+    onKeyDown: composeHandler(
+      childProps.onKeyDown,
+      ctx.triggerProps.onKeyDown
+    ),
+    "aria-describedby": [childProps["aria-describedby"], ctx.triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+    ref: composeRef(childRef, ctx.setTriggerRef)
+  };
+  return cloneElement(child, merged);
+};
+var Content2 = ({ children, forceMount, id, ...rest }) => {
+  const ctx = useTooltipContext("Content");
+  if (!ctx.open && !forceMount) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: id ?? ctx.contentId,
+      role: "tooltip",
+      "data-state": ctx.open ? "open" : "closed",
+      ...rest,
+      children
+    }
+  );
+};
+var Tooltip = Object.assign(Root2, {
+  Provider,
+  Trigger: Trigger3,
+  Content: Content2
+});
+var Switch = forwardRef(function Switch2({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const isControlled = controlledChecked !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const checked = isControlled ? controlledChecked : uncontrolled;
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = !checked;
+    if (!isControlled) setUncontrolled(next);
+    onCheckedChange?.(next);
+  }, [checked, disabled, isControlled, onCheckedChange]);
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    toggle();
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      "data-state": checked ? "checked" : "unchecked",
+      "data-disabled": disabled || void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }
+  );
+});
+var isChecked = (s) => s === true;
+var isIndeterminate = (s) => s === "indeterminate";
+var Checkbox = forwardRef(function Checkbox2({
+  checked: controlled,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  required,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const value = isControlled ? controlled : uncontrolled;
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = isChecked(value) ? false : true;
+    if (!isControlled) setUncontrolled(next);
+    onCheckedChange?.(next);
+  }, [disabled, isControlled, onCheckedChange, value]);
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    toggle();
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const ariaChecked = isIndeterminate(value) ? "mixed" : isChecked(value) ? "true" : "false";
+  const dataState = isIndeterminate(value) ? "indeterminate" : isChecked(value) ? "checked" : "unchecked";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "checkbox",
+      "aria-checked": ariaChecked,
+      "aria-required": required || void 0,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      "data-state": dataState,
+      "data-disabled": disabled || void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }
+  );
+});
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext(component) {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be rendered inside <RadioGroup>`);
+  }
+  return ctx;
+}
+var Root3 = forwardRef(function RadioGroup({
+  value: controlled,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled = false,
+  orientation = "vertical",
+  children,
+  ...rest
+}, forwardedRef) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null);
+  const value = isControlled ? controlled ?? null : uncontrolled;
+  const reactId = useId();
+  const generatedName = name ?? `${reactId}name`;
+  const groupRef = useRef(null);
+  const setRefs = (node) => {
+    groupRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const setValue = useCallback(
+    (next) => {
+      if (disabled) return;
+      if (!isControlled) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    [disabled, isControlled, onValueChange]
+  );
+  useEffect(() => {
+    const root = groupRef.current;
+    if (!root) return;
+    const items = Array.from(root.querySelectorAll('[role="radio"]'));
+    const tabbable = value !== null ? items.find((el) => el.getAttribute("data-value") === value && !el.disabled) : items.find((el) => !el.disabled);
+    items.forEach((el) => {
+      el.tabIndex = el === tabbable ? 0 : -1;
+    });
+  });
+  const ctx = useMemo(
+    () => ({
+      value,
+      onValueChange: setValue,
+      name: generatedName,
+      disabled,
+      orientation,
+      groupRef
+    }),
+    [value, setValue, generatedName, disabled, orientation]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      role: "radiogroup",
+      "aria-orientation": orientation,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled || void 0,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Item = forwardRef(function RadioGroupItem({ value, disabled: itemDisabled, onClick, onKeyDown, ...rest }, ref) {
+  const ctx = useRadioGroupContext("RadioGroup.Item");
+  const disabled = ctx.disabled || !!itemDisabled;
+  const checked = ctx.value === value;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented || disabled) return;
+    ctx.onValueChange(value);
+  };
+  const move = (direction) => {
+    const root = ctx.groupRef.current;
+    if (!root) return;
+    const items = Array.from(root.querySelectorAll('[role="radio"]')).filter(
+      (el) => !el.disabled
+    );
+    if (items.length === 0) return;
+    const idx = items.findIndex((el) => el === document.activeElement);
+    const nextIdx = (idx + direction + items.length) % items.length;
+    const next = items[nextIdx];
+    if (!next) return;
+    next.focus();
+    const nextValue = next.getAttribute("data-value");
+    if (nextValue) ctx.onValueChange(nextValue);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const nextKey = ctx.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const prevKey = ctx.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    if (e.key === nextKey) {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === prevKey) {
+      e.preventDefault();
+      move(-1);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "radio",
+      name: ctx.name,
+      value,
+      "aria-checked": checked,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      tabIndex: -1,
+      "data-value": value,
+      "data-state": checked ? "checked" : "unchecked",
+      "data-disabled": disabled || void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }
+  );
+});
+var RadioGroup2 = Object.assign(Root3, { Item });
+var TabsContext = createContext(null);
+function useTabsContext(component) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<Tabs.${component}> must be rendered inside <Tabs>`);
+  }
+  return ctx;
+}
+var triggerId = (prefix, value) => `${prefix}trigger-${value.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+var contentId = (prefix, value) => `${prefix}content-${value.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+var Root4 = forwardRef(function Tabs({
+  value: controlled,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  ...rest
+}, ref) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null);
+  const value = isControlled ? controlled ?? null : uncontrolled;
+  const reactId = useId();
+  const listRef = useRef(null);
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const ctx = useMemo(
+    () => ({
+      value,
+      onValueChange: setValue,
+      activationMode,
+      orientation,
+      idPrefix: reactId,
+      listRef
+    }),
+    [value, setValue, activationMode, orientation, reactId]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, "data-orientation": orientation, ...rest, children }) });
+});
+var List = forwardRef(function TabsList({ loop = true, children, ...rest }, forwardedRef) {
+  const ctx = useTabsContext("List");
+  const setRefs = (node) => {
+    ctx.listRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      role: "tablist",
+      "aria-orientation": ctx.orientation,
+      "data-orientation": ctx.orientation,
+      "data-loop": loop || void 0,
+      ...rest,
+      children
+    }
+  );
+});
+var Trigger4 = forwardRef(function TabsTrigger({ value, disabled, onClick, onKeyDown, onFocus, ...rest }, ref) {
+  const ctx = useTabsContext("Trigger");
+  const selected = ctx.value === value;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented || disabled) return;
+    ctx.onValueChange(value);
+  };
+  const move = (direction) => {
+    const root = ctx.listRef.current;
+    if (!root) return;
+    const triggers = Array.from(root.querySelectorAll('[role="tab"]')).filter(
+      (el) => !el.disabled
+    );
+    if (triggers.length === 0) return;
+    let nextIdx;
+    if (direction === "first") nextIdx = 0;
+    else if (direction === "last") nextIdx = triggers.length - 1;
+    else {
+      const idx = triggers.findIndex((el) => el === document.activeElement);
+      const loopList = (root.getAttribute("data-loop") ?? "true") !== "false";
+      const candidate = idx + direction;
+      if (candidate < 0) nextIdx = loopList ? triggers.length - 1 : 0;
+      else if (candidate >= triggers.length) nextIdx = loopList ? 0 : triggers.length - 1;
+      else nextIdx = candidate;
+    }
+    const target = triggers[nextIdx];
+    if (!target) return;
+    target.focus();
+    if (ctx.activationMode === "automatic") {
+      const v = target.getAttribute("data-value");
+      if (v) ctx.onValueChange(v);
+    }
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const nextKey = ctx.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const prevKey = ctx.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    if (e.key === nextKey) {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === prevKey) {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      move("first");
+    } else if (e.key === "End") {
+      e.preventDefault();
+      move("last");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      id: triggerId(ctx.idPrefix, value),
+      "aria-selected": selected,
+      "aria-controls": contentId(ctx.idPrefix, value),
+      "aria-disabled": disabled || void 0,
+      disabled,
+      tabIndex: selected ? 0 : -1,
+      "data-value": value,
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      "data-orientation": ctx.orientation,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onFocus,
+      ...rest
+    }
+  );
+});
+var Content3 = forwardRef(function TabsContent({ value, forceMount, hidden, ...rest }, ref) {
+  const ctx = useTabsContext("Content");
+  const selected = ctx.value === value;
+  if (!selected && !forceMount) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      id: contentId(ctx.idPrefix, value),
+      "aria-labelledby": triggerId(ctx.idPrefix, value),
+      "data-state": selected ? "active" : "inactive",
+      "data-orientation": ctx.orientation,
+      hidden: hidden ?? !selected,
+      tabIndex: 0,
+      ...rest
+    }
+  );
+});
+var Tabs2 = Object.assign(Root4, { List, Trigger: Trigger4, Content: Content3 });
+var AccordionContext = createContext(null);
+function useAccordionContext(component) {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`<Accordion.${component}> must be rendered inside <Accordion>`);
+  }
+  return ctx;
+}
+var ItemContext = createContext(null);
+function useItemContext(component) {
+  const ctx = useContext(ItemContext);
+  if (!ctx) {
+    throw new Error(`<Accordion.${component}> must be rendered inside <Accordion.Item>`);
+  }
+  return ctx;
+}
+var Root5 = forwardRef(function Accordion(props, forwardedRef) {
+  const {
+    type,
+    disabled = false,
+    children,
+    // strip controlled-state props so they don't leak onto the DOM
+    value: _v,
+    defaultValue: _dv,
+    onValueChange: _ovc,
+    collapsible: _col,
+    ...rest
+  } = props;
+  const isMultiple = type === "multiple";
+  const controlled = "value" in props ? isMultiple ? props.value : props.value : void 0;
+  const isControlled = controlled !== void 0;
+  const defaultValue = "defaultValue" in props ? isMultiple ? props.defaultValue ?? [] : props.defaultValue ?? null : isMultiple ? [] : null;
+  const [uncontrolledArr, setUncontrolledArr] = useState(
+    isMultiple ? defaultValue ?? [] : []
+  );
+  const [uncontrolledStr, setUncontrolledStr] = useState(
+    isMultiple ? null : defaultValue ?? null
+  );
+  const values = useMemo(() => {
+    if (isMultiple) {
+      return isControlled ? controlled ?? [] : uncontrolledArr;
+    }
+    return isControlled ? controlled ? [controlled] : [] : uncontrolledStr ? [uncontrolledStr] : [];
+  }, [isMultiple, isControlled, controlled, uncontrolledArr, uncontrolledStr]);
+  const collapsible = !isMultiple && "collapsible" in props ? !!props.collapsible : isMultiple;
+  const reactId = useId();
+  const rootRef = useRef(null);
+  const setRefs = (node) => {
+    rootRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const toggle = useCallback(
+    (value) => {
+      if (disabled) return;
+      if (isMultiple) {
+        const arr = isControlled ? controlled ?? [] : uncontrolledArr;
+        const next = arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
+        if (!isControlled) setUncontrolledArr(next);
+        props.onValueChange?.(next);
+      } else {
+        const current = isControlled ? controlled : uncontrolledStr;
+        const allowEmpty = "collapsible" in props ? !!props.collapsible : false;
+        let next;
+        if (current === value) {
+          if (!allowEmpty) return;
+          next = "";
+        } else {
+          next = value;
+        }
+        if (!isControlled) setUncontrolledStr(next || null);
+        props.onValueChange?.(next);
+      }
+    },
+    [disabled, isMultiple, isControlled, controlled, uncontrolledArr, uncontrolledStr, props]
+  );
+  const ctx = useMemo(
+    () => ({
+      type,
+      values,
+      toggle,
+      collapsible,
+      disabled,
+      idPrefix: reactId,
+      rootRef
+    }),
+    [type, values, toggle, collapsible, disabled, reactId]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref: setRefs, "data-disabled": disabled || void 0, ...rest, children }) });
+});
+var Item2 = forwardRef(function AccordionItem({ value, disabled: itemDisabled, children, ...rest }, ref) {
+  const ctx = useAccordionContext("Item");
+  const open = ctx.values.includes(value);
+  const disabled = ctx.disabled || !!itemDisabled;
+  const safeValue = value.replace(/[^a-zA-Z0-9_-]/g, "_");
+  const triggerId2 = `${ctx.idPrefix}trigger-${safeValue}`;
+  const contentId2 = `${ctx.idPrefix}content-${safeValue}`;
+  const itemCtx = useMemo(
+    () => ({ value, open, disabled, triggerId: triggerId2, contentId: contentId2 }),
+    [value, open, disabled, triggerId2, contentId2]
+  );
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Trigger5 = forwardRef(function AccordionTrigger({ onClick, onKeyDown, ...rest }, ref) {
+  const ctx = useAccordionContext("Trigger");
+  const item = useItemContext("Trigger");
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented || item.disabled) return;
+    ctx.toggle(item.value);
+  };
+  const move = (direction) => {
+    const root = ctx.rootRef.current;
+    if (!root) return;
+    const triggers = Array.from(
+      root.querySelectorAll('[data-accordion-trigger="true"]')
+    ).filter((el) => !el.disabled);
+    if (triggers.length === 0) return;
+    let nextIdx;
+    if (direction === "first") nextIdx = 0;
+    else if (direction === "last") nextIdx = triggers.length - 1;
+    else {
+      const idx = triggers.findIndex((el) => el === document.activeElement);
+      const candidate = idx + direction;
+      nextIdx = (candidate + triggers.length) % triggers.length;
+    }
+    triggers[nextIdx]?.focus();
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      move("first");
+    } else if (e.key === "End") {
+      e.preventDefault();
+      move("last");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      id: item.triggerId,
+      "aria-expanded": item.open,
+      "aria-controls": item.contentId,
+      "aria-disabled": item.disabled || void 0,
+      disabled: item.disabled,
+      "data-state": item.open ? "open" : "closed",
+      "data-disabled": item.disabled || void 0,
+      "data-accordion-trigger": "true",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }
+  );
+});
+var Content4 = forwardRef(function AccordionContent({ forceMount, hidden, children, ...rest }, ref) {
+  const item = useItemContext("Content");
+  if (!item.open && !forceMount) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      id: item.contentId,
+      "aria-labelledby": item.triggerId,
+      "data-state": item.open ? "open" : "closed",
+      hidden: hidden ?? !item.open,
+      ...rest,
+      children
+    }
+  );
+});
+var Accordion2 = Object.assign(Root5, { Item: Item2, Trigger: Trigger5, Content: Content4 });
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusables(root) {
+  if (!root) return [];
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true"
+  );
+}
+var DialogContext = createContext(null);
+function useDialogContext(component) {
+  const ctx = useContext(DialogContext);
+  if (!ctx) {
+    throw new Error(`<Dialog.${component}> must be rendered inside <Dialog>`);
+  }
+  return ctx;
+}
+var Root6 = ({
+  children,
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange,
+  modal = true
+}) => {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = isControlled ? controlled : uncontrolled;
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [hasTitle, setHasTitle] = useState(false);
+  const [hasDescription, setHasDescription] = useState(false);
+  const reactId = useId();
+  const contentId2 = `${reactId}content`;
+  const titleId = `${reactId}title`;
+  const descriptionId = `${reactId}description`;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const ctx = useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      contentRef,
+      contentId: contentId2,
+      titleId,
+      descriptionId,
+      hasTitle,
+      setHasTitle,
+      hasDescription,
+      setHasDescription,
+      modal
+    }),
+    [open, setOpen, contentId2, titleId, descriptionId, hasTitle, hasDescription, modal]
+  );
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children });
+};
+var Trigger6 = forwardRef(function DialogTrigger({ onClick, ...rest }, forwardedRef) {
+  const ctx = useDialogContext("Trigger");
+  const setRefs = (node) => {
+    ctx.triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setOpen(true);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRefs,
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": ctx.open,
+      "aria-controls": ctx.open ? ctx.contentId : void 0,
+      "data-state": ctx.open ? "open" : "closed",
+      onClick: handleClick,
+      ...rest
+    }
+  );
+});
+var Overlay = forwardRef(function DialogOverlay({ forceMount, onClick, ...rest }, ref) {
+  const ctx = useDialogContext("Overlay");
+  if (!ctx.open && !forceMount) return null;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented || !ctx.modal) return;
+    if (e.target === e.currentTarget) {
+      ctx.setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ref, "data-state": ctx.open ? "open" : "closed", onClick: handleClick, ...rest });
+});
+var Content5 = forwardRef(function DialogContent({ forceMount, onEscapeKeyDown, onKeyDown, children, ...rest }, forwardedRef) {
+  const ctx = useDialogContext("Content");
+  const setRefs = (node) => {
+    ctx.contentRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  useEffect(() => {
+    if (!ctx.open) return;
+    const previouslyFocused = document.activeElement;
+    const id = requestAnimationFrame(() => {
+      const root = ctx.contentRef.current;
+      if (!root) return;
+      const focusables = getFocusables(root);
+      const target = focusables[0] ?? root;
+      target.focus();
+    });
+    return () => {
+      cancelAnimationFrame(id);
+      const trigger = ctx.triggerRef.current;
+      (trigger ?? previouslyFocused)?.focus?.();
+    };
+  }, [ctx.open, ctx.contentRef, ctx.triggerRef]);
+  useEffect(() => {
+    if (!ctx.open || !ctx.modal) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [ctx.open, ctx.modal]);
+  const { open: ctxOpen, setOpen: ctxSetOpen } = ctx;
+  useEffect(() => {
+    if (!ctxOpen) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      onEscapeKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      ctxSetOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [ctxOpen, ctxSetOpen, onEscapeKeyDown]);
+  if (!ctx.open && !forceMount) return null;
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key !== "Tab" || !ctx.modal) return;
+    const focusables = getFocusables(ctx.contentRef.current);
+    if (focusables.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && (active === first || !ctx.contentRef.current?.contains(active))) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      role: "dialog",
+      "aria-modal": ctx.modal || void 0,
+      id: ctx.contentId,
+      "aria-labelledby": ctx.hasTitle ? ctx.titleId : void 0,
+      "aria-describedby": ctx.hasDescription ? ctx.descriptionId : void 0,
+      tabIndex: -1,
+      "data-state": ctx.open ? "open" : "closed",
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+});
+var Title = forwardRef(function DialogTitle(props, ref) {
+  const ctx = useDialogContext("Title");
+  useEffect(() => {
+    ctx.setHasTitle(true);
+    return () => ctx.setHasTitle(false);
+  }, [ctx]);
+  return /* @__PURE__ */ jsx("h2", { ref, id: ctx.titleId, ...props });
+});
+var Description = forwardRef(
+  function DialogDescription(props, ref) {
+    const ctx = useDialogContext("Description");
+    useEffect(() => {
+      ctx.setHasDescription(true);
+      return () => ctx.setHasDescription(false);
+    }, [ctx]);
+    return /* @__PURE__ */ jsx("p", { ref, id: ctx.descriptionId, ...props });
+  }
+);
+var Close = forwardRef(function DialogClose({ onClick, ...rest }, ref) {
+  const ctx = useDialogContext("Close");
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setOpen(false);
+  };
+  return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...rest });
+});
+var Dialog = Object.assign(Root6, {
+  Trigger: Trigger6,
+  Overlay,
+  Content: Content5,
+  Title,
+  Description,
+  Close
+});
 
-export { Select };
+export { Accordion2 as Accordion, Checkbox, Dialog, RadioGroup2 as RadioGroup, Select, Switch, Tabs2 as Tabs, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map