@entropix/react-native 0.3.0 → 1.0.1

package/dist/chunk-VP567WZL.js

@@ -0,0 +1,237 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { useDialog } from '@entropix/core';
+import { createContext, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Pressable, Modal, View, Text, StyleSheet } from 'react-native';
+
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error(
+      "Dialog compound components must be used within a <Dialog> provider."
+    );
+  }
+  return context;
+}
+function Dialog({
+  children,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  closeOnOverlayPress,
+  closeOnEscape,
+  modal,
+  role
+}) {
+  const dialog = useDialog({
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    closeOnOverlayPress,
+    closeOnEscape,
+    modal,
+    role
+  });
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: dialog, children });
+}
+function DialogTrigger({
+  children,
+  style,
+  ...rest
+}) {
+  const { getTriggerProps } = useDialogContext();
+  const propGetterReturn = getTriggerProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      onPress: handlePress,
+      style,
+      children
+    }
+  );
+}
+function DialogContent({
+  children,
+  style,
+  cardStyle,
+  animationType = "fade",
+  transparent = true,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isOpen, close, ids, getContentProps } = useDialogContext();
+  const propGetterReturn = getContentProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: isOpen,
+      transparent,
+      animationType,
+      onRequestClose: close,
+      supportedOrientations: ["portrait", "landscape"],
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          ...rest,
+          style: [
+            {
+              flex: 1,
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.5)"
+            },
+            style
+          ],
+          children: /* @__PURE__ */ jsx(
+            View,
+            {
+              ...rnAccessibility,
+              nativeID: ids.content,
+              style: [
+                {
+                  backgroundColor: t.entropixColorBgPrimary,
+                  borderRadius: bt.entropixRadiusLg,
+                  padding: bt.entropixSpacing6,
+                  width: "90%",
+                  maxWidth: 480,
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.15,
+                  shadowRadius: 12,
+                  elevation: 8
+                },
+                cardStyle
+              ],
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function DialogTitle({ children, style, ...rest }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { ids } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...rest,
+      nativeID: ids.title,
+      style: [
+        {
+          fontSize: 18,
+          fontWeight: "600",
+          color: t.entropixColorTextPrimary,
+          marginBottom: bt.entropixSpacing2
+        },
+        style
+      ],
+      accessibilityRole: "header",
+      children
+    }
+  );
+}
+function DialogDescription({
+  children,
+  style,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { ids } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...rest,
+      nativeID: ids.description,
+      style: [
+        {
+          fontSize: bt.entropixFontSizeSm,
+          color: t.entropixColorTextSecondary,
+          lineHeight: 20,
+          marginBottom: bt.entropixSpacing4
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function DialogClose({ children, style, ...rest }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { getCloseProps } = useDialogContext();
+  const propGetterReturn = getCloseProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      onPress: handlePress,
+      style: [
+        {
+          position: "absolute",
+          top: bt.entropixSpacing3,
+          right: bt.entropixSpacing3,
+          width: 32,
+          height: 32,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: bt.entropixRadiusSm
+        },
+        style
+      ],
+      accessibilityRole: "button",
+      children: children ?? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: 16,
+            color: t.entropixColorTextSecondary
+          },
+          children: "\u2715"
+        }
+      )
+    }
+  );
+}
+function DialogOverlay({ style, testID }) {
+  const { isOpen, getOverlayProps } = useDialogContext();
+  const propGetterReturn = getOverlayProps();
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      testID,
+      accessible: false,
+      importantForAccessibility: "no",
+      onPress: propGetterReturn.onAction ? handlePress : void 0,
+      style: [
+        {
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        },
+        style
+      ]
+    }
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger };
+//# sourceMappingURL=chunk-VP567WZL.js.map
+//# sourceMappingURL=chunk-VP567WZL.js.map

package/dist/chunk-XBNX4SLA.js

@@ -0,0 +1,105 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { View, Pressable, Text } from 'react-native';
+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, style, ...options }) {
+  const tabs = useTabs(options);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: tabs, children: /* @__PURE__ */ jsx(View, { style, children }) });
+}
+function TabList({ children, style }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { getTabListProps } = useTabsContext();
+  const propGetterReturn = getTabListProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...rnAccessibility,
+      style: [
+        {
+          flexDirection: "row",
+          gap: bt.entropixSpacing1,
+          borderBottomWidth: 1,
+          borderBottomColor: t.entropixColorBorderDefault
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function Tab({ value, children, style, textStyle, ...rest }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { getTabProps, selectedKey } = useTabsContext();
+  const propGetterReturn = getTabProps(value);
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isActive = selectedKey === value;
+  const isDisabled = propGetterReturn.accessibility.disabled === true;
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      onPress: propGetterReturn.onAction ? handlePress : void 0,
+      style: [
+        {
+          paddingVertical: bt.entropixSpacing2,
+          paddingHorizontal: bt.entropixSpacing4,
+          borderBottomWidth: 2,
+          borderBottomColor: isActive ? t.entropixColorActionPrimaryDefault : "transparent"
+        },
+        isDisabled && { opacity: 0.5 },
+        style
+      ],
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            {
+              fontSize: bt.entropixFontSizeSm,
+              fontWeight: "500",
+              color: isActive ? t.entropixColorActionPrimaryDefault : t.entropixColorTextSecondary
+            },
+            textStyle
+          ],
+          children
+        }
+      ) : children
+    }
+  );
+}
+function TabPanel({ value, children, style }) {
+  const { baseTokens: bt } = useTheme();
+  const { getTabPanelProps, selectedKey } = useTabsContext();
+  const propGetterReturn = getTabPanelProps(value);
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (selectedKey !== value) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...rnAccessibility,
+      style: [{ padding: bt.entropixSpacing4 }, style],
+      children
+    }
+  );
+}
+
+export { Tab, TabList, TabPanel, Tabs };
+//# sourceMappingURL=chunk-XBNX4SLA.js.map
+//# sourceMappingURL=chunk-XBNX4SLA.js.map

package/dist/chunk-XND7AIKO.cjs

@@ -0,0 +1,133 @@
+'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 Button({
+  onPress,
+  disabled,
+  loading,
+  variant = "primary",
+  size = "md",
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = chunkBOUIB4OY_cjs.useTheme();
+  const { isDisabled, isLoading, getButtonProps } = core.useButton({
+    disabled,
+    loading,
+    onPress,
+    elementType: "div"
+  });
+  const propGetterReturn = getButtonProps();
+  const rnAccessibility = chunkP5NAXMSC_cjs.mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = react.useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const sizeStyles = getSizeStyle(size, bt);
+  const variantStyles = getVariantStyle(variant, t);
+  const labelColor = getVariantTextColor(variant, t);
+  const isInactive = isDisabled || isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled: isInactive,
+      onPress: isInactive ? void 0 : handlePress,
+      style: [
+        baseStyle,
+        sizeStyles.container,
+        variantStyles,
+        isInactive && { opacity: 0.5 },
+        style
+      ],
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: [
+            { color: labelColor, fontSize: sizeStyles.fontSize, fontWeight: "500" },
+            textStyle
+          ],
+          children
+        }
+      ) : children
+    }
+  );
+}
+var baseStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+};
+function getSizeStyle(size, bt) {
+  switch (size) {
+    case "sm":
+      return {
+        container: {
+          paddingVertical: bt.entropixSpacing1,
+          paddingHorizontal: bt.entropixSpacing3,
+          borderRadius: bt.entropixRadiusSm,
+          gap: bt.entropixButtonGap
+        },
+        fontSize: bt.entropixFontSizeXs
+      };
+    case "lg":
+      return {
+        container: {
+          paddingVertical: bt.entropixSpacing3,
+          paddingHorizontal: bt.entropixSpacing6,
+          borderRadius: bt.entropixRadiusLg,
+          gap: bt.entropixButtonGap
+        },
+        fontSize: bt.entropixFontSizeBase
+      };
+    default:
+      return {
+        container: {
+          paddingVertical: bt.entropixButtonPaddingY,
+          paddingHorizontal: bt.entropixButtonPaddingX,
+          borderRadius: bt.entropixButtonBorderRadius,
+          gap: bt.entropixButtonGap
+        },
+        fontSize: bt.entropixButtonFontSize
+      };
+  }
+}
+function getVariantStyle(variant, t) {
+  switch (variant) {
+    case "primary":
+      return { backgroundColor: t.entropixButtonPrimaryBg, borderWidth: 1, borderColor: t.entropixButtonPrimaryBorder };
+    case "secondary":
+      return { backgroundColor: t.entropixButtonSecondaryBg, borderWidth: 1, borderColor: t.entropixButtonSecondaryBorder };
+    case "outline":
+      return { backgroundColor: "transparent", borderWidth: 1, borderColor: t.entropixColorBorderDefault };
+    case "ghost":
+      return { backgroundColor: "transparent", borderWidth: 1, borderColor: "transparent" };
+    case "danger":
+      return { backgroundColor: t.entropixButtonDangerBg, borderWidth: 1, borderColor: t.entropixButtonDangerBorder };
+  }
+}
+function getVariantTextColor(variant, t) {
+  switch (variant) {
+    case "primary":
+      return t.entropixButtonPrimaryText;
+    case "secondary":
+      return t.entropixButtonSecondaryText;
+    case "outline":
+    case "ghost":
+      return t.entropixColorTextPrimary;
+    case "danger":
+      return t.entropixButtonDangerText;
+  }
+}
+
+exports.Button = Button;
+//# sourceMappingURL=chunk-XND7AIKO.cjs.map
+//# sourceMappingURL=chunk-XND7AIKO.cjs.map

package/dist/chunk-XSOLJOBG.js

@@ -0,0 +1,238 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { View, Text, Pressable, Modal } from 'react-native';
+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({
+  label,
+  style,
+  textStyle,
+  children,
+  testID,
+  ...options
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const select = useSelect(options);
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [{ gap: bt.entropixSpacing1 }, style],
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          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 } = useTheme();
+  const { selectedValue, isDisabled, isOpen, getTriggerProps } = useSelectContext();
+  const propGetterReturn = getTriggerProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const hasValue = selectedValue !== "";
+  const label = displayValue ?? (hasValue ? selectedValue : placeholder);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                color: hasValue ? t.entropixColorTextPrimary : t.entropixColorTextTertiary,
+                flex: 1
+              },
+              textStyle
+            ],
+            numberOfLines: 1,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: bt.entropixFontSizeXs,
+              color: t.entropixColorTextSecondary,
+              marginLeft: bt.entropixSpacing2
+            },
+            children: "\u25BC"
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({ children, style, testID }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isOpen, close, getListboxProps } = useSelectContext();
+  const propGetterReturn = getListboxProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: close,
+      children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          style: {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(0,0,0,0.3)"
+          },
+          onPress: close,
+          children: /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => {
+              },
+              children: /* @__PURE__ */ jsx(
+                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 } = useTheme();
+  const { getOptionProps } = useSelectContext();
+  const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isSelected = propGetterReturn.accessibility.selected === true;
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(
+        Text,
+        {
+          style: [
+            {
+              fontSize: bt.entropixFontSizeSm,
+              fontWeight: isSelected ? "600" : "400",
+              color: t.entropixColorTextPrimary
+            },
+            textStyle
+          ],
+          children
+        }
+      ) : children
+    }
+  );
+}
+
+export { Select, SelectContent, SelectOption, SelectTrigger };
+//# sourceMappingURL=chunk-XSOLJOBG.js.map
+//# sourceMappingURL=chunk-XSOLJOBG.js.map