@medway-ui/native 1.0.4 → 1.1.2

package/src/components/Checkbox.tsx

@@ -1,16 +1,21 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
+import { type ViewStyle } from "react-native";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
-import { Check, RemoveMinus } from "@medway-ui/icons/native";
-import { cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { Check, RemoveMinus } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
-interface CheckboxProps extends Omit<CheckboxPrimitive.RootProps, "checked" | "disabled" | "onCheckedChange"> {
+interface CheckboxProps
+  extends Omit<
+      CheckboxPrimitive.RootProps,
+      "checked" | "onCheckedChange" | "children"
+    >,
+    Omit<VariantProps<typeof checkboxVariants>, "checked" | "disabled"> {
+  children?: ReactNode;
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  size?: "sm" | "md" | "lg";
-  variant?: "regular";
   uncheckIcon?: boolean;
 }
 
@@ -20,6 +25,12 @@ const ICON_SIZES: Record<"sm" | "md" | "lg", number> = {
   lg: 20,
 };
 
+const CHECKBOX_DIMENSIONS: Record<"sm" | "md" | "lg", number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
 const checkboxVariants = cva(
   "items-center justify-center rounded-sm border-2 shrink-0",
   {
@@ -59,17 +70,32 @@ function Checkbox({
   defaultChecked = false,
   onCheckedChange,
   disabled,
+  style,
+  children,
   ...props
 }: CheckboxProps) {
   const resolvedSize = size ?? "md";
   const iconSize = ICON_SIZES[resolvedSize];
+  const dimension = CHECKBOX_DIMENSIONS[resolvedSize];
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const isControlled = checked !== undefined;
   const isChecked = isControlled ? checked : internalChecked;
+  const iconColor = useThemeColor("primary-foreground-onfill");
+
+  const handleCheckedChange = (nextChecked: boolean) => {
+    if (!isControlled) setInternalChecked(nextChecked);
+    onCheckedChange?.(nextChecked);
+  };
 
-  const handleCheckedChange = (val: boolean) => {
-    if (!isControlled) setInternalChecked(val);
-    onCheckedChange?.(val);
+  const rootStyle: ViewStyle = {
+    width: dimension,
+    height: dimension,
+    minWidth: dimension,
+    minHeight: dimension,
+    borderWidth: 2,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
   };
 
   return (
@@ -77,27 +103,29 @@ function Checkbox({
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
+      style={(state) => [
+        rootStyle,
+        typeof style === "function" ? style(state) : style,
+      ]}
       className={cn(
-        checkboxVariants({ size, variant, checked: isChecked, disabled: disabled ?? false }),
+        checkboxVariants({
+          size,
+          variant,
+          checked: isChecked,
+          disabled: disabled ?? false,
+        }),
         className
       )}
       {...props}
     >
       <CheckboxPrimitive.Indicator className="items-center justify-center">
-        {uncheckIcon ? (
-          <RemoveMinus
-            size={iconSize}
-            strokeWidth={2.6}
-            className="text-primary-foreground-onfill"
-          />
+        {iconColor && (uncheckIcon ? (
+          <RemoveMinus width={iconSize} height={iconSize} strokeWidth={2.6} color={iconColor} />
         ) : (
-          <Check
-            size={iconSize}
-            strokeWidth={2.6}
-            className="text-primary-foreground-onfill"
-          />
-        )}
+          <Check width={iconSize} height={iconSize} strokeWidth={2.6} color={iconColor} />
+        ))}
       </CheckboxPrimitive.Indicator>
+      {children}
     </CheckboxPrimitive.Root>
   );
 }

package/src/components/Dialog.tsx

@@ -2,6 +2,7 @@ import { type ReactNode, isValidElement, cloneElement, type ReactElement } from
 import { View, Text, ScrollView, type ViewProps } from "react-native";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import { CloseMd } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/Separator";
 
@@ -55,26 +56,31 @@ function DialogContainer({
   showCloseButton = true,
   ...props
 }: DialogContainerProps) {
+  const closeIconColor = useThemeColor("gray-foreground");
+
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={cn("absolute inset-0 items-center justify-center bg-black/50", overlayClassName)}
+        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+      />
+      <DialogPrimitive.Content
+        className="absolute inset-0 items-center justify-center px-4"
+        {...props}
       >
-        <DialogPrimitive.Content
+        <View
           className={cn(
-            "relative flex-col max-h-[90%] w-full max-w-[calc(100%-2rem)] rounded-xl bg-background shadow-lg overflow-hidden",
+            "relative flex-col max-h-[90%] w-full rounded-xl bg-background shadow-lg overflow-hidden",
             className
           )}
-          {...props}
         >
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
-              <CloseMd size={16} className="text-gray-foreground" />
+              {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
             </DialogPrimitive.Close>
           )}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Overlay>
+        </View>
+      </DialogPrimitive.Content>
     </DialogPrimitive.Portal>
   );
 }

package/src/components/EmptyState.tsx

@@ -0,0 +1,57 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import {
+  Alert,
+  AlertActions,
+  AlertContainer,
+  AlertContent,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "@/components/Alert";
+import { cn } from "@/lib/utils";
+
+interface EmptyStateProps extends ViewProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  variant?: "regular" | "emphasis" | "success" | "warning" | "error";
+}
+
+function EmptyState({
+  className,
+  icon,
+  title,
+  description,
+  action,
+  variant = "regular",
+  ...props
+}: EmptyStateProps) {
+  return (
+    <View
+      className={cn(
+        "items-center gap-6 rounded-lg border border-gray-stroke-muted bg-surface-card p-8",
+        className
+      )}
+      {...props}
+    >
+      <Alert variant={variant} className="border-0 bg-transparent p-0">
+        <AlertContainer>
+          {icon ? <AlertIcon icon={icon} /> : null}
+          <AlertContent>
+            <AlertTitle>{title}</AlertTitle>
+            {description ? (
+              <AlertDescription>{description}</AlertDescription>
+            ) : null}
+          </AlertContent>
+        </AlertContainer>
+        {action ? <AlertActions>{action}</AlertActions> : null}
+      </Alert>
+    </View>
+  );
+}
+
+export { EmptyState };
+export type { EmptyStateProps };

package/src/components/FallbackImage.tsx

@@ -0,0 +1,58 @@
+import Svg, {
+  Defs,
+  RadialGradient,
+  Stop,
+  Rect,
+  Path,
+  G,
+  type SvgProps,
+} from "react-native-svg";
+
+import { cn } from "@/lib/utils";
+
+const GRADIENT_ID = "medway-fallback-gradient";
+
+const LOGO_PATH =
+  "M104.229 3.90299H107.408C107.836 3.90299 108.122 4.34302 107.948 4.73464L100.413 21.6491C100.318 21.8625 100.106 22 99.8724 22H96.6935C96.2653 22 95.9791 21.56 96.153 21.1684L97.89 17.2687L92.3798 4.90074C92.1706 4.43102 92.5141 3.90189 93.0281 3.90189H95.8779C96.1585 3.90189 96.4128 4.0669 96.5262 4.32322L100.09 12.325L103.686 4.25391C103.781 4.0405 103.993 3.90299 104.227 3.90299H104.229ZM91.9043 11.0005V17.3875C91.9043 17.7791 91.5862 18.097 91.1943 18.097H88.9455C88.5537 18.097 88.2356 17.7791 88.2356 17.3875V17.2841C87.1547 17.8957 85.8999 18.2367 84.5647 18.2147C80.7496 18.152 77.6159 15.0928 77.4706 11.2822C77.3132 7.16906 80.6043 3.78419 84.6847 3.78419C88.765 3.78419 91.9043 7.01505 91.9043 10.9994V11.0005ZM88.0573 11.0005C88.0573 9.13926 86.5471 7.62888 84.6836 7.62888C82.8201 7.62888 81.3099 9.13816 81.3099 11.0005C81.3099 12.8629 82.8201 14.3722 84.6836 14.3722C86.5471 14.3722 88.0573 12.8629 88.0573 11.0005ZM75.4519 12.1578V4.61363C75.4519 4.22201 75.1338 3.9041 74.7419 3.9041H72.3159C71.9241 3.9041 71.606 4.22201 71.606 4.61363V12.2282C71.606 13.4273 70.6153 14.3997 69.4089 14.3711C68.2378 14.3436 67.3154 13.358 67.3154 12.1875V4.61363C67.3154 4.22201 66.9973 3.9041 66.6054 3.9041H64.1794C63.7876 3.9041 63.4695 4.22201 63.4695 4.61363V12.2282C63.4695 13.4273 62.4788 14.3997 61.2724 14.3711C60.1013 14.3436 59.1789 13.358 59.1789 12.1875V4.61363C59.1789 4.22201 58.8608 3.9041 58.4689 3.9041H56.0429C55.6511 3.9041 55.333 4.22201 55.333 4.61363V12.1578C55.333 15.4778 58.0507 18.2422 61.3726 18.2158C62.9235 18.2037 64.3346 17.5998 65.3935 16.6196C66.4524 17.5998 67.8635 18.2037 69.4144 18.2158C72.7364 18.2422 75.4541 15.4767 75.4541 12.1578H75.4519ZM49.7094 0H51.9582C52.35 0 52.6682 0.317916 52.6682 0.709535V17.3875C52.6682 17.7791 52.35 18.097 51.9582 18.097H49.7094C49.3176 18.097 48.9995 17.7791 48.9995 17.3875V17.2841C47.9505 17.877 46.7397 18.2158 45.4486 18.2158C41.3671 18.2158 38.0771 14.832 38.2345 10.7178C38.3798 6.90834 41.5135 3.84799 45.3286 3.78529C46.6648 3.76329 47.9186 4.1043 48.9995 4.71594V0.709535C48.9995 0.317916 49.3176 0 49.7094 0ZM48.8223 11.0005C48.8223 9.13926 47.3121 7.62888 45.4486 7.62888C43.585 7.62888 42.0749 9.13816 42.0749 11.0005C42.0749 12.8629 43.585 14.3722 45.4486 14.3722C47.3121 14.3722 48.8223 12.8629 48.8223 11.0005ZM26.4139 12.2425C26.1508 12.2425 25.9769 12.5186 26.0947 12.7529C26.6979 13.9608 27.9031 14.7847 29.2945 14.7847C30.2576 14.7847 31.1326 14.3887 31.7799 13.7452C31.9109 13.6143 32.0903 13.5428 32.2752 13.5428H34.8806C35.4265 13.5428 35.7689 14.1324 35.497 14.6054C34.2587 16.7626 31.945 18.2147 29.2945 18.2147C25.3396 18.2147 22.1343 14.9838 22.1343 10.9994C22.1343 7.01505 25.3407 3.78419 29.2945 3.78419C33.2482 3.78419 36.4546 7.01505 36.4546 10.9994C36.4546 11.1997 36.4469 11.3966 36.4304 11.5924C36.4007 11.9598 36.0914 12.2414 35.7226 12.2414H26.4139V12.2425ZM26.2356 8.98855C26.0947 9.22286 26.2686 9.52208 26.5427 9.52208H32.0451C32.3192 9.52208 32.4931 9.22396 32.3522 8.98855C31.7138 7.9237 30.5823 7.21526 29.2945 7.21526C28.0066 7.21526 26.8751 7.9237 26.2367 8.98855H26.2356ZM14.0815 3.78529C12.5306 3.79739 11.1194 4.40132 10.0605 5.38147C9.00165 4.40132 7.59054 3.79739 6.03963 3.78529C2.71767 3.75889 0 6.52443 0 9.84329V17.3875C0 17.7791 0.318107 18.097 0.709962 18.097H3.13594C3.52779 18.097 3.8459 17.7791 3.8459 17.3875V9.81359C3.8459 8.64313 4.7683 7.65748 5.93946 7.62998C7.14585 7.60138 8.13649 8.57383 8.13649 9.77289V17.3875C8.13649 17.7791 8.4546 18.097 8.84645 18.097H11.2724C11.6643 18.097 11.9824 17.7791 11.9824 17.3875V9.81359C11.9824 8.64313 12.9048 7.65748 14.076 7.62998C15.2823 7.60138 16.273 8.57383 16.273 9.77289V17.3875C16.273 17.7791 16.5911 18.097 16.9829 18.097H19.4089C19.8008 18.097 20.1189 17.7791 20.1189 17.3875V9.84329C20.1189 6.52333 17.4012 3.75889 14.0793 3.78529H14.0815Z";
+
+interface FallbackImageProps extends SvgProps {
+  label?: string;
+  className?: string;
+}
+
+function FallbackImage({
+  className,
+  label = "Medway",
+  ...props
+}: FallbackImageProps) {
+  return (
+    <Svg
+      accessibilityRole="image"
+      accessibilityLabel={label}
+      viewBox="0 0 320 167"
+      preserveAspectRatio="xMidYMid slice"
+      className={cn("size-full", className)}
+      {...props}
+    >
+      <Defs>
+        <RadialGradient
+          id={GRADIENT_ID}
+          cx="50%"
+          cy="42%"
+          r="78%"
+        >
+          <Stop offset="0%" stopColor="#15397A" />
+          <Stop offset="55%" stopColor="#06245E" />
+          <Stop offset="100%" stopColor="#021536" />
+        </RadialGradient>
+      </Defs>
+      <Rect width="320" height="167" fill={`url(#${GRADIENT_ID})`} />
+      <G transform="translate(85.5 62.7) scale(1.38)" fill="#FFFFFF">
+        <Path d={LOGO_PATH} />
+      </G>
+    </Svg>
+  );
+}
+
+export { FallbackImage };
+export type { FallbackImageProps };

package/src/components/Input.tsx

@@ -32,11 +32,17 @@ import {
   Show,
   TriangleWarning,
 } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 export type InputType = "text" | "email" | "numeric" | "password";
 
-type IconElement = ReactElement<{ size?: number; strokeWidth?: number }>;
+type IconElement = ReactElement<{
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+}>;
 
 export interface InputProps
   extends Omit<TextInputProps, "size">,
@@ -193,11 +199,17 @@ function InputEndIcon({ className, ...props }: ViewProps) {
 }
 
 function applyInputIconSize(
-  icon: ReactElement<{ size?: number; strokeWidth?: number }>,
-  size: VariantProps<typeof inputVariants>["size"] = "lg"
-): ReactElement {
+  icon: IconElement,
+  size: VariantProps<typeof inputVariants>["size"] = "lg",
+  color?: string,
+): IconElement {
   const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
-  return cloneElement(icon, { size: iconSize, strokeWidth: INPUT_ICON_STROKE_WIDTH });
+  return cloneElement(icon, {
+    width: iconSize,
+    height: iconSize,
+    color,
+    strokeWidth: INPUT_ICON_STROKE_WIDTH,
+  });
 }
 
 function InputPassword({ className, size = "lg", invalid = false, label, ...props }: InputPasswordProps) {
@@ -205,11 +217,20 @@ function InputPassword({ className, size = "lg", invalid = false, label, ...prop
   const [focused, setFocused] = useState(false);
   const hasValue = Boolean(props.value || props.defaultValue);
   const isFloated = focused || hasValue;
+  const iconColor = useThemeColor("gray-foreground");
+  const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
 
   return (
     <InputAdornment>
       <InputStartIcon>
-        {applyInputIconSize(<Lock />, size)}
+        {iconColor && (
+          <Lock
+            width={iconSize}
+            height={iconSize}
+            strokeWidth={INPUT_ICON_STROKE_WIDTH}
+            color={iconColor}
+          />
+        )}
       </InputStartIcon>
       <View className="relative flex-1">
         {label && <InputLabel floated={isFloated} disabled={props.editable === false}>{label}</InputLabel>}
@@ -232,7 +253,11 @@ function InputPassword({ className, size = "lg", invalid = false, label, ...prop
           disabled={props.editable === false}
           accessibilityLabel={visible ? "Hide password" : "Show password"}
         >
-          {applyInputIconSize(visible ? <Hide /> : <Show />, size)}
+          {iconColor && (visible ? (
+            <Hide width={iconSize} height={iconSize} strokeWidth={INPUT_ICON_STROKE_WIDTH} color={iconColor} />
+          ) : (
+            <Show width={iconSize} height={iconSize} strokeWidth={INPUT_ICON_STROKE_WIDTH} color={iconColor} />
+          ))}
         </Pressable>
       </InputEndIcon>
     </InputAdornment>
@@ -258,6 +283,7 @@ function InputNumeric({
   const displayValue = isControlled ? String(value ?? "") : internalValue;
   const [focused, setFocused] = useState(false);
   const isFloated = focused || displayValue !== "";
+  const iconColor = useThemeColor("gray-foreground");
 
   const numericValue = parseFloat(displayValue.replace(",", ".")) || 0;
 
@@ -278,7 +304,7 @@ function InputNumeric({
     <InputAdornment>
       {iconLeft && (
         <InputStartIcon>
-          {applyInputIconSize(iconLeft, size)}
+          {applyInputIconSize(iconLeft, size, iconColor)}
         </InputStartIcon>
       )}
       <View className="relative flex-1">
@@ -314,11 +340,15 @@ function InputNumeric({
             className="items-center justify-center p-1"
             accessibilityLabel="Increase value"
           >
-            <ChevronDown
-              style={{ transform: [{ rotate: "180deg" }] }}
-              size={chevronSize}
-              strokeWidth={3}
-            />
+            {iconColor && (
+              <ChevronDown
+                width={chevronSize}
+                height={chevronSize}
+                strokeWidth={3}
+                color={iconColor}
+                style={{ transform: [{ rotate: "180deg" }] }}
+              />
+            )}
           </Pressable>
           <Pressable
             disabled={!editable}
@@ -326,7 +356,9 @@ function InputNumeric({
             className="items-center justify-center p-1"
             accessibilityLabel="Decrease value"
           >
-            <ChevronDown size={chevronSize} strokeWidth={3} />
+            {iconColor && (
+              <ChevronDown width={chevronSize} height={chevronSize} strokeWidth={3} color={iconColor} />
+            )}
           </Pressable>
         </View>
       </InputEndIcon>
@@ -350,6 +382,8 @@ function Input({
   const [focused, setFocused] = useState(false);
   const hasValue = Boolean(value || defaultValue);
   const isFloated = focused || hasValue;
+  const iconColor = useThemeColor("gray-foreground");
+  const errorIconColor = useThemeColor("feedback-error-foreground");
 
   if (type === "numeric") {
     return (
@@ -382,17 +416,29 @@ function Input({
     );
   }
 
-  const resolvedIconLeft = iconLeft ?? (type === "email" ? <Mail /> : undefined);
+  const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
+  const defaultIconLeft =
+    type === "email" && iconColor ? (
+      <Mail width={iconSize} height={iconSize} strokeWidth={INPUT_ICON_STROKE_WIDTH} color={iconColor} />
+    ) : undefined;
+  const resolvedIconLeft = iconLeft
+    ? applyInputIconSize(iconLeft, size, iconColor)
+    : defaultIconLeft;
+
   const showInvalidRightIcon = invalid && (type === "text" || type === "email");
   const resolvedIconRight = showInvalidRightIcon
-    ? <TriangleWarning />
-    : iconRight;
+    ? errorIconColor && (
+        <TriangleWarning width={iconSize} height={iconSize} strokeWidth={INPUT_ICON_STROKE_WIDTH} color={errorIconColor} />
+      )
+    : iconRight
+      ? applyInputIconSize(iconRight, size, iconColor)
+      : undefined;
 
   return (
     <InputAdornment>
       {resolvedIconLeft && (
         <InputStartIcon>
-          {applyInputIconSize(resolvedIconLeft, size)}
+          {resolvedIconLeft}
         </InputStartIcon>
       )}
       <View className="relative flex-1">
@@ -416,7 +462,7 @@ function Input({
       </View>
       {resolvedIconRight && (
         <InputEndIcon>
-          {applyInputIconSize(resolvedIconRight, size)}
+          {resolvedIconRight}
         </InputEndIcon>
       )}
     </InputAdornment>

package/src/components/Label.tsx

@@ -9,6 +9,49 @@ interface LabelProps extends PressableProps, VariantProps<typeof labelVariants>
   disabled?: boolean;
 }
 
+function getLabelText(children: ReactNode): string | null {
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+
+  if (Array.isArray(children)) {
+    const parts = children.filter(
+      (child): child is string | number =>
+        typeof child === "string" || typeof child === "number",
+    );
+
+    if (parts.length === children.length && parts.length > 0) {
+      return parts.join("");
+    }
+  }
+
+  return null;
+}
+
+function LabelText({
+  children,
+  variant,
+  size,
+  disabled,
+}: {
+  children: ReactNode;
+  variant?: LabelProps["variant"];
+  size?: LabelProps["size"];
+  disabled?: boolean;
+}) {
+  const text = getLabelText(children);
+
+  if (text !== null) {
+    return (
+      <Text className={cn(labelTextVariants({ variant, size, disabled }))}>
+        {text}
+      </Text>
+    );
+  }
+
+  return <>{children}</>;
+}
+
 const labelVariants = cva(
   "flex-row items-center gap-3 shrink-0",
   {
@@ -63,13 +106,9 @@ function Label({ className, variant, size, block, disabled = false, children, ..
         )}
         {...props}
       >
-        {typeof children === "string" ? (
-          <Text className={cn(labelTextVariants({ variant, size, disabled }))}>
-            {children}
-          </Text>
-        ) : (
-          children
-        )}
+        <LabelText variant={variant} size={size} disabled={disabled}>
+          {children}
+        </LabelText>
       </Pressable>
     );
   }
@@ -80,13 +119,9 @@ function Label({ className, variant, size, block, disabled = false, children, ..
       className={cn(labelVariants({ variant, size }), className)}
       {...props}
     >
-      {typeof children === "string" ? (
-        <Text className={cn(labelTextVariants({ variant, size, disabled }))}>
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      <LabelText variant={variant} size={size} disabled={disabled}>
+        {children}
+      </LabelText>
     </Pressable>
   );
 }

package/src/components/Loading.tsx

@@ -9,14 +9,25 @@ import Animated, {
   Easing,
 } from "react-native-reanimated";
 import { cn } from "@/lib/utils";
+import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
 
 interface LoadingProps {
   size?: number;
   className?: string;
+  /** Cor explícita (opcional). Preferir `colorToken` para cores do theme. */
   color?: string;
+  /** Token semântico do design system (default: primary-background-fill). */
+  colorToken?: ThemeColorToken;
 }
 
-function Loading({ size = 24, color = "currentColor", className }: LoadingProps) {
+function Loading({
+  size = 24,
+  colorToken = "primary-background-fill",
+  className,
+  color,
+}: LoadingProps) {
+  const themeColor = useThemeColor(colorToken);
+  const stroke = color ?? themeColor;
   const rotation = useSharedValue(0);
 
   useEffect(() => {
@@ -39,7 +50,7 @@ function Loading({ size = 24, color = "currentColor", className }: LoadingProps)
         height={size}
         viewBox="0 0 24 24"
         fill="none"
-        stroke={color}
+        stroke={stroke}
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/components/PageHeader.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+import { Text, View, type ViewProps } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+interface PageHeaderProps extends ViewProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  badge?: ReactNode;
+}
+
+function PageHeader({
+  className,
+  icon,
+  title,
+  description,
+  badge,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <View
+      className={cn(
+        "overflow-hidden rounded-t-xl rounded-b-2xl bg-secondary-background-soft-muted pb-4",
+        className
+      )}
+      {...props}
+    >
+      <View className="gap-4 px-4 pt-8">
+        <View className="flex-row items-start gap-3">
+          {icon}
+          <View className="flex-1 gap-1">
+            <Text className="text-title-xs font-semibold text-primary-foreground">
+              {title}
+            </Text>
+            {description ? (
+              <Text className="text-sm leading-sm text-gray-foreground-muted">
+                {description}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        {badge}
+      </View>
+    </View>
+  );
+}
+
+export { PageHeader };
+export type { PageHeaderProps };