@entropix/react-native 0.1.0

package/dist/index.js

@@ -0,0 +1,1212 @@
+import { createContext, useMemo, useContext, useCallback, useRef, useEffect, useState } from 'react';
+import { tokens } from '@entropix/tokens/native';
+import { tokens as tokens$1 } from '@entropix/tokens/native/light';
+import { tokens as tokens$2 } from '@entropix/tokens/native/dark';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Pressable, Text, Animated, Modal, View, StyleSheet, Dimensions } from 'react-native';
+import { useButton, useToggle, useDialog, useTabs, useAccordion, useMenu } from '@entropix/core';
+
+// src/theme/theme-context.tsx
+var ThemeContext = createContext({
+  mode: "light",
+  tokens: tokens$1,
+  baseTokens: tokens
+});
+function EntropixProvider({
+  mode = "light",
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      mode,
+      tokens: mode === "dark" ? tokens$2 : tokens$1,
+      baseTokens: tokens
+    }),
+    [mode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// 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;
+}
+function Button({
+  onPress,
+  disabled,
+  loading,
+  variant = "primary",
+  size = "md",
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isDisabled, isLoading, getButtonProps } = useButton({
+    disabled,
+    loading,
+    onPress,
+    elementType: "div"
+  });
+  const propGetterReturn = getButtonProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const handlePress = 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__ */ jsx(
+    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__ */ jsx(
+        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;
+  }
+}
+function Toggle(props) {
+  return /* @__PURE__ */ jsx(ToggleInner, { ...props, role: "checkbox" });
+}
+function ToggleInner({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  label,
+  role = "checkbox",
+  style,
+  textStyle,
+  children,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isDisabled, getToggleProps } = useToggle({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    role
+  });
+  const propGetterReturn = getToggleProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isChecked = propGetterReturn.accessibility.checked === true;
+  if (label) {
+    rnAccessibility.accessibilityLabel = label;
+  }
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : handlePress,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingVertical: bt.entropixSpacing2,
+          paddingHorizontal: bt.entropixSpacing3,
+          borderWidth: 1,
+          borderColor: isChecked ? "transparent" : t.entropixColorBorderDefault,
+          borderRadius: bt.entropixRadiusMd,
+          backgroundColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorBgPrimary
+        },
+        isDisabled && { opacity: 0.5 },
+        style
+      ],
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            {
+              fontSize: bt.entropixFontSizeSm,
+              fontWeight: "500",
+              color: isChecked ? t.entropixColorTextInverse : t.entropixColorTextPrimary
+            },
+            textStyle
+          ],
+          children
+        }
+      ) : children != null ? children : /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: bt.entropixFontSizeSm,
+            fontWeight: "500",
+            color: isChecked ? t.entropixColorTextInverse : t.entropixColorTextPrimary
+          },
+          children: isChecked ? "On" : "Off"
+        }
+      )
+    }
+  );
+}
+var TRACK_WIDTH = 44;
+var TRACK_HEIGHT = 24;
+var TRACK_PADDING = 2;
+var THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING * 2;
+var THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - THUMB_SIZE;
+function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  label,
+  style,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isDisabled, getToggleProps } = useToggle({
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    role: "switch"
+  });
+  const propGetterReturn = getToggleProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const isChecked = propGetterReturn.accessibility.checked === true;
+  if (label) {
+    rnAccessibility.accessibilityLabel = label;
+  }
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  const thumbAnim = useRef(
+    new Animated.Value(defaultChecked || checked ? THUMB_TRAVEL : 0)
+  ).current;
+  useEffect(() => {
+    Animated.timing(thumbAnim, {
+      toValue: isChecked ? THUMB_TRAVEL : 0,
+      duration: 150,
+      useNativeDriver: false
+    }).start();
+  }, [isChecked, thumbAnim]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rnAccessibility,
+      ...rest,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : handlePress,
+      style: [
+        {
+          width: TRACK_WIDTH,
+          height: TRACK_HEIGHT,
+          borderRadius: bt.entropixRadiusFull,
+          backgroundColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorGray300,
+          padding: TRACK_PADDING,
+          justifyContent: "center"
+        },
+        isDisabled && { opacity: 0.5 },
+        style
+      ],
+      children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: {
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            borderRadius: bt.entropixRadiusFull,
+            backgroundColor: t.entropixColorWhite,
+            transform: [{ translateX: thumbAnim }]
+          }
+        }
+      )
+    }
+  );
+}
+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
+      ]
+    }
+  );
+}
+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
+    }
+  );
+}
+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, style, ...options }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const accordion = useAccordion(options);
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: accordion, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          borderWidth: 1,
+          borderColor: t.entropixColorBorderDefault,
+          borderRadius: bt.entropixRadiusLg,
+          overflow: "hidden"
+        },
+        style
+      ],
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  value,
+  isLast = false,
+  children,
+  style
+}) {
+  const { tokens: t } = useTheme();
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          borderBottomWidth: isLast ? 0 : 1,
+          borderBottomColor: t.entropixColorBorderDefault
+        },
+        style
+      ],
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  children,
+  style,
+  textStyle,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const itemKey = useAccordionItemContext();
+  const { getItemTriggerProps, isExpanded } = useAccordionContext();
+  const propGetterReturn = getItemTriggerProps(itemKey);
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  const expanded = isExpanded(itemKey);
+  const handlePress = useCallback(() => {
+    propGetterReturn.onAction?.();
+  }, [propGetterReturn.onAction]);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          Text,
+          {
+            style: [
+              {
+                fontSize: bt.entropixFontSizeSm,
+                fontWeight: "500",
+                color: t.entropixColorTextPrimary,
+                flex: 1
+              },
+              textStyle
+            ],
+            children
+          }
+        ) : children,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 12,
+              color: t.entropixColorTextSecondary,
+              marginLeft: bt.entropixSpacing2
+            },
+            children: expanded ? "\u2212" : "+"
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionPanel({ children, style }) {
+  const { baseTokens: bt } = useTheme();
+  const itemKey = useAccordionItemContext();
+  const { getItemPanelProps, isExpanded } = useAccordionContext();
+  const propGetterReturn = getItemPanelProps(itemKey);
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (!isExpanded(itemKey)) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...rnAccessibility,
+      style: [
+        {
+          paddingHorizontal: bt.entropixSpacing4,
+          paddingBottom: bt.entropixSpacing4
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+var MenuContext = createContext(null);
+function useMenuContext() {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error(
+      "Menu compound components must be used within a <Menu> provider."
+    );
+  }
+  return context;
+}
+function Menu({ children, ...options }) {
+  const menu = useMenu(options);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: menu, children });
+}
+function MenuTrigger({ children, style, ...rest }) {
+  const { getTriggerProps } = useMenuContext();
+  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 MenuContent({ children, style, testID }) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { isOpen, getMenuProps } = useMenuContext();
+  const propGetterReturn = getMenuProps();
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...rnAccessibility,
+      testID,
+      style: [
+        {
+          minWidth: 160,
+          padding: bt.entropixSpacing1,
+          backgroundColor: t.entropixColorBgPrimary,
+          borderWidth: 1,
+          borderColor: t.entropixColorBorderDefault,
+          borderRadius: bt.entropixRadiusMd,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          elevation: 4
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function wrapStringChildren(children, style) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsx(Text, { style, children });
+  }
+  return children;
+}
+function MenuItem({
+  index,
+  onSelect,
+  disabled,
+  children,
+  style,
+  textStyle,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const { getItemProps } = useMenuContext();
+  const propGetterReturn = getItemProps(index, { onSelect, disabled });
+  const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
+  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,
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ],
+      children: wrapStringChildren(children, {
+        fontSize: bt.entropixFontSizeSm,
+        color: t.entropixColorTextPrimary,
+        ...textStyle
+      })
+    }
+  );
+}
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "2xl"];
+function useBreakpoint() {
+  const getBreakpoint = useCallback(() => {
+    const { width } = Dimensions.get("window");
+    if (width >= BREAKPOINTS["2xl"]) return "2xl";
+    if (width >= BREAKPOINTS.xl) return "xl";
+    if (width >= BREAKPOINTS.lg) return "lg";
+    if (width >= BREAKPOINTS.md) return "md";
+    if (width >= BREAKPOINTS.sm) return "sm";
+    return "base";
+  }, []);
+  const [breakpoint, setBreakpoint] = useState(getBreakpoint);
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener("change", ({ window }) => {
+      const width = window.width;
+      let next = "base";
+      if (width >= BREAKPOINTS["2xl"]) next = "2xl";
+      else if (width >= BREAKPOINTS.xl) next = "xl";
+      else if (width >= BREAKPOINTS.lg) next = "lg";
+      else if (width >= BREAKPOINTS.md) next = "md";
+      else if (width >= BREAKPOINTS.sm) next = "sm";
+      setBreakpoint((prev) => prev !== next ? next : prev);
+    });
+    return () => subscription.remove();
+  }, []);
+  return breakpoint;
+}
+function useBreakpointValue(breakpoint) {
+  const current = useBreakpoint();
+  const currentIndex = BREAKPOINT_ORDER.indexOf(current);
+  const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+  return currentIndex >= targetIndex;
+}
+function useScreenDimensions() {
+  const [dimensions, setDimensions] = useState(() => Dimensions.get("window"));
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener("change", ({ window }) => {
+      setDimensions(window);
+    });
+    return () => subscription.remove();
+  }, []);
+  return { width: dimensions.width, height: dimensions.height };
+}
+function Stack({
+  gap,
+  align,
+  fullWidth,
+  style,
+  children,
+  ...rest
+}) {
+  const { baseTokens: bt } = useTheme();
+  const gapValue = getGapValue(gap, bt);
+  const alignMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        { flexDirection: "column" },
+        gapValue !== void 0 && { gap: gapValue },
+        gapValue === void 0 && { gap: bt.entropixSpaceLayoutStack },
+        align && { alignItems: alignMap[align] },
+        fullWidth && { width: "100%" },
+        style
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+function getGapValue(gap, bt) {
+  if (!gap) return void 0;
+  switch (gap) {
+    case "none":
+      return 0;
+    case "xs":
+      return bt.entropixSpacing1;
+    case "sm":
+      return bt.entropixSpacing2;
+    case "md":
+      return bt.entropixSpacing4;
+    case "lg":
+      return bt.entropixSpacing6;
+    case "xl":
+      return bt.entropixSpacing8;
+    case "2xl":
+      return bt.entropixSpacing12;
+  }
+}
+function Inline({
+  gap,
+  align,
+  justify,
+  wrap,
+  style,
+  children,
+  ...rest
+}) {
+  const { baseTokens: bt } = useTheme();
+  const gapValue = getGapValue2(gap, bt);
+  const alignMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch",
+    baseline: "baseline"
+  };
+  const justifyMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between",
+    around: "space-around"
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        gapValue !== void 0 && { gap: gapValue },
+        gapValue === void 0 && { gap: bt.entropixSpaceLayoutInline },
+        align && { alignItems: alignMap[align] },
+        justify && { justifyContent: justifyMap[justify] },
+        wrap && { flexWrap: "wrap" },
+        style
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+function getGapValue2(gap, bt) {
+  if (!gap) return void 0;
+  switch (gap) {
+    case "none":
+      return 0;
+    case "xs":
+      return bt.entropixSpacing1;
+    case "sm":
+      return bt.entropixSpacing2;
+    case "md":
+      return bt.entropixSpacing4;
+    case "lg":
+      return bt.entropixSpacing6;
+    case "xl":
+      return bt.entropixSpacing8;
+    case "2xl":
+      return bt.entropixSpacing12;
+  }
+}
+var maxWidthMap = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  full: void 0
+};
+function Container({
+  maxWidth = "lg",
+  center,
+  style,
+  children,
+  ...rest
+}) {
+  const { baseTokens: bt } = useTheme();
+  const breakpoint = useBreakpoint();
+  const maxW = maxWidthMap[maxWidth];
+  let pageMargin = bt.entropixSpaceLayoutPageMargin;
+  if (breakpoint === "lg" || breakpoint === "xl" || breakpoint === "2xl") {
+    pageMargin = bt.entropixSpaceLayoutPageMarginLg;
+  } else if (breakpoint === "md") {
+    pageMargin = bt.entropixSpaceLayoutPageMarginMd;
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          width: "100%",
+          paddingHorizontal: pageMargin
+        },
+        maxW !== void 0 && { maxWidth: maxW, alignSelf: "center" },
+        center && { alignItems: "center" },
+        style
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+function Divider({
+  orientation = "horizontal",
+  spacing,
+  style,
+  ...rest
+}) {
+  const { tokens: t, baseTokens: bt } = useTheme();
+  const spacingMap = {
+    sm: bt.entropixSpacing2,
+    md: bt.entropixSpacing4,
+    lg: bt.entropixSpacing6
+  };
+  const spacingValue = spacing ? spacingMap[spacing] : 0;
+  const isVertical = orientation === "vertical";
+  const dividerStyle = isVertical ? {
+    width: 1,
+    alignSelf: "stretch",
+    backgroundColor: t.entropixColorBorderDefault,
+    marginHorizontal: spacingValue
+  } : {
+    height: 1,
+    width: "100%",
+    backgroundColor: t.entropixColorBorderDefault,
+    marginVertical: spacingValue
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: isVertical ? "none" : void 0,
+      style: [dividerStyle, style],
+      ...rest
+    }
+  );
+}
+
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, BREAKPOINTS, Button, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, Divider, EntropixProvider, Inline, Menu, MenuContent, MenuItem, MenuTrigger, Stack, Switch, Tab, TabList, TabPanel, Tabs, Toggle, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map