@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/Sheet.d.ts

@@ -18,72 +18,30 @@ interface SheetProps {
     open: boolean;
     onClose: () => void;
     title?: string;
-    /** Secondary text below title. */
     subtitle?: string;
-    /** @deprecated Use `subtitle` instead. */
-    description?: string;
-    /** Show an X close button in the header. */
     showCloseButton?: boolean;
     children?: React.ReactNode;
-    /** Style for the inner content container. */
     style?: ViewStyle;
-    /** Style for the content wrapper (outside the scroll container). */
     contentStyle?: ViewStyle;
-    /** Render children inside BottomSheetScrollView. */
+    /** Render children inside BottomSheetScrollView instead of BottomSheetView. */
     scrollable?: boolean;
-    /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+    /** Cap sheet height (dp). Content scrolls when exceeding this value. Requires `scrollable`. */
     maxHeight?: number;
-    /**
-     * Keyboard behavior — how the sheet responds to keyboard appearance.
-     * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
-     * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
-     * - 'extend': extend sheet to maximum snap point
-     *
-     * Default: 'interactive' on both platforms.
-     */
     keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
-    /**
-     * Keyboard blur behavior — what happens when keyboard dismisses.
-     * - 'none': do nothing
-     * - 'restore': restore sheet to previous position (default)
-     */
     keyboardBlurBehavior?: 'none' | 'restore';
-    /**
-     * Blur keyboard when user starts dragging the sheet down.
-     * Default: true (recommended for better UX)
-     */
     enableBlurKeyboardOnGesture?: boolean;
-    /**
-     * Android-only: defines keyboard input mode.
-     * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
-     * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
-     */
     android_keyboardInputMode?: 'adjustPan' | 'adjustResize';
-    /** Sticky footer rendered below the scroll area. */
     footer?: React.ReactNode;
     /**
-     * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+     * Array of snap points (e.g., ['50%', '85%'] or [200, 500]).
      * When provided, disables enableDynamicSizing.
-     * When omitted, sheet uses dynamic sizing (auto-fits content).
      */
     snapPoints?: (string | number)[];
-    /**
-     * When true, render as a centered modal dialog on wide screens (width ≥
-     * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
-     * bottom sheet. Use for store/category/picker dialogs that should feel native
-     * on tablets and web.
-     *
-     * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
-     * is not required there — use a regular `TextInput`.
-     */
-    responsive?: boolean;
-    /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
-    dialogMaxWidth?: number;
 }
 declare function SheetHeader({ children, style }: SheetHeaderProps): React.JSX.Element;
 declare function SheetContent({ children, style }: SheetContentProps): React.JSX.Element;
 declare function SheetFooter({ children, style }: SheetFooterProps): React.JSX.Element;
-declare function Sheet({ open, onClose, title, subtitle, description, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, responsive, dialogMaxWidth, }: SheetProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, subtitle, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, }: SheetProps): React.JSX.Element;
 declare namespace Sheet {
     var Header: typeof SheetHeader;
     var Content: typeof SheetContent;

package/dist/Sheet.js

@@ -2,7 +2,7 @@
 
 var React2 = require('react');
 var reactNative = require('react-native');
-var BottomSheet = require('@gorhom/bottom-sheet');
+var bottomSheet = require('@gorhom/bottom-sheet');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
@@ -10,7 +10,6 @@ var reactNativeSizeMatters = require('react-native-size-matters');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
-var BottomSheet__default = /*#__PURE__*/_interopDefault(BottomSheet);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -152,6 +151,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -164,6 +164,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -197,26 +198,7 @@ var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
 var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
 var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
 
-// src/tokens.ts
-var RADIUS = {
-  lg: 20};
-var SHADOWS = {
-  xl: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.24,
-    shadowRadius: 24,
-    elevation: 18
-  }
-};
-var BREAKPOINTS = {
-  wide: 700
-};
-
 // src/components/Sheet/Sheet.tsx
-var SCREEN_HEIGHT = reactNative.Dimensions.get("window").height;
-var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
-var isAndroid = reactNative.Platform.OS === "android";
 function SheetHeader({ children, style }) {
   return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, style] }, children);
 }
@@ -232,45 +214,51 @@ function Sheet({
   onClose,
   title,
   subtitle,
-  description,
   showCloseButton = false,
   children,
   style,
   contentStyle,
-  scrollable,
+  scrollable = false,
   maxHeight,
-  keyboardBehavior,
+  keyboardBehavior = "interactive",
   keyboardBlurBehavior = "restore",
   enableBlurKeyboardOnGesture = true,
   android_keyboardInputMode = "adjustPan",
   footer,
-  snapPoints,
-  responsive = false,
-  dialogMaxWidth = 480
+  snapPoints
 }) {
   const { colors } = useTheme();
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  const { width: windowWidth } = reactNative.useWindowDimensions();
   const ref = React2.useRef(null);
-  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide;
-  const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
+  const wasOpened = React2.useRef(false);
+  const isPresentedRef = React2.useRef(false);
+  const name = React2.useId();
+  const handleDismiss = React2.useCallback(() => {
+    isPresentedRef.current = false;
+    onClose?.();
+  }, [onClose]);
   React2.useEffect(() => {
-    if (open) {
+    if (open && !isPresentedRef.current) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+      isPresentedRef.current = true;
+    } else if (!open && wasOpened.current && isPresentedRef.current) {
+      ref.current?.dismiss();
     }
   }, [open]);
-  const renderBackdrop = React2.useCallback((props) => /* @__PURE__ */ React2__default.default.createElement(
-    BottomSheet.BottomSheetBackdrop,
-    {
-      ...props,
-      disappearsOnIndex: -1,
-      appearsOnIndex: 0,
-      pressBehavior: "close"
-    }
-  ), []);
+  const renderBackdrop = React2.useCallback(
+    (props) => /* @__PURE__ */ React2__default.default.createElement(
+      bottomSheet.BottomSheetBackdrop,
+      {
+        ...props,
+        disappearsOnIndex: -1,
+        appearsOnIndex: 0,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
   const childArray = React2__default.default.Children.toArray(children);
   const customHeader = childArray.find((child) => React2__default.default.isValidElement(child) && child.type === SheetHeader);
   const customContent = childArray.find((child) => React2__default.default.isValidElement(child) && child.type === SheetContent);
@@ -278,8 +266,7 @@ function Sheet({
   const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
     (child) => !React2__default.default.isValidElement(child) || child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter
   ) : children;
-  const effectiveSubtitle = subtitle ?? description;
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
+  const showHeader = !!(title || subtitle || showCloseButton) && !customHeader;
   const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, { backgroundColor: colors.card }], accessibilityRole: "header" }, /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.headerRow }, title ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React2__default.default.createElement(
     reactNative.TouchableOpacity,
     {
@@ -292,77 +279,49 @@ function Sheet({
       hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
     },
     /* @__PURE__ */ React2__default.default.createElement(vectorIcons.AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
-  ) : null), effectiveSubtitle ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  ) : null), subtitle ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, subtitle) : null) : null;
   const contentNode = customContent ? customContent : filteredChildren;
   const effectiveFooter = customFooter ? customFooter : footer;
-  const renderFooter = React2.useCallback((props) => {
-    if (!effectiveFooter) return null;
-    return /* @__PURE__ */ React2__default.default.createElement(BottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
-  }, [effectiveFooter]);
-  if (asDialog) {
-    return /* @__PURE__ */ React2__default.default.createElement(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React2__default.default.createElement(
-      reactNative.Pressable,
-      {
-        style: [
-          styles.dialogCard,
-          { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 }
-        ],
-        onPress: () => {
-        }
-      },
-      headerNode,
-      /* @__PURE__ */ React2__default.default.createElement(
-        reactNative.ScrollView,
-        {
-          contentContainerStyle: [styles.dialogContent, style],
-          style: contentStyle,
-          showsVerticalScrollIndicator: true,
-          bounces: false
-        },
-        contentNode
-      ),
-      effectiveFooter
-    )));
-  }
-  const useScroll = scrollable || !!maxHeight;
-  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
+  const renderFooter = React2.useCallback(
+    (props) => {
+      if (!effectiveFooter) return null;
+      return /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
+    },
+    [effectiveFooter]
+  );
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React2__default.default.createElement(
-    BottomSheet__default.default,
+    bottomSheet.BottomSheetModal,
     {
       ref,
-      index: -1,
-      onClose,
+      name,
+      onDismiss: handleDismiss,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
-      maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
+      maxDynamicContentSize: useDynamicSizing && maxHeight ? maxHeight : void 0,
       backdropComponent: renderBackdrop,
       footerComponent: effectiveFooter ? renderFooter : void 0,
-      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
+      backgroundStyle: { ...styles.background, backgroundColor: colors.card },
+      handleIndicatorStyle: { ...styles.handle, backgroundColor: colors.border },
       enablePanDownToClose: true,
       topInset: insets.top,
-      keyboardBehavior: effectiveKeyboardBehavior,
+      keyboardBehavior,
       keyboardBlurBehavior,
       android_keyboardInputMode,
       enableBlurKeyboardOnGesture
     },
-    useScroll ? /* @__PURE__ */ React2__default.default.createElement(
-      BottomSheet.BottomSheetScrollView,
+    scrollable ? /* @__PURE__ */ React2__default.default.createElement(
+      bottomSheet.BottomSheetScrollView,
       {
-        contentContainerStyle: [
-          styles.scrollContent,
-          style
-        ],
+        contentContainerStyle: [styles.scrollContent, style],
         style: contentStyle,
         showsVerticalScrollIndicator: true,
-        indicatorStyle: "black",
-        persistentScrollbar: isAndroid,
+        bounces: false,
         stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
       contentNode
-    ) : /* @__PURE__ */ React2__default.default.createElement(BottomSheet.BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
+    ) : /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
   );
 }
 Sheet.Header = SheetHeader;
@@ -409,8 +368,7 @@ var styles = reactNative.StyleSheet.create({
   },
   scrollContent: {
     paddingHorizontal: s(16),
-    paddingBottom: vs(32),
-    paddingRight: s(16)
+    paddingBottom: vs(32)
   },
   sheetContent: {
     gap: vs(16)
@@ -421,33 +379,15 @@ var styles = reactNative.StyleSheet.create({
     borderTopWidth: 1,
     flexDirection: "row",
     gap: s(12)
-  },
-  dialogBackdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: s(24)
-  },
-  dialogCard: {
-    width: "100%",
-    borderRadius: RADIUS.lg,
-    paddingTop: vs(16),
-    overflow: "hidden",
-    ...SHADOWS.xl
-  },
-  dialogContent: {
-    paddingHorizontal: s(16),
-    paddingBottom: vs(16)
   }
 });
 
 Object.defineProperty(exports, "BottomSheetModalProvider", {
   enumerable: true,
-  get: function () { return BottomSheet.BottomSheetModalProvider; }
+  get: function () { return bottomSheet.BottomSheetModalProvider; }
 });
 Object.defineProperty(exports, "SheetTextInput", {
   enumerable: true,
-  get: function () { return BottomSheet.BottomSheetTextInput; }
+  get: function () { return bottomSheet.BottomSheetTextInput; }
 });
 exports.Sheet = Sheet;

package/dist/Sheet.mjs

@@ -1,6 +1,5 @@
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-M3C7XM2M.mjs';
 import './chunk-EJ7ZPXOH.mjs';
-import './chunk-QY3X2UYR.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/SheetSelect.js

@@ -163,6 +163,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -175,6 +176,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/SheetSelect.mjs

@@ -1,9 +1,9 @@
-export { SheetSelect } from './chunk-KOO4WITD.mjs';
+export { SheetSelect } from './chunk-KSUWPU2F.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Skeleton.d.mts

@@ -10,9 +10,11 @@ interface SkeletonProps {
     preset?: SkeletonPreset;
     /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
     diameter?: number;
+    /** Override the skeleton background color. Defaults to `colors.skeleton`. */
+    backgroundColor?: string;
     style?: ViewStyle;
 }
-declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
+declare function Skeleton({ width, height, borderRadius, preset, diameter, backgroundColor, style, }: SkeletonProps): React.JSX.Element;
 declare namespace Skeleton {
     var MediaCard: typeof MediaCardSkeleton;
     var ListItem: typeof ListItemSkeleton;

package/dist/Skeleton.d.ts

@@ -10,9 +10,11 @@ interface SkeletonProps {
     preset?: SkeletonPreset;
     /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
     diameter?: number;
+    /** Override the skeleton background color. Defaults to `colors.skeleton`. */
+    backgroundColor?: string;
     style?: ViewStyle;
 }
-declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
+declare function Skeleton({ width, height, borderRadius, preset, diameter, backgroundColor, style, }: SkeletonProps): React.JSX.Element;
 declare namespace Skeleton {
     var MediaCard: typeof MediaCardSkeleton;
     var ListItem: typeof ListItemSkeleton;

package/dist/Skeleton.js

@@ -92,6 +92,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -104,6 +105,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -159,12 +161,13 @@ function Skeleton({
   borderRadius = 6,
   preset = "base",
   diameter = 40,
+  backgroundColor,
   style
 }) {
   const { colors, colorScheme } = useTheme();
   const shimmer = Animated.useSharedValue(0);
   const [containerWidth, setContainerWidth] = React2.useState(300);
-  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
+  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.07)";
   React2.useEffect(() => {
     shimmer.value = Animated.withRepeat(
       Animated.withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Animated.Easing.linear }),
@@ -183,7 +186,7 @@ function Skeleton({
     {
       style: [
         styles.base,
-        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: backgroundColor ?? colors.skeleton },
         style
       ],
       onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),

package/dist/Skeleton.mjs

@@ -1,6 +1,6 @@
-export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
+export { Skeleton } from './chunk-QDAZGZUF.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Slider.js

@@ -150,6 +150,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -162,6 +163,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Slider.mjs

@@ -1,5 +1,5 @@
-export { Slider } from './chunk-JMOZEC77.mjs';
+export { Slider } from './chunk-RJNLAH76.mjs';
 import './chunk-EJ7ZPXOH.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Spinner.js

@@ -89,6 +89,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -101,6 +102,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Spinner.mjs

@@ -1,4 +1,4 @@
-export { Spinner } from './chunk-WBOOUHSS.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { Spinner } from './chunk-LIS6I5UP.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Stats.d.mts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type StatsVariant = 'elevated' | 'outlined' | 'filled';
+type StatsSize = 'default' | 'compact';
+interface StatsProps {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    iconName?: string;
+    iconColor?: string;
+    variant?: StatsVariant;
+    /** `'compact'` reduces everything proportionally for tight grids. */
+    size?: StatsSize;
+    onPress?: () => void;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+interface StatsGroupProps {
+    children: React.ReactNode;
+    gap?: number;
+    style?: ViewStyle;
+}
+declare function StatsComponent({ value, label, description, icon, iconName, iconColor, variant, size, onPress, style, accessibilityLabel, }: StatsProps): React.JSX.Element;
+declare function StatsGroup({ children, gap, style }: StatsGroupProps): React.JSX.Element;
+declare const Stats: React.NamedExoticComponent<StatsProps> & {
+    readonly type: typeof StatsComponent;
+} & {
+    Group: typeof StatsGroup;
+};
+
+export { Stats, type StatsGroupProps, type StatsProps, type StatsVariant };

package/dist/Stats.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type StatsVariant = 'elevated' | 'outlined' | 'filled';
+type StatsSize = 'default' | 'compact';
+interface StatsProps {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    iconName?: string;
+    iconColor?: string;
+    variant?: StatsVariant;
+    /** `'compact'` reduces everything proportionally for tight grids. */
+    size?: StatsSize;
+    onPress?: () => void;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+interface StatsGroupProps {
+    children: React.ReactNode;
+    gap?: number;
+    style?: ViewStyle;
+}
+declare function StatsComponent({ value, label, description, icon, iconName, iconColor, variant, size, onPress, style, accessibilityLabel, }: StatsProps): React.JSX.Element;
+declare function StatsGroup({ children, gap, style }: StatsGroupProps): React.JSX.Element;
+declare const Stats: React.NamedExoticComponent<StatsProps> & {
+    readonly type: typeof StatsComponent;
+} & {
+    Group: typeof StatsGroup;
+};
+
+export { Stats, type StatsGroupProps, type StatsProps, type StatsVariant };