@entropix/react-native 0.3.0 → 1.0.1

package/dist/chunk-64DK6YFL.js

@@ -0,0 +1,164 @@
+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';
+
+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 } = useTheme();
+  const {
+    value: inputValue,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    setValue,
+    getInputProps
+  } = useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    type: "text",
+    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,
+        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__ */ 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 { Textarea };
+//# sourceMappingURL=chunk-64DK6YFL.js.map
+//# sourceMappingURL=chunk-64DK6YFL.js.map

package/dist/chunk-73BDGPZT.js

@@ -0,0 +1,89 @@
+// src/utils/map-accessibility-to-rn.ts
+var RN_ROLE_MAP = {
+  button: "button",
+  checkbox: "checkbox",
+  switch: "switch",
+  dialog: "none",
+  // Modal component handles dialog semantics
+  alertdialog: "alert",
+  link: "link",
+  tab: "tab",
+  tablist: "tablist",
+  menu: "menu",
+  menuitem: "menuitem",
+  radio: "radio",
+  radiogroup: "radiogroup",
+  slider: "adjustable",
+  spinbutton: "spinbutton",
+  textbox: "text",
+  combobox: "combobox",
+  progressbar: "progressbar",
+  alert: "alert",
+  status: "text",
+  tooltip: "text",
+  none: "none",
+  presentation: "none"
+};
+function mapAccessibilityToRN(props) {
+  const result = { accessible: true };
+  if (props.role) {
+    result.accessibilityRole = RN_ROLE_MAP[props.role] ?? props.role;
+  }
+  if (props.label) {
+    result.accessibilityLabel = props.label;
+  }
+  if (props.describedBy) {
+    result.accessibilityHint = props.describedBy;
+  }
+  if (props.labelledBy) {
+    result.accessibilityLabelledBy = props.labelledBy;
+  }
+  const state = {};
+  let hasState = false;
+  if (props.disabled !== void 0) {
+    state.disabled = props.disabled;
+    hasState = true;
+  }
+  if (props.expanded !== void 0) {
+    state.expanded = props.expanded;
+    hasState = true;
+  }
+  if (props.selected !== void 0) {
+    state.selected = props.selected;
+    hasState = true;
+  }
+  if (props.checked !== void 0) {
+    state.checked = props.checked;
+    hasState = true;
+  }
+  if (props.busy !== void 0) {
+    state.busy = props.busy;
+    hasState = true;
+  }
+  if (hasState) {
+    result.accessibilityState = state;
+  }
+  if (props.valueNow !== void 0 || props.valueMin !== void 0 || props.valueMax !== void 0 || props.valueText !== void 0) {
+    result.accessibilityValue = {};
+    if (props.valueNow !== void 0)
+      result.accessibilityValue.now = props.valueNow;
+    if (props.valueMin !== void 0)
+      result.accessibilityValue.min = props.valueMin;
+    if (props.valueMax !== void 0)
+      result.accessibilityValue.max = props.valueMax;
+    if (props.valueText !== void 0)
+      result.accessibilityValue.text = props.valueText;
+  }
+  if (props.live) {
+    result.accessibilityLiveRegion = props.live === "off" ? "none" : props.live;
+  }
+  if (props.hidden) {
+    result.accessibilityElementsHidden = true;
+    result.importantForAccessibility = "no-hide-descendants";
+  }
+  return result;
+}
+
+export { mapAccessibilityToRN };
+//# sourceMappingURL=chunk-73BDGPZT.js.map
+//# sourceMappingURL=chunk-73BDGPZT.js.map

package/dist/chunk-B5YFEA66.cjs

@@ -0,0 +1,243 @@
+'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 SelectContext = react.createContext(null);
+function useSelectContext() {
+  const context = react.useContext(SelectContext);
+  if (!context) {
+    throw new Error(
+      "Select compound components must be used within a <Select> provider."
+    );
+  }
+  return context;
+}
+function Select({
+  label,
+  style,
+  textStyle,
+  children,
+  testID,
+  ...options
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const select = core.useSelect(options);
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      testID,
+      style: [{ gap: bt.entropixSpacing1 }, style],
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                fontWeight: "500",
+                color: t.entropixColorTextPrimary
+              },
+              textStyle
+            ],
+            children: label
+          }
+        ) : null,
+        children
+      ]
+    }
+  ) });
+}
+function SelectTrigger({
+  placeholder = "Select...",
+  displayValue,
+  style,
+  textStyle,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const { selectedValue, isDisabled, isOpen, getTriggerProps } = useSelectContext();
+  const propGetterReturn = getTriggerProps();
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const hasValue = selectedValue !== "";
+  const label = displayValue ?? (hasValue ? selectedValue : placeholder);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : handlePress,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingVertical: bt.entropixSpacing2,
+          paddingHorizontal: bt.entropixSpacing3,
+          borderWidth: 1,
+          borderColor: isOpen ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
+          borderRadius: bt.entropixRadiusMd,
+          backgroundColor: t.entropixColorBgPrimary
+        },
+        isDisabled && { opacity: 0.5 },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                color: hasValue ? t.entropixColorTextPrimary : t.entropixColorTextTertiary,
+                flex: 1
+              },
+              textStyle
+            ],
+            numberOfLines: 1,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: bt.entropixFontSizeXs,
+              color: t.entropixColorTextSecondary,
+              marginLeft: bt.entropixSpacing2
+            },
+            children: "\u25BC"
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({ children, style, testID }) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const { isOpen, close, getListboxProps } = useSelectContext();
+  const propGetterReturn = getListboxProps();
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Modal,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: close,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          style: {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(0,0,0,0.3)"
+          },
+          onPress: close,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: () => {
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
+                {
+                  ...rnAccessibility,
+                  testID,
+                  style: [
+                    {
+                      minWidth: 240,
+                      maxHeight: 300,
+                      padding: bt.entropixSpacing1,
+                      backgroundColor: t.entropixColorBgPrimary,
+                      borderWidth: 1,
+                      borderColor: t.entropixColorBorderDefault,
+                      borderRadius: bt.entropixRadiusMd,
+                      shadowColor: "#000",
+                      shadowOffset: { width: 0, height: 4 },
+                      shadowOpacity: 0.15,
+                      shadowRadius: 12,
+                      elevation: 8
+                    },
+                    style
+                  ],
+                  children
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function SelectOption({
+  value,
+  index,
+  disabled,
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const { getOptionProps } = useSelectContext();
+  const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isSelected = propGetterReturn.accessibility.selected === true;
+  const handlePress = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled,
+      onPress: propGetterReturn.onAction ? handlePress : void 0,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: bt.entropixSpacing2,
+          paddingHorizontal: bt.entropixSpacing3,
+          borderRadius: bt.entropixRadiusSm,
+          backgroundColor: isSelected ? t.entropixColorBgSecondary : "transparent"
+        },
+        disabled && { opacity: 0.5 },
+        style
+      ],
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: [
+            {
+              fontSize: bt.entropixFontSizeSm,
+              fontWeight: isSelected ? "600" : "400",
+              color: t.entropixColorTextPrimary
+            },
+            textStyle
+          ],
+          children
+        }
+      ) : children
+    }
+  );
+}
+
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectOption = SelectOption;
+exports.SelectTrigger = SelectTrigger;
+//# sourceMappingURL=chunk-B5YFEA66.cjs.map
+//# sourceMappingURL=chunk-B5YFEA66.cjs.map

package/dist/chunk-BOUIB4OY.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var react = require('react');
+var native = require('@entropix/tokens/native');
+var light = require('@entropix/tokens/native/light');
+var dark = require('@entropix/tokens/native/dark');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/theme/theme-context.tsx
+var ThemeContext = react.createContext({
+  mode: "light",
+  brand: "default",
+  tokens: light.tokens,
+  baseTokens: native.tokens
+});
+var brandRegistry = {
+  default: {
+    light: light.tokens,
+    dark: dark.tokens
+  }
+};
+function registerBrand(name, themes) {
+  brandRegistry[name] = themes;
+}
+function EntropixProvider({
+  mode = "light",
+  brand = "default",
+  tokens: tokenOverride,
+  children
+}) {
+  const value = react.useMemo(() => {
+    let resolvedTokens;
+    if (tokenOverride) {
+      resolvedTokens = tokenOverride;
+    } else {
+      const brandThemes = brandRegistry[brand] ?? brandRegistry.default;
+      resolvedTokens = brandThemes[mode] ?? brandThemes.light;
+    }
+    return {
+      mode,
+      brand,
+      tokens: resolvedTokens,
+      baseTokens: native.tokens
+    };
+  }, [mode, brand, tokenOverride]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return react.useContext(ThemeContext);
+}
+
+exports.EntropixProvider = EntropixProvider;
+exports.registerBrand = registerBrand;
+exports.useTheme = useTheme;
+//# sourceMappingURL=chunk-BOUIB4OY.cjs.map
+//# sourceMappingURL=chunk-BOUIB4OY.cjs.map

package/dist/chunk-C6HF6QXK.js

@@ -0,0 +1,154 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { useCallback } from 'react';
+import { Pressable, View, Text } from 'react-native';
+import { useToggle } from '@entropix/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Checkbox({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  indeterminate,
+  label,
+  size = "md",
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isChecked, isDisabled, getToggleProps } = useToggle({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    role: "checkbox"
+  });
+  const propGetterReturn = getToggleProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (indeterminate) {
+    rnAccessibility.accessibilityState = {
+      ...rnAccessibility.accessibilityState,
+      checked: "mixed"
+    };
+  }
+  if (label) {
+    rnAccessibility.accessibilityLabel = label;
+  }
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const sizeStyles = getSizeStyles(size, bt);
+  const isActive = indeterminate || isChecked;
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          View,
+          {
+            style: {
+              width: sizeStyles.boxSize,
+              height: sizeStyles.boxSize,
+              borderWidth: 2,
+              borderColor: isActive ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
+              borderRadius: bt.entropixRadiusSm,
+              backgroundColor: isActive ? t.entropixColorActionPrimaryDefault : "transparent",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: indeterminate ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  fontSize: sizeStyles.indicatorFontSize,
+                  fontWeight: "700",
+                  color: t.entropixColorTextInverse,
+                  lineHeight: sizeStyles.boxSize - 2
+                },
+                children: "\u2013"
+              }
+            ) : isChecked ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  fontSize: sizeStyles.indicatorFontSize,
+                  fontWeight: "700",
+                  color: t.entropixColorTextInverse,
+                  lineHeight: sizeStyles.boxSize - 2
+                },
+                children: "\u2713"
+              }
+            ) : null
+          }
+        ),
+        typeof children === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              {
+                fontSize: sizeStyles.fontSize,
+                color: t.entropixColorTextPrimary
+              },
+              textStyle
+            ],
+            children
+          }
+        ) : children != null ? children : label ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              {
+                fontSize: sizeStyles.fontSize,
+                color: t.entropixColorTextPrimary
+              },
+              textStyle
+            ],
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function getSizeStyles(size, bt) {
+  switch (size) {
+    case "sm":
+      return {
+        boxSize: 16,
+        indicatorFontSize: 10,
+        fontSize: bt.entropixFontSizeXs
+      };
+    case "lg":
+      return {
+        boxSize: 24,
+        indicatorFontSize: 16,
+        fontSize: bt.entropixFontSizeBase
+      };
+    default:
+      return {
+        boxSize: 20,
+        indicatorFontSize: 13,
+        fontSize: bt.entropixFontSizeSm
+      };
+  }
+}
+
+export { Checkbox };
+//# sourceMappingURL=chunk-C6HF6QXK.js.map
+//# sourceMappingURL=chunk-C6HF6QXK.js.map