@herca/rn-kit 0.1.60 → 0.1.61

package/lib/typescript/src/styles/spacing.d.ts

@@ -0,0 +1,160 @@
+export declare const spacing: {
+    p: {
+        0: {
+            padding: number;
+        };
+        8: {
+            padding: number;
+        };
+        12: {
+            padding: number;
+        };
+    };
+    px: {
+        0: {
+            paddingHorizontal: number;
+        };
+        4: {
+            paddingHorizontal: number;
+        };
+        8: {
+            paddingHorizontal: number;
+        };
+        12: {
+            paddingHorizontal: number;
+        };
+        24: {
+            paddingHorizontal: number;
+        };
+    };
+    py: {
+        0: {
+            paddingVertical: number;
+        };
+        4: {
+            paddingVertical: number;
+        };
+        8: {
+            paddingVertical: number;
+        };
+        10: {
+            paddingVertical: number;
+        };
+        12: {
+            paddingVertical: number;
+        };
+        36: {
+            paddingVertical: number;
+        };
+    };
+    pt: {
+        10: {
+            paddingTop: number;
+        };
+        12: {
+            paddingTop: number;
+        };
+        14: {
+            paddingTop: number;
+        };
+    };
+    pb: {
+        0: {
+            paddingBottom: number;
+        };
+        8: {
+            paddingBottom: number;
+        };
+        12: {
+            paddingBottom: number;
+        };
+        14: {
+            paddingBottom: number;
+        };
+        24: {
+            paddingBottom: number;
+        };
+        32: {
+            paddingBottom: number;
+        };
+        46: {
+            paddingBottom: number;
+        };
+        215: {
+            paddingBottom: number;
+        };
+        262: {
+            paddingBottom: number;
+        };
+    };
+    pr: {
+        25: {
+            paddingRight: number;
+        };
+    };
+    mt: {
+        12: {
+            marginTop: number;
+        };
+        4: {
+            marginTop: number;
+        };
+    };
+    mb: {
+        10: {
+            marginBottom: number;
+        };
+        12: {
+            marginBottom: number;
+        };
+        20: {
+            marginBottom: number;
+        };
+        8: {
+            marginBottom: number;
+        };
+        4: {
+            marginBottom: number;
+        };
+    };
+    mr: {
+        8: {
+            marginRight: number;
+        };
+        16: {
+            marginRight: number;
+        };
+        22: {
+            marginRight: number;
+        };
+    };
+    my: {
+        12: {
+            marginVertical: number;
+        };
+    };
+    gap: {
+        16: {
+            gap: number;
+        };
+        12: {
+            gap: number;
+        };
+        10: {
+            gap: number;
+        };
+        8: {
+            gap: number;
+        };
+        6: {
+            gap: number;
+        };
+        4: {
+            gap: number;
+        };
+        2: {
+            gap: number;
+        };
+    };
+};
+//# sourceMappingURL=spacing.d.ts.map

package/lib/typescript/src/styles/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../src/styles/spacing.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEnB,CAAC"}

package/lib/typescript/src/styles/theme.d.ts

@@ -0,0 +1,43 @@
+export declare const theme: {
+    chipFiltering: {
+        chipsSelectWrapper: {
+            flex: number;
+        };
+        chipFilterContainer: {
+            paddingLeft: number;
+            gap: number;
+        };
+        chipsWrapper: {
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        chipFilterSelectWrapper: {
+            borderRightWidth: number;
+            paddingRight: number;
+            borderColor: string;
+        };
+    };
+    loadData: {
+        loadMoreLoadingWrapper: {
+            alignItems: "center";
+            paddingVertical: number;
+        };
+    };
+    ticketCard: {
+        ticketInfoWraper: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        ticketFooter: {
+            marginTop: number;
+        };
+    };
+    btn: {
+        iconBtn: {
+            padding: number;
+            borderRadius: number;
+        };
+    };
+};
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/styles/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheet/BottomSheet.tsx

@@ -74,8 +74,10 @@ export default function BottomSheet({
         duration: 300,
         useNativeDriver: false,
       }).start(() => {
-        setIsVisible(false);
-        onClose && onClose(false);
+        requestAnimationFrame(() => {
+          setIsVisible(false);
+          onClose?.(false);
+        });
       });
     }
   }, [closable, translateY, onClose]);
@@ -193,8 +195,8 @@ export default function BottomSheet({
             {footer && (
               <SafeAreaView
                 onLayout={(event) => {
-                  const { height } = event.nativeEvent.layout;
-                  setHeightFooter(height);
+                  const { height: layoutHeight } = event.nativeEvent.layout;
+                  setHeightFooter(layoutHeight);
                 }}
                 style={styles.footer}
               >

package/src/Input/InputSelect.tsx

@@ -1,5 +1,185 @@
-import { View } from 'react-native';
+import {
+  Badge,
+  Color,
+  Icon,
+  Select,
+  Typography,
+  type ChipOptionProps,
+  type IconNameProps,
+} from '@herca/rn-kit';
+import { useState, useEffect } from 'react';
+import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { spacing } from '../styles/spacing';
+import { border } from '../styles/border';
+import { layouting } from '../styles/layouting';
+import type { Variant } from '../Badge/type';
 
-export default function InputSelect() {
-  return <View></View>;
+type SelectProps = React.ComponentProps<typeof Select>;
+type SelectPropsWithoutData = Omit<SelectProps, 'data'>;
+
+interface Props extends React.ComponentProps<typeof Pressable> {
+  label: string;
+  placeholder?: string;
+  options?: ChipOptionProps[];
+  selectProps?: SelectPropsWithoutData;
+  value?: string;
+  onSelectClick?: () => void;
+  onSelectClose?: () => void;
+  icon?: IconNameProps;
+  iconColor?: string;
+  hasError?: boolean;
+  hint?: string;
+  onClear?: () => void;
+  subtitle?: string;
+  badge?: {
+    value: string;
+    color: Variant;
+  };
+  useModal?: boolean;
+}
+
+export default function InputSelect({
+  label,
+  placeholder = 'Select here...',
+  selectProps,
+  options,
+  value,
+  onSelectClick,
+  onSelectClose,
+  icon,
+  iconColor,
+  hint,
+  hasError,
+  onClear,
+  subtitle,
+  badge,
+  useModal = true,
+  ...props
+}: Props) {
+  const [isSelectOpen, setSelectOpen] = useState<boolean>(false);
+  const [internalValue, setInternalValue] = useState(value);
+
+  function handleOpenSelect() {
+    useModal && setSelectOpen(true);
+    onSelectClick?.();
+  }
+
+  function handleCloseSelect() {
+    setSelectOpen(false);
+    onSelectClose?.();
+  }
+
+  function handleClear() {
+    setInternalValue('');
+    onClear?.();
+  }
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  return (
+    <View style={spacing.gap[4]}>
+      <Typography variant="t2" weight="semibold" color={Color.gray[900]}>
+        {label}
+      </Typography>
+
+      <View style={[spacing.gap[4], layouting.flex.grow]}>
+        <Pressable
+          style={[
+            styles.select,
+            hasError && border.color.danger[300],
+            internalValue !== '' && !hasError && border.color.primary[300],
+          ]}
+          onPress={handleOpenSelect}
+          {...props}
+        >
+          {/* left icon, value and placeholder */}
+          <View
+            style={[
+              layouting.flex.rowCenter,
+              spacing.gap[12],
+              layouting.flex.shrink,
+              layouting.flex[1],
+            ]}
+          >
+            {icon && <Icon name={icon} size={20} color={iconColor} />}
+            <View>
+              <View style={[layouting.flex.rowCenter, spacing.gap[4]]}>
+                <Typography
+                  variant="t2"
+                  color={Color.gray[900]}
+                  weight="medium"
+                  numberOfLines={1}
+                >
+                  {!internalValue ? placeholder : internalValue}
+                </Typography>
+                {badge ? (
+                  <Badge value={badge.value} size="small" color={badge.color} />
+                ) : null}
+              </View>
+
+              {subtitle && (
+                <Typography
+                  variant="t3"
+                  color={Color.gray[700]}
+                  weight="medium"
+                  numberOfLines={1}
+                >
+                  {subtitle}
+                </Typography>
+              )}
+            </View>
+          </View>
+
+          {/* right icon and action */}
+          <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
+            {onClear && internalValue && (
+              <TouchableOpacity activeOpacity={0.7} onPress={handleClear}>
+                <Icon name="x-circle" size={20} color="#aaa" />
+              </TouchableOpacity>
+            )}
+            <Icon
+              name={useModal ? 'ArrowDown' : 'ArrowRight'}
+              size={useModal ? 14 : 12}
+              color={Color.gray[700]}
+            />
+          </View>
+        </Pressable>
+
+        {hint && (
+          <Typography
+            variant="t3"
+            color={hasError ? Color.danger[500] : Color.gray[700]}
+            weight="medium"
+            numberOfLines={1}
+          >
+            {hint}
+          </Typography>
+        )}
+      </View>
+
+      {useModal && (
+        <Select
+          isOpen={isSelectOpen}
+          {...selectProps}
+          data={options ?? []}
+          onClose={handleCloseSelect}
+        />
+      )}
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  select: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    gap: 8,
+  },
+});