@entropix/react 0.3.0 → 1.0.1

package/dist/chunk-KGIUECLG.cjs

@@ -0,0 +1,91 @@
+'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 RadioContext = react.createContext(null);
+function useRadioContext() {
+  const context = react.useContext(RadioContext);
+  if (!context) {
+    throw new Error(
+      "Radio compound components must be used within a <RadioGroup> provider."
+    );
+  }
+  return context;
+}
+function RadioGroup({
+  children,
+  label,
+  className,
+  ...options
+}) {
+  const radioGroup = core.useRadioGroup(options);
+  const propGetterReturn = radioGroup.getRadioGroupProps();
+  const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  if (label) {
+    ariaProps["aria-label"] = label;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value: radioGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: chunk5DKE5YQD_cjs.cn("entropix-radio-group", className),
+      "data-orientation": options.orientation ?? "vertical",
+      children
+    }
+  ) });
+}
+function RadioItem({
+  value,
+  disabled,
+  label,
+  children,
+  className
+}) {
+  const { getRadioProps, selectedValue } = useRadioContext();
+  const propGetterReturn = getRadioProps(value, { disabled });
+  const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const isChecked = value === selectedValue;
+  const actionMap = react.useMemo(
+    () => ({}),
+    []
+  );
+  const onKeyDown = chunkLDOP6DVX_cjs.useKeyboardHandler(
+    propGetterReturn.keyboardConfig,
+    actionMap
+  );
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ...ariaProps,
+      className: chunk5DKE5YQD_cjs.cn("entropix-radio-item", className),
+      onClick: handleClick,
+      onKeyDown,
+      "data-state": isChecked ? "checked" : "unchecked",
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "entropix-radio-item__indicator",
+            "data-state": isChecked ? "checked" : "unchecked"
+          }
+        ),
+        (label || children) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-radio-item__label", children: label || children })
+      ]
+    }
+  );
+}
+
+exports.RadioGroup = RadioGroup;
+exports.RadioItem = RadioItem;
+//# sourceMappingURL=chunk-KGIUECLG.cjs.map
+//# sourceMappingURL=chunk-KGIUECLG.cjs.map

package/dist/chunk-LDOP6DVX.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var react = require('react');
+
+// src/utils/use-keyboard-handler.ts
+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;
+}
+
+exports.useKeyboardHandler = useKeyboardHandler;
+//# sourceMappingURL=chunk-LDOP6DVX.cjs.map
+//# sourceMappingURL=chunk-LDOP6DVX.cjs.map

package/dist/chunk-LJK6KK2H.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+// 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;
+}
+
+exports.mapAccessibilityToAria = mapAccessibilityToAria;
+//# sourceMappingURL=chunk-LJK6KK2H.cjs.map
+//# sourceMappingURL=chunk-LJK6KK2H.cjs.map

package/dist/chunk-OT2HJUCB.js

@@ -0,0 +1,84 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { forwardRef, useMemo, useCallback } from 'react';
+import { useButton } from '@entropix/core';
+import { jsx } from 'react/jsx-runtime';
+
+var Button = 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 } = useButton({
+    disabled,
+    loading,
+    onPress,
+    elementType
+  });
+  const propGetterReturn = getButtonProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const actionMap = useMemo(
+    () => ({
+      activate: propGetterReturn.onAction ?? (() => {
+      })
+    }),
+    [propGetterReturn.onAction]
+  );
+  const onKeyDown = useKeyboardHandler(
+    propGetterReturn.keyboardConfig,
+    actionMap
+  );
+  const handleClick = useCallback(
+    (event) => {
+      propGetterReturn.onAction?.();
+      onClick?.(event);
+    },
+    [propGetterReturn.onAction, onClick]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      externalOnKeyDown?.(event);
+    },
+    [onKeyDown, externalOnKeyDown]
+  );
+  const dataState = isLoading ? "loading" : isDisabled ? "disabled" : void 0;
+  return /* @__PURE__ */ 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
+    }
+  );
+});
+
+export { Button };
+//# sourceMappingURL=chunk-OT2HJUCB.js.map
+//# sourceMappingURL=chunk-OT2HJUCB.js.map

package/dist/chunk-PILZGMQG.js

@@ -0,0 +1,87 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { forwardRef, useMemo, useCallback } from 'react';
+import { useToggle } from '@entropix/core';
+import { jsx } from 'react/jsx-runtime';
+
+var Toggle = forwardRef(
+  function Toggle2(props, ref) {
+    return /* @__PURE__ */ jsx(ToggleInner, { ...props, ref, role: "checkbox", componentClass: "entropix-toggle" });
+  }
+);
+var ToggleInner = 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 } = useToggle({
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      role
+    });
+    const propGetterReturn = getToggleProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    if (label && !children) {
+      ariaProps["aria-label"] = label;
+    }
+    const actionMap = useMemo(
+      () => ({
+        toggle: propGetterReturn.onAction ?? (() => {
+        })
+      }),
+      [propGetterReturn.onAction]
+    );
+    const onKeyDown = useKeyboardHandler(
+      propGetterReturn.keyboardConfig,
+      actionMap
+    );
+    const handleClick = useCallback(
+      (event) => {
+        propGetterReturn.onAction?.();
+        onClick?.(event);
+      },
+      [propGetterReturn.onAction, onClick]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        externalOnKeyDown?.(event);
+      },
+      [onKeyDown, externalOnKeyDown]
+    );
+    return /* @__PURE__ */ 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: children ?? label ?? (isChecked ? "On" : "Off")
+      }
+    );
+  }
+);
+
+export { Toggle, ToggleInner };
+//# sourceMappingURL=chunk-PILZGMQG.js.map
+//# sourceMappingURL=chunk-PILZGMQG.js.map

package/dist/chunk-PN42JF6U.js

@@ -0,0 +1,92 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useMenu } from '@entropix/core';
+import { createContext, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var MenuContext = createContext(null);
+function useMenuContext() {
+  const context = 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 = useMenu(options);
+  return /* @__PURE__ */ 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 = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: toggle,
+    moveDown: open,
+    moveUp: open
+  });
+  return /* @__PURE__ */ 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__ */ 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 = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: cn("entropix-menu-item", className),
+      onClick: handleClick,
+      "data-state": activeIndex === index ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  );
+}
+
+export { Menu, MenuContent, MenuItem, MenuTrigger };
+//# sourceMappingURL=chunk-PN42JF6U.js.map
+//# sourceMappingURL=chunk-PN42JF6U.js.map

package/dist/chunk-RPIYYBFJ.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var chunkLDOP6DVX_cjs = require('./chunk-LDOP6DVX.cjs');
+var chunkLJK6KK2H_cjs = require('./chunk-LJK6KK2H.cjs');
+var chunk5DKE5YQD_cjs = require('./chunk-5DKE5YQD.cjs');
+var react = require('react');
+var core = require('@entropix/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Checkbox = react.forwardRef(
+  function Checkbox2({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    label,
+    indeterminate = false,
+    className,
+    style,
+    children,
+    onClick,
+    onKeyDown: externalOnKeyDown,
+    ...rest
+  }, ref) {
+    const { isChecked, isDisabled, getToggleProps } = core.useToggle({
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      role: "checkbox"
+    });
+    const propGetterReturn = getToggleProps();
+    const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+    if (indeterminate) {
+      ariaProps["aria-checked"] = "mixed";
+    }
+    if (label && !children) {
+      ariaProps["aria-label"] = label;
+    }
+    const actionMap = react.useMemo(
+      () => ({
+        toggle: propGetterReturn.onAction ?? (() => {
+        })
+      }),
+      [propGetterReturn.onAction]
+    );
+    const onKeyDown = chunkLDOP6DVX_cjs.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 = indeterminate ? "indeterminate" : isChecked ? "checked" : "unchecked";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: chunk5DKE5YQD_cjs.cn("entropix-checkbox", className),
+        style,
+        ...ariaProps,
+        ...rest,
+        disabled: isDisabled || void 0,
+        onClick: propGetterReturn.onAction || onClick ? handleClick : void 0,
+        onKeyDown: onKeyDown || externalOnKeyDown ? handleKeyDown : void 0,
+        "data-state": dataState,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-checkbox__indicator", "data-state": dataState }),
+          (label || children) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-checkbox__label", children: label || children })
+        ]
+      }
+    );
+  }
+);
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=chunk-RPIYYBFJ.cjs.map
+//# sourceMappingURL=chunk-RPIYYBFJ.cjs.map