@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/commonjs/components/Select/Select.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Select = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -18,33 +20,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * client-side search, theme-aware styling, full a11y, and dark-mode auto.
  */
 
-const sizeMap = {
-  sm: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    minHeight: 38,
-    fontSize: 13,
-    borderRadius: 10,
-    iconSize: 16
-  },
-  md: {
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    minHeight: 46,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18
-  },
-  lg: {
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    minHeight: 54,
-    fontSize: 16,
-    borderRadius: 14,
-    iconSize: 20
-  }
-};
-
 // `unknown` here keeps the forwardRef signature non-generic — consumers who
 // pass non-`SelectOption` shapes use the accessor props; type inference is
 // preserved at the call site via the `SelectProps<T>` union.
@@ -76,8 +51,12 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
   const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
   const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
   const [open, setOpen] = (0, _react.useState)(false);
   const [query, setQuery] = (0, _react.useState)('');
   const screenHeight = _reactNative.Dimensions.get('window').height;
@@ -88,11 +67,13 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
   (0, _react.useEffect)(() => {
     if (open) {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
+      _reactNative.Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      _reactNative.Animated.timing(backdropAnim, {
         toValue: 1,
         duration: theme.motion.duration.fast,
         easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
+        useNativeDriver: false
       }), _reactNative.Animated.spring(sheetAnim, {
         toValue: 0,
         damping: theme.motion.spring.snappy.damping,
@@ -105,7 +86,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         toValue: 0,
         duration: theme.motion.duration.fast,
         easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
+        useNativeDriver: false
       }), _reactNative.Animated.timing(sheetAnim, {
         toValue: sheetMaxHeight,
         duration: theme.motion.duration.fast,
@@ -165,7 +146,6 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
   const showingPlaceholder = selectedOptions.length === 0;
   const hasError = typeof error === 'string' && error.length > 0;
-  const borderColor = hasError ? theme.colors.border.error : theme.colors.border.primary;
   const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
   const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
   const renderOption = ({
@@ -245,45 +225,37 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         marginBottom: theme.spacing.xxs
       }],
       children: label
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       ref: ref,
-      onPress: handleOpen,
-      disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityLabel: a11yLabel,
-      accessibilityState: {
-        disabled,
-        expanded: open
-      },
-      android_ripple: {
-        color: theme.colors.surface.pressed,
-        borderless: false
-      },
-      style: ({
-        pressed
-      }) => [styles.trigger, {
-        minHeight: sizeStyles.minHeight,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        paddingVertical: sizeStyles.paddingVertical,
-        borderRadius: sizeStyles.borderRadius,
-        borderColor,
-        borderWidth: 1.5,
-        backgroundColor: disabled ? theme.colors.surface.disabled : pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
-        opacity: disabled ? 0.65 : 1
-      }, triggerStyle],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.triggerText, {
-          color: showingPlaceholder ? theme.colors.text.tertiary : theme.colors.text.primary,
-          fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.medium
-        }, textStyle],
-        numberOfLines: 1,
-        children: triggerText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
-        color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
-        size: sizeStyles.iconSize,
-        open: open
-      })]
+      collapsable: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+        size: size,
+        disabled: disabled,
+        error: hasError,
+        filled: selectedOptions.length > 0,
+        onPress: handleOpen,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          disabled,
+          expanded: open
+        },
+        style: triggerStyle,
+        trailing: /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
+          size: sizeTokens.iconSize,
+          open: open
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.triggerText, {
+            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle
+          }, textStyle],
+          numberOfLines: 1,
+          children: triggerText
+        })
+      })
     }), hasError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.errorText, {
         color: theme.colors.error,
@@ -297,25 +269,29 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       transparent: true,
       animationType: "none",
       onRequestClose: handleClose,
-      statusBarTranslucent: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: [_reactNative.StyleSheet.absoluteFillObject, {
-            backgroundColor: theme.colors.background.overlay,
-            opacity: backdropAnim
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-            style: _reactNative.StyleSheet.absoluteFill,
-            onPress: handleClose,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close picker"
-          })
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+      ,
+      navigationBarTranslucent: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      , {
+        collapsable: false,
+        style: [_reactNative.StyleSheet.absoluteFill, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: handleClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close picker"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
           accessibilityViewIsModal: true,
           accessibilityLabel: label ?? placeholder ?? 'Options',
           style: [styles.sheet, {
             maxHeight: sheetMaxHeight,
+            paddingBottom: insets.bottom + 16,
             backgroundColor: theme.colors.background.elevated,
             borderTopLeftRadius: theme.radius.xl,
             borderTopRightRadius: theme.radius.xl,
@@ -328,7 +304,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             style: styles.sheetHandleRow,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.sheetHandle, {
-                backgroundColor: theme.colors.border.primary
+                backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
               }]
             })
           }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -350,7 +326,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
               onChangeText: setQuery,
               placeholder: "Search\u2026",
               placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: theme.colors.border.focus,
+              selectionColor: (0, _FieldBase.resolveVariantColors)(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocused,
               accessibilityLabel: "Search options",
               style: [styles.searchInput, {
                 color: theme.colors.text.primary,
@@ -461,11 +437,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   label: {
     includeFontPadding: false
   },
-  trigger: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
   triggerText: {
     flex: 1,
     includeFontPadding: false

package/lib/commonjs/components/Skeleton/Skeleton.js

@@ -3,25 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SkeletonText = exports.SkeletonListItem = exports.SkeletonCircle = exports.SkeletonCard = exports.SkeletonAvatar = exports.Skeleton = void 0;
+exports.default = exports.SkeletonText = exports.SkeletonCircle = exports.Skeleton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _SkeletonClock = require("./SkeletonClock.js");
 var _SkeletonProvider = require("./SkeletonProvider.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const SPEED_DURATION = {
-  slow: 1800,
-  normal: 1200,
-  fast: 800
-};
-const PULSE_DURATION = 1000;
-const AVATAR_SIZE = {
-  sm: 32,
-  md: 48,
-  lg: 64
-};
+/**
+ * Skeleton — the leaf placeholder primitive.
+ *
+ * Every Skeleton on screen reads the shared shimmer/pulse clock from
+ * `SkeletonProvider` (see SkeletonClock.tsx). One native-driver loop per
+ * provider drives every instance, so 50 placeholders on a list don't spawn
+ * 50 timers and the shimmer bands never drift out of phase.
+ *
+ * Visual:
+ *   - A View with the base color and `overflow: hidden` + radius gives the
+ *     placeholder its shape.
+ *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
+ *     `LinearGradient` (transparent → highlight → transparent) translates
+ *     across the box. The radius clips it to the right outline automatically.
+ *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
+ *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
+ *     would barely be visible.
+ *   - For `animation: 'none'` (or when the OS Reduce Motion preference is
+ *     on), just the base color renders.
+ *
+ * `variant` describes the SHAPE: rect (default), rounded (theme.radius.md),
+ * circle (50%), or text (small radius, slightly inset height). Set width /
+ * height directly for full control.
+ */
+
+// `react-native-linear-gradient` is an OPTIONAL peer dep. When it's installed
+// we sweep a real gradient band across the shimmer. When it isn't, we fall
+// back to a solid-color band — still works, just less polished. This keeps
+// the library deployable in apps that don't need gradients elsewhere.
+let LinearGradientImpl = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need shimmer polish.
+}
+
+/** Animation pattern. */
+
+/** Sweep speed for the shimmer band. Ignored for pulse / none. */
+
+/** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
+
+/** `theme.radius` token name or a literal pixel value. */
+
 const resolveRadius = (theme, radius) => {
   if (typeof radius === 'number') return radius;
   return theme.radius[radius];
@@ -31,92 +66,128 @@ const resolveWidth = width => {
   if (typeof width === 'number') return width;
   return width;
 };
+const radiusForShape = (theme, shape, width, height, explicit) => {
+  if (explicit !== undefined) return resolveRadius(theme, explicit);
+  switch (shape) {
+    case 'circle':
+      // Half the smallest known dimension. If width is a percentage we can't
+      // resolve here — fall back to height/2 which is the typical caller
+      // intent (square avatars).
+      return Math.floor(typeof width === 'number' ? Math.min(width, height) / 2 : height / 2);
+    case 'rounded':
+      return theme.radius.md;
+    case 'text':
+      return theme.radius.sm;
+    case 'rect':
+    default:
+      return theme.radius.sm;
+  }
+};
 const Skeleton = ({
+  shape = 'rect',
   width = '100%',
   height = 16,
   radius,
   variant,
-  speed,
+  speed: _speedProp,
   colors,
   style,
   testID
 }) => {
   const theme = (0, _index.useTheme)();
   const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const clock = (0, _SkeletonClock.useSkeletonClock)();
   const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
-  const resolvedSpeed = speed ?? defaults.speed ?? 'normal';
-  const resolvedRadiusToken = radius ?? defaults.radius ?? 'sm';
+  const effectiveVariant = clock.enabled ? resolvedVariant : 'none';
   const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
   const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const borderRadius = resolveRadius(theme, resolvedRadiusToken);
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = _index2.Responsive.size(height);
-  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const borderRadius = radiusForShape(theme, shape, resolvedWidth, resolvedHeight, radius);
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    (0, _index.setNativeValue)(progress, 0);
-    const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
-    const animation = resolvedVariant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
-      toValue: 1,
-      duration: duration / 2,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(progress, {
-      toValue: 0,
-      duration: duration / 2,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    })])) : _reactNative.Animated.loop(_reactNative.Animated.timing(progress, {
-      toValue: 1,
-      duration,
-      easing: _reactNative.Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return () => {
-      animation.stop();
-    };
-  }, [progress, resolvedSpeed, resolvedVariant]);
   const handleLayout = event => {
     const next = event.nativeEvent.layout.width;
     if (next !== containerWidth) setContainerWidth(next);
   };
+
+  // The shimmer band is wider than the box so the gradient feathers off the
+  // edges instead of popping at them. Width = 70% of container, capped to a
+  // sensible minimum so tiny placeholders still get a visible sweep.
+  const bandWidth = (0, _react.useMemo)(() => {
+    if (containerWidth <= 0) return 0;
+    return Math.max(48, containerWidth * 0.7);
+  }, [containerWidth]);
+
+  // Interpolate the shared 0→1 clock into translateX. The band starts fully
+  // off the left edge and ends fully off the right edge, so each loop sweeps
+  // the full width regardless of how wide the placeholder is.
+  const translateX = (0, _react.useMemo)(() => {
+    if (containerWidth <= 0) return 0;
+    return clock.shimmer.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, containerWidth]
+    });
+  }, [clock.shimmer, bandWidth, containerWidth]);
   const overlay = (0, _react.useMemo)(() => {
-    if (resolvedVariant === 'pulse') {
+    if (effectiveVariant === 'none') return null;
+    if (effectiveVariant === 'pulse') {
+      // Pulse fades a full-fill highlight overlay in and out. Cheaper than
+      // shimmer and visible at any size.
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         pointerEvents: "none",
         style: [_reactNative.StyleSheet.absoluteFillObject, {
           backgroundColor: highlightColor,
-          opacity: progress.interpolate({
+          opacity: clock.pulse.interpolate({
             inputRange: [0, 1],
-            outputRange: [0, 0.6]
+            outputRange: [0, 0.55]
           })
         }]
       });
     }
     if (containerWidth <= 0) return null;
-    const highlightWidth = Math.max(48, containerWidth * 0.6);
-    const translateX = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-highlightWidth, containerWidth]
-    });
+
+    // 3-stop gradient: transparent → highlight → transparent. Feathered
+    // edges feel premium; a solid band looks like a bug. When the optional
+    // gradient package isn't installed we render the band as a solid
+    // highlight rectangle — visibly different but still recognizably a
+    // shimmer effect.
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: "none",
-      style: [styles.shimmer, {
-        width: highlightWidth,
-        backgroundColor: highlightColor,
+      style: [styles.shimmerBand, {
+        width: bandWidth,
         transform: [{
           translateX
         }]
-      }]
+      }],
+      children: LinearGradientImpl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearGradientImpl, {
+        colors: ['transparent', highlightColor, 'transparent'],
+        locations: [0, 0.5, 1],
+        start: {
+          x: 0,
+          y: 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5
+        },
+        style: _reactNative.StyleSheet.absoluteFillObject
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_reactNative.StyleSheet.absoluteFillObject, {
+          backgroundColor: highlightColor,
+          opacity: 0.55
+        }]
+      })
     });
-  }, [containerWidth, progress, styles.shimmer, highlightColor, resolvedVariant]);
+  }, [effectiveVariant, highlightColor, clock.pulse, containerWidth, styles.shimmerBand, bandWidth, translateX]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     onLayout: handleLayout,
     accessible: true,
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
     accessibilityLiveRegion: "polite",
     testID: testID,
     style: [styles.base, {
@@ -138,9 +209,9 @@ const SkeletonCircle = ({
   const diameter = _index2.Responsive.size(size);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
     ...rest,
+    shape: "circle",
     width: diameter,
     height: size,
-    radius: "full",
     style: [{
       width: diameter,
       height: diameter,
@@ -175,6 +246,7 @@ const SkeletonText = ({
       const isLast = index === safeLines - 1;
       const lineWidth = isLast && safeLines > 1 ? lastLineWidth : width;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+        shape: "text",
         width: lineWidth,
         height: lineHeight,
         radius: radius,
@@ -189,130 +261,15 @@ const SkeletonText = ({
 };
 exports.SkeletonText = SkeletonText;
 SkeletonText.displayName = 'SkeletonText';
-const SkeletonAvatar = ({
-  size = 'md',
-  ...rest
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonCircle, {
-    ...rest,
-    size: AVATAR_SIZE[size]
-  });
-};
-exports.SkeletonAvatar = SkeletonAvatar;
-SkeletonAvatar.displayName = 'SkeletonAvatar';
-const SkeletonCard = ({
-  variant,
-  speed,
-  radius = 'md',
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      padding: theme.spacing.md
-    }, style],
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: theme.spacing.md
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonAvatar, {
-        size: "md",
-        variant: variant,
-        speed: speed
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          flex: 1,
-          marginLeft: theme.spacing.sm
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-          width: "60%",
-          height: 14,
-          radius: radius,
-          variant: variant,
-          speed: speed,
-          style: {
-            marginBottom: theme.spacing.xs
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-          width: "40%",
-          height: 12,
-          radius: radius,
-          variant: variant,
-          speed: speed
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonText, {
-      lines: 2,
-      fontSize: 14,
-      variant: variant,
-      speed: speed,
-      radius: radius
-    })]
-  });
-};
-exports.SkeletonCard = SkeletonCard;
-SkeletonCard.displayName = 'SkeletonCard';
-const SkeletonListItem = ({
-  avatarSize = 'md',
-  variant,
-  speed,
-  radius = 'sm',
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: theme.spacing.md,
-      paddingVertical: theme.spacing.sm
-    }, style],
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonAvatar, {
-      size: avatarSize,
-      variant: variant,
-      speed: speed
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flex: 1,
-        marginLeft: theme.spacing.sm
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-        width: "70%",
-        height: 14,
-        radius: radius,
-        variant: variant,
-        speed: speed,
-        style: {
-          marginBottom: theme.spacing.xs
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-        width: "45%",
-        height: 12,
-        radius: radius,
-        variant: variant,
-        speed: speed
-      })]
-    })]
-  });
-};
-exports.SkeletonListItem = SkeletonListItem;
-SkeletonListItem.displayName = 'SkeletonListItem';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
+const buildStyles = () => _reactNative.StyleSheet.create({
   base: {
     overflow: 'hidden'
   },
-  shimmer: {
+  shimmerBand: {
     position: 'absolute',
     top: 0,
     bottom: 0,
-    left: 0,
-    opacity: 0.55
+    left: 0
   }
 });
 var _default = exports.default = Skeleton;