react-native-atomic-ui 1.0.2 → 1.0.4

package/dist/chunk-IJBHWAI6.mjs

@@ -0,0 +1,831 @@
+import {
+  useTheme
+} from "./chunk-56IADPYY.mjs";
+
+// src/components/layouts/Box.tsx
+import React from "react";
+import { View } from "react-native";
+function Box({
+  children,
+  flex,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  gap,
+  backgroundColor,
+  borderRadius,
+  width,
+  height,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const boxStyle = [
+    flex !== void 0 && { flex },
+    flexDirection && { flexDirection },
+    alignItems && { alignItems },
+    justifyContent && { justifyContent },
+    flexWrap && { flexWrap },
+    width !== void 0 && { width },
+    height !== void 0 && { height },
+    padding && { padding: theme.spacing[padding] },
+    paddingHorizontal && { paddingHorizontal: theme.spacing[paddingHorizontal] },
+    paddingVertical && { paddingVertical: theme.spacing[paddingVertical] },
+    margin && { margin: theme.spacing[margin] },
+    marginHorizontal && { marginHorizontal: theme.spacing[marginHorizontal] },
+    marginVertical && { marginVertical: theme.spacing[marginVertical] },
+    gap && { gap: theme.spacing[gap] },
+    backgroundColor && { backgroundColor },
+    borderRadius && { borderRadius: theme.borderRadius[borderRadius] },
+    style
+  ];
+  return /* @__PURE__ */ React.createElement(View, { style: boxStyle, testID }, children);
+}
+function Row({
+  children,
+  flex,
+  alignItems = "center",
+  justifyContent,
+  flexWrap,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  gap,
+  backgroundColor,
+  borderRadius,
+  width,
+  height,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const rowStyle = [
+    { flexDirection: "row" },
+    flex !== void 0 && { flex },
+    alignItems && { alignItems },
+    justifyContent && { justifyContent },
+    flexWrap && { flexWrap },
+    width !== void 0 && { width },
+    height !== void 0 && { height },
+    padding && { padding: theme.spacing[padding] },
+    paddingHorizontal && { paddingHorizontal: theme.spacing[paddingHorizontal] },
+    paddingVertical && { paddingVertical: theme.spacing[paddingVertical] },
+    margin && { margin: theme.spacing[margin] },
+    marginHorizontal && { marginHorizontal: theme.spacing[marginHorizontal] },
+    marginVertical && { marginVertical: theme.spacing[marginVertical] },
+    gap && { gap: theme.spacing[gap] },
+    backgroundColor && { backgroundColor },
+    borderRadius && { borderRadius: theme.borderRadius[borderRadius] },
+    style
+  ];
+  return /* @__PURE__ */ React.createElement(View, { style: rowStyle, testID }, children);
+}
+function Column({
+  children,
+  flex,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  gap,
+  backgroundColor,
+  borderRadius,
+  width,
+  height,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const columnStyle = [
+    { flexDirection: "column" },
+    flex !== void 0 && { flex },
+    alignItems && { alignItems },
+    justifyContent && { justifyContent },
+    flexWrap && { flexWrap },
+    width !== void 0 && { width },
+    height !== void 0 && { height },
+    padding && { padding: theme.spacing[padding] },
+    paddingHorizontal && { paddingHorizontal: theme.spacing[paddingHorizontal] },
+    paddingVertical && { paddingVertical: theme.spacing[paddingVertical] },
+    margin && { margin: theme.spacing[margin] },
+    marginHorizontal && { marginHorizontal: theme.spacing[marginHorizontal] },
+    marginVertical && { marginVertical: theme.spacing[marginVertical] },
+    gap && { gap: theme.spacing[gap] },
+    backgroundColor && { backgroundColor },
+    borderRadius && { borderRadius: theme.borderRadius[borderRadius] },
+    style
+  ];
+  return /* @__PURE__ */ React.createElement(View, { style: columnStyle, testID }, children);
+}
+
+// src/components/layouts/Collapsible.tsx
+import React2, { useState } from "react";
+import {
+  TouchableOpacity,
+  View as View2,
+  Text as RNText,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  StyleSheet
+} from "react-native";
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+function Collapsible({
+  title,
+  children,
+  initiallyExpanded = false,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const [expanded, setExpanded] = useState(initiallyExpanded);
+  const toggleExpanded = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ React2.createElement(
+    View2,
+    {
+      style: [
+        styles.wrapper,
+        {
+          borderColor: theme.colors.border,
+          borderRadius: theme.borderRadius.md
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ React2.createElement(
+      TouchableOpacity,
+      {
+        activeOpacity: 0.7,
+        onPress: toggleExpanded,
+        style: [
+          styles.header,
+          {
+            padding: theme.spacing.md,
+            backgroundColor: theme.colors.surface
+          }
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(RNText, { style: [theme.typography.body1, styles.headerText, { color: theme.colors.text }] }, title),
+      /* @__PURE__ */ React2.createElement(RNText, { style: [theme.typography.h3, { color: theme.colors.textSecondary }] }, expanded ? "\u2212" : "+")
+    ),
+    expanded && /* @__PURE__ */ React2.createElement(
+      View2,
+      {
+        style: [
+          styles.content,
+          {
+            padding: theme.spacing.md,
+            backgroundColor: theme.colors.background
+          }
+        ]
+      },
+      children
+    )
+  );
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  headerText: {
+    fontWeight: "600"
+  },
+  content: {}
+});
+
+// src/components/typography/Text.tsx
+import React3 from "react";
+import { Text as RNText2 } from "react-native";
+function Text({ children, variant = "body1", color, textAlign, style, testID }) {
+  const { theme } = useTheme();
+  const textStyle = [
+    theme.typography[variant],
+    { color: color || theme.colors.text },
+    textAlign && { textAlign },
+    style
+  ];
+  return /* @__PURE__ */ React3.createElement(RNText2, { style: textStyle, testID }, children);
+}
+function H1(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h1" });
+}
+function H2(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h2" });
+}
+function H3(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h3" });
+}
+function H4(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h4" });
+}
+function H5(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h5" });
+}
+function H6(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "h6" });
+}
+function Body1(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body1" });
+}
+function Body2(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body2" });
+}
+function Body3(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body3" });
+}
+function Body4(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body4" });
+}
+function Body5(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body5" });
+}
+function Body6(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "body6" });
+}
+function SubTitle1(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "subtitle1" });
+}
+function SubTitle2(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "subtitle2" });
+}
+function Caption(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "caption" });
+}
+function Overline(props) {
+  return /* @__PURE__ */ React3.createElement(Text, { ...props, variant: "overline" });
+}
+
+// src/components/inputs/Button.tsx
+import React4 from "react";
+import { TouchableOpacity as TouchableOpacity2, View as View3, StyleSheet as StyleSheet2, ActivityIndicator } from "react-native";
+function Button({
+  label,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  icon,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const getVariantStyle = () => {
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary
+        };
+      case "secondary":
+        return {
+          backgroundColor: theme.colors.secondary,
+          borderColor: theme.colors.secondary
+        };
+      case "danger":
+        return {
+          backgroundColor: theme.colors.error,
+          borderColor: theme.colors.error
+        };
+      case "ghost":
+        return {
+          backgroundColor: "transparent",
+          borderColor: theme.colors.primary,
+          borderWidth: 1
+        };
+      default:
+        return {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary
+        };
+    }
+  };
+  const getSizeStyle = () => {
+    switch (size) {
+      case "small":
+        return {
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.sm,
+          minHeight: 32
+        };
+      case "large":
+        return {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.md,
+          minHeight: 56
+        };
+      case "medium":
+      default:
+        return {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.md,
+          minHeight: 48
+        };
+    }
+  };
+  const buttonStyle = [
+    styles2.button,
+    {
+      ...getVariantStyle(),
+      ...getSizeStyle(),
+      borderRadius: theme.borderRadius.md,
+      opacity: disabled || loading ? 0.5 : 1
+    },
+    style
+  ];
+  const textColor = variant === "ghost" ? theme.colors.primary : theme.colors.white;
+  return /* @__PURE__ */ React4.createElement(
+    TouchableOpacity2,
+    {
+      style: buttonStyle,
+      onPress,
+      disabled: disabled || loading,
+      testID
+    },
+    /* @__PURE__ */ React4.createElement(View3, { style: styles2.content }, loading ? /* @__PURE__ */ React4.createElement(ActivityIndicator, { color: textColor, size: size === "small" ? "small" : "large" }) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, icon && /* @__PURE__ */ React4.createElement(View3, { style: styles2.icon }, icon), /* @__PURE__ */ React4.createElement(
+      Text,
+      {
+        variant: size === "small" ? "body3" : "body1",
+        color: textColor,
+        style: styles2.label
+      },
+      label
+    )))
+  );
+}
+var styles2 = StyleSheet2.create({
+  button: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row"
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    marginRight: 8
+  },
+  label: {
+    fontWeight: "600"
+  }
+});
+
+// src/components/inputs/Input.tsx
+import React5 from "react";
+import { TextInput, View as View4, Text as RNText3, StyleSheet as StyleSheet3 } from "react-native";
+function Input({
+  value,
+  onChangeText,
+  placeholder,
+  label,
+  error,
+  editable = true,
+  secureTextEntry = false,
+  keyboardType = "default",
+  multiline = false,
+  numberOfLines = 1,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React5.createElement(View4, { style: [styles3.container, style] }, label && /* @__PURE__ */ React5.createElement(
+    RNText3,
+    {
+      style: [
+        theme.typography.body2,
+        {
+          color: error ? theme.colors.error : theme.colors.textSecondary,
+          marginBottom: theme.spacing.xs
+        }
+      ]
+    },
+    label
+  ), /* @__PURE__ */ React5.createElement(
+    TextInput,
+    {
+      value,
+      onChangeText,
+      placeholder,
+      placeholderTextColor: theme.colors.textTertiary,
+      editable,
+      secureTextEntry,
+      keyboardType,
+      multiline,
+      numberOfLines: multiline ? numberOfLines : 1,
+      testID,
+      style: [
+        theme.typography.body1,
+        styles3.input,
+        {
+          borderColor: error ? theme.colors.error : theme.colors.border,
+          borderRadius: theme.borderRadius.sm,
+          padding: theme.spacing.md,
+          color: theme.colors.text,
+          backgroundColor: editable ? theme.colors.surface : theme.colors.disabled,
+          minHeight: multiline ? numberOfLines * 24 + theme.spacing.md * 2 : void 0
+        }
+      ]
+    }
+  ), error && /* @__PURE__ */ React5.createElement(
+    RNText3,
+    {
+      style: [
+        theme.typography.caption,
+        { color: theme.colors.error, marginTop: theme.spacing.xs }
+      ]
+    },
+    error
+  ));
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    width: "100%"
+  },
+  input: {
+    borderWidth: 1
+  }
+});
+
+// src/components/inputs/CheckBox.tsx
+import React6 from "react";
+import { TouchableOpacity as TouchableOpacity3, View as View5, Text as RNText4, StyleSheet as StyleSheet4 } from "react-native";
+function CheckBox({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React6.createElement(
+    TouchableOpacity3,
+    {
+      activeOpacity: 0.7,
+      onPress: () => !disabled && onValueChange(!value),
+      disabled,
+      style: [styles4.container, style],
+      testID
+    },
+    /* @__PURE__ */ React6.createElement(
+      View5,
+      {
+        style: [
+          styles4.checkbox,
+          {
+            borderColor: disabled ? theme.colors.disabled : value ? theme.colors.primary : theme.colors.border,
+            backgroundColor: disabled ? theme.colors.disabled : value ? theme.colors.primary : "transparent",
+            borderRadius: theme.borderRadius.xs
+          }
+        ]
+      },
+      value && /* @__PURE__ */ React6.createElement(RNText4, { style: [styles4.checkmark, { color: theme.colors.white }] }, "\u2713")
+    ),
+    label && /* @__PURE__ */ React6.createElement(
+      RNText4,
+      {
+        style: [
+          theme.typography.body1,
+          {
+            color: disabled ? theme.colors.textTertiary : theme.colors.text,
+            marginLeft: theme.spacing.sm
+          }
+        ]
+      },
+      label
+    )
+  );
+}
+var styles4 = StyleSheet4.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  checkbox: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    width: 24,
+    height: 24
+  },
+  checkmark: {
+    fontSize: 16,
+    fontWeight: "bold"
+  }
+});
+
+// src/components/inputs/RadioButton.tsx
+import React7 from "react";
+import { TouchableOpacity as TouchableOpacity4, View as View6, Text as RNText5, StyleSheet as StyleSheet5 } from "react-native";
+function RadioButton({
+  value,
+  selected,
+  onSelect,
+  label,
+  disabled = false,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const isSelected = value === selected;
+  return /* @__PURE__ */ React7.createElement(
+    TouchableOpacity4,
+    {
+      activeOpacity: 0.7,
+      onPress: () => !disabled && onSelect(value),
+      disabled,
+      style: [styles5.container, style],
+      testID
+    },
+    /* @__PURE__ */ React7.createElement(
+      View6,
+      {
+        style: [
+          styles5.radio,
+          {
+            borderColor: disabled ? theme.colors.disabled : isSelected ? theme.colors.primary : theme.colors.border
+          }
+        ]
+      },
+      isSelected && /* @__PURE__ */ React7.createElement(
+        View6,
+        {
+          style: [
+            styles5.radioInner,
+            {
+              backgroundColor: disabled ? theme.colors.disabled : theme.colors.primary
+            }
+          ]
+        }
+      )
+    ),
+    label && /* @__PURE__ */ React7.createElement(
+      RNText5,
+      {
+        style: [
+          theme.typography.body1,
+          {
+            color: disabled ? theme.colors.textTertiary : theme.colors.text,
+            marginLeft: theme.spacing.sm
+          }
+        ]
+      },
+      label
+    )
+  );
+}
+var styles5 = StyleSheet5.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  radio: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    width: 24,
+    height: 24,
+    borderRadius: 12
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6
+  }
+});
+
+// src/components/inputs/Switch.tsx
+import React8 from "react";
+import { Switch as RNSwitch } from "react-native";
+function Switch({ value, onValueChange, disabled = false, style, testID }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React8.createElement(
+    RNSwitch,
+    {
+      value,
+      onValueChange,
+      disabled,
+      trackColor: {
+        false: theme.colors.border,
+        true: theme.colors.primary
+      },
+      thumbColor: theme.colors.white,
+      ios_backgroundColor: theme.colors.border,
+      style,
+      testID
+    }
+  );
+}
+
+// src/components/display/ProgressBar.tsx
+import React9 from "react";
+import { View as View7, StyleSheet as StyleSheet6 } from "react-native";
+function ProgressBar({
+  progress,
+  height = 8,
+  color,
+  backgroundColor,
+  borderRadius = "full",
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  return /* @__PURE__ */ React9.createElement(
+    View7,
+    {
+      style: [
+        styles6.track,
+        {
+          height,
+          backgroundColor: backgroundColor || theme.colors.border,
+          borderRadius: theme.borderRadius[borderRadius]
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ React9.createElement(
+      View7,
+      {
+        style: [
+          styles6.fill,
+          {
+            width: `${clampedProgress * 100}%`,
+            backgroundColor: color || theme.colors.primary
+          }
+        ]
+      }
+    )
+  );
+}
+var styles6 = StyleSheet6.create({
+  track: {
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%"
+  }
+});
+
+// src/components/display/Badge.tsx
+import React10 from "react";
+import { View as View8, Text as RNText6, StyleSheet as StyleSheet7 } from "react-native";
+function Badge({
+  children,
+  variant = "primary",
+  size = "medium",
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const variantColors = {
+    primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
+    success: theme.colors.success,
+    error: theme.colors.error,
+    warning: theme.colors.warning,
+    info: theme.colors.info
+  };
+  const sizeStyles = {
+    small: {
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: theme.spacing.xs / 2,
+      fontSize: 10
+    },
+    medium: {
+      paddingHorizontal: theme.spacing.sm,
+      paddingVertical: theme.spacing.xs,
+      fontSize: 12
+    },
+    large: {
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      fontSize: 14
+    }
+  };
+  return /* @__PURE__ */ React10.createElement(
+    View8,
+    {
+      style: [
+        styles7.badge,
+        {
+          backgroundColor: variantColors[variant],
+          borderRadius: theme.borderRadius.full,
+          ...sizeStyles[size]
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ React10.createElement(
+      RNText6,
+      {
+        style: [
+          styles7.text,
+          {
+            color: theme.colors.white,
+            fontSize: sizeStyles[size].fontSize
+          }
+        ]
+      },
+      children
+    )
+  );
+}
+var styles7 = StyleSheet7.create({
+  badge: {
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontWeight: "600"
+  }
+});
+
+// src/components/display/Divider.tsx
+import React11 from "react";
+import { View as View9 } from "react-native";
+function Divider({
+  orientation = "horizontal",
+  thickness = 1,
+  color,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React11.createElement(
+    View9,
+    {
+      style: [
+        {
+          backgroundColor: color || theme.colors.border,
+          ...orientation === "horizontal" ? { height: thickness, width: "100%" } : { width: thickness, height: "100%" }
+        },
+        style
+      ],
+      testID
+    }
+  );
+}
+
+export {
+  Box,
+  Row,
+  Column,
+  Collapsible,
+  Text,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Body1,
+  Body2,
+  Body3,
+  Body4,
+  Body5,
+  Body6,
+  SubTitle1,
+  SubTitle2,
+  Caption,
+  Overline,
+  Button,
+  Input,
+  CheckBox,
+  RadioButton,
+  Switch,
+  ProgressBar,
+  Badge,
+  Divider
+};
+//# sourceMappingURL=chunk-IJBHWAI6.mjs.map