@entropix/react-native 1.0.0 → 1.0.1

package/dist/chunk-CXQNNEPC.js

@@ -0,0 +1,249 @@
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { View, Dimensions } from 'react-native';
+import { jsx } from 'react/jsx-runtime';
+import { useCallback, useState, useEffect } from 'react';
+
+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 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 };
+}
+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 { BREAKPOINTS, Container, Divider, Inline, Stack, useBreakpoint, useBreakpointValue, useScreenDimensions };
+//# sourceMappingURL=chunk-CXQNNEPC.js.map
+//# sourceMappingURL=chunk-CXQNNEPC.js.map

package/dist/chunk-EFRYMWJB.js

@@ -0,0 +1,86 @@
+import { mapAccessibilityToRN } from './chunk-73BDGPZT.js';
+import { useTheme } from './chunk-ZYOTKLBG.js';
+import { useCallback, useRef, useEffect } from 'react';
+import { Animated, Pressable } from 'react-native';
+import { useToggle } from '@entropix/core';
+import { jsx } from 'react/jsx-runtime';
+
+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 }]
+          }
+        }
+      )
+    }
+  );
+}
+
+export { Switch };
+//# sourceMappingURL=chunk-EFRYMWJB.js.map
+//# sourceMappingURL=chunk-EFRYMWJB.js.map

package/dist/chunk-FQUZIDVS.cjs

@@ -0,0 +1,174 @@
+'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');
+
+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 } = chunkBOUIB4OY_cjs.useTheme();
+  const {
+    value: inputValue,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    setValue,
+    getInputProps
+  } = core.useInput({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    type,
+    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,
+        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__ */ 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.Input = Input;
+//# sourceMappingURL=chunk-FQUZIDVS.cjs.map
+//# sourceMappingURL=chunk-FQUZIDVS.cjs.map