@masumdev/rn-ui 0.1.0 → 0.1.2

package/lib/module/components/Combobox.js

@@ -0,0 +1,362 @@
+"use strict";
+
+import React from "react";
+import { Dimensions, Modal, Pressable, ScrollView, StyleSheet, TextInput, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useTheme } from "../theme/index.js";
+import { Text } from "./Text.js";
+import { renderIcon } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ComboboxContext = /*#__PURE__*/React.createContext(null);
+export function useCombobox() {
+  const context = React.useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useCombobox must be used within a <Combobox />");
+  }
+  return context;
+}
+export function Combobox({
+  value: controlledValue,
+  onValueChange,
+  open: controlledOpen,
+  onOpenChange,
+  children
+}) {
+  const {
+    colors
+  } = useTheme();
+  const [uncontrolledValue, setUncontrolledValue] = React.useState("");
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [triggerLayout, setTriggerLayout] = React.useState({
+    pageX: 0,
+    pageY: 0,
+    width: 0,
+    height: 0
+  });
+  const triggerRef = React.useRef(null);
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
+  const setOpen = React.useCallback(nextOpen => {
+    if (controlledOpen === undefined) {
+      setUncontrolledOpen(nextOpen);
+    }
+    if (onOpenChange) {
+      onOpenChange(nextOpen);
+    }
+  }, [controlledOpen, onOpenChange]);
+  const handleValueChange = React.useCallback(nextVal => {
+    if (controlledValue === undefined) {
+      setUncontrolledValue(nextVal);
+    }
+    if (onValueChange) {
+      onValueChange(nextVal);
+    }
+  }, [controlledValue, onValueChange]);
+  const measureTrigger = React.useCallback(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      if (width > 0 && height > 0) {
+        setTriggerLayout({
+          pageX: x,
+          pageY: y,
+          width,
+          height
+        });
+      }
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
+    value: {
+      value,
+      onValueChange: handleValueChange,
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      triggerRef,
+      triggerLayout,
+      measureTrigger,
+      colors
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: "100%"
+      },
+      children: children
+    })
+  });
+}
+
+// Chevron pure arrow down icon
+function ChevronDownIcon({
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 8,
+      height: 8,
+      borderRightWidth: 1.5,
+      borderBottomWidth: 1.5,
+      borderColor: color,
+      transform: [{
+        rotate: "45deg"
+      }],
+      marginTop: -3,
+      marginRight: 4
+    }
+  });
+}
+export function ComboboxInput({
+  placeholder = "Select option...",
+  style,
+  inputStyle,
+  disabled = false,
+  chevronIcon
+}) {
+  const {
+    inputValue,
+    setInputValue,
+    open,
+    setOpen,
+    triggerRef,
+    measureTrigger,
+    colors
+  } = useCombobox();
+  const {
+    components,
+    radii,
+    spacing,
+    typography
+  } = useTheme();
+  const handleFocus = () => {
+    if (!disabled) {
+      measureTrigger();
+      setOpen(true);
+    }
+  };
+  const handlePress = () => {
+    if (!disabled) {
+      measureTrigger();
+      setOpen(!open);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ref: triggerRef,
+    onPress: handlePress,
+    disabled: disabled,
+    style: [{
+      flexDirection: "row",
+      alignItems: "center",
+      height: 40,
+      borderWidth: components.borderWidth.strong,
+      borderColor: colors.border,
+      borderRadius: radii.lg,
+      backgroundColor: colors.input,
+      paddingHorizontal: spacing.md,
+      width: "100%",
+      opacity: disabled ? 0.5 : 1
+    }, style],
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      editable: !disabled,
+      placeholder: placeholder,
+      placeholderTextColor: colors.textMuted,
+      value: inputValue,
+      onChangeText: setInputValue,
+      onFocus: handleFocus,
+      pointerEvents: disabled ? "none" : "auto",
+      style: [{
+        flex: 1,
+        ...typography.bodySmall,
+        color: colors.text,
+        padding: 0,
+        height: "100%"
+      }, inputStyle]
+    }), chevronIcon ? renderIcon(chevronIcon, colors.textMuted, 16) : /*#__PURE__*/_jsx(ChevronDownIcon, {
+      color: colors.textMuted
+    })]
+  });
+}
+export function ComboboxContent({
+  children,
+  style,
+  overlayStyle,
+  modalProps
+}) {
+  const {
+    open,
+    setOpen,
+    triggerLayout,
+    colors
+  } = useCombobox();
+  const {
+    components,
+    radii
+  } = useTheme();
+  const progress = useSharedValue(open ? 1 : 0);
+  React.useEffect(() => {
+    progress.value = withTiming(open ? 1 : 0, {
+      duration: 150
+    });
+  }, [open, progress]);
+  const {
+    height: SCREEN_HEIGHT
+  } = Dimensions.get("window");
+  const spaceBelow = SCREEN_HEIGHT - (triggerLayout.pageY + triggerLayout.height);
+  const dropdownMaxHeight = 220;
+  const renderAbove = spaceBelow < dropdownMaxHeight + 40;
+  const positionStyle = renderAbove ? {
+    bottom: SCREEN_HEIGHT - triggerLayout.pageY + 6
+  } : {
+    top: triggerLayout.pageY + triggerLayout.height + 6
+  };
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      translateY: (renderAbove ? 8 : -8) * (1 - progress.value)
+    }]
+  }));
+  if (!open) return null;
+  return /*#__PURE__*/_jsxs(Modal, {
+    transparent: true,
+    visible: open,
+    animationType: "none",
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    hardwareAccelerated: true,
+    onRequestClose: () => setOpen(false),
+    ...modalProps,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      style: [StyleSheet.absoluteFill, overlayStyle],
+      onPress: () => setOpen(false)
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        left: triggerLayout.pageX,
+        width: triggerLayout.width,
+        backgroundColor: colors.surface,
+        borderWidth: components.borderWidth.strong,
+        borderColor: colors.border,
+        borderRadius: radii.lg,
+        maxHeight: dropdownMaxHeight,
+        overflow: "hidden"
+      }, animatedStyle, positionStyle, style],
+      children: children
+    })]
+  });
+}
+export function ComboboxList({
+  children,
+  style
+}) {
+  const {
+    spacing
+  } = useTheme();
+  return /*#__PURE__*/_jsx(ScrollView, {
+    keyboardShouldPersistTaps: "handled",
+    style: [{
+      flex: 1,
+      padding: spacing.xs
+    }, style],
+    children: children
+  });
+}
+// Chevron checkmark for selected indicator
+function CheckIcon({
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 8,
+      height: 5,
+      borderLeftWidth: 1.75,
+      borderBottomWidth: 1.75,
+      borderColor: color,
+      transform: [{
+        rotate: "-45deg"
+      }],
+      marginRight: 6
+    }
+  });
+}
+export function ComboboxItem({
+  value,
+  label,
+  children,
+  style,
+  checkIcon
+}) {
+  const {
+    value: selectedValue,
+    onValueChange,
+    setOpen,
+    inputValue,
+    setInputValue,
+    colors
+  } = useCombobox();
+  const {
+    radii,
+    spacing,
+    typography
+  } = useTheme();
+
+  // Automatic filter matching
+  if (inputValue && !label.toLowerCase().includes(inputValue.toLowerCase())) {
+    return null;
+  }
+  const isSelected = selectedValue === value;
+  const handlePress = () => {
+    onValueChange(value);
+    setInputValue(label);
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: handlePress,
+    style: ({
+      pressed
+    }) => [{
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: spacing.sm + 1,
+      paddingHorizontal: spacing.md,
+      borderRadius: radii.md,
+      backgroundColor: isSelected ? colors.surfaceMuted : pressed ? colors.surfaceMuted : colors.transparent,
+      justifyContent: "space-between"
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: {
+        ...typography.bodySmall,
+        color: colors.text,
+        fontWeight: isSelected ? "500" : "400"
+      },
+      children: children || label
+    }), isSelected && (checkIcon ? renderIcon(checkIcon, colors.primary, 14) : /*#__PURE__*/_jsx(CheckIcon, {
+      color: colors.primary
+    }))]
+  });
+}
+export function ComboboxEmpty({
+  children = "No results found.",
+  style
+}) {
+  const {
+    colors
+  } = useCombobox();
+  const {
+    spacing,
+    typography
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      padding: spacing.md,
+      alignItems: "center"
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        ...typography.caption,
+        color: colors.textMuted
+      },
+      children: children
+    })
+  });
+}
+//# sourceMappingURL=Combobox.js.map

package/lib/module/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Dimensions","Modal","Pressable","ScrollView","StyleSheet","TextInput","View","Animated","useAnimatedStyle","useSharedValue","withTiming","useTheme","Text","renderIcon","jsx","_jsx","jsxs","_jsxs","ComboboxContext","createContext","useCombobox","context","useContext","Error","Combobox","value","controlledValue","onValueChange","open","controlledOpen","onOpenChange","children","colors","uncontrolledValue","setUncontrolledValue","useState","uncontrolledOpen","setUncontrolledOpen","inputValue","setInputValue","triggerLayout","setTriggerLayout","pageX","pageY","width","height","triggerRef","useRef","undefined","setOpen","useCallback","nextOpen","handleValueChange","nextVal","measureTrigger","current","measureInWindow","x","y","Provider","style","ChevronDownIcon","color","borderRightWidth","borderBottomWidth","borderColor","transform","rotate","marginTop","marginRight","ComboboxInput","placeholder","inputStyle","disabled","chevronIcon","components","radii","spacing","typography","handleFocus","handlePress","ref","onPress","flexDirection","alignItems","borderWidth","strong","border","borderRadius","lg","backgroundColor","input","paddingHorizontal","md","opacity","editable","placeholderTextColor","textMuted","onChangeText","onFocus","pointerEvents","flex","bodySmall","text","padding","ComboboxContent","overlayStyle","modalProps","progress","useEffect","duration","SCREEN_HEIGHT","get","spaceBelow","dropdownMaxHeight","renderAbove","positionStyle","bottom","top","animatedStyle","translateY","transparent","visible","animationType","statusBarTranslucent","navigationBarTranslucent","hardwareAccelerated","onRequestClose","absoluteFill","position","left","surface","maxHeight","overflow","ComboboxList","keyboardShouldPersistTaps","xs","CheckIcon","borderLeftWidth","ComboboxItem","label","checkIcon","selectedValue","toLowerCase","includes","isSelected","pressed","paddingVertical","sm","surfaceMuted","justifyContent","fontWeight","primary","ComboboxEmpty","caption"],"sourceRoot":"../../../src","sources":["components/Combobox.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Command.js

@@ -0,0 +1,113 @@
+"use strict";
+
+import React from "react";
+import { Modal, Pressable, ScrollView, View } from "react-native";
+import { useTheme } from "../theme/index.js";
+import { Input } from "./Input.js";
+import { Text } from "./Text.js";
+import { renderIcon } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Command({
+  visible,
+  items,
+  title = "Command",
+  placeholder = "Search...",
+  emptyText = "No results",
+  onClose,
+  onSelect,
+  style
+}) {
+  const {
+    colors,
+    components,
+    radii,
+    spacing
+  } = useTheme();
+  const [query, setQuery] = React.useState("");
+  const filtered = items.filter(item => {
+    const text = `${item.label} ${item.description ?? ""}`.toLowerCase();
+    return text.includes(query.toLowerCase());
+  });
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      style: {
+        flex: 1,
+        backgroundColor: colors.overlay,
+        justifyContent: "flex-end"
+      },
+      onPress: onClose,
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        style: [{
+          backgroundColor: colors.surface,
+          borderTopLeftRadius: radii.xxl,
+          borderTopRightRadius: radii.xxl,
+          borderWidth: components.borderWidth.strong,
+          borderColor: colors.border,
+          padding: spacing.lg,
+          gap: spacing.md,
+          maxHeight: "76%"
+        }, style],
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title",
+          children: title
+        }), /*#__PURE__*/_jsx(Input, {
+          value: query,
+          onChangeText: setQuery,
+          placeholder: placeholder
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          keyboardShouldPersistTaps: "handled",
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              gap: spacing.sm
+            },
+            children: filtered.length === 0 ? /*#__PURE__*/_jsx(Text, {
+              color: "textMuted",
+              align: "center",
+              style: {
+                padding: spacing.lg
+              },
+              children: emptyText
+            }) : filtered.map(item => /*#__PURE__*/_jsxs(Pressable, {
+              disabled: item.disabled,
+              onPress: () => {
+                onSelect?.(item.value, item);
+                onClose();
+              },
+              style: ({
+                pressed
+              }) => ({
+                minHeight: 48,
+                borderRadius: radii.lg,
+                padding: spacing.md,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.md,
+                backgroundColor: pressed ? colors.backgroundMuted : colors.surface,
+                opacity: item.disabled ? 0.5 : 1
+              }),
+              children: [renderIcon(item.icon, colors.primary, 18), /*#__PURE__*/_jsxs(View, {
+                style: {
+                  flex: 1,
+                  gap: spacing.xs
+                },
+                children: [/*#__PURE__*/_jsx(Text, {
+                  variant: "label",
+                  children: item.label
+                }), item.description ? /*#__PURE__*/_jsx(Text, {
+                  variant: "bodySmall",
+                  color: "textMuted",
+                  children: item.description
+                }) : null]
+              })]
+            }, item.value))
+          })
+        })]
+      })
+    })
+  });
+}
+//# sourceMappingURL=Command.js.map

package/lib/module/components/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Modal","Pressable","ScrollView","View","useTheme","Input","Text","renderIcon","jsx","_jsx","jsxs","_jsxs","Command","visible","items","title","placeholder","emptyText","onClose","onSelect","style","colors","components","radii","spacing","query","setQuery","useState","filtered","filter","item","text","label","description","toLowerCase","includes","transparent","animationType","onRequestClose","children","flex","backgroundColor","overlay","justifyContent","onPress","surface","borderTopLeftRadius","xxl","borderTopRightRadius","borderWidth","strong","borderColor","border","padding","lg","gap","md","maxHeight","variant","value","onChangeText","keyboardShouldPersistTaps","sm","length","color","align","map","disabled","pressed","minHeight","borderRadius","flexDirection","alignItems","backgroundMuted","opacity","icon","primary","xs"],"sourceRoot":"../../../src","sources":["components/Command.tsx"],"mappings":"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","ignoreList":[]}