@proulr/sdui-components 0.1.75 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -43,7 +43,7 @@
     "react-native-qrcode-svg": "^6.3.21"
   },
   "peerDependencies": {
-    "expo-blur": ">=15",
+    "expo-blur": ">=56",
     "expo-linear-gradient": ">=56",
     "react": ">=19",
     "react-native": ">=0.85",

package/src/renderer/theme/chrome-glass.ts

@@ -13,3 +13,11 @@ export const CHROME_GLASS_BLUR_INTENSITY = 50;
 export const CHROME_GLASS_BLUR_TINT = 'dark' as const;
 
 export type ChromeGlassBlurTint = typeof CHROME_GLASS_BLUR_TINT;
+
+/**
+ * Android: blur real exige `blurMethod` + `blurTarget` (BlurTargetView) —
+ * o default 'none' vira só um overlay translúcido, sem frost.
+ */
+export const CHROME_GLASS_ANDROID_BLUR_METHOD = 'dimezisBlurView' as const;
+
+export type ChromeGlassAndroidBlurMethod = typeof CHROME_GLASS_ANDROID_BLUR_METHOD;

package/src/renderer/ui/ChromeGlass.tsx

@@ -1,6 +1,13 @@
-import React, { type ReactNode } from 'react';
-import { BlurView } from 'expo-blur';
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { BlurTargetView, BlurView } from 'expo-blur';
 import {
+  Platform,
   StyleSheet,
   View,
   type StyleProp,
@@ -9,6 +16,7 @@ import {
 } from 'react-native';
 import { colors } from '../theme/proulr-theme';
 import {
+  CHROME_GLASS_ANDROID_BLUR_METHOD,
   CHROME_GLASS_BLUR_INTENSITY,
   CHROME_GLASS_BLUR_TINT,
 } from '../theme/chrome-glass';
@@ -22,6 +30,52 @@ const absoluteFill: ViewStyle = {
   left: 0,
 };
 
+/**
+ * Android: `BlurView` só faz blur real apontando para um `BlurTargetView`
+ * (ref via `blurTarget`) — iOS/web usam o backdrop nativo e ignoram o target.
+ */
+const ChromeGlassTargetContext = createContext<RefObject<View | null> | null>(null);
+
+/** Provider do alvo de blur — envolve chrome + conteúdo (uma vez por shell). */
+export function ChromeGlassTargetProvider({ children }: { children: ReactNode }) {
+  const targetRef = useRef<View | null>(null);
+  return (
+    <ChromeGlassTargetContext.Provider value={targetRef}>
+      {children}
+    </ChromeGlassTargetContext.Provider>
+  );
+}
+
+type ChromeGlassBlurTargetProps = {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Envolve o conteúdo que fica atrás do vidro. No Android vira `BlurTargetView`;
+ * nas demais plataformas (ou sem provider) é um `View` comum.
+ */
+export function ChromeGlassBlurTarget({ children, style }: ChromeGlassBlurTargetProps) {
+  const targetRef = useContext(ChromeGlassTargetContext);
+  if (Platform.OS !== 'android' || !targetRef) {
+    return <View style={style}>{children}</View>;
+  }
+  return (
+    <BlurTargetView ref={targetRef} style={style}>
+      {children}
+    </BlurTargetView>
+  );
+}
+
+function useAndroidBlurProps(): {
+  blurTarget: RefObject<View | null>;
+  blurMethod: typeof CHROME_GLASS_ANDROID_BLUR_METHOD;
+} | null {
+  const targetRef = useContext(ChromeGlassTargetContext);
+  if (Platform.OS !== 'android' || !targetRef) return null;
+  return { blurTarget: targetRef, blurMethod: CHROME_GLASS_ANDROID_BLUR_METHOD };
+}
+
 type ChromeGlassLayerProps = {
   style?: StyleProp<ViewStyle>;
   pointerEvents?: ViewProps['pointerEvents'];
@@ -35,12 +89,14 @@ export function ChromeGlassLayer({
   style,
   pointerEvents = 'none',
 }: ChromeGlassLayerProps) {
+  const androidBlurProps = useAndroidBlurProps();
   return (
     <View style={[absoluteFill, style]} pointerEvents={pointerEvents}>
       <BlurView
         intensity={CHROME_GLASS_BLUR_INTENSITY}
         tint={CHROME_GLASS_BLUR_TINT}
         style={StyleSheet.absoluteFill}
+        {...(androidBlurProps ?? {})}
       />
       <View style={[absoluteFill, styles.tint]} />
     </View>

package/src/renderer/ui/Skeleton.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { View, type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+const PULSE_DURATION_MS = 900;
+const PULSE_MIN_OPACITY = 0.45;
+
+/**
+ * Pulso de opacidade compartilhado por cada bloco de skeleton. Respeita o
+ * "reduzir movimento" do sistema (fica estatico). Como `react-native-reanimated`
+ * ja e usado nos primitivos do pacote (ex.: RangeSlider), importamos direto.
+ */
+function usePulseStyle() {
+  const progress = useSharedValue(PULSE_MIN_OPACITY);
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, {
+        duration: PULSE_DURATION_MS,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.System,
+      }),
+      -1,
+      true,
+    );
+  }, [progress]);
+
+  return useAnimatedStyle(() => ({ opacity: progress.value }));
+}
+
+export type SkeletonProps = {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Bloco tonal com shimmer — base de qualquer skeleton. */
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  radius = m3Shape.cornerSmall,
+  style,
+}: SkeletonProps) {
+  const pulse = usePulseStyle();
+  return (
+    <Animated.View
+      accessibilityRole="none"
+      style={[
+        { width, height, borderRadius: radius, backgroundColor: m3Colors.surfaceContainerHigh },
+        pulse,
+        style,
+      ]}
+    />
+  );
+}
+
+export type SkeletonCircleProps = {
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Placeholder circular (avatar). */
+export function SkeletonCircle({ size = 48, style }: SkeletonCircleProps) {
+  return <Skeleton width={size} height={size} radius={size / 2} style={style} />;
+}
+
+export type SkeletonTextProps = {
+  lines?: number;
+  lineHeight?: number;
+  gap?: number;
+  /** Largura da ultima linha (efeito paragrafo). */
+  lastLineWidth?: DimensionValue;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Bloco de linhas de texto (ultima linha mais curta). */
+export function SkeletonText({
+  lines = 3,
+  lineHeight = 12,
+  gap = spacing.xs,
+  lastLineWidth = '60%',
+  style,
+}: SkeletonTextProps) {
+  return (
+    <View style={[{ gap }, style]}>
+      {Array.from({ length: Math.max(1, lines) }).map((_, index) => {
+        const isLast = index === lines - 1;
+        return (
+          <Skeleton
+            key={index}
+            height={lineHeight}
+            width={isLast && lines > 1 ? lastLineWidth : '100%'}
+            radius={m3Shape.cornerFull}
+          />
+        );
+      })}
+    </View>
+  );
+}

package/src/renderer/ui/index.ts

@@ -11,7 +11,12 @@ export { AuthStepShell } from './AuthStepShell';
 export { Card } from './Card';
 export { Chip } from './Chip';
 export { ChipRow } from './ChipRow';
-export { ChromeGlassLayer, ChromeGlassShell } from './ChromeGlass';
+export {
+  ChromeGlassBlurTarget,
+  ChromeGlassLayer,
+  ChromeGlassShell,
+  ChromeGlassTargetProvider,
+} from './ChromeGlass';
 export { ComposeAudiencePill } from './compose-audience-pill';
 export {
   AppIcon,
@@ -59,6 +64,14 @@ export { ProgressBar } from './ProgressBar';
 export { RangeSlider, type RangeSliderProps } from './RangeSlider';
 export { SectionHeader } from './SectionHeader';
 export { SelectRow, MultiSelectRow } from './SelectRow';
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  type SkeletonProps,
+  type SkeletonCircleProps,
+  type SkeletonTextProps,
+} from './Skeleton';
 export { StatRow } from './StatRow';
 export { ToggleRow } from './ToggleRow';
 export { PasswordField, TextField } from './TextField';