@edge-zuq/core 1.2.7

package/src/presentation/components/atoms/UICheckbox.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { UIIcon } from './UIIcon';
+import { theme } from '../../../theme';
+
+type Props = {
+  color?: string;
+  size?: number;
+  selected?: boolean;
+  selectedColor?: string;
+  iconSize?: number;
+};
+
+export const UICheckbox = React.memo(
+  ({ color, size, selected, selectedColor, iconSize }: Props) => {
+    return (
+      <View
+        style={[
+          styles.checkbox,
+          Boolean(size) && {
+            width: size,
+            height: size,
+          },
+          Boolean(color) && { borderColor: color },
+          selected &&
+            (selectedColor
+              ? { backgroundColor: selectedColor }
+              : styles.selected),
+        ]}
+      >
+        {selected && (
+          <UIIcon
+            name="check-alt"
+            size={iconSize}
+            color={theme.color.neutral.light['10']}
+          />
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderColor: theme.color.neutral.light['50'],
+    borderWidth: 2,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  selected: {
+    backgroundColor: theme.color.brand.violet['500'],
+    borderColor: theme.color.brand.violet['500'],
+  },
+});

package/src/presentation/components/atoms/UIDot.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { getThemeColor } from '../../../theme';
+import type { ThemeColor } from '../../../theme';
+
+type Props = React.ComponentProps<typeof View> & {
+  color?: ThemeColor;
+  size?: number;
+};
+
+export const UIDot = React.memo(
+  ({ style, size, color: themeColor, ...props }: Props) => {
+    const color = getThemeColor(themeColor);
+
+    return (
+      <View
+        style={[
+          styles.dot,
+          Boolean(size) && {
+            width: size,
+            height: size,
+            borderRadius: size! / 2,
+          },
+          color && { backgroundColor: color },
+          style,
+        ]}
+        {...props}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#fff',
+  },
+});