@entropix/react 0.3.0 → 1.0.1

package/dist/chunk-S6DVQAH4.cjs

@@ -0,0 +1,240 @@
+'use strict';
+
+var chunkLDOP6DVX_cjs = require('./chunk-LDOP6DVX.cjs');
+var chunkLJK6KK2H_cjs = require('./chunk-LJK6KK2H.cjs');
+var chunk5DKE5YQD_cjs = require('./chunk-5DKE5YQD.cjs');
+var core = require('@entropix/core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+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 = chunkLJK6KK2H_cjs.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: chunk5DKE5YQD_cjs.cn("entropix-dialog-trigger", className),
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+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]);
+}
+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 = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+    const actionMap = react.useMemo(() => ({ dismiss: close }), [close]);
+    const onKeyDown = chunkLDOP6DVX_cjs.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: chunk5DKE5YQD_cjs.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: chunk5DKE5YQD_cjs.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: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.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: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.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: chunk5DKE5YQD_cjs.cn("entropix-dialog-overlay", className),
+        onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+        "data-state": isOpen ? "open" : "closed"
+      }
+    );
+  }
+);
+
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.useFocusRestore = useFocusRestore;
+exports.useFocusTrap = useFocusTrap;
+//# sourceMappingURL=chunk-S6DVQAH4.cjs.map
+//# sourceMappingURL=chunk-S6DVQAH4.cjs.map

package/dist/chunk-U5CZHO6D.js

@@ -0,0 +1,13 @@
+import { ToggleInner } from './chunk-PILZGMQG.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var Switch = forwardRef(
+  function Switch2(props, ref) {
+    return /* @__PURE__ */ jsx(ToggleInner, { ...props, ref, role: "switch", componentClass: "entropix-switch" });
+  }
+);
+
+export { Switch };
+//# sourceMappingURL=chunk-U5CZHO6D.js.map
+//# sourceMappingURL=chunk-U5CZHO6D.js.map

package/dist/chunk-UGCCJI2F.js

@@ -0,0 +1,111 @@
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { forwardRef, useCallback } from 'react';
+import { useInput } from '@entropix/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Textarea = forwardRef(
+  function Textarea2({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    label,
+    helperText,
+    errorMessage,
+    variant = "default",
+    size = "md",
+    rows,
+    resize = "vertical",
+    className,
+    placeholder,
+    name,
+    style,
+    ...rest
+  }, ref) {
+    const isInvalid = invalid || !!errorMessage;
+    const {
+      value: inputValue,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      getInputProps,
+      getLabelProps,
+      getHelperTextProps,
+      getErrorMessageProps
+    } = useInput({
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      readOnly,
+      required,
+      invalid: isInvalid,
+      placeholder,
+      name
+    });
+    const propGetterReturn = getInputProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const labelProps = getLabelProps();
+    const helperProps = getHelperTextProps();
+    const errorProps = getErrorMessageProps();
+    const handleChange = useCallback(
+      (event) => {
+        onChange?.(event.target.value);
+      },
+      [onChange]
+    );
+    const dataState = isInvalid ? "invalid" : isDisabled ? "disabled" : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("entropix-input-wrapper", className),
+        "data-state": dataState,
+        "data-variant": variant,
+        "data-size": size,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "entropix-input-label",
+              id: labelProps.id,
+              htmlFor: labelProps.htmlFor,
+              children: [
+                label,
+                isRequired && /* @__PURE__ */ jsx("span", { className: "entropix-input-required", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref,
+              className: "entropix-textarea",
+              ...ariaProps,
+              ...rest,
+              name,
+              placeholder,
+              value: inputValue,
+              onChange: handleChange,
+              disabled: isDisabled || void 0,
+              readOnly: isReadOnly || void 0,
+              rows,
+              style: { ...style, resize },
+              "data-state": dataState,
+              "data-variant": variant,
+              "data-size": size
+            }
+          ),
+          isInvalid && errorMessage ? /* @__PURE__ */ jsx("span", { className: "entropix-input-error", ...errorProps, children: errorMessage }) : helperText ? /* @__PURE__ */ jsx("span", { className: "entropix-input-helper", ...helperProps, children: helperText }) : null
+        ]
+      }
+    );
+  }
+);
+
+export { Textarea };
+//# sourceMappingURL=chunk-UGCCJI2F.js.map
+//# sourceMappingURL=chunk-UGCCJI2F.js.map

package/dist/chunk-W6N4D4N4.js

@@ -0,0 +1,230 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useDialog } from '@entropix/core';
+import { createContext, forwardRef, useCallback, useState, useEffect, useRef, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const context = 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 = useDialog({
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    closeOnOverlayPress,
+    closeOnEscape,
+    modal,
+    role
+  });
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: dialog, children });
+}
+var DialogTrigger = forwardRef(
+  function DialogTrigger2({ children, className, onClick, ...rest }, ref) {
+    const { getTriggerProps } = useDialogContext();
+    const propGetterReturn = getTriggerProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-trigger", className),
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+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) {
+  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 = useRef(null);
+  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]);
+}
+var DialogContent = forwardRef(
+  function DialogContent2({ children, className, onKeyDown: externalOnKeyDown, ...rest }, ref) {
+    const { isOpen, close, ids, focusManagement, getContentProps } = useDialogContext();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+    const internalRef = useRef(null);
+    useFocusTrap(internalRef, isOpen && focusManagement.trapFocus);
+    useFocusRestore(isOpen && focusManagement.restoreFocus);
+    const propGetterReturn = getContentProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const actionMap = useMemo(() => ({ dismiss: close }), [close]);
+    const onKeyDown = useKeyboardHandler(
+      propGetterReturn.keyboardConfig,
+      actionMap
+    );
+    if (!mounted || !isOpen) return null;
+    const content = /* @__PURE__ */ 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 createPortal(content, document.body);
+  }
+);
+var DialogTitle = forwardRef(
+  function DialogTitle2({ children, className, ...rest }, ref) {
+    const { ids } = useDialogContext();
+    return /* @__PURE__ */ jsx("h2", { ref, id: ids.title, ...rest, className: cn("entropix-dialog-title", className), children });
+  }
+);
+var DialogDescription = forwardRef(function DialogDescription2({ children, className, ...rest }, ref) {
+  const { ids } = useDialogContext();
+  return /* @__PURE__ */ jsx("p", { ref, id: ids.description, ...rest, className: cn("entropix-dialog-description", className), children });
+});
+var DialogClose = forwardRef(
+  function DialogClose2({ children, className, onClick, ...rest }, ref) {
+    const { getCloseProps } = useDialogContext();
+    const propGetterReturn = getCloseProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-close", className),
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+var DialogOverlay = forwardRef(
+  function DialogOverlay2({ className, onClick, ...rest }, ref) {
+    const { isOpen, getOverlayProps } = useDialogContext();
+    const propGetterReturn = getOverlayProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    const handleClick = useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...ariaProps,
+        ...rest,
+        className: cn("entropix-dialog-overlay", className),
+        onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+        "data-state": isOpen ? "open" : "closed"
+      }
+    );
+  }
+);
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, useFocusRestore, useFocusTrap };
+//# sourceMappingURL=chunk-W6N4D4N4.js.map
+//# sourceMappingURL=chunk-W6N4D4N4.js.map

package/dist/chunk-Y2M2LJGJ.js

@@ -0,0 +1,41 @@
+// 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",
+  required: "aria-required",
+  invalid: "aria-invalid"
+};
+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;
+}
+
+export { mapAccessibilityToAria };
+//# sourceMappingURL=chunk-Y2M2LJGJ.js.map
+//# sourceMappingURL=chunk-Y2M2LJGJ.js.map