@rehagro/ui 1.0.29 → 1.0.31

package/dist/native.mjs

@@ -1,6 +1,6 @@
-import { createContext, forwardRef, useState, useCallback, useMemo, useContext } from 'react';
+import { createContext, forwardRef, useState, useCallback, useMemo, useRef, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable, ActivityIndicator, View, Text, TextInput as TextInput$1, Image } from 'react-native';
+import { Pressable, ActivityIndicator, View, Text, TextInput as TextInput$1, Image, Modal, FlatList } from 'react-native';
 
 // src/provider/RehagroNativeProvider.tsx
 
@@ -30,6 +30,10 @@ var DEFAULT_NATIVE_THEME = {
   inputHeightSm: 36,
   inputHeightMd: 44,
   inputHeightLg: 52,
+  buttonHeightSm: 36,
+  buttonHeightMd: 44,
+  buttonHeightLg: 52,
+  buttonHeightXl: 60,
   fontFamilyBody: "",
   fontFamilyDisplay: "",
   fontSizeXs: 12,
@@ -117,14 +121,16 @@ var Button = forwardRef(function Button2({
   const colorBase = preset ? presetBase[color] : color;
   const colorHover = preset ? presetHover[color] : darkenColor(color);
   const sizeStyleMap = {
-    sm: { paddingHorizontal: 12, paddingVertical: 6 },
-    md: { paddingHorizontal: 16, paddingVertical: 8 },
-    lg: { paddingHorizontal: 20, paddingVertical: 10 }
+    sm: { paddingHorizontal: 12, height: theme.buttonHeightSm ?? 36 },
+    md: { paddingHorizontal: 16, height: theme.buttonHeightMd ?? 44 },
+    lg: { paddingHorizontal: 20, height: theme.buttonHeightLg ?? 52 },
+    xl: { paddingHorizontal: 24, height: theme.buttonHeightXl ?? 60 }
   };
   const fontSizeMap = {
     sm: 14,
     md: 14,
-    lg: 16
+    lg: 16,
+    xl: 18
   };
   const radiusStyleMap = {
     none: 0,
@@ -929,7 +935,352 @@ var Card2 = Object.assign(CardRoot, {
   Content: CardContent,
   Footer: CardFooter
 });
+var ChevronIcon = ({ size, color, open }) => /* @__PURE__ */ jsx(
+  View,
+  {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          width: size * 0.5,
+          height: size * 0.5,
+          borderRightWidth: 2,
+          borderBottomWidth: 2,
+          borderColor: color,
+          transform: [
+            { rotate: open ? "225deg" : "45deg" },
+            { translateY: open ? size * 0.1 : -size * 0.1 }
+          ]
+        }
+      }
+    )
+  }
+);
+var CheckIcon2 = ({ size, color }) => /* @__PURE__ */ jsx(
+  View,
+  {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "absolute",
+          width: size * 0.55,
+          height: size * 0.3,
+          borderLeftWidth: 2,
+          borderBottomWidth: 2,
+          borderColor: color,
+          transform: [{ rotate: "-45deg" }, { translateY: -size * 0.05 }]
+        }
+      }
+    )
+  }
+);
+var Select = forwardRef(function Select2(props, ref) {
+  const {
+    options,
+    label,
+    subtitle,
+    placeholder = "Selecione",
+    status = "default",
+    size = "md",
+    radius = "xs",
+    helperText,
+    disabled = false,
+    style,
+    wrapperStyle,
+    accessibilityLabel,
+    multiple = false
+  } = props;
+  const theme = useRehagroTheme();
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerLayout, setTriggerLayout] = useState(null);
+  const [internalValue, setInternalValue] = useState(() => {
+    if (props.defaultValue !== void 0) {
+      return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
+    }
+    return [];
+  });
+  const isControlled = props.value !== void 0;
+  const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
+  const heightMap = {
+    sm: theme.inputHeightSm ?? 36,
+    md: theme.inputHeightMd ?? 44,
+    lg: theme.inputHeightLg ?? 52
+  };
+  const paddingMap2 = {
+    sm: 12,
+    md: 14,
+    lg: 16
+  };
+  const fontSizeMap = {
+    sm: 14,
+    md: 14,
+    lg: 16
+  };
+  const optionPaddingMap = {
+    sm: 8,
+    md: 10,
+    lg: 12
+  };
+  const radiusMap2 = {
+    none: 0,
+    xxs: theme.radiusXxs ?? 4,
+    xs: theme.radiusXs ?? 8,
+    sm: theme.radiusSm ?? 12,
+    md: theme.radiusMd ?? 16,
+    lg: theme.radiusLg ?? 24,
+    xl: theme.radiusXl ?? 32,
+    full: 9999
+  };
+  const dropdownRadiusMap = {
+    none: 0,
+    xxs: theme.radiusXxs ?? 4,
+    xs: theme.radiusXs ?? 8,
+    sm: theme.radiusXs ?? 8,
+    md: theme.radiusXs ?? 8,
+    lg: theme.radiusXs ?? 8,
+    xl: theme.radiusXs ?? 8,
+    full: theme.radiusXs ?? 8
+  };
+  const hasError = status === "error";
+  const borderColor = hasError ? theme.danger : isOpen ? theme.primary : theme.border;
+  const containerStyle = {
+    height: heightMap[size],
+    paddingHorizontal: paddingMap2[size],
+    borderRadius: radiusMap2[radius],
+    borderWidth: theme.borderWidthSm,
+    borderColor,
+    backgroundColor: disabled ? theme.background : theme.surface,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    opacity: disabled ? 0.5 : 1
+  };
+  const displayText = useMemo(() => {
+    if (selectedValues.length === 0) return null;
+    if (!multiple) {
+      return options.find((o) => o.value === selectedValues[0])?.label ?? null;
+    }
+    const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
+    if (selectedLabels.length === 0) return null;
+    if (selectedLabels.length === 1) return selectedLabels[0];
+    return `${selectedLabels.length} selecionados`;
+  }, [selectedValues, options, multiple]);
+  const handleSelect = useCallback(
+    (optionValue) => {
+      if (multiple) {
+        const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+        if (!isControlled) setInternalValue(next);
+        props.onChange?.(next);
+      } else {
+        const next = [optionValue];
+        if (!isControlled) setInternalValue(next);
+        props.onChange?.(optionValue);
+        setIsOpen(false);
+      }
+    },
+    [multiple, selectedValues, isControlled, props]
+  );
+  const openDropdown = useCallback(() => {
+    if (disabled) return;
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+      setIsOpen(true);
+    });
+  }, [disabled]);
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleTriggerLayout = (_e) => {
+    if (isOpen) {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setTriggerLayout({ x, y, width, height });
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [{ gap: 4 }, wrapperStyle], children: [
+    label && /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "baseline", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: 14,
+            fontWeight: "500",
+            color: theme.text,
+            ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+          },
+          children: label
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: 14,
+            color: theme.textMuted,
+            ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+          },
+          children: subtitle
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        onPress: openDropdown,
+        onLayout: handleTriggerLayout,
+        disabled,
+        accessibilityRole: "combobox",
+        accessibilityState: { disabled, expanded: isOpen },
+        accessibilityLabel: accessibilityLabel ?? label,
+        style: [containerStyle, style],
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                flex: 1,
+                fontSize: fontSizeMap[size],
+                color: displayText ? theme.text : theme.textMuted,
+                ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+              },
+              children: displayText ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronIcon, { size: 18, color: theme.textMuted ?? "#6b7280", open: isOpen })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          fontSize: 12,
+          color: hasError ? theme.danger : theme.textMuted,
+          ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+        },
+        children: helperText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: closeDropdown,
+        statusBarTranslucent: true,
+        children: /* @__PURE__ */ jsx(Pressable, { style: { flex: 1, backgroundColor: "transparent" }, onPress: closeDropdown, children: triggerLayout && /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              position: "absolute",
+              top: triggerLayout.y + triggerLayout.height + 36,
+              left: triggerLayout.x,
+              width: triggerLayout.width,
+              maxHeight: 240,
+              borderRadius: dropdownRadiusMap[radius],
+              borderWidth: theme.borderWidthSm,
+              borderColor: theme.border,
+              backgroundColor: theme.surface,
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.1,
+              shadowRadius: 8,
+              elevation: 4,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              FlatList,
+              {
+                data: options,
+                keyExtractor: (item) => item.value,
+                keyboardShouldPersistTaps: "handled",
+                renderItem: ({ item }) => {
+                  const isSelected = selectedValues.includes(item.value);
+                  const isDisabled = !!item.disabled;
+                  return /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      onPress: () => {
+                        if (!isDisabled) handleSelect(item.value);
+                      },
+                      disabled: isDisabled,
+                      accessibilityRole: "menuitem",
+                      accessibilityState: { selected: isSelected, disabled: isDisabled },
+                      style: ({ pressed }) => ({
+                        paddingHorizontal: paddingMap2[size],
+                        paddingVertical: optionPaddingMap[size],
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 8,
+                        backgroundColor: pressed && !isDisabled ? theme.background : "transparent",
+                        opacity: isDisabled ? 0.5 : 1
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            numberOfLines: 1,
+                            style: {
+                              flex: 1,
+                              fontSize: fontSizeMap[size],
+                              color: theme.text,
+                              ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+                            },
+                            children: item.label
+                          }
+                        ),
+                        multiple ? /* @__PURE__ */ jsx(
+                          View,
+                          {
+                            style: {
+                              width: 18,
+                              height: 18,
+                              borderRadius: theme.radiusXxs,
+                              borderWidth: theme.borderWidthSm,
+                              borderColor: isSelected ? theme.primary : theme.border,
+                              backgroundColor: isSelected ? theme.primary : theme.surface,
+                              alignItems: "center",
+                              justifyContent: "center"
+                            },
+                            children: isSelected && /* @__PURE__ */ jsx(CheckIcon2, { size: 12, color: theme.surface ?? "#ffffff" })
+                          }
+                        ) : isSelected && /* @__PURE__ */ jsx(CheckIcon2, { size: 14, color: theme.primary ?? "#16a34a" })
+                      ]
+                    }
+                  );
+                }
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+});
 
-export { ActivityIndicator3 as ActivityIndicator, Avatar, Button, Card2 as Card, CardContent, CardFooter, CardHeader, Checkbox, IconButton, RehagroNativeProvider, Tag, Text5 as Text, TextInput, useRehagroTheme };
+export { ActivityIndicator3 as ActivityIndicator, Avatar, Button, Card2 as Card, CardContent, CardFooter, CardHeader, Checkbox, IconButton, RehagroNativeProvider, Select, Tag, Text5 as Text, TextInput, useRehagroTheme };
 //# sourceMappingURL=native.mjs.map
 //# sourceMappingURL=native.mjs.map