@rehagro/ui 1.0.30 → 1.0.31

package/dist/native.d.mts

@@ -417,4 +417,64 @@ declare const Card: React__default.ForwardRefExoticComponent<Omit<PressableProps
     Footer: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<View>>;
 };
 
-export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };
+type SelectSize = "sm" | "md" | "lg";
+type SelectRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+type SelectStatus = "default" | "error";
+type SelectOption = {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+};
+type SelectBaseProps = {
+    /** List of available options */
+    options: SelectOption[];
+    /** Label text displayed above the select */
+    label?: string;
+    /** Subtitle displayed next to the label */
+    subtitle?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Validation status */
+    status?: SelectStatus;
+    /** Select size */
+    size?: SelectSize;
+    /** Border radius */
+    radius?: SelectRadius;
+    /** Helper/error message displayed below the select */
+    helperText?: React__default.ReactNode;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Custom style for the trigger container */
+    style?: StyleProp<ViewStyle>;
+    /** Custom style for the outermost wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+};
+type SelectSingleProps = SelectBaseProps & {
+    /** Enables multi-select mode */
+    multiple?: false;
+    /** Currently selected value (single mode) */
+    value?: string;
+    /** Default selected value (single mode, uncontrolled) */
+    defaultValue?: string;
+    /** Called when selection changes (single mode) */
+    onChange?: (value: string) => void;
+};
+type SelectMultipleProps = SelectBaseProps & {
+    /** Enables multi-select mode */
+    multiple: true;
+    /** Currently selected values (multi mode) */
+    value?: string[];
+    /** Default selected values (multi mode, uncontrolled) */
+    defaultValue?: string[];
+    /** Called when selection changes (multi mode) */
+    onChange?: (value: string[]) => void;
+};
+type SelectProps = SelectSingleProps | SelectMultipleProps;
+declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<View>>;
+
+export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };

package/dist/native.d.ts

@@ -417,4 +417,64 @@ declare const Card: React__default.ForwardRefExoticComponent<Omit<PressableProps
     Footer: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<View>>;
 };
 
-export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };
+type SelectSize = "sm" | "md" | "lg";
+type SelectRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+type SelectStatus = "default" | "error";
+type SelectOption = {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+};
+type SelectBaseProps = {
+    /** List of available options */
+    options: SelectOption[];
+    /** Label text displayed above the select */
+    label?: string;
+    /** Subtitle displayed next to the label */
+    subtitle?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Validation status */
+    status?: SelectStatus;
+    /** Select size */
+    size?: SelectSize;
+    /** Border radius */
+    radius?: SelectRadius;
+    /** Helper/error message displayed below the select */
+    helperText?: React__default.ReactNode;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Custom style for the trigger container */
+    style?: StyleProp<ViewStyle>;
+    /** Custom style for the outermost wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+};
+type SelectSingleProps = SelectBaseProps & {
+    /** Enables multi-select mode */
+    multiple?: false;
+    /** Currently selected value (single mode) */
+    value?: string;
+    /** Default selected value (single mode, uncontrolled) */
+    defaultValue?: string;
+    /** Called when selection changes (single mode) */
+    onChange?: (value: string) => void;
+};
+type SelectMultipleProps = SelectBaseProps & {
+    /** Enables multi-select mode */
+    multiple: true;
+    /** Currently selected values (multi mode) */
+    value?: string[];
+    /** Default selected values (multi mode, uncontrolled) */
+    defaultValue?: string[];
+    /** Called when selection changes (multi mode) */
+    onChange?: (value: string[]) => void;
+};
+type SelectProps = SelectSingleProps | SelectMultipleProps;
+declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<View>>;
+
+export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };

package/dist/native.js

@@ -937,6 +937,351 @@ var Card2 = Object.assign(CardRoot, {
   Content: CardContent,
   Footer: CardFooter
 });
+var ChevronIcon = ({ size, color, open }) => /* @__PURE__ */ jsxRuntime.jsx(
+  reactNative.View,
+  {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsx(
+  reactNative.View,
+  {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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 = react.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 = react.useRef(null);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [triggerLayout, setTriggerLayout] = react.useState(null);
+  const [internalValue, setInternalValue] = react.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 = react.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 = react.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 = react.useCallback(() => {
+    if (disabled) return;
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+      setIsOpen(true);
+    });
+  }, [disabled]);
+  const closeDropdown = react.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleTriggerLayout = (_e) => {
+    if (isOpen) {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setTriggerLayout({ x, y, width, height });
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [{ gap: 4 }, wrapperStyle], children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "baseline", gap: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 14,
+            fontWeight: "500",
+            color: theme.text,
+            ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+          },
+          children: label
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 14,
+            color: theme.textMuted,
+            ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+          },
+          children: subtitle
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.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__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              numberOfLines: 1,
+              style: {
+                flex: 1,
+                fontSize: fontSizeMap[size],
+                color: displayText ? theme.text : theme.textMuted,
+                ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+              },
+              children: displayText ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { size: 18, color: theme.textMuted ?? "#6b7280", open: isOpen })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: {
+          fontSize: 12,
+          color: hasError ? theme.danger : theme.textMuted,
+          ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+        },
+        children: helperText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Modal,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: closeDropdown,
+        statusBarTranslucent: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: { flex: 1, backgroundColor: "transparent" }, onPress: closeDropdown, children: triggerLayout && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsx(
+              reactNative.FlatList,
+              {
+                data: options,
+                keyExtractor: (item) => item.value,
+                keyboardShouldPersistTaps: "handled",
+                renderItem: ({ item }) => {
+                  const isSelected = selectedValues.includes(item.value);
+                  const isDisabled = !!item.disabled;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.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__ */ jsxRuntime.jsx(
+                          reactNative.Text,
+                          {
+                            numberOfLines: 1,
+                            style: {
+                              flex: 1,
+                              fontSize: fontSizeMap[size],
+                              color: theme.text,
+                              ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+                            },
+                            children: item.label
+                          }
+                        ),
+                        multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                          reactNative.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__ */ jsxRuntime.jsx(CheckIcon2, { size: 12, color: theme.surface ?? "#ffffff" })
+                          }
+                        ) : isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, { size: 14, color: theme.primary ?? "#16a34a" })
+                      ]
+                    }
+                  );
+                }
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+});
 
 exports.ActivityIndicator = ActivityIndicator3;
 exports.Avatar = Avatar;
@@ -948,6 +1293,7 @@ exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.IconButton = IconButton;
 exports.RehagroNativeProvider = RehagroNativeProvider;
+exports.Select = Select;
 exports.Tag = Tag;
 exports.Text = Text5;
 exports.TextInput = TextInput;