@retray-dev/ui-kit 10.2.0 → 12.1.0

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]
@@ -197,26 +196,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 +212,45 @@ 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 name = React2.useId();
   React2.useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+    } else if (wasOpened.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 +258,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 +271,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: onClose,
       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 +360,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 +371,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-FFTYLPSB.mjs';
 import './chunk-EJ7ZPXOH.mjs';
-import './chunk-QY3X2UYR.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/SheetSelect.mjs

@@ -1,9 +1,9 @@
-export { SheetSelect } from './chunk-KOO4WITD.mjs';
+export { SheetSelect } from './chunk-P73V2EKS.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-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Skeleton.mjs

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

package/dist/Slider.mjs

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

package/dist/Spinner.mjs

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

package/dist/Stats.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type StatsVariant = 'elevated' | 'outlined' | 'filled';
+interface StatsProps {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    iconName?: string;
+    iconColor?: string;
+    variant?: StatsVariant;
+    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, 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,30 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type StatsVariant = 'elevated' | 'outlined' | 'filled';
+interface StatsProps {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    iconName?: string;
+    iconColor?: string;
+    variant?: StatsVariant;
+    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, 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 };