@entropix/react-native 0.3.0 → 1.0.1

package/dist/chunk-Q7TEJ62Q.cjs

@@ -0,0 +1,160 @@
+'use strict';
+
+var chunkP5NAXMSC_cjs = require('./chunk-P5NAXMSC.cjs');
+var chunkBOUIB4OY_cjs = require('./chunk-BOUIB4OY.cjs');
+var reactNative = require('react-native');
+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, style, ...options }) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const accordion = core.useAccordion(options);
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: [
+        {
+          borderWidth: 1,
+          borderColor: t.entropixColorBorderDefault,
+          borderRadius: bt.entropixRadiusLg,
+          overflow: "hidden"
+        },
+        style
+      ],
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  value,
+  isLast = false,
+  children,
+  style
+}) {
+  const { tokens: t } = chunkBOUIB4OY_cjs.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: [
+        {
+          borderBottomWidth: isLast ? 0 : 1,
+          borderBottomColor: t.entropixColorBorderDefault
+        },
+        style
+      ],
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  children,
+  style,
+  textStyle,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const itemKey = useAccordionItemContext();
+  const { getItemTriggerProps, isExpanded } = useAccordionContext();
+  const propGetterReturn = getItemTriggerProps(itemKey);
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const expanded = isExpanded(itemKey);
+  const handlePress = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      onPress: propGetterReturn.onAction ? handlePress : void 0,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingVertical: bt.entropixSpacing4,
+          paddingHorizontal: bt.entropixSpacing4
+        },
+        style
+      ],
+      children: [
+        typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                fontWeight: "500",
+                color: t.entropixColorTextPrimary,
+                flex: 1
+              },
+              textStyle
+            ],
+            children
+          }
+        ) : children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 12,
+              color: t.entropixColorTextSecondary,
+              marginLeft: bt.entropixSpacing2
+            },
+            children: expanded ? "\u2212" : "+"
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionPanel({ children, style }) {
+  const { baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const itemKey = useAccordionItemContext();
+  const { getItemPanelProps, isExpanded } = useAccordionContext();
+  const propGetterReturn = getItemPanelProps(itemKey);
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (!isExpanded(itemKey)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...rnAccessibility,
+      style: [
+        {
+          paddingHorizontal: bt.entropixSpacing4,
+          paddingBottom: bt.entropixSpacing4
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionPanel = AccordionPanel;
+exports.AccordionTrigger = AccordionTrigger;
+//# sourceMappingURL=chunk-Q7TEJ62Q.cjs.map
+//# sourceMappingURL=chunk-Q7TEJ62Q.cjs.map

package/dist/chunk-THX22NZW.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+var chunkP5NAXMSC_cjs = require('./chunk-P5NAXMSC.cjs');
+var chunkBOUIB4OY_cjs = require('./chunk-BOUIB4OY.cjs');
+var reactNative = require('react-native');
+var core = require('@entropix/core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RadioGroupContext = react.createContext(null);
+function useRadioGroupContext() {
+  const context = react.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error(
+      "Radio compound components must be used within a <RadioGroup> provider."
+    );
+  }
+  return context;
+}
+function RadioGroup({
+  label,
+  style,
+  textStyle,
+  children,
+  testID,
+  ...options
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const radioGroup = core.useRadioGroup(options);
+  const propGetterReturn = radioGroup.getRadioGroupProps();
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (label) {
+    rnAccessibility.accessibilityLabel = label;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: radioGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...rnAccessibility,
+      testID,
+      style: [
+        {
+          gap: bt.entropixSpacing2
+        },
+        style
+      ],
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                fontWeight: "500",
+                color: t.entropixColorTextPrimary
+              },
+              textStyle
+            ],
+            children: label
+          }
+        ) : null,
+        children
+      ]
+    }
+  ) });
+}
+function RadioItem({
+  value,
+  disabled,
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const { getRadioProps } = useRadioGroupContext();
+  const propGetterReturn = getRadioProps(value, { disabled });
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isChecked = propGetterReturn.accessibility.checked === true;
+  const isDisabled = propGetterReturn.accessibility.disabled === true;
+  const handlePress = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : handlePress,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: bt.entropixSpacing2
+        },
+        isDisabled && { opacity: 0.5 },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 10,
+              borderWidth: 2,
+              borderColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: isChecked ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.View,
+              {
+                style: {
+                  width: 10,
+                  height: 10,
+                  borderRadius: 5,
+                  backgroundColor: t.entropixColorActionPrimaryDefault
+                }
+              }
+            ) : null
+          }
+        ),
+        typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                color: t.entropixColorTextPrimary
+              },
+              textStyle
+            ],
+            children
+          }
+        ) : children
+      ]
+    }
+  );
+}
+
+exports.RadioGroup = RadioGroup;
+exports.RadioItem = RadioItem;
+//# sourceMappingURL=chunk-THX22NZW.cjs.map
+//# sourceMappingURL=chunk-THX22NZW.cjs.map

package/dist/chunk-UHVTF2Y4.js

@@ -0,0 +1,172 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { useCallback } from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { useInput } from '@entropix/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var KEYBOARD_TYPE_MAP = {
+  text: "default",
+  email: "email-address",
+  password: "default",
+  number: "numeric",
+  tel: "phone-pad",
+  url: "url",
+  search: "default"
+};
+function Input({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  label,
+  helperText,
+  errorMessage,
+  placeholder,
+  type = "text",
+  size = "md",
+  style,
+  inputStyle,
+  textStyle,
+  testID,
+  variant: _variant
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const {
+    value: inputValue,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    setValue,
+    getInputProps
+  } = useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    type,
+    placeholder
+  });
+  const propGetterReturn = getInputProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handleChangeText = useCallback(
+    (text) => {
+      setValue(text);
+    },
+    [setValue]
+  );
+  const sizeStyles = getSizeStyles(size, bt);
+  const showError = isInvalid && errorMessage;
+  return /* @__PURE__ */ jsxs(View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
+    label ? /* @__PURE__ */ jsxs(
+      Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.labelFontSize,
+            fontWeight: "500",
+            color: t.entropixColorTextPrimary
+          },
+          textStyle
+        ],
+        children: [
+          label,
+          required ? " *" : ""
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        ...rnAccessibility,
+        testID,
+        value: inputValue,
+        onChangeText: handleChangeText,
+        placeholder,
+        placeholderTextColor: t.entropixColorTextTertiary,
+        editable: !isDisabled && !isReadOnly,
+        secureTextEntry: type === "password",
+        keyboardType: KEYBOARD_TYPE_MAP[type] ?? "default",
+        style: [
+          {
+            paddingVertical: sizeStyles.paddingVertical,
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            fontSize: sizeStyles.fontSize,
+            borderWidth: 1,
+            borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
+            borderRadius: bt.entropixRadiusMd,
+            backgroundColor: t.entropixColorBgPrimary,
+            color: t.entropixColorTextPrimary
+          },
+          isDisabled && { opacity: 0.5 },
+          inputStyle
+        ]
+      }
+    ),
+    showError ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.helperFontSize,
+            color: t.entropixColorTextDanger
+          },
+          textStyle
+        ],
+        accessibilityRole: "alert",
+        accessibilityLiveRegion: "polite",
+        children: errorMessage
+      }
+    ) : helperText ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.helperFontSize,
+            color: t.entropixColorTextSecondary
+          },
+          textStyle
+        ],
+        children: helperText
+      }
+    ) : null
+  ] });
+}
+function getSizeStyles(size, bt) {
+  switch (size) {
+    case "sm":
+      return {
+        paddingVertical: bt.entropixSpacing1,
+        paddingHorizontal: bt.entropixSpacing2,
+        fontSize: bt.entropixFontSizeXs,
+        labelFontSize: bt.entropixFontSizeXs,
+        helperFontSize: bt.entropixFontSizeXs - 1
+      };
+    case "lg":
+      return {
+        paddingVertical: bt.entropixSpacing3,
+        paddingHorizontal: bt.entropixSpacing4,
+        fontSize: bt.entropixFontSizeBase,
+        labelFontSize: bt.entropixFontSizeBase,
+        helperFontSize: bt.entropixFontSizeSm
+      };
+    default:
+      return {
+        paddingVertical: bt.entropixSpacing2,
+        paddingHorizontal: bt.entropixSpacing3,
+        fontSize: bt.entropixFontSizeSm,
+        labelFontSize: bt.entropixFontSizeSm,
+        helperFontSize: bt.entropixFontSizeXs
+      };
+  }
+}
+
+export { Input };
+//# sourceMappingURL=chunk-UHVTF2Y4.js.map
+//# sourceMappingURL=chunk-UHVTF2Y4.js.map

package/dist/chunk-UYXJHKYK.cjs

@@ -0,0 +1,166 @@
+'use strict';
+
+var chunkP5NAXMSC_cjs = require('./chunk-P5NAXMSC.cjs');
+var chunkBOUIB4OY_cjs = require('./chunk-BOUIB4OY.cjs');
+var react = require('react');
+var reactNative = require('react-native');
+var core = require('@entropix/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Textarea({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  label,
+  helperText,
+  errorMessage,
+  placeholder,
+  numberOfLines = 4,
+  size = "md",
+  style,
+  inputStyle,
+  textStyle,
+  testID
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const {
+    value: inputValue,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    setValue,
+    getInputProps
+  } = core.useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    type: "text",
+    placeholder
+  });
+  const propGetterReturn = getInputProps();
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handleChangeText = react.useCallback(
+    (text) => {
+      setValue(text);
+    },
+    [setValue]
+  );
+  const sizeStyles = getSizeStyles(size, bt);
+  const showError = isInvalid && errorMessage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.labelFontSize,
+            fontWeight: "500",
+            color: t.entropixColorTextPrimary
+          },
+          textStyle
+        ],
+        children: [
+          label,
+          required ? " *" : ""
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        ...rnAccessibility,
+        testID,
+        value: inputValue,
+        onChangeText: handleChangeText,
+        placeholder,
+        placeholderTextColor: t.entropixColorTextTertiary,
+        editable: !isDisabled && !isReadOnly,
+        multiline: true,
+        numberOfLines,
+        textAlignVertical: "top",
+        style: [
+          {
+            paddingVertical: sizeStyles.paddingVertical,
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            fontSize: sizeStyles.fontSize,
+            borderWidth: 1,
+            borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
+            borderRadius: bt.entropixRadiusMd,
+            backgroundColor: t.entropixColorBgPrimary,
+            color: t.entropixColorTextPrimary,
+            minHeight: numberOfLines * (sizeStyles.fontSize + 8)
+          },
+          isDisabled && { opacity: 0.5 },
+          inputStyle
+        ]
+      }
+    ),
+    showError ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.helperFontSize,
+            color: t.entropixColorTextDanger
+          },
+          textStyle
+        ],
+        accessibilityRole: "alert",
+        accessibilityLiveRegion: "polite",
+        children: errorMessage
+      }
+    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: [
+          {
+            fontSize: sizeStyles.helperFontSize,
+            color: t.entropixColorTextSecondary
+          },
+          textStyle
+        ],
+        children: helperText
+      }
+    ) : null
+  ] });
+}
+function getSizeStyles(size, bt) {
+  switch (size) {
+    case "sm":
+      return {
+        paddingVertical: bt.entropixSpacing1,
+        paddingHorizontal: bt.entropixSpacing2,
+        fontSize: bt.entropixFontSizeXs,
+        labelFontSize: bt.entropixFontSizeXs,
+        helperFontSize: bt.entropixFontSizeXs - 1
+      };
+    case "lg":
+      return {
+        paddingVertical: bt.entropixSpacing3,
+        paddingHorizontal: bt.entropixSpacing4,
+        fontSize: bt.entropixFontSizeBase,
+        labelFontSize: bt.entropixFontSizeBase,
+        helperFontSize: bt.entropixFontSizeSm
+      };
+    default:
+      return {
+        paddingVertical: bt.entropixSpacing2,
+        paddingHorizontal: bt.entropixSpacing3,
+        fontSize: bt.entropixFontSizeSm,
+        labelFontSize: bt.entropixFontSizeSm,
+        helperFontSize: bt.entropixFontSizeXs
+      };
+  }
+}
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=chunk-UYXJHKYK.cjs.map
+//# sourceMappingURL=chunk-UYXJHKYK.cjs.map