@medway-ui/native 1.3.2 → 1.4.0

package/src/components/IndexLevel.tsx

@@ -0,0 +1,570 @@
+import {
+  IndexBarHigh,
+  IndexBarLow,
+  IndexBarMedium,
+  IndexBarPriority,
+} from "@medway-ui/icons/native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useUnstableNativeVariable } from "nativewind";
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { View, type LayoutChangeEvent, type ViewProps } from "react-native";
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import Svg, { Rect, type SvgProps } from "react-native-svg";
+
+import { Text } from "@/components/Text";
+import {
+  useThemeColor,
+  withAlpha,
+  type ThemeColorToken,
+} from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+/**
+ * Matches the `PriorityLevelType` enum used by the products:
+ * priority = "p" | high_priority = "h" | medium_priority = "m" | low_priority = "l"
+ */
+type IndexLevelValue = "p" | "h" | "m" | "l";
+
+type IndexLevelIconComponent = ComponentType<
+  { color: string; strokeWidth?: number } & SvgProps
+>;
+
+const LEVEL_LABELS: Record<
+  IndexLevelValue,
+  { full: string; short: string; icon: IndexLevelIconComponent }
+> = {
+  p: {
+    full: "Prioritário",
+    short: "Prioritário",
+    icon: IndexBarPriority,
+  },
+  h: {
+    full: "Alta prevalência",
+    short: "Alta",
+    icon: IndexBarHigh,
+  },
+  m: {
+    full: "Média prevalência",
+    short: "Média",
+    icon: IndexBarMedium,
+  },
+  l: {
+    full: "Baixa prevalência",
+    short: "Baixa",
+    icon: IndexBarLow,
+  },
+};
+
+type IndexLevelSpecialty = "default" | "cm" | "go" | "cir" | "ped" | "prev";
+
+/** Accepts the specialty in either casing, e.g. `"cm"` or `"CM"`. */
+type IndexLevelSpecialtyProp =
+  | IndexLevelSpecialty
+  | Uppercase<IndexLevelSpecialty>;
+
+const RING_COLOR_TOKEN: Record<IndexLevelSpecialty, ThemeColorToken> = {
+  default: "primary-background-fill",
+  cm: "cm-background-fill",
+  go: "go-background-fill",
+  cir: "cir-background-fill",
+  ped: "ped-background-fill",
+  prev: "prev-background-fill",
+};
+
+/** Levels that get the animated ring when `animated` is true. */
+const RING_LEVELS: IndexLevelValue[] = ["p", "h"];
+
+const ICON_SIZES = {
+  sm: 16,
+  md: 20,
+} as const;
+
+type IndexLevelVariant = "regular" | "soft" | "basic";
+
+/** Shared tone for icon color token + base-layer opacity (regular vs soft/basic). */
+const VARIANT_TONE: Record<
+  IndexLevelVariant,
+  { colorToken: ThemeColorToken; baseOpacity: "40" | "20" }
+> = {
+  regular: {
+    colorToken: "primary-foreground-onfill",
+    baseOpacity: "40",
+  },
+  soft: {
+    colorToken: "primary-foreground",
+    baseOpacity: "20",
+  },
+  basic: {
+    colorToken: "primary-foreground",
+    baseOpacity: "20",
+  },
+};
+
+function resolveVariantTone(
+  variant: IndexLevelVariant | null | undefined
+): (typeof VARIANT_TONE)[IndexLevelVariant] {
+  return VARIANT_TONE[variant ?? "regular"] ?? VARIANT_TONE.regular;
+}
+
+const indexLevelVariants = cva(
+  "flex-row shrink-0 items-center justify-center",
+  {
+    variants: {
+      variant: {
+        regular: "rounded-md bg-primary-background-fill",
+        soft: "rounded-md bg-primary-background-soft-muted",
+        basic: "bg-transparent",
+      },
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+      },
+    },
+    compoundVariants: [
+      { variant: ["regular", "soft"], size: "sm", class: "px-2 py-1" },
+      { variant: ["regular", "soft"], size: "md", class: "px-2.5 py-1.5" },
+    ],
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+    },
+  }
+);
+
+const indexLevelTextVariants = cva("text-center font-semibold", {
+  variants: {
+    variant: {
+      regular: "text-primary-foreground-onfill",
+      soft: "text-primary-foreground",
+      basic: "text-primary-foreground",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+    size: "md",
+  },
+});
+
+const indexLevelIconVariants = cva(
+  "relative shrink-0 items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+const RING_STROKE = 2;
+/** Fallback when `--radius-md` is not resolvable at runtime (matches tokens.native.css). */
+const RADIUS_MD_FALLBACK = 8;
+const SPIN_DURATION_MS = 1200;
+const RING_BASE_OPACITY = 0.16;
+
+/** Resolves `--radius-md` so the ring tracks the same corner radius as `rounded-md`. */
+function useRadiusMd(): number {
+  const value = useUnstableNativeVariable("--radius-md");
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return RADIUS_MD_FALLBACK;
+}
+
+type RingDeps = {
+  MaskedView: ComponentType<{
+    androidRenderingMode?: "software" | "hardware";
+    style?: object;
+    maskElement: ReactNode;
+    children?: ReactNode;
+  }>;
+  LinearGradient: ComponentType<{
+    colors: string[];
+    locations?: number[];
+    start?: { x: number; y: number };
+    end?: { x: number; y: number };
+    style?: object;
+  }>;
+};
+
+/** Lazy-load optional peers so the static chip works without them installed. */
+function loadRingDeps(): RingDeps | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const masked = require("@react-native-masked-view/masked-view");
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const gradient = require("expo-linear-gradient");
+    return {
+      MaskedView: masked.default ?? masked,
+      LinearGradient: gradient.LinearGradient,
+    };
+  } catch {
+    return null;
+  }
+}
+
+const RING_PATH = {
+  fill: "none" as const,
+  strokeWidth: RING_STROKE,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+
+interface IndexLevelRingProps {
+  width: number;
+  height: number;
+  colorToken: ThemeColorToken;
+}
+
+function IndexLevelRing(props: IndexLevelRingProps) {
+  const deps = loadRingDeps();
+  if (!deps) return null;
+  return <IndexLevelRingInner {...props} deps={deps} />;
+}
+
+/**
+ * Continuous 2px squircle: one mask clips both the faint rest ring and the
+ * rotating linear gradient, so they share the same stroke.
+ */
+function IndexLevelRingInner({
+  width,
+  height,
+  colorToken,
+  deps,
+}: IndexLevelRingProps & { deps: RingDeps }) {
+  const { MaskedView, LinearGradient } = deps;
+  const color = useThemeColor(colorToken);
+  const colorMid = withAlpha(color, 0.8);
+  const colorFaded = withAlpha(color, 0);
+  const colorBase = withAlpha(color, RING_BASE_OPACITY);
+  const ringRadius = useRadiusMd();
+
+  const inset = RING_STROKE / 2;
+  const rectW = Math.max(width - RING_STROKE, 0);
+  const rectH = Math.max(height - RING_STROKE, 0);
+  const rx = Math.min(ringRadius, rectW / 2, rectH / 2);
+  const sweep = Math.max(width, height) * 2;
+
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    cancelAnimation(rotation);
+    rotation.value = 0;
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: SPIN_DURATION_MS,
+        easing: Easing.linear,
+      }),
+      -1,
+      false
+    );
+
+    return () => {
+      cancelAnimation(rotation);
+    };
+  }, [rotation]);
+
+  const spinStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <View
+      pointerEvents="none"
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      collapsable={false}
+      style={{ position: "absolute", top: 0, left: 0, width, height }}
+    >
+      <MaskedView
+        // Hardware masking can fail to clip LinearGradient on Android; software is the reliable path.
+        androidRenderingMode="software"
+        style={{ width, height }}
+        maskElement={
+          <View
+            collapsable={false}
+            style={{ width, height, backgroundColor: "transparent" }}
+          >
+            <Svg width={width} height={height}>
+              <Rect
+                x={inset}
+                y={inset}
+                width={rectW}
+                height={rectH}
+                rx={rx}
+                ry={rx}
+                stroke="#FFFFFF"
+                {...RING_PATH}
+              />
+            </Svg>
+          </View>
+        }
+      >
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width,
+            height,
+            backgroundColor: colorBase,
+          }}
+        />
+        <Animated.View
+          collapsable={false}
+          style={[
+            {
+              position: "absolute",
+              width: sweep,
+              height: sweep,
+              left: (width - sweep) / 2,
+              top: (height - sweep) / 2,
+            },
+            spinStyle,
+          ]}
+        >
+          <LinearGradient
+            colors={[color, colorMid, colorFaded]}
+            locations={[0, 0.255, 0.574]}
+            start={{ x: 0.5, y: 0 }}
+            end={{ x: 0.5, y: 1 }}
+            style={{ width: sweep, height: sweep }}
+          />
+        </Animated.View>
+      </MaskedView>
+    </View>
+  );
+}
+
+interface IndexLevelIconProps
+  extends Omit<ViewProps, "children">,
+    VariantProps<typeof indexLevelIconVariants> {
+  level: IndexLevelValue;
+  baseOpacity?: "40" | "20";
+  /** Token de cor do ícone (SVG não herda `currentColor` no native). */
+  colorToken?: ThemeColorToken;
+}
+
+function IndexLevelIcon({
+  className,
+  level,
+  size,
+  baseOpacity = "40",
+  colorToken = "primary-foreground",
+  ...props
+}: IndexLevelIconProps) {
+  const color = useThemeColor(colorToken);
+  const currentLevel = LEVEL_LABELS[level];
+  if (!currentLevel) return null;
+
+  const LevelIcon = currentLevel.icon;
+  const hasBase = level !== "p";
+  const iconSize = ICON_SIZES[size ?? "md"];
+
+  return (
+    <View
+      className={cn(indexLevelIconVariants({ size }), className)}
+      {...props}
+    >
+      {hasBase && (
+        <View
+          className={cn(
+            "absolute inset-0 items-center justify-center",
+            baseOpacity === "40" ? "opacity-40" : "opacity-20"
+          )}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          <IndexBarPriority width={iconSize} height={iconSize} color={color} />
+        </View>
+      )}
+      <View
+        className="absolute inset-0 items-center justify-center"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        <LevelIcon width={iconSize} height={iconSize} color={color} />
+      </View>
+    </View>
+  );
+}
+
+interface IndexLevelProps
+  extends Omit<ViewProps, "style">,
+    VariantProps<typeof indexLevelVariants> {
+  /** Priority level rendered by the component. */
+  level: IndexLevelValue;
+  /**
+   * Draws the traveling gradient stroke on levels `p` / `h`.
+   * Chip colors still come from `variant` — `specialty` only tints this ring.
+   */
+  animated?: boolean;
+  /** Color of the animated ring. Ignored when `animated` is false. */
+  specialty?: IndexLevelSpecialtyProp;
+  /** Uses the abbreviated label ("Alta") instead of the full one ("Alta prevalência"). */
+  shortName?: boolean;
+  /** Overrides the label derived from `level`. */
+  label?: ReactNode;
+  /** Hides the label, keeping only the icon (and any `children`). */
+  hideLabel?: boolean;
+  /** Extra classes for the icon slot. */
+  iconClassName?: string;
+  /** Extra classes for the label slot. */
+  labelClassName?: string;
+  children?: ReactNode;
+}
+
+function IndexLevel({
+  className,
+  variant,
+  size,
+  level,
+  animated = false,
+  specialty = "default",
+  shortName = false,
+  label,
+  hideLabel = false,
+  iconClassName,
+  labelClassName,
+  children,
+  accessibilityLabel,
+  onLayout,
+  ...props
+}: IndexLevelProps) {
+  const currentLevel = LEVEL_LABELS[level];
+  const [frame, setFrame] = useState({ width: 0, height: 0 });
+  const specialtyKey = specialty.toLowerCase() as IndexLevelSpecialty;
+  const ringToken = RING_COLOR_TOKEN[specialtyKey] ?? RING_COLOR_TOKEN.default;
+  const hasRing = Boolean(animated) && RING_LEVELS.includes(level);
+  const tone = resolveVariantTone(variant);
+
+  if (!currentLevel) return null;
+
+  const resolvedLabel =
+    label ?? (shortName ? currentLevel.short : currentLevel.full);
+  // When the visual label is hidden, always expose a name for screen readers
+  // (icons are a11y-hidden), unless the consumer passed accessibilityLabel.
+  const resolvedA11yLabel =
+    accessibilityLabel ??
+    (hideLabel
+      ? typeof resolvedLabel === "string"
+        ? resolvedLabel
+        : currentLevel.full
+      : undefined);
+
+  const handleFrameLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setFrame((prev) =>
+      prev.width === width && prev.height === height ? prev : { width, height }
+    );
+    onLayout?.(event);
+  };
+
+  const chipContent = (
+    <>
+      <IndexLevelIcon
+        level={level}
+        size={size}
+        baseOpacity={tone.baseOpacity}
+        colorToken={tone.colorToken}
+        className={iconClassName}
+      />
+      {!hideLabel && (
+        <Text
+          className={cn(
+            indexLevelTextVariants({ variant, size }),
+            labelClassName
+          )}
+        >
+          {resolvedLabel}
+        </Text>
+      )}
+      {typeof children === "string" || typeof children === "number" ? (
+        <Text
+          className={cn(
+            indexLevelTextVariants({ variant, size }),
+            "font-normal",
+            labelClassName
+          )}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </>
+  );
+
+  if (!hasRing) {
+    return (
+      <View
+        accessible={Boolean(resolvedA11yLabel)}
+        accessibilityLabel={resolvedA11yLabel}
+        className={cn(
+          indexLevelVariants({ variant, size }),
+          "self-start",
+          className
+        )}
+        onLayout={onLayout}
+        {...props}
+      >
+        {chipContent}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessible={Boolean(resolvedA11yLabel)}
+      accessibilityLabel={resolvedA11yLabel}
+      collapsable={false}
+      onLayout={handleFrameLayout}
+      className="self-start overflow-visible p-1"
+      {...props}
+    >
+      {frame.width > 0 && frame.height > 0 && (
+        <IndexLevelRing
+          width={frame.width}
+          height={frame.height}
+          colorToken={ringToken}
+        />
+      )}
+      <View className={cn(indexLevelVariants({ variant, size }), className)}>
+        {chipContent}
+      </View>
+    </View>
+  );
+}
+
+export {
+  LEVEL_LABELS as INDEX_LEVEL_LABELS,
+  IndexLevel,
+  IndexLevelIcon,
+  indexLevelIconVariants,
+  indexLevelTextVariants,
+  indexLevelVariants,
+};
+export type {
+  IndexLevelIconProps,
+  IndexLevelProps,
+  IndexLevelSpecialty,
+  IndexLevelSpecialtyProp,
+  IndexLevelValue,
+};

package/src/hooks/useThemeColor.ts

@@ -18,6 +18,11 @@ const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
   'gray-background-soft-muted': 'gray-30',
   'primary-foreground-onfill': 'white',
   'primary-background-fill': 'primary',
+  'cm-background-fill': 'cm-darken-1',
+  'go-background-fill': 'go',
+  'cir-background-fill': 'cir',
+  'ped-background-fill': 'ped',
+  'prev-background-fill': 'prev',
   'red-foreground': 'red-darken-2',
   'go-foreground': 'go-darken-1',
 };
@@ -37,6 +42,11 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'gray-background-soft-muted': 'gray-700',
   'primary-foreground-onfill': 'primary',
   'primary-background-fill': 'gray-70',
+  'cm-background-fill': 'cm-darken-1',
+  'go-background-fill': 'go-darken-1',
+  'cir-background-fill': 'cir',
+  'ped-background-fill': 'ped',
+  'prev-background-fill': 'prev',
   'red-foreground': 'red-lighten-3',
   'go-foreground': 'go-lighten-5',
 };
@@ -45,6 +55,11 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
 const THEME_COLOR_FALLBACKS: Record<string, string> = {
   white: '#FFFFFF',
   primary: 'rgba(0, 32, 91, 1)',
+  'cm-darken-1': 'rgba(56, 112, 178, 1)',
+  go: 'rgba(172, 20, 90, 1)',
+  cir: 'rgba(0, 239, 200, 1)',
+  ped: 'rgba(255, 198, 73, 1)',
+  prev: 'rgba(59, 63, 182, 1)',
   'gray-600': 'rgba(49, 57, 73, 1)',
   'gray-450': 'rgba(90, 105, 135, 1)',
   'gray-400': 'rgba(122, 133, 151, 1)',
@@ -100,11 +115,44 @@ function getFallbackColor(
   );
 }
 
+/**
+ * Aplica alpha na cor já resolvida (`rgba` ou hex). `transparent` no
+ * LinearGradient do Expo interpola via preto no Android.
+ * `alpha` é clamado em 0–1 para não gerar hex inválido (ex. `#RRGGBB132`).
+ */
+function withAlpha(color: string, alpha: number): string {
+  const clamped = Math.min(1, Math.max(0, alpha));
+  const rgba = color.match(
+    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)/i
+  );
+  if (rgba) {
+    return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${clamped})`;
+  }
+  if (color.startsWith('#')) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((char) => `${char}${char}`)
+        .join('');
+    }
+    if (hex.length === 8) {
+      hex = hex.slice(0, 6);
+    }
+    const a = Math.round(clamped * 255)
+      .toString(16)
+      .padStart(2, '0');
+    return `#${hex}${a}`;
+  }
+  return color;
+}
+
 /**
  * Resolve uma cor semântica do design system (tokens.native.css) em runtime.
  * Use quando a prop `color` for obrigatória (SVG, stroke Reanimated, etc.).
+ * `alpha` (0–1) aplica a opacidade na cor resolvida.
  */
-function useThemeColor(token: ThemeColorToken): string {
+function useThemeColor(token: ThemeColorToken, alpha?: number): string {
   const { colorScheme } = useColorScheme();
   const aliasMap =
     colorScheme === 'dark' ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
@@ -114,11 +162,20 @@ function useThemeColor(token: ThemeColorToken): string {
     toResolvedCssVariable(token, aliasMap)
   );
 
-  if (isResolvedColor(value)) return value;
-  if (isResolvedColor(resolvedValue)) return resolvedValue;
+  const color = isResolvedColor(value)
+    ? value
+    : isResolvedColor(resolvedValue)
+      ? resolvedValue
+      : getFallbackColor(token, aliasMap);
 
-  return getFallbackColor(token, aliasMap);
+  return alpha === undefined ? color : withAlpha(color, alpha);
 }
 
-export { useThemeColor, toCssVariable, getFallbackColor, DEFAULT_COLOR };
+export {
+  useThemeColor,
+  withAlpha,
+  toCssVariable,
+  getFallbackColor,
+  DEFAULT_COLOR,
+};
 export type { ThemeColorToken };

package/src/index.ts

@@ -218,6 +218,23 @@ export type {
   InputType,
 } from "@/components/Input";
 
+// IndexLevel
+export {
+  INDEX_LEVEL_LABELS,
+  IndexLevel,
+  IndexLevelIcon,
+  indexLevelIconVariants,
+  indexLevelTextVariants,
+  indexLevelVariants,
+} from "@/components/IndexLevel";
+export type {
+  IndexLevelIconProps,
+  IndexLevelProps,
+  IndexLevelSpecialty,
+  IndexLevelSpecialtyProp,
+  IndexLevelValue,
+} from "@/components/IndexLevel";
+
 // Label
 export { Label, labelVariants, labelTextVariants } from "@/components/Label";
 export type { LabelProps } from "@/components/Label";
@@ -386,7 +403,7 @@ export type { TooltipContentProps } from "@/components/Tooltip";
 
 // Hooks
 export { useToast, toast } from "@/hooks/use-toast";
-export { useThemeColor } from "@/hooks/useThemeColor";
+export { useThemeColor, withAlpha } from "@/hooks/useThemeColor";
 export type { ThemeColorToken } from "@/hooks/useThemeColor";
 
 // Theme-aware icon helper