@rehagro/ui 1.0.17 → 1.0.18

package/dist/native.d.mts

@@ -61,7 +61,7 @@ type RehagroNativeProviderProps = {
 
 declare function RehagroNativeProvider({ theme, children }: RehagroNativeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare function useRehagroTheme(): Required<RehagroNativeTheme>;
+declare function useRehagroTheme(): RehagroNativeTheme;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";

package/dist/native.d.ts

@@ -61,7 +61,7 @@ type RehagroNativeProviderProps = {
 
 declare function RehagroNativeProvider({ theme, children }: RehagroNativeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare function useRehagroTheme(): Required<RehagroNativeTheme>;
+declare function useRehagroTheme(): RehagroNativeTheme;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";

package/dist/native.js

@@ -9,11 +9,8 @@ var reactNative = require('react-native');
 // src/provider/theme.native.ts
 var DEFAULT_NATIVE_THEME = {
   primary: "#16a34a",
-  primaryHover: "#15803d",
   secondary: "#6b7280",
-  secondaryHover: "#4b5563",
   danger: "#dc2626",
-  dangerHover: "#b91c1c",
   warning: "#d97706",
   success: "#16a34a",
   info: "#0284c7",
@@ -66,6 +63,7 @@ function RehagroNativeProvider({ theme, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(RehagroNativeContext.Provider, { value: resolvedTheme, children });
 }
 function darkenColor(hex, factor = 0.2) {
+  if (!hex.startsWith("#")) return hex;
   const clean = hex.replace("#", "");
   const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
   const num = parseInt(full, 16);
@@ -103,20 +101,20 @@ var Button = react.forwardRef(function Button2({
   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
+    primary: theme.primary ?? "#15607A",
+    secondary: theme.secondary ?? "#718D44",
+    danger: theme.danger ?? "#dc2626",
+    warning: theme.warning ?? "#d97706",
+    success: theme.success ?? "#16a34a",
+    info: theme.info ?? "#0284c7"
   };
   const presetHover = {
-    primary: theme.primaryHover,
-    secondary: theme.secondaryHover,
-    danger: theme.dangerHover,
-    warning: theme.warning,
-    success: theme.success,
-    info: theme.infoHover
+    primary: theme.primaryHover ?? darkenColor(presetBase.primary),
+    secondary: theme.secondaryHover ?? darkenColor(presetBase.secondary),
+    danger: theme.dangerHover ?? darkenColor(presetBase.danger),
+    warning: theme.warning ?? darkenColor(presetBase.warning),
+    success: theme.success ?? darkenColor(presetBase.success),
+    info: theme.infoHover ?? darkenColor(presetBase.info)
   };
   const colorBase = preset ? presetBase[color] : color;
   const colorHover = preset ? presetHover[color] : darkenColor(color);
@@ -166,8 +164,8 @@ var Button = react.forwardRef(function Button2({
     return { borderColor: "transparent", backgroundColor: "transparent" };
   };
   const textColor = (pressed) => {
-    if (variant === "solid") return theme.surface;
-    if (variant === "outline") return pressed ? theme.surface : colorBase;
+    if (variant === "solid") return theme.surface ?? "#ffffff";
+    if (variant === "outline") return pressed ? theme.surface ?? "#ffffff" : colorBase;
     return colorBase;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -178,6 +176,7 @@ var Button = react.forwardRef(function Button2({
       accessibilityRole: "button",
       accessibilityState: { disabled: !!isDisabled, busy: loading },
       accessibilityLabel: accessibilityLabel ?? (typeof children === "string" ? children : void 0),
+      android_ripple: { color: pressedColor ?? colorHover, borderless: false },
       style: ({ pressed }) => [baseStyle, variantStyle(pressed), style],
       ...rest,
       children: ({ pressed }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -185,7 +184,7 @@ var Button = react.forwardRef(function Button2({
           reactNative.ActivityIndicator,
           {
             size: "small",
-            color: variant === "solid" ? theme.surface : colorBase
+            color: variant === "solid" ? theme.surface ?? "#ffffff" : colorBase
           }
         ),
         !loading && leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: leftIcon }),
@@ -201,6 +200,16 @@ var Button = react.forwardRef(function Button2({
     }
   );
 });
+function darkenColor2(hex, factor = 0.2) {
+  if (!hex.startsWith("#")) return hex;
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const num = parseInt(full, 16);
+  const r = Math.max(0, Math.round((num >> 16 & 255) * (1 - factor)));
+  const g = Math.max(0, Math.round((num >> 8 & 255) * (1 - factor)));
+  const b = Math.max(0, Math.round((num & 255) * (1 - factor)));
+  return `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
 var PRESET_COLORS2 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
@@ -240,16 +249,16 @@ var IconButton = react.forwardRef(function IconButton2({
     full: 9999
   };
   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 }
+    primary: { main: theme.primary ?? "#15607A", hover: theme.primaryHover ?? darkenColor2(theme.primary ?? "#15607A") },
+    secondary: { main: theme.secondary ?? "#718D44", hover: theme.secondaryHover ?? darkenColor2(theme.secondary ?? "#718D44") },
+    danger: { main: theme.danger ?? "#dc2626", hover: theme.dangerHover ?? darkenColor2(theme.danger ?? "#dc2626") },
+    warning: { main: theme.warning ?? "#d97706", hover: darkenColor2(theme.warning ?? "#d97706") },
+    success: { main: theme.success ?? "#16a34a", hover: darkenColor2(theme.success ?? "#16a34a") },
+    info: { main: theme.info ?? "#0284c7", hover: theme.infoHover ?? darkenColor2(theme.info ?? "#0284c7") }
   };
   const preset = isPresetColor2(color);
   const main = preset ? presetTokens[color].main : color;
-  const hover = preset ? presetTokens[color].hover : color;
+  const hover = preset ? presetTokens[color].hover : darkenColor2(color);
   const boxSize = sizePxMap[size];
   const baseStyle = {
     width: boxSize,
@@ -270,8 +279,8 @@ var IconButton = react.forwardRef(function IconButton2({
     return { borderColor: "transparent", backgroundColor: pressed ? `${main}1a` : "transparent" };
   };
   const iconColor = (pressed) => {
-    if (variant === "solid") return theme.surface;
-    if (variant === "outline") return pressed ? theme.surface : main;
+    if (variant === "solid") return theme.surface ?? "#ffffff";
+    if (variant === "outline") return pressed ? theme.surface ?? "#ffffff" : main;
     return main;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -282,6 +291,7 @@ var IconButton = react.forwardRef(function IconButton2({
       accessibilityRole: "button",
       accessibilityState: { disabled: !!isDisabled, busy: loading },
       accessibilityLabel,
+      android_ripple: { color: hover, borderless: false },
       style: ({ pressed }) => [baseStyle, variantStyle(pressed), style],
       ...rest,
       children: ({ pressed }) => loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: variant === "solid" ? theme.surface : main }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { tintColor: iconColor(pressed) }, children })
@@ -307,9 +317,9 @@ var TextInput = react.forwardRef(function TextInput2({
   const [focused, setFocused] = react.useState(false);
   const isDisabled = editable === false;
   const heightMap = {
-    sm: theme.inputHeightSm,
-    md: theme.inputHeightMd,
-    lg: theme.inputHeightLg
+    sm: theme.inputHeightSm ?? 36,
+    md: theme.inputHeightMd ?? 44,
+    lg: theme.inputHeightLg ?? 52
   };
   const paddingMap2 = {
     sm: 12,
@@ -323,12 +333,12 @@ var TextInput = react.forwardRef(function TextInput2({
   };
   const radiusMap2 = {
     none: 0,
-    xxs: theme.radiusXxs,
-    xs: theme.radiusXs,
-    sm: theme.radiusSm,
-    md: theme.radiusMd,
-    lg: theme.radiusLg,
-    xl: theme.radiusXl,
+    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 hasError = status === "error" || !!helperText;
@@ -352,7 +362,7 @@ var TextInput = react.forwardRef(function TextInput2({
       subtitle && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14, color: theme.textMuted }, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [containerStyle, style], children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, style: { width: fontSizeMap[size], height: fontSizeMap[size] }, children: leftIcon }),
+      leftIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: leftIcon }),
       /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.TextInput,
         {
@@ -378,7 +388,7 @@ var TextInput = react.forwardRef(function TextInput2({
           ...rest
         }
       ),
-      rightIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, style: { width: fontSizeMap[size], height: fontSizeMap[size] }, children: rightIcon })
+      rightIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, children: rightIcon })
     ] }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Text,
@@ -492,7 +502,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
       ],
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: boxStyle, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, { size: iconSize, color: theme.surface }) : isChecked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: iconSize, color: theme.surface }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: boxStyle, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, { size: iconSize, color: theme.surface ?? "#ffffff" }) : isChecked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: iconSize, color: theme.surface ?? "#ffffff" }) : null }),
         label && /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Text,
           {
@@ -652,32 +662,32 @@ var sizeWeights = {
 var Text5 = react.forwardRef(function Text6({ size = "sm", color = "default", bold = false, style, children, ...rest }, ref) {
   const theme = useRehagroTheme();
   const colorMap = {
-    default: theme.text,
-    muted: theme.textMuted,
-    primary: theme.primary,
-    danger: theme.danger,
-    success: theme.success,
-    warning: theme.warning
+    default: theme.text ?? "#111827",
+    muted: theme.textMuted ?? "#6b7280",
+    primary: theme.primary ?? "#16a34a",
+    danger: theme.danger ?? "#dc2626",
+    success: theme.success ?? "#16a34a",
+    warning: theme.warning ?? "#d97706"
   };
   const isDisplaySize = size === "lg" || size === "xl" || size === "xxl" || size === "xxl2";
   const fontFamily = isDisplaySize ? theme.fontFamilyDisplay : theme.fontFamilyBody;
   const fontSizeMap = {
-    xs: theme.fontSizeXs,
-    sm: theme.fontSizeSm,
-    md: theme.fontSizeMd,
-    lg: theme.fontSizeLg,
-    xl: theme.fontSizeXl,
-    xxl: theme.fontSizeXxl,
-    xxl2: theme.fontSizeXxl2
+    xs: theme.fontSizeXs ?? 12,
+    sm: theme.fontSizeSm ?? 14,
+    md: theme.fontSizeMd ?? 16,
+    lg: theme.fontSizeLg ?? 18,
+    xl: theme.fontSizeXl ?? 20,
+    xxl: theme.fontSizeXxl ?? 24,
+    xxl2: theme.fontSizeXxl2 ?? 32
   };
   const lineHeightMap = {
-    xs: theme.lineHeightXs,
-    sm: theme.lineHeightSm,
-    md: theme.lineHeightMd,
-    lg: theme.lineHeightLg,
-    xl: theme.lineHeightXl,
-    xxl: theme.lineHeightXxl,
-    xxl2: theme.lineHeightXxl2
+    xs: theme.lineHeightXs ?? 16,
+    sm: theme.lineHeightSm ?? 20,
+    md: theme.lineHeightMd ?? 24,
+    lg: theme.lineHeightLg ?? 26,
+    xl: theme.lineHeightXl ?? 28,
+    xxl: theme.lineHeightXxl ?? 32,
+    xxl2: theme.lineHeightXxl2 ?? 40
   };
   const resolvedStyle = {
     fontSize: fontSizeMap[size],
@@ -716,12 +726,12 @@ var Tag = react.forwardRef(function Tag2({
   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 }
+    primary: { main: theme.primary ?? "#16a34a", hover: theme.primaryHover ?? "#15803d" },
+    secondary: { main: theme.secondary ?? "#6b7280", hover: theme.secondaryHover ?? "#4b5563" },
+    danger: { main: theme.danger ?? "#dc2626", hover: theme.dangerHover ?? "#b91c1c" },
+    warning: { main: theme.warning ?? "#d97706", hover: theme.warning ?? "#d97706" },
+    success: { main: theme.success ?? "#16a34a", hover: theme.success ?? "#16a34a" },
+    info: { main: theme.info ?? "#0284c7", hover: theme.infoHover ?? "#0369a1" }
   };
   const preset = isPresetColor3(color);
   const mainColor = preset ? presetTokens[color].main : color;
@@ -758,7 +768,7 @@ var Tag = react.forwardRef(function Tag2({
     return { backgroundColor: bg, borderColor: border };
   }
   function resolvedTextColor(pressed) {
-    if (active) return theme.surface;
+    if (active) return theme.surface ?? "#ffffff";
     return pressed && clickable ? hoverColor : mainColor;
   }
   const textStyle = (pressed) => ({