react-native-atomic-ui 1.0.2 → 1.0.4

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Badge: () => Badge,
   Body1: () => Body1,
   Body2: () => Body2,
   Body3: () => Body3,
@@ -39,17 +40,24 @@ __export(index_exports, {
   Box: () => Box,
   Button: () => Button,
   Caption: () => Caption,
+  CheckBox: () => CheckBox,
+  Collapsible: () => Collapsible,
   Column: () => Column,
+  Divider: () => Divider,
   H1: () => H1,
   H2: () => H2,
   H3: () => H3,
   H4: () => H4,
   H5: () => H5,
   H6: () => H6,
+  Input: () => Input,
   Overline: () => Overline,
+  ProgressBar: () => ProgressBar,
+  RadioButton: () => RadioButton,
   Row: () => Row,
   SubTitle1: () => SubTitle1,
   SubTitle2: () => SubTitle2,
+  Switch: () => Switch,
   Text: () => Text,
   ThemeProvider: () => ThemeProvider,
   darkTheme: () => darkTheme,
@@ -192,10 +200,7 @@ var darkTheme = {
 
 // src/theme/index.tsx
 var ThemeContext = (0, import_react.createContext)(null);
-function ThemeProvider({
-  children,
-  defaultTheme = "system"
-}) {
+function ThemeProvider({ children, defaultTheme = "system" }) {
   const systemColorScheme = (0, import_react_native.useColorScheme)();
   const isSystemDark = systemColorScheme === "dark";
   const [isDark, setIsDark] = (0, import_react.useState)(() => {
@@ -233,6 +238,11 @@ var import_react2 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 function Box({
   children,
+  flex,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  flexWrap,
   padding,
   paddingHorizontal,
   paddingVertical,
@@ -242,11 +252,20 @@ function Box({
   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] },
@@ -262,6 +281,10 @@ function Box({
 }
 function Row({
   children,
+  flex,
+  alignItems = "center",
+  justifyContent,
+  flexWrap,
   padding,
   paddingHorizontal,
   paddingVertical,
@@ -271,12 +294,20 @@ function Row({
   gap,
   backgroundColor,
   borderRadius,
+  width,
+  height,
   style,
   testID
 }) {
   const { theme } = useTheme();
   const rowStyle = [
-    { flexDirection: "row", alignItems: "center" },
+    { 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] },
@@ -292,6 +323,10 @@ function Row({
 }
 function Column({
   children,
+  flex,
+  alignItems,
+  justifyContent,
+  flexWrap,
   padding,
   paddingHorizontal,
   paddingVertical,
@@ -301,12 +336,20 @@ function Column({
   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] },
@@ -321,17 +364,89 @@ function Column({
   return /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: columnStyle, testID }, children);
 }
 
-// src/components/typography/Text.tsx
+// src/components/layouts/Collapsible.tsx
 var import_react3 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
-function Text({
+if (import_react_native3.Platform.OS === "android" && import_react_native3.UIManager.setLayoutAnimationEnabledExperimental) {
+  import_react_native3.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+function Collapsible({
+  title,
   children,
-  variant = "body1",
-  color,
-  textAlign,
+  initiallyExpanded = false,
   style,
   testID
 }) {
+  const { theme } = useTheme();
+  const [expanded, setExpanded] = (0, import_react3.useState)(initiallyExpanded);
+  const toggleExpanded = () => {
+    import_react_native3.LayoutAnimation.configureNext(import_react_native3.LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_react_native3.View,
+    {
+      style: [
+        styles.wrapper,
+        {
+          borderColor: theme.colors.border,
+          borderRadius: theme.borderRadius.md
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      import_react_native3.TouchableOpacity,
+      {
+        activeOpacity: 0.7,
+        onPress: toggleExpanded,
+        style: [
+          styles.header,
+          {
+            padding: theme.spacing.md,
+            backgroundColor: theme.colors.surface
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react3.default.createElement(import_react_native3.Text, { style: [theme.typography.body1, styles.headerText, { color: theme.colors.text }] }, title),
+      /* @__PURE__ */ import_react3.default.createElement(import_react_native3.Text, { style: [theme.typography.h3, { color: theme.colors.textSecondary }] }, expanded ? "\u2212" : "+")
+    ),
+    expanded && /* @__PURE__ */ import_react3.default.createElement(
+      import_react_native3.View,
+      {
+        style: [
+          styles.content,
+          {
+            padding: theme.spacing.md,
+            backgroundColor: theme.colors.background
+          }
+        ]
+      },
+      children
+    )
+  );
+}
+var styles = import_react_native3.StyleSheet.create({
+  wrapper: {
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  headerText: {
+    fontWeight: "600"
+  },
+  content: {}
+});
+
+// src/components/typography/Text.tsx
+var import_react4 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+function Text({ children, variant = "body1", color, textAlign, style, testID }) {
   const { theme } = useTheme();
   const textStyle = [
     theme.typography[variant],
@@ -339,60 +454,60 @@ function Text({
     textAlign && { textAlign },
     style
   ];
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_native3.Text, { style: textStyle, testID }, children);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_native4.Text, { style: textStyle, testID }, children);
 }
 function H1(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h1" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h1" });
 }
 function H2(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h2" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h2" });
 }
 function H3(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h3" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h3" });
 }
 function H4(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h4" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h4" });
 }
 function H5(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h5" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h5" });
 }
 function H6(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "h6" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "h6" });
 }
 function Body1(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body1" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body1" });
 }
 function Body2(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body2" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body2" });
 }
 function Body3(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body3" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body3" });
 }
 function Body4(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body4" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body4" });
 }
 function Body5(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body5" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body5" });
 }
 function Body6(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "body6" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "body6" });
 }
 function SubTitle1(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "subtitle1" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "subtitle1" });
 }
 function SubTitle2(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "subtitle2" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "subtitle2" });
 }
 function Caption(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "caption" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "caption" });
 }
 function Overline(props) {
-  return /* @__PURE__ */ import_react3.default.createElement(Text, { ...props, variant: "overline" });
+  return /* @__PURE__ */ import_react4.default.createElement(Text, { ...props, variant: "overline" });
 }
 
 // src/components/inputs/Button.tsx
-var import_react4 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react5 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
 function Button({
   label,
   onPress,
@@ -459,7 +574,7 @@ function Button({
     }
   };
   const buttonStyle = [
-    styles.button,
+    styles2.button,
     {
       ...getVariantStyle(),
       ...getSizeStyle(),
@@ -469,32 +584,26 @@ function Button({
     style
   ];
   const textColor = variant === "ghost" ? theme.colors.primary : theme.colors.white;
-  return /* @__PURE__ */ import_react4.default.createElement(
-    import_react_native4.TouchableOpacity,
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native5.TouchableOpacity,
     {
       style: buttonStyle,
       onPress,
       disabled: disabled || loading,
       testID
     },
-    /* @__PURE__ */ import_react4.default.createElement(import_react_native4.View, { style: styles.content }, loading ? /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native4.ActivityIndicator,
-      {
-        color: textColor,
-        size: size === "small" ? "small" : "large"
-      }
-    ) : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, icon && /* @__PURE__ */ import_react4.default.createElement(import_react_native4.View, { style: styles.icon }, icon), /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles2.content }, loading ? /* @__PURE__ */ import_react5.default.createElement(import_react_native5.ActivityIndicator, { color: textColor, size: size === "small" ? "small" : "large" }) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles2.icon }, icon), /* @__PURE__ */ import_react5.default.createElement(
       Text,
       {
         variant: size === "small" ? "body3" : "body1",
         color: textColor,
-        style: styles.label
+        style: styles2.label
       },
       label
     )))
   );
 }
-var styles = import_react_native4.StyleSheet.create({
+var styles2 = import_react_native5.StyleSheet.create({
   button: {
     justifyContent: "center",
     alignItems: "center",
@@ -512,4 +621,402 @@ var styles = import_react_native4.StyleSheet.create({
     fontWeight: "600"
   }
 });
+
+// src/components/inputs/Input.tsx
+var import_react6 = __toESM(require("react"));
+var import_react_native6 = require("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__ */ import_react6.default.createElement(import_react_native6.View, { style: [styles3.container, style] }, label && /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native6.Text,
+    {
+      style: [
+        theme.typography.body2,
+        {
+          color: error ? theme.colors.error : theme.colors.textSecondary,
+          marginBottom: theme.spacing.xs
+        }
+      ]
+    },
+    label
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native6.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__ */ import_react6.default.createElement(
+    import_react_native6.Text,
+    {
+      style: [
+        theme.typography.caption,
+        { color: theme.colors.error, marginTop: theme.spacing.xs }
+      ]
+    },
+    error
+  ));
+}
+var styles3 = import_react_native6.StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  input: {
+    borderWidth: 1
+  }
+});
+
+// src/components/inputs/CheckBox.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
+function CheckBox({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native7.TouchableOpacity,
+    {
+      activeOpacity: 0.7,
+      onPress: () => !disabled && onValueChange(!value),
+      disabled,
+      style: [styles4.container, style],
+      testID
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native7.View,
+      {
+        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__ */ import_react7.default.createElement(import_react_native7.Text, { style: [styles4.checkmark, { color: theme.colors.white }] }, "\u2713")
+    ),
+    label && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native7.Text,
+      {
+        style: [
+          theme.typography.body1,
+          {
+            color: disabled ? theme.colors.textTertiary : theme.colors.text,
+            marginLeft: theme.spacing.sm
+          }
+        ]
+      },
+      label
+    )
+  );
+}
+var styles4 = import_react_native7.StyleSheet.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
+var import_react8 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
+function RadioButton({
+  value,
+  selected,
+  onSelect,
+  label,
+  disabled = false,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  const isSelected = value === selected;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native8.TouchableOpacity,
+    {
+      activeOpacity: 0.7,
+      onPress: () => !disabled && onSelect(value),
+      disabled,
+      style: [styles5.container, style],
+      testID
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native8.View,
+      {
+        style: [
+          styles5.radio,
+          {
+            borderColor: disabled ? theme.colors.disabled : isSelected ? theme.colors.primary : theme.colors.border
+          }
+        ]
+      },
+      isSelected && /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native8.View,
+        {
+          style: [
+            styles5.radioInner,
+            {
+              backgroundColor: disabled ? theme.colors.disabled : theme.colors.primary
+            }
+          ]
+        }
+      )
+    ),
+    label && /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native8.Text,
+      {
+        style: [
+          theme.typography.body1,
+          {
+            color: disabled ? theme.colors.textTertiary : theme.colors.text,
+            marginLeft: theme.spacing.sm
+          }
+        ]
+      },
+      label
+    )
+  );
+}
+var styles5 = import_react_native8.StyleSheet.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
+var import_react9 = __toESM(require("react"));
+var import_react_native9 = require("react-native");
+function Switch({ value, onValueChange, disabled = false, style, testID }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native9.Switch,
+    {
+      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
+var import_react10 = __toESM(require("react"));
+var import_react_native10 = require("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__ */ import_react10.default.createElement(
+    import_react_native10.View,
+    {
+      style: [
+        styles6.track,
+        {
+          height,
+          backgroundColor: backgroundColor || theme.colors.border,
+          borderRadius: theme.borderRadius[borderRadius]
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native10.View,
+      {
+        style: [
+          styles6.fill,
+          {
+            width: `${clampedProgress * 100}%`,
+            backgroundColor: color || theme.colors.primary
+          }
+        ]
+      }
+    )
+  );
+}
+var styles6 = import_react_native10.StyleSheet.create({
+  track: {
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%"
+  }
+});
+
+// src/components/display/Badge.tsx
+var import_react11 = __toESM(require("react"));
+var import_react_native11 = require("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__ */ import_react11.default.createElement(
+    import_react_native11.View,
+    {
+      style: [
+        styles7.badge,
+        {
+          backgroundColor: variantColors[variant],
+          borderRadius: theme.borderRadius.full,
+          ...sizeStyles[size]
+        },
+        style
+      ],
+      testID
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native11.Text,
+      {
+        style: [
+          styles7.text,
+          {
+            color: theme.colors.white,
+            fontSize: sizeStyles[size].fontSize
+          }
+        ]
+      },
+      children
+    )
+  );
+}
+var styles7 = import_react_native11.StyleSheet.create({
+  badge: {
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontWeight: "600"
+  }
+});
+
+// src/components/display/Divider.tsx
+var import_react12 = __toESM(require("react"));
+var import_react_native12 = require("react-native");
+function Divider({
+  orientation = "horizontal",
+  thickness = 1,
+  color,
+  style,
+  testID
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ import_react12.default.createElement(
+    import_react_native12.View,
+    {
+      style: [
+        {
+          backgroundColor: color || theme.colors.border,
+          ...orientation === "horizontal" ? { height: thickness, width: "100%" } : { width: thickness, height: "100%" }
+        },
+        style
+      ],
+      testID
+    }
+  );
+}
 //# sourceMappingURL=index.js.map