@rehagro/ui 1.0.40 → 1.0.41

package/dist/native.d.mts

@@ -563,4 +563,27 @@ declare const RadioOption: React__default.ForwardRefExoticComponent<Omit<Pressab
 } & React__default.RefAttributes<View>>;
 declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & 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, Radio, type RadioColor, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, 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 };
+type ProgressBarVariant = "inline" | "stacked";
+type ProgressBarThickness = "xs" | "sm" | "md" | "lg" | "xl";
+type ProgressBarColor = "primary" | "secondary" | "danger" | "warning" | "success" | "info";
+type ProgressBarProps = {
+    /** Progress value from 0 to 100 */
+    value: number;
+    /** Label text (only shown in stacked variant) */
+    label?: string;
+    /** Layout variant */
+    variant?: ProgressBarVariant;
+    /** Bar thickness — preset token or custom value in dp */
+    thickness?: ProgressBarThickness | number;
+    /** Whether to show percentage text */
+    showPercentage?: boolean;
+    /** Bar color — preset name or custom color string */
+    color?: ProgressBarColor | (string & {});
+    /** Custom background color */
+    bgColor?: string;
+    /** Custom style for the wrapper */
+    style?: StyleProp<ViewStyle>;
+};
+declare const ProgressBar: React__default.ForwardRefExoticComponent<ProgressBarProps & 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, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarThickness, type ProgressBarVariant, Radio, type RadioColor, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, 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

@@ -563,4 +563,27 @@ declare const RadioOption: React__default.ForwardRefExoticComponent<Omit<Pressab
 } & React__default.RefAttributes<View>>;
 declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & 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, Radio, type RadioColor, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, 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 };
+type ProgressBarVariant = "inline" | "stacked";
+type ProgressBarThickness = "xs" | "sm" | "md" | "lg" | "xl";
+type ProgressBarColor = "primary" | "secondary" | "danger" | "warning" | "success" | "info";
+type ProgressBarProps = {
+    /** Progress value from 0 to 100 */
+    value: number;
+    /** Label text (only shown in stacked variant) */
+    label?: string;
+    /** Layout variant */
+    variant?: ProgressBarVariant;
+    /** Bar thickness — preset token or custom value in dp */
+    thickness?: ProgressBarThickness | number;
+    /** Whether to show percentage text */
+    showPercentage?: boolean;
+    /** Bar color — preset name or custom color string */
+    color?: ProgressBarColor | (string & {});
+    /** Custom background color */
+    bgColor?: string;
+    /** Custom style for the wrapper */
+    style?: StyleProp<ViewStyle>;
+};
+declare const ProgressBar: React__default.ForwardRefExoticComponent<ProgressBarProps & 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, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarThickness, type ProgressBarVariant, Radio, type RadioColor, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, 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

@@ -1500,6 +1500,123 @@ var RadioGroup = react.forwardRef(function RadioGroup2({
     }
   );
 });
+var THICKNESS_MAP = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
+};
+var PRESET_COLORS5 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
+var resolveColor2 = (color, theme) => {
+  if (isPresetColor5(color)) {
+    return theme[color] ?? "#538CC6";
+  }
+  return color;
+};
+var resolveThickness = (thickness) => typeof thickness === "number" ? thickness : THICKNESS_MAP[thickness];
+var ProgressBar = react.forwardRef(function ProgressBar2({
+  value,
+  label,
+  variant = "inline",
+  thickness = "sm",
+  showPercentage = true,
+  color = "primary",
+  bgColor,
+  style
+}, ref) {
+  const theme = useRehagroTheme();
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const heightPx = resolveThickness(thickness);
+  const resolvedBarColor = resolveColor2(color, theme);
+  const resolvedBgColor = bgColor ?? theme.border ?? "#E5E7EB";
+  const trackStyle = {
+    width: "100%",
+    height: heightPx,
+    borderRadius: 40,
+    overflow: "hidden",
+    backgroundColor: resolvedBgColor
+  };
+  const fillStyle = {
+    width: `${clampedValue}%`,
+    height: "100%",
+    borderRadius: 40,
+    backgroundColor: resolvedBarColor
+  };
+  const percentageTextStyle = {
+    fontSize: theme.fontSizeSm ?? 14,
+    color: theme.textMuted ?? "#9CA3AF",
+    ...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
+  };
+  if (variant === "stacked") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ref,
+        accessibilityRole: "progressbar",
+        accessibilityValue: { now: clampedValue, min: 0, max: 100 },
+        style: [{ flexDirection: "column", alignItems: "stretch", gap: 8 }, style],
+        children: [
+          (label || showPercentage) && /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.View,
+            {
+              style: {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                width: "100%"
+              },
+              children: [
+                label ? /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Text,
+                  {
+                    style: {
+                      flex: 1,
+                      fontSize: theme.fontSizeMd ?? 16,
+                      fontWeight: "700",
+                      color: theme.text ?? "#374151",
+                      ...theme.fontFamilyDisplay ? { fontFamily: theme.fontFamilyDisplay } : {}
+                    },
+                    children: label
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flex: 1 } }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [percentageTextStyle, { textAlign: "right" }], children: [
+                  clampedValue,
+                  "%"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fillStyle }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ref,
+      accessibilityRole: "progressbar",
+      accessibilityValue: { now: clampedValue, min: 0, max: 100 },
+      style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [trackStyle, { flex: 1, width: void 0 }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fillStyle }) }),
+        showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [percentageTextStyle, { minWidth: 40, textAlign: "right" }], children: [
+          clampedValue,
+          "%"
+        ] })
+      ]
+    }
+  );
+});
 
 exports.ActivityIndicator = ActivityIndicator3;
 exports.Avatar = Avatar;
@@ -1510,6 +1627,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.IconButton = IconButton;
+exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.RadioOption = RadioOption;