@entropix/react 1.0.0 → 1.0.1

package/dist/chunk-CL6JXZIY.js

@@ -0,0 +1,88 @@
+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 { jsxs, jsx } from 'react/jsx-runtime';
+
+var Checkbox = forwardRef(
+  function Checkbox2({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    label,
+    indeterminate = false,
+    className,
+    style,
+    children,
+    onClick,
+    onKeyDown: externalOnKeyDown,
+    ...rest
+  }, ref) {
+    const { isChecked, isDisabled, getToggleProps } = useToggle({
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      role: "checkbox"
+    });
+    const propGetterReturn = getToggleProps();
+    const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+    if (indeterminate) {
+      ariaProps["aria-checked"] = "mixed";
+    }
+    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]
+    );
+    const dataState = indeterminate ? "indeterminate" : isChecked ? "checked" : "unchecked";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: 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__ */ jsx("span", { className: "entropix-checkbox__indicator", "data-state": dataState }),
+          (label || children) && /* @__PURE__ */ jsx("span", { className: "entropix-checkbox__label", children: label || children })
+        ]
+      }
+    );
+  }
+);
+
+export { Checkbox };
+//# sourceMappingURL=chunk-CL6JXZIY.js.map
+//# sourceMappingURL=chunk-CL6JXZIY.js.map

package/dist/chunk-CTT3LXMZ.js

@@ -0,0 +1,76 @@
+import { cn } from './chunk-6UAQCHIW.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var Stack = forwardRef(function Stack2({ gap, align, fullWidth, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ 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 = forwardRef(function Inline2({ gap, align, justify, wrap, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ 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 = forwardRef(function Container2({ maxWidth = "lg", center, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "entropix-container",
+        `entropix-container--${maxWidth}`,
+        center && "entropix-container--center",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Divider = forwardRef(function Divider2({ orientation = "horizontal", spacing, className, ...rest }, ref) {
+  return /* @__PURE__ */ 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
+    }
+  );
+});
+
+export { Container, Divider, Inline, Stack };
+//# sourceMappingURL=chunk-CTT3LXMZ.js.map
+//# sourceMappingURL=chunk-CTT3LXMZ.js.map

package/dist/chunk-EASSPJBG.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+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 Input = react.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
+  } = core.useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid: isInvalid,
+    type,
+    placeholder,
+    name
+  });
+  const propGetterReturn = getInputProps();
+  const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const labelProps = getLabelProps();
+  const helperProps = getHelperTextProps();
+  const errorProps = getErrorMessageProps();
+  const handleChange = react.useCallback(
+    (event) => {
+      onChange?.(event.target.value);
+    },
+    [onChange]
+  );
+  const dataState = isInvalid ? "invalid" : isDisabled ? "disabled" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk5DKE5YQD_cjs.cn("entropix-input-wrapper", className),
+      "data-state": dataState,
+      "data-variant": variant,
+      "data-size": size,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "entropix-input-label",
+            id: labelProps.id,
+            htmlFor: labelProps.htmlFor,
+            children: [
+              label,
+              isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-input-required", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "entropix-input-error", ...errorProps, children: errorMessage }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-input-helper", ...helperProps, children: helperText }) : null
+      ]
+    }
+  );
+});
+
+exports.Input = Input;
+//# sourceMappingURL=chunk-EASSPJBG.cjs.map
+//# sourceMappingURL=chunk-EASSPJBG.cjs.map

package/dist/chunk-EWY7MSXF.cjs

@@ -0,0 +1,94 @@
+'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 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: chunk5DKE5YQD_cjs.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: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.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 = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => toggle(itemKey)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...ariaProps,
+      id: triggerId,
+      className: chunk5DKE5YQD_cjs.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 = chunkLJK6KK2H_cjs.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: chunk5DKE5YQD_cjs.cn("entropix-accordion-panel", className), "data-state": "open", children });
+}
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionPanel = AccordionPanel;
+exports.AccordionTrigger = AccordionTrigger;
+//# sourceMappingURL=chunk-EWY7MSXF.cjs.map
+//# sourceMappingURL=chunk-EWY7MSXF.cjs.map

package/dist/chunk-FJGLK3I4.js

@@ -0,0 +1,89 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useAccordion } from '@entropix/core';
+import { createContext, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var AccordionContext = createContext(null);
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      "Accordion compound components must be used within an <Accordion> provider."
+    );
+  }
+  return context;
+}
+var AccordionItemContext = createContext(null);
+function useAccordionItemContext() {
+  const context = 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 = useAccordion(options);
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: accordion, children: /* @__PURE__ */ jsx("div", { className: cn("entropix-accordion", className), children }) });
+}
+function AccordionItem({
+  value,
+  children,
+  className
+}) {
+  const { isExpanded } = useAccordionContext();
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ 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 = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const onKeyDown = useKeyboardHandler(propGetterReturn.keyboardConfig, {
+    activate: () => toggle(itemKey)
+  });
+  return /* @__PURE__ */ 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__ */ jsx("div", { ...ariaProps, id: panelId, className: cn("entropix-accordion-panel", className), "data-state": "open", children });
+}
+
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger };
+//# sourceMappingURL=chunk-FJGLK3I4.js.map
+//# sourceMappingURL=chunk-FJGLK3I4.js.map

package/dist/chunk-GTVBKK3W.js

@@ -0,0 +1,88 @@
+import { useKeyboardHandler } from './chunk-BN57JPKV.js';
+import { mapAccessibilityToAria } from './chunk-Y2M2LJGJ.js';
+import { cn } from './chunk-6UAQCHIW.js';
+import { useRadioGroup } from '@entropix/core';
+import { createContext, useMemo, useCallback, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var RadioContext = createContext(null);
+function useRadioContext() {
+  const context = 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 = useRadioGroup(options);
+  const propGetterReturn = radioGroup.getRadioGroupProps();
+  const ariaProps = mapAccessibilityToAria(propGetterReturn.accessibility);
+  if (label) {
+    ariaProps["aria-label"] = label;
+  }
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: radioGroup, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...ariaProps,
+      className: 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 = mapAccessibilityToAria(propGetterReturn.accessibility);
+  const isChecked = value === selectedValue;
+  const actionMap = useMemo(
+    () => ({}),
+    []
+  );
+  const onKeyDown = useKeyboardHandler(
+    propGetterReturn.keyboardConfig,
+    actionMap
+  );
+  const handleClick = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...ariaProps,
+      className: cn("entropix-radio-item", className),
+      onClick: handleClick,
+      onKeyDown,
+      "data-state": isChecked ? "checked" : "unchecked",
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "entropix-radio-item__indicator",
+            "data-state": isChecked ? "checked" : "unchecked"
+          }
+        ),
+        (label || children) && /* @__PURE__ */ jsx("span", { className: "entropix-radio-item__label", children: label || children })
+      ]
+    }
+  );
+}
+
+export { RadioGroup, RadioItem };
+//# sourceMappingURL=chunk-GTVBKK3W.js.map
+//# sourceMappingURL=chunk-GTVBKK3W.js.map

package/dist/chunk-GZXXUFCJ.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkB5JZHE4I_cjs = require('./chunk-B5JZHE4I.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Switch = react.forwardRef(
+  function Switch2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkB5JZHE4I_cjs.ToggleInner, { ...props, ref, role: "switch", componentClass: "entropix-switch" });
+  }
+);
+
+exports.Switch = Switch;
+//# sourceMappingURL=chunk-GZXXUFCJ.cjs.map
+//# sourceMappingURL=chunk-GZXXUFCJ.cjs.map

package/dist/chunk-IXH7OVN3.cjs

@@ -0,0 +1,86 @@
+'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 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 = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+  const actionMap = react.useMemo(
+    () => ({
+      activate: 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 = isLoading ? "loading" : isDisabled ? "disabled" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: chunk5DKE5YQD_cjs.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
+    }
+  );
+});
+
+exports.Button = Button;
+//# sourceMappingURL=chunk-IXH7OVN3.cjs.map
+//# sourceMappingURL=chunk-IXH7OVN3.cjs.map