@entropix/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useMemo, useCallback, createContext, useState, useEffect, useRef, useContext } from 'react';
-import { useButton, useToggle, useDialog, useTabs, useAccordion, useMenu } from '@entropix/core';
-import { jsx } from 'react/jsx-runtime';
+import { useButton, useToggle, useInput, useDialog, useTabs, useAccordion, useMenu, useRadioGroup, useSelect } from '@entropix/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/utils/map-accessibility-to-aria.ts
@@ -26,7 +26,9 @@ var ARIA_MAP = {
   valueNow: "aria-valuenow",
   valueMin: "aria-valuemin",
   valueMax: "aria-valuemax",
-  valueText: "aria-valuetext"
+  valueText: "aria-valuetext",
+  required: "aria-required",
+  invalid: "aria-invalid"
 };
 function mapAccessibilityToAria(props) {
   const result = {};
@@ -661,6 +663,462 @@ function MenuItem({
     }
   );
 }
+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
+      ]
+    }
+  );
+});
+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
+        ]
+      }
+    );
+  }
+);
+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 })
+        ]
+      }
+    );
+  }
+);
+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 })
+      ]
+    }
+  );
+}
+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
+    }
+  );
+}
 var BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -777,6 +1235,6 @@ var Divider = forwardRef(function Divider2({ orientation = "horizontal", spacing
   );
 });
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, BREAKPOINTS, Button, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, Divider, Inline, Menu, MenuContent, MenuItem, MenuTrigger, Stack, Switch, Tab, TabList, TabPanel, Tabs, Toggle, mapAccessibilityToAria, useBreakpoint, useBreakpointValue, useFocusRestore, useFocusTrap, useKeyboardHandler, useMediaQuery };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, BREAKPOINTS, Button, Checkbox, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, Divider, Inline, Input, Menu, MenuContent, MenuItem, MenuTrigger, RadioGroup, RadioItem, Select, SelectContent, SelectOption, SelectTrigger, Stack, Switch, Tab, TabList, TabPanel, Tabs, Textarea, Toggle, mapAccessibilityToAria, useBreakpoint, useBreakpointValue, useFocusRestore, useFocusTrap, useKeyboardHandler, useMediaQuery };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map