@entropix/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,817 @@
+'use strict';
+
+var react = require('react');
+var core = require('@entropix/core');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+// src/utils/map-accessibility-to-aria.ts
+var ARIA_MAP = {
+  role: "role",
+  label: "aria-label",
+  labelledBy: "aria-labelledby",
+  describedBy: "aria-describedby",
+  disabled: "aria-disabled",
+  expanded: "aria-expanded",
+  selected: "aria-selected",
+  checked: "aria-checked",
+  pressed: "aria-pressed",
+  busy: "aria-busy",
+  modal: "aria-modal",
+  hasPopup: "aria-haspopup",
+  controls: "aria-controls",
+  owns: "aria-owns",
+  live: "aria-live",
+  orientation: "aria-orientation",
+  tabIndex: "tabIndex",
+  hidden: "aria-hidden",
+  valueNow: "aria-valuenow",
+  valueMin: "aria-valuemin",
+  valueMax: "aria-valuemax",
+  valueText: "aria-valuetext"
+};
+function mapAccessibilityToAria(props) {
+  const result = {};
+  for (const [key, attrName] of Object.entries(ARIA_MAP)) {
+    const value = props[key];
+    if (value !== void 0) {
+      result[attrName] = value;
+    }
+  }
+  return result;
+}
+function useKeyboardHandler(keyboardConfig, actionMap) {
+  const handler = react.useCallback(
+    (event) => {
+      if (!keyboardConfig) return;
+      const intent = keyboardConfig.getIntent(event.key, {
+        shift: event.shiftKey,
+        meta: event.metaKey,
+        alt: event.altKey
+      });
+      if (intent && actionMap[intent]) {
+        event.preventDefault();
+        actionMap[intent]();
+      }
+    },
+    [keyboardConfig, actionMap]
+  );
+  if (!keyboardConfig) return void 0;
+  return handler;
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(containerRef, isActive) {
+  react.useEffect(() => {
+    if (!isActive) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    function handleKeyDown(event) {
+      if (event.key !== "Tab") return;
+      const focusable = container.querySelectorAll(FOCUSABLE_SELECTOR);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isActive, containerRef]);
+}
+function useFocusRestore(isActive) {
+  const savedElement = react.useRef(null);
+  react.useEffect(() => {
+    if (isActive) {
+      savedElement.current = document.activeElement;
+    } else if (savedElement.current) {
+      const el = savedElement.current;
+      if (el && document.body.contains(el) && typeof el.focus === "function") {
+        el.focus();
+      }
+      savedElement.current = null;
+    }
+  }, [isActive]);
+}
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var Button = react.forwardRef(function Button2({
+  disabled,
+  loading,
+  onPress,
+  as: Component = "button",
+  variant,
+  size,
+  className,
+  style,
+  children,
+  onClick,
+  onKeyDown: externalOnKeyDown,
+  ...rest
+}, ref) {
+  const elementType = typeof Component === "string" ? Component : "div";
+  const { isDisabled, isLoading, getButtonProps } = core.useButton({
+    disabled,
+    loading,
+    onPress,
+    elementType
+  });
+  const propGetterReturn = getButtonProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const actionMap = react.useMemo(
+    () => ({
+      activate: propGetterReturn.onAction ?? (() => {
+      })
+    }),
+    [propGetterReturn.onAction]
+  );
+  const onKeyDown = useKeyboardHandler(
+    propGetterReturn.keyboardConfig,
+    actionMap
+  );
+  const handleClick = react.useCallback(
+    (event) => {
+      propGetterReturn.onAction?.();
+      onClick?.(event);
+    },
+    [propGetterReturn.onAction, onClick]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      externalOnKeyDown?.(event);
+    },
+    [onKeyDown, externalOnKeyDown]
+  );
+  const dataState = isLoading ? "loading" : isDisabled ? "disabled" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "entropix-button",
+        variant && `entropix-button--${variant}`,
+        size && `entropix-button--${size}`,
+        className
+      ),
+      style,
+      ...ariaProps,
+      ...rest,
+      type: Component === "button" ? "button" : void 0,
+      disabled: Component === "button" && isDisabled ? true : void 0,
+      onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+      onKeyDown: onKeyDown || externalOnKeyDown ? handleKeyDown : void 0,
+      "data-state": dataState,
+      "data-variant": variant,
+      "data-size": size,
+      children
+    }
+  );
+});
+var Toggle = react.forwardRef(
+  function Toggle2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleInner, { ...props, ref, role: "checkbox", componentClass: "entropix-toggle" });
+  }
+);
+var ToggleInner = react.forwardRef(
+  function ToggleInner2({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    label,
+    role = "checkbox",
+    componentClass = "entropix-toggle",
+    className,
+    style,
+    children,
+    onClick,
+    onKeyDown: externalOnKeyDown,
+    ...rest
+  }, ref) {
+    const { isChecked, isDisabled, getToggleProps } = core.useToggle({
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      role
+    });
+    const propGetterReturn = getToggleProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    if (label && !children) {
+      ariaProps["aria-label"] = label;
+    }
+    const actionMap = react.useMemo(
+      () => ({
+        toggle: propGetterReturn.onAction ?? (() => {
+        })
+      }),
+      [propGetterReturn.onAction]
+    );
+    const onKeyDown = useKeyboardHandler(
+      propGetterReturn.keyboardConfig,
+      actionMap
+    );
+    const handleClick = react.useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    const handleKeyDown = react.useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        externalOnKeyDown?.(event);
+      },
+      [onKeyDown, externalOnKeyDown]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(componentClass, className),
+        style,
+        ...ariaProps,
+        ...rest,
+        disabled: isDisabled || void 0,
+        onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+        onKeyDown: onKeyDown || externalOnKeyDown ? handleKeyDown : void 0,
+        "data-state": isChecked ? "checked" : "unchecked",
+        children
+      }
+    );
+  }
+);
+var Switch = react.forwardRef(
+  function Switch2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleInner, { ...props, ref, role: "switch", componentClass: "entropix-switch" });
+  }
+);
+var DialogContext = react.createContext(null);
+function useDialogContext() {
+  const context = react.useContext(DialogContext);
+  if (!context) {
+    throw new Error(
+      "Dialog compound components must be used within a <Dialog> provider."
+    );
+  }
+  return context;
+}
+function Dialog({
+  children,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  closeOnOverlayPress,
+  closeOnEscape,
+  modal,
+  role
+}) {
+  const dialog = core.useDialog({
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    closeOnOverlayPress,
+    closeOnEscape,
+    modal,
+    role
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: dialog, children });
+}
+var DialogTrigger = react.forwardRef(
+  function DialogTrigger2({ children, className, onClick, ...rest }, ref) {
+    const { getTriggerProps } = useDialogContext();
+    const propGetterReturn = getTriggerProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = react.useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-trigger", className),
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+var DialogContent = react.forwardRef(
+  function DialogContent2({ children, className, onKeyDown: externalOnKeyDown, ...rest }, ref) {
+    const { isOpen, close, ids, focusManagement, getContentProps } = useDialogContext();
+    const [mounted, setMounted] = react.useState(false);
+    react.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const internalRef = react.useRef(null);
+    useFocusTrap(internalRef, isOpen && focusManagement.trapFocus);
+    useFocusRestore(isOpen && focusManagement.restoreFocus);
+    const propGetterReturn = getContentProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const actionMap = react.useMemo(() => ({ dismiss: close }), [close]);
+    const onKeyDown = useKeyboardHandler(
+      propGetterReturn.keyboardConfig,
+      actionMap
+    );
+    if (!mounted || !isOpen) return null;
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          internalRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        id: ids.content,
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-content", className),
+        onKeyDown: onKeyDown ? (event) => {
+          onKeyDown(event);
+          externalOnKeyDown?.(event);
+        } : externalOnKeyDown,
+        "data-state": isOpen ? "open" : "closed",
+        children
+      }
+    );
+    return reactDom.createPortal(content, document.body);
+  }
+);
+var DialogTitle = react.forwardRef(
+  function DialogTitle2({ children, className, ...rest }, ref) {
+    const { ids } = useDialogContext();
+    return /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, id: ids.title, ...rest, className: cn("entropix-dialog-title", className), children });
+  }
+);
+var DialogDescription = react.forwardRef(function DialogDescription2({ children, className, ...rest }, ref) {
+  const { ids } = useDialogContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, id: ids.description, ...rest, className: cn("entropix-dialog-description", className), children });
+});
+var DialogClose = react.forwardRef(
+  function DialogClose2({ children, className, onClick, ...rest }, ref) {
+    const { getCloseProps } = useDialogContext();
+    const propGetterReturn = getCloseProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = react.useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-close", className),
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+var DialogOverlay = react.forwardRef(
+  function DialogOverlay2({ className, onClick, ...rest }, ref) {
+    const { isOpen, getOverlayProps } = useDialogContext();
+    const propGetterReturn = getOverlayProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = react.useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-overlay", className),
+        onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+        "data-state": isOpen ? "open" : "closed"
+      }
+    );
+  }
+);
+var TabsContext = react.createContext(null);
+function useTabsContext() {
+  const context = react.useContext(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs compound components must be used within a <Tabs> provider."
+    );
+  }
+  return context;
+}
+function Tabs({
+  children,
+  className,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  ...options
+}) {
+  const tabs = core.useTabs({ ...options, orientation, activationMode });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { ...tabs, orientation, activationMode }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("entropix-tabs", className), "data-orientation": orientation, children }) });
+}
+function TabList({ children, className }) {
+  const { getTabListProps } = useTabsContext();
+  const propGetterReturn = getTabListProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...ariaProps, className: cn("entropix-tablist", className), children });
+}
+function Tab({ value, children, className }) {
+  const { getTabProps, select, selectedKey, orientation } = useTabsContext();
+  const propGetterReturn = getTabProps(value);
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const baseId = ariaProps["aria-controls"] ? String(ariaProps["aria-controls"]).replace(`-panel-${value}`, "") : "";
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => select(value)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      id: `${baseId}-tab-${value}`,
+      className: cn("entropix-tab", className),
+      onClick: handleClick,
+      onKeyDown,
+      "data-state": selectedKey === value ? "active" : "inactive",
+      "data-orientation": orientation,
+      children
+    }
+  );
+}
+function TabPanel({ value, children, className }) {
+  const { getTabPanelProps, selectedKey } = useTabsContext();
+  const propGetterReturn = getTabPanelProps(value);
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const baseId = ariaProps["aria-labelledby"] ? String(ariaProps["aria-labelledby"]).replace(`-tab-${value}`, "") : "";
+  if (selectedKey !== value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      id: `${baseId}-panel-${value}`,
+      className: cn("entropix-tabpanel", className),
+      "data-state": "active",
+      children
+    }
+  );
+}
+var AccordionContext = react.createContext(null);
+function useAccordionContext() {
+  const context = react.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      "Accordion compound components must be used within an <Accordion> provider."
+    );
+  }
+  return context;
+}
+var AccordionItemContext = react.createContext(null);
+function useAccordionItemContext() {
+  const context = react.useContext(AccordionItemContext);
+  if (context === null) {
+    throw new Error(
+      "AccordionTrigger and AccordionPanel must be used within an <AccordionItem>."
+    );
+  }
+  return context;
+}
+function Accordion({ children, className, ...options }) {
+  const accordion = core.useAccordion(options);
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("entropix-accordion", className), children }) });
+}
+function AccordionItem({
+  value,
+  children,
+  className
+}) {
+  const { isExpanded } = useAccordionContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("entropix-accordion-item", className),
+      "data-state": isExpanded(value) ? "open" : "closed",
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  children,
+  className
+}) {
+  const itemKey = useAccordionItemContext();
+  const { getItemTriggerProps, toggle } = useAccordionContext();
+  const propGetterReturn = getItemTriggerProps(itemKey);
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const triggerId = propGetterReturn.accessibility.controls ? String(propGetterReturn.accessibility.controls).replace("panel-", "trigger-") : void 0;
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => toggle(itemKey)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      id: triggerId,
+      className: cn("entropix-accordion-trigger", className),
+      onClick: handleClick,
+      onKeyDown,
+      children
+    }
+  );
+}
+function AccordionPanel({ children, className }) {
+  const itemKey = useAccordionItemContext();
+  const { getItemPanelProps, isExpanded } = useAccordionContext();
+  const propGetterReturn = getItemPanelProps(itemKey);
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const panelId = propGetterReturn.accessibility.labelledBy ? String(propGetterReturn.accessibility.labelledBy).replace(
+    "trigger-",
+    "panel-"
+  ) : void 0;
+  if (!isExpanded(itemKey)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...ariaProps, id: panelId, className: cn("entropix-accordion-panel", className), "data-state": "open", children });
+}
+var MenuContext = react.createContext(null);
+function useMenuContext() {
+  const context = react.useContext(MenuContext);
+  if (!context) {
+    throw new Error(
+      "Menu compound components must be used within a <Menu> provider."
+    );
+  }
+  return context;
+}
+function Menu({ children, ...options }) {
+  const menu = core.useMenu(options);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: menu, children });
+}
+function MenuTrigger({ children, className }) {
+  const { getTriggerProps, toggle, open } = useMenuContext();
+  const propGetterReturn = getTriggerProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: toggle,
+    moveDown: open,
+    moveUp: open
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      className: cn("entropix-menu-trigger", className),
+      onClick: handleClick,
+      onKeyDown,
+      children
+    }
+  );
+}
+function MenuContent({ children, className }) {
+  const { isOpen, getMenuProps, close } = useMenuContext();
+  const propGetterReturn = getMenuProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    dismiss: close
+  });
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: cn("entropix-menu-content", className),
+      onKeyDown,
+      "data-state": "open",
+      children
+    }
+  );
+}
+function MenuItem({
+  index,
+  onSelect,
+  disabled,
+  children,
+  className
+}) {
+  const { getItemProps, activeIndex } = useMenuContext();
+  const propGetterReturn = getItemProps(index, { onSelect, disabled });
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: cn("entropix-menu-item", className),
+      onClick: handleClick,
+      "data-state": activeIndex === index ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  );
+}
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function useBreakpoint() {
+  const getBreakpoint = react.useCallback(() => {
+    if (typeof window === "undefined") return "base";
+    const width = window.innerWidth;
+    if (width >= BREAKPOINTS["2xl"]) return "2xl";
+    if (width >= BREAKPOINTS.xl) return "xl";
+    if (width >= BREAKPOINTS.lg) return "lg";
+    if (width >= BREAKPOINTS.md) return "md";
+    if (width >= BREAKPOINTS.sm) return "sm";
+    return "base";
+  }, []);
+  const [breakpoint, setBreakpoint] = react.useState(getBreakpoint);
+  react.useEffect(() => {
+    const handleResize = () => {
+      const next = getBreakpoint();
+      setBreakpoint((prev) => prev !== next ? next : prev);
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, [getBreakpoint]);
+  return breakpoint;
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  react.useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (event) => setMatches(event.matches);
+    setMatches(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function useBreakpointValue(breakpoint) {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`);
+}
+var Stack = react.forwardRef(function Stack2({ gap, align, fullWidth, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "entropix-stack",
+        gap && `entropix-stack--gap-${gap}`,
+        align && `entropix-stack--align-${align}`,
+        fullWidth && "entropix-stack--full-width",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Inline = react.forwardRef(function Inline2({ gap, align, justify, wrap, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "entropix-inline",
+        gap && `entropix-inline--gap-${gap}`,
+        align && `entropix-inline--align-${align}`,
+        justify && `entropix-inline--justify-${justify}`,
+        wrap && "entropix-inline--wrap",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Container = react.forwardRef(function Container2({ maxWidth = "lg", center, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "entropix-container",
+        `entropix-container--${maxWidth}`,
+        center && "entropix-container--center",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", spacing, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      role: orientation === "vertical" ? "separator" : void 0,
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      className: cn(
+        "entropix-divider",
+        orientation === "vertical" && "entropix-divider--vertical",
+        spacing && `entropix-divider--spacing-${spacing}`,
+        className
+      ),
+      ...rest
+    }
+  );
+});
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionPanel = AccordionPanel;
+exports.AccordionTrigger = AccordionTrigger;
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.Button = Button;
+exports.Container = Container;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.Divider = Divider;
+exports.Inline = Inline;
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuTrigger = MenuTrigger;
+exports.Stack = Stack;
+exports.Switch = Switch;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+exports.Toggle = Toggle;
+exports.mapAccessibilityToAria = mapAccessibilityToAria;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpointValue = useBreakpointValue;
+exports.useFocusRestore = useFocusRestore;
+exports.useFocusTrap = useFocusTrap;
+exports.useKeyboardHandler = useKeyboardHandler;
+exports.useMediaQuery = useMediaQuery;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map