@proulr/sdui-components 0.1.75 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.75",
+  "version": "0.1.76",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

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

@@ -59,6 +59,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';