@rehagro/ui 1.0.2 → 1.0.4

package/dist/native.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { PressableProps, StyleProp, ViewStyle, View, TextInputProps as TextInputProps$1, TextInput as TextInput$1, ViewProps, TextProps as TextProps$1, TextStyle, Text as Text$1 } from 'react-native';
+import { B as ButtonColor, P as PresetColor } from './colors.types-7nLOoy6r.mjs';
 
 /** React Native theme — reuses the same token names as the web theme.
  *  Color values are plain CSS hex strings (e.g. "#16a34a").
@@ -15,6 +16,8 @@ type RehagroNativeTheme = {
     dangerHover?: string;
     warning?: string;
     success?: string;
+    info?: string;
+    infoHover?: string;
     text?: string;
     textMuted?: string;
     surface?: string;
@@ -53,6 +56,8 @@ type ButtonProps = Omit<PressableProps, "style"> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
+    color?: ButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -71,6 +76,8 @@ declare const Button: React$1.ForwardRefExoticComponent<Omit<PressableProps, "st
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
+    color?: ButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -86,7 +93,7 @@ declare const Button: React$1.ForwardRefExoticComponent<Omit<PressableProps, "st
 type IconButtonVariant = "solid" | "outline" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type IconButtonColor = "primary" | "danger" | "warning" | "success" | "secondary";
+type IconButtonColor = ButtonColor;
 type IconButtonProps = Omit<PressableProps, "style"> & {
     /** Visual style variant */
     variant?: IconButtonVariant;
@@ -94,7 +101,7 @@ type IconButtonProps = Omit<PressableProps, "style"> & {
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -110,7 +117,7 @@ declare const IconButton: React$1.ForwardRefExoticComponent<Omit<PressableProps,
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -283,4 +290,43 @@ declare const Text: React$1.ForwardRefExoticComponent<Omit<TextProps$1, "style">
     style?: StyleProp<TextStyle>;
 } & React$1.RefAttributes<Text$1>>;
 
-export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextVariant, useRehagroTheme };
+type TagColor = PresetColor | (string & {});
+type TagSize = "sm" | "md" | "lg";
+type TagProps = Omit<PressableProps, "style"> & {
+    /** Tag color — preset name or any CSS color (e.g., "#c3c3c3", "red") */
+    color?: TagColor;
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    leftIcon?: React$1.ReactNode;
+    /** Optional icon rendered on the right side */
+    rightIcon?: React$1.ReactNode;
+    /** Custom style for the outer container */
+    style?: StyleProp<ViewStyle>;
+};
+declare const Tag: React$1.ForwardRefExoticComponent<Omit<PressableProps, "style"> & {
+    /** Tag color — preset name or any CSS color (e.g., "#c3c3c3", "red") */
+    color?: TagColor;
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    leftIcon?: React$1.ReactNode;
+    /** Optional icon rendered on the right side */
+    rightIcon?: React$1.ReactNode;
+    /** Custom style for the outer container */
+    style?: StyleProp<ViewStyle>;
+} & React$1.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, 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 TextVariant, useRehagroTheme };

package/dist/native.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { PressableProps, StyleProp, ViewStyle, View, TextInputProps as TextInputProps$1, TextInput as TextInput$1, ViewProps, TextProps as TextProps$1, TextStyle, Text as Text$1 } from 'react-native';
+import { B as ButtonColor, P as PresetColor } from './colors.types-7nLOoy6r.js';
 
 /** React Native theme — reuses the same token names as the web theme.
  *  Color values are plain CSS hex strings (e.g. "#16a34a").
@@ -15,6 +16,8 @@ type RehagroNativeTheme = {
     dangerHover?: string;
     warning?: string;
     success?: string;
+    info?: string;
+    infoHover?: string;
     text?: string;
     textMuted?: string;
     surface?: string;
@@ -53,6 +56,8 @@ type ButtonProps = Omit<PressableProps, "style"> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
+    color?: ButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -71,6 +76,8 @@ declare const Button: React$1.ForwardRefExoticComponent<Omit<PressableProps, "st
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
+    color?: ButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -86,7 +93,7 @@ declare const Button: React$1.ForwardRefExoticComponent<Omit<PressableProps, "st
 type IconButtonVariant = "solid" | "outline" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type IconButtonColor = "primary" | "danger" | "warning" | "success" | "secondary";
+type IconButtonColor = ButtonColor;
 type IconButtonProps = Omit<PressableProps, "style"> & {
     /** Visual style variant */
     variant?: IconButtonVariant;
@@ -94,7 +101,7 @@ type IconButtonProps = Omit<PressableProps, "style"> & {
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -110,7 +117,7 @@ declare const IconButton: React$1.ForwardRefExoticComponent<Omit<PressableProps,
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -283,4 +290,43 @@ declare const Text: React$1.ForwardRefExoticComponent<Omit<TextProps$1, "style">
     style?: StyleProp<TextStyle>;
 } & React$1.RefAttributes<Text$1>>;
 
-export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextVariant, useRehagroTheme };
+type TagColor = PresetColor | (string & {});
+type TagSize = "sm" | "md" | "lg";
+type TagProps = Omit<PressableProps, "style"> & {
+    /** Tag color — preset name or any CSS color (e.g., "#c3c3c3", "red") */
+    color?: TagColor;
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    leftIcon?: React$1.ReactNode;
+    /** Optional icon rendered on the right side */
+    rightIcon?: React$1.ReactNode;
+    /** Custom style for the outer container */
+    style?: StyleProp<ViewStyle>;
+};
+declare const Tag: React$1.ForwardRefExoticComponent<Omit<PressableProps, "style"> & {
+    /** Tag color — preset name or any CSS color (e.g., "#c3c3c3", "red") */
+    color?: TagColor;
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    leftIcon?: React$1.ReactNode;
+    /** Optional icon rendered on the right side */
+    rightIcon?: React$1.ReactNode;
+    /** Custom style for the outer container */
+    style?: StyleProp<ViewStyle>;
+} & React$1.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, 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 TextVariant, useRehagroTheme };

package/dist/native.js

@@ -16,6 +16,8 @@ var DEFAULT_NATIVE_THEME = {
   dangerHover: "#b91c1c",
   warning: "#d97706",
   success: "#16a34a",
+  info: "#0284c7",
+  infoHover: "#0369a1",
   text: "#111827",
   textMuted: "#6b7280",
   surface: "#ffffff",
@@ -47,10 +49,20 @@ function RehagroNativeProvider({ theme, children }) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(RehagroNativeContext.Provider, { value: resolvedTheme, children });
 }
+var PRESET_COLORS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor = (c) => PRESET_COLORS.has(c);
 var Button = react.forwardRef(function Button2({
   variant = "solid",
   size = "md",
   radius = "sm",
+  color = "primary",
   loading = false,
   disabled,
   leftIcon,
@@ -62,6 +74,25 @@ var Button = react.forwardRef(function Button2({
 }, ref) {
   const theme = useRehagroTheme();
   const isDisabled = disabled || loading;
+  const preset = isPresetColor(color);
+  const presetBase = {
+    primary: theme.primary,
+    secondary: theme.secondary,
+    danger: theme.danger,
+    warning: theme.warning,
+    success: theme.success,
+    info: theme.info
+  };
+  const presetHover = {
+    primary: theme.primaryHover,
+    secondary: theme.secondaryHover,
+    danger: theme.dangerHover,
+    warning: theme.warning,
+    success: theme.success,
+    info: theme.infoHover
+  };
+  const colorBase = preset ? presetBase[color] : color;
+  const colorHover = preset ? presetHover[color] : color;
   const sizeStyleMap = {
     sm: { paddingHorizontal: 12, paddingVertical: 6 },
     md: { paddingHorizontal: 16, paddingVertical: 8 },
@@ -95,22 +126,22 @@ var Button = react.forwardRef(function Button2({
   const variantStyle = (pressed) => {
     if (variant === "solid") {
       return {
-        backgroundColor: pressed ? theme.primaryHover : theme.primary,
-        borderColor: pressed ? theme.primaryHover : theme.primary
+        backgroundColor: pressed ? colorHover : colorBase,
+        borderColor: pressed ? colorHover : colorBase
       };
     }
     if (variant === "outline") {
       return {
-        borderColor: theme.primary,
-        backgroundColor: pressed ? theme.primary : "transparent"
+        borderColor: colorBase,
+        backgroundColor: pressed ? colorBase : "transparent"
       };
     }
     return { borderColor: "transparent", backgroundColor: "transparent" };
   };
   const textColor = (pressed) => {
     if (variant === "solid") return theme.surface;
-    if (variant === "outline") return pressed ? theme.surface : theme.primary;
-    return theme.primary;
+    if (variant === "outline") return pressed ? theme.surface : colorBase;
+    return colorBase;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
@@ -127,7 +158,7 @@ var Button = react.forwardRef(function Button2({
           reactNative.ActivityIndicator,
           {
             size: "small",
-            color: variant === "solid" ? theme.surface : theme.primary
+            color: variant === "solid" ? theme.surface : colorBase
           }
         ),
         !loading && leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: leftIcon }),
@@ -143,6 +174,15 @@ var Button = react.forwardRef(function Button2({
     }
   );
 });
+var PRESET_COLORS2 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor2 = (c) => PRESET_COLORS2.has(c);
 var IconButton = react.forwardRef(function IconButton2({
   variant = "ghost",
   size = "md",
@@ -172,14 +212,17 @@ var IconButton = react.forwardRef(function IconButton2({
     xl: 24,
     full: 9999
   };
-  const colorTokens = {
+  const presetTokens = {
     primary: { main: theme.primary, hover: theme.primaryHover },
     secondary: { main: theme.secondary, hover: theme.secondaryHover },
     danger: { main: theme.danger, hover: theme.dangerHover },
     warning: { main: theme.warning, hover: theme.warning },
-    success: { main: theme.success, hover: theme.success }
+    success: { main: theme.success, hover: theme.success },
+    info: { main: theme.info, hover: theme.infoHover }
   };
-  const { main, hover } = colorTokens[color];
+  const preset = isPresetColor2(color);
+  const main = preset ? presetTokens[color].main : color;
+  const hover = preset ? presetTokens[color].hover : color;
   const boxSize = sizePxMap[size];
   const baseStyle = {
     width: boxSize,
@@ -261,7 +304,8 @@ var TextInput = react.forwardRef(function TextInput2({
     xl: theme.radiusXl,
     full: 9999
   };
-  const borderColor = status === "error" ? theme.danger : focused ? theme.primary : theme.border;
+  const hasError = status === "error" || !!helperText;
+  const borderColor = hasError ? theme.danger : focused ? theme.primary : theme.border;
   const containerStyle = {
     height: heightMap[size],
     paddingHorizontal: paddingMap[size],
@@ -314,7 +358,7 @@ var TextInput = react.forwardRef(function TextInput2({
       {
         style: {
           fontSize: 12,
-          color: status === "error" ? theme.danger : theme.textMuted
+          color: hasError ? theme.danger : theme.textMuted
         },
         children: helperText
       }
@@ -551,6 +595,118 @@ var Text5 = react.forwardRef(function Text6({ variant = "body", color = "default
   };
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref, style: [resolvedStyle, style], ...rest, children });
 });
+var PRESET_COLORS3 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor3 = (c) => PRESET_COLORS3.has(c);
+function hexAlpha(hex, alpha) {
+  return `${hex}${alpha}`;
+}
+var Tag = react.forwardRef(function Tag2({
+  color = "primary",
+  size = "md",
+  active = false,
+  disabled = false,
+  title,
+  leftIcon,
+  rightIcon,
+  style,
+  accessibilityLabel,
+  ...rest
+}, ref) {
+  const theme = useRehagroTheme();
+  const clickable = !!rest.onPress && !disabled;
+  const presetTokens = {
+    primary: { main: theme.primary, hover: theme.primaryHover },
+    secondary: { main: theme.secondary, hover: theme.secondaryHover },
+    danger: { main: theme.danger, hover: theme.dangerHover },
+    warning: { main: theme.warning, hover: theme.warning },
+    success: { main: theme.success, hover: theme.success },
+    info: { main: theme.info, hover: theme.infoHover }
+  };
+  const preset = isPresetColor3(color);
+  const mainColor = preset ? presetTokens[color].main : color;
+  const hoverColor = preset ? presetTokens[color].hover : color;
+  const sizeStyleMap = {
+    sm: { paddingHorizontal: 8, paddingVertical: 2, gap: 4 },
+    md: { paddingHorizontal: 10, paddingVertical: 4, gap: 6 },
+    lg: { paddingHorizontal: 12, paddingVertical: 6, gap: 6 }
+  };
+  const fontSizeMap = {
+    sm: 11,
+    md: 12,
+    lg: 13
+  };
+  const baseStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderRadius: 9999,
+    borderWidth: 1,
+    opacity: disabled ? 0.5 : 1,
+    ...sizeStyleMap[size]
+  };
+  function containerStyle(pressed) {
+    const resolvedColor = pressed && clickable ? hoverColor : mainColor;
+    if (active) {
+      return {
+        backgroundColor: resolvedColor,
+        borderColor: resolvedColor
+      };
+    }
+    const bg = pressed && clickable ? hexAlpha(mainColor, "33") : hexAlpha(mainColor, "1a");
+    const border = hexAlpha(mainColor, "4d");
+    return { backgroundColor: bg, borderColor: border };
+  }
+  function resolvedTextColor(pressed) {
+    if (active) return theme.surface;
+    return pressed && clickable ? hoverColor : mainColor;
+  }
+  const textStyle = (pressed) => ({
+    color: resolvedTextColor(pressed),
+    fontSize: fontSizeMap[size],
+    fontWeight: "500"
+  });
+  if (!clickable) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ref,
+        accessibilityRole: "text",
+        accessibilityLabel: accessibilityLabel ?? title,
+        accessibilityState: { disabled },
+        style: [baseStyle, containerStyle(false), style],
+        children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: leftIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle(false), children: title }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: rightIcon })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityState: { disabled, selected: active },
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: ({ pressed }) => [baseStyle, containerStyle(pressed), style],
+      ...rest,
+      children: ({ pressed }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle(pressed), children: title }),
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: rightIcon })
+      ] })
+    }
+  );
+});
 
 exports.ActivityIndicator = ActivityIndicator3;
 exports.Avatar = Avatar;
@@ -558,6 +714,7 @@ exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.IconButton = IconButton;
 exports.RehagroNativeProvider = RehagroNativeProvider;
+exports.Tag = Tag;
 exports.Text = Text5;
 exports.TextInput = TextInput;
 exports.useRehagroTheme = useRehagroTheme;