@rehagro/ui 1.0.30 → 1.0.32

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
 
@@ -935,7 +935,558 @@ 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" })
+                      ]
+                    }
+                  );
+                }
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+});
+var RadioGroupContext = createContext(null);
+var useRadioGroup = () => useContext(RadioGroupContext);
+var PRESET_COLORS4 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
+var resolveColor = (color, theme) => {
+  if (isPresetColor4(color)) {
+    return theme[color] ?? "#16a34a";
+  }
+  return color;
+};
+var outerSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+var innerSizeMap = {
+  sm: 8,
+  md: 10,
+  lg: 12
+};
+var labelSizeMap = {
+  sm: 14,
+  md: 14,
+  lg: 16
+};
+var descriptionSizeMap = {
+  sm: 12,
+  md: 12,
+  lg: 14
+};
+var gapMap = {
+  sm: 8,
+  md: 12,
+  lg: 16
+};
+var Radio = forwardRef(function Radio2({
+  size = "md",
+  label,
+  description,
+  color = "primary",
+  disabled,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  style,
+  accessibilityLabel,
+  ...rest
+}, ref) {
+  const theme = useRehagroTheme();
+  const isControlled = controlledChecked !== void 0;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const resolvedColor = resolveColor(color, theme);
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    if (!isControlled) setInternalChecked(true);
+    onChange?.(true);
+  }, [disabled, isControlled, onChange]);
+  const outerSize = outerSizeMap[size];
+  const innerSize = innerSizeMap[size];
+  const outerStyle = {
+    width: outerSize,
+    height: outerSize,
+    borderRadius: outerSize / 2,
+    borderWidth: theme.borderWidthSm ?? 1,
+    borderColor: isChecked ? resolvedColor : theme.border ?? "#d1d5db",
+    backgroundColor: theme.surface ?? "#ffffff",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const innerStyle = {
+    width: innerSize,
+    height: innerSize,
+    borderRadius: innerSize / 2,
+    backgroundColor: resolvedColor
+  };
+  const accessibilityText = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: "radio",
+      accessibilityState: { checked: isChecked, disabled: !!disabled },
+      accessibilityLabel: accessibilityText,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 8,
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(View, { style: outerStyle, children: isChecked && /* @__PURE__ */ jsx(View, { style: innerStyle }) }),
+        (label || description) && /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 2 }, children: [
+          label && /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: labelSizeMap[size],
+                color: theme.text,
+                ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+              },
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: descriptionSizeMap[size],
+                color: theme.textMuted,
+                ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+              },
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var RadioOption = forwardRef(function RadioOption2({ value, size, color, disabled, ...rest }, ref) {
+  const group = useRadioGroup();
+  const mergedSize = size ?? group?.size ?? "md";
+  const mergedColor = color ?? group?.color ?? "primary";
+  const mergedDisabled = disabled ?? group?.disabled ?? false;
+  const isChecked = group?.value === value;
+  const handleChange = () => {
+    group?.onChange?.(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      ref,
+      size: mergedSize,
+      color: mergedColor,
+      disabled: mergedDisabled,
+      checked: isChecked,
+      onChange: handleChange,
+      ...rest
+    }
+  );
+});
+var RadioGroup = forwardRef(function RadioGroup2({
+  children,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  orientation = "vertical",
+  color = "primary",
+  disabled = false,
+  gap = "md",
+  style
+}, ref) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const handleChange = useCallback(
+    (newValue) => {
+      if (!isControlled) setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        color,
+        disabled
+      },
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          ref,
+          accessibilityRole: "radiogroup",
+          style: [
+            {
+              flexDirection: orientation === "vertical" ? "column" : "row",
+              flexWrap: orientation === "horizontal" ? "wrap" : "nowrap",
+              gap: gapMap[gap]
+            },
+            style
+          ],
+          children
+        }
+      )
+    }
+  );
+});
 
-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, Radio, RadioGroup, RadioOption, RehagroNativeProvider, Select, Tag, Text5 as Text, TextInput, useRehagroTheme };
 //# sourceMappingURL=native.mjs.map
 //# sourceMappingURL=native.mjs.map