@entropix/react 0.3.0 → 1.0.1

package/dist/chunk-36ZHHJYV.js

@@ -0,0 +1,79 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useTabs } from '@entropix/core';
+import { createContext, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = 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 = useTabs({ ...options, orientation, activationMode });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { ...tabs, orientation, activationMode }, children: /* @__PURE__ */ 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__ */ 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 = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => select(value)
+  });
+  return /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      ...ariaProps,
+      id: `${baseId}-panel-${value}`,
+      className: cn("entropix-tabpanel", className),
+      "data-state": "active",
+      children
+    }
+  );
+}
+
+export { Tab, TabList, TabPanel, Tabs };
+//# sourceMappingURL=chunk-36ZHHJYV.js.map
+//# sourceMappingURL=chunk-36ZHHJYV.js.map

package/dist/chunk-5DKE5YQD.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+exports.cn = cn;
+//# sourceMappingURL=chunk-5DKE5YQD.cjs.map
+//# sourceMappingURL=chunk-5DKE5YQD.cjs.map

package/dist/chunk-664P2RGR.js

@@ -0,0 +1,108 @@
+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 Input = forwardRef(function Input2({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  label,
+  helperText,
+  errorMessage,
+  variant = "default",
+  size = "md",
+  className,
+  type,
+  placeholder,
+  name,
+  ...rest
+}, ref) {
+  const isInvalid = invalid || !!errorMessage;
+  const {
+    value: inputValue,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isInvalid: _,
+    getInputProps,
+    getLabelProps,
+    getHelperTextProps,
+    getErrorMessageProps
+  } = useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid: isInvalid,
+    type,
+    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(
+          "input",
+          {
+            ref,
+            className: "entropix-input",
+            ...ariaProps,
+            ...rest,
+            type,
+            name,
+            placeholder,
+            value: inputValue,
+            onChange: handleChange,
+            disabled: isDisabled || void 0,
+            readOnly: isReadOnly || void 0,
+            "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 { Input };
+//# sourceMappingURL=chunk-664P2RGR.js.map
+//# sourceMappingURL=chunk-664P2RGR.js.map

package/dist/chunk-6NKHMBF3.cjs

@@ -0,0 +1,97 @@
+'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 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 = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: toggle,
+    moveDown: open,
+    moveUp: open
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      className: chunk5DKE5YQD_cjs.cn("entropix-menu-trigger", className),
+      onClick: handleClick,
+      onKeyDown,
+      children
+    }
+  );
+}
+function MenuContent({ children, className }) {
+  const { isOpen, getMenuProps, close } = useMenuContext();
+  const propGetterReturn = getMenuProps();
+  const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const onKeyDown = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    dismiss: close
+  });
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const handleClick = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: chunk5DKE5YQD_cjs.cn("entropix-menu-item", className),
+      onClick: handleClick,
+      "data-state": activeIndex === index ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  );
+}
+
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuTrigger = MenuTrigger;
+//# sourceMappingURL=chunk-6NKHMBF3.cjs.map
+//# sourceMappingURL=chunk-6NKHMBF3.cjs.map

package/dist/chunk-6UAQCHIW.js

@@ -0,0 +1,8 @@
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export { cn };
+//# sourceMappingURL=chunk-6UAQCHIW.js.map
+//# sourceMappingURL=chunk-6UAQCHIW.js.map

package/dist/chunk-7AUIZOEH.cjs

@@ -0,0 +1,84 @@
+'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 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: chunk5DKE5YQD_cjs.cn("entropix-tabs", className), "data-orientation": orientation, children }) });
+}
+function TabList({ children, className }) {
+  const { getTabListProps } = useTabsContext();
+  const propGetterReturn = getTabListProps();
+  const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...ariaProps, className: chunk5DKE5YQD_cjs.cn("entropix-tablist", className), children });
+}
+function Tab({ value, children, className }) {
+  const { getTabProps, select, selectedKey, orientation } = useTabsContext();
+  const propGetterReturn = getTabProps(value);
+  const ariaProps = chunkLJK6KK2H_cjs.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 = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => select(value)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      id: `${baseId}-tab-${value}`,
+      className: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.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: chunk5DKE5YQD_cjs.cn("entropix-tabpanel", className),
+      "data-state": "active",
+      children
+    }
+  );
+}
+
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+//# sourceMappingURL=chunk-7AUIZOEH.cjs.map
+//# sourceMappingURL=chunk-7AUIZOEH.cjs.map

package/dist/chunk-AVCBDUKH.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-AVCBDUKH.js.map
+//# sourceMappingURL=chunk-AVCBDUKH.js.map

package/dist/chunk-B5JZHE4I.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 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 = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+    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]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: chunk5DKE5YQD_cjs.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")
+      }
+    );
+  }
+);
+
+exports.Toggle = Toggle;
+exports.ToggleInner = ToggleInner;
+//# sourceMappingURL=chunk-B5JZHE4I.cjs.map
+//# sourceMappingURL=chunk-B5JZHE4I.cjs.map

package/dist/chunk-BN57JPKV.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+// src/utils/use-keyboard-handler.ts
+function useKeyboardHandler(keyboardConfig, actionMap) {
+  const handler = 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;
+}
+
+export { useKeyboardHandler };
+//# sourceMappingURL=chunk-BN57JPKV.js.map
+//# sourceMappingURL=chunk-BN57JPKV.js.map

package/dist/chunk-BY4E26CV.js

@@ -0,0 +1,114 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useSelect } from '@entropix/core';
+import { createContext, useCallback, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SelectContext = createContext(null);
+function useSelectContext() {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error(
+      "Select compound components must be used within a <Select> provider."
+    );
+  }
+  return context;
+}
+function Select({ children, label, className, ...options }) {
+  const select = useSelect(options);
+  const labelProps = select.getLabelProps();
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxs("div", { className: cn("entropix-select", className), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "entropix-select-label",
+        id: labelProps.id,
+        htmlFor: labelProps.htmlFor,
+        children: label
+      }
+    ),
+    children
+  ] }) });
+}
+function SelectTrigger({
+  placeholder = "Select...",
+  children,
+  className
+}) {
+  const { getTriggerProps, toggle, open, selectedValue, isDisabled } = useSelectContext();
+  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__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...ariaProps,
+      className: cn("entropix-select-trigger", className),
+      onClick: handleClick,
+      onKeyDown,
+      disabled: isDisabled || void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "entropix-select-trigger__value", children: children ?? (selectedValue || placeholder) }),
+        /* @__PURE__ */ jsx("span", { className: "entropix-select-trigger__chevron", "aria-hidden": "true", children: "\u25BE" })
+      ]
+    }
+  );
+}
+function SelectContent({ children, className }) {
+  const { isOpen, getListboxProps, close } = useSelectContext();
+  const propGetterReturn = getListboxProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    dismiss: close
+  });
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: cn("entropix-select-content", className),
+      onKeyDown,
+      "data-state": "open",
+      children
+    }
+  );
+}
+function SelectOption({
+  value,
+  index,
+  disabled,
+  children,
+  className
+}) {
+  const { getOptionProps, selectedValue } = useSelectContext();
+  const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const isSelected = value === selectedValue;
+  const handleClick = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: cn("entropix-select-option", className),
+      onClick: handleClick,
+      "data-state": isSelected ? "selected" : "unselected",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  );
+}
+
+export { Select, SelectContent, SelectOption, SelectTrigger };
+//# sourceMappingURL=chunk-BY4E26CV.js.map
+//# sourceMappingURL=chunk-BY4E26CV.js.map