@retray-dev/ui-kit 13.2.0 → 13.4.0

package/src/hooks/useSheetModal.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import { impactMedium } from '../utils/haptics'
+
+type SheetState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
+export function useSheetModal(visible: boolean, onDismiss?: () => void) {
+  const ref = useRef<BottomSheetModal>(null)
+  const state = useRef<SheetState>('idle')
+  const onDismissRef = useRef(onDismiss)
+  const [tick, setTick] = useState(0)
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss
+  })
+
+  useEffect(() => {
+    if (visible) {
+      if (state.current === 'idle') {
+        state.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        state.current = 'presented'
+      }
+    } else {
+      if (state.current === 'presented' || state.current === 'presenting') {
+        state.current = 'dismissing'
+        ref.current?.dismiss()
+      }
+    }
+  }, [visible, tick])
+
+  const handleDismiss = useCallback(() => {
+    state.current = 'idle'
+    onDismissRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
+  return { ref, handleDismiss }
+}

package/src/index.ts

@@ -39,9 +39,9 @@ export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
 export * from './components/MonthPicker'
+export * from './components/Pressable'
 export * from './components/MediaCard'
 export * from './components/CategoryStrip'
-export * from './components/Pressable'
 export * from './components/DetailRow'
 export * from './components/Form'
 export * from './components/RetrayProvider'
@@ -58,6 +58,9 @@ export * from './components/ImageUpload'
 export * from './components/IconPicker'
 export * from './components/NumberStepper'
 export * from './components/Stats'
+export * from './components/Image'
+export * from './components/ScreenContainer'
+export * from './components/VirtualizedList'
 // HolographicCard is intentionally NOT re-exported here — it depends on the
 // optional peer @shopify/react-native-skia, so it must stay out of the main
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
@@ -86,6 +89,7 @@ export {
 // Hooks
 export { useConfirmDialog } from './hooks/useConfirmDialog'
 export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
+export { useSheetModal } from './hooks/useSheetModal'
 
 
 // Design tokens

package/src/theme/colors.ts

@@ -9,20 +9,6 @@ function rgbToHex(r: number, g: number, b: number): string {
   return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
 }
 
-function withAlphaOnWhite(hex: string, alpha: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  const r = rgb.r * alpha + 255 * (1 - alpha); const g = rgb.g * alpha + 255 * (1 - alpha); const b = rgb.b * alpha + 255 * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
-function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
-  const rgb = hexToRgb(hex); const bg = hexToRgb(bgHex)
-  if (!rgb || !bg) return hex
-  const r = rgb.r * alpha + bg.r * (1 - alpha); const g = rgb.g * alpha + bg.g * (1 - alpha); const b = rgb.b * alpha + bg.b * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
 function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
   const fg = hexToRgb(fgHex); const bg = hexToRgb(bgHex)
   if (!fg || !bg) return fgHex
@@ -30,14 +16,11 @@ function mixWithBackground(fgHex: string, bgHex: string, opacity: number): strin
   return rgbToHex(r, g, b)
 }
 
-function lighten(hex: string, amount: number): string {
-  return withAlphaOnWhite(hex, 1 - amount)
-}
-
-function darken(hex: string, amount: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
+function createColorPair(fg: string, bg: string, dark: boolean): { tint: string; border: string } {
+  return {
+    tint: mixWithBackground(fg, dark ? bg : '#ffffff', dark ? 0.15 : 0.08),
+    border: mixWithBackground(fg, dark ? bg : '#ffffff', dark ? 0.45 : 0.30),
+  }
 }
 
 // ─── Default palettes ─────────────────────────────────────────────────────────
@@ -91,49 +74,26 @@ export const defaultDark: ThemeColors = {
 export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
   const dark = scheme === 'dark'
   const bg = t.background
+  const WHITE = '#ffffff'
+  const BLACK = '#000000'
 
-  // AUDIT FIX: Text hierarchy opacities raised to pass WCAG AA.
-  //   foregroundSubtle was 0.55 → ~#858585 (3.5:1 fail on white)
-  //   foregroundMuted  was 0.38 → ~#ababab (2.2:1 critical fail on white)
-  //   New values on light (#1a1a1a on #ffffff):
-  //     foregroundSubtle 0.70 → ~#646464 (5.9:1 ✓ AA)
-  //     foregroundMuted  0.62 → ~#767676 (4.5:1 ✓ AA minimum)
   const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.70)
   const foregroundMuted  = mixWithBackground(t.foreground, bg, 0.62)
 
   const surface = dark
-    ? lighten(bg, -0.06)
-    : darken(bg, 0.04)
+    ? mixWithBackground(bg, BLACK, 0.94)
+    : mixWithBackground(bg, BLACK, 0.96)
   const surfaceStrong = dark
-    ? lighten(bg, -0.12)
-    : darken(bg, 0.08)
+    ? mixWithBackground(bg, BLACK, 0.88)
+    : mixWithBackground(bg, BLACK, 0.92)
 
-  // Skeleton needs higher contrast than surface to be visible.
-  // Light: 10% darken (was 4% via surface — invisible). Dark: 10% lighten.
   const skeleton = dark
-    ? lighten(bg, -0.10)
-    : darken(bg, 0.10)
-
-  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.30)
-
-  const successTint = dark
-    ? withAlphaOnDark(t.success, 0.15, bg)
-    : withAlphaOnWhite(t.success, 0.08)
-  const successBorder = dark
-    ? withAlphaOnDark(t.success, 0.45, bg)
-    : withAlphaOnWhite(t.success, 0.30)
+    ? mixWithBackground(bg, BLACK, 0.90)
+    : mixWithBackground(bg, BLACK, 0.90)
 
-  const warningTint = dark
-    ? withAlphaOnDark(t.warning, 0.15, bg)
-    : withAlphaOnWhite(t.warning, 0.08)
-  const warningBorder = dark
-    ? withAlphaOnDark(t.warning, 0.45, bg)
-    : withAlphaOnWhite(t.warning, 0.30)
+  const { tint: destructiveTint, border: destructiveBorder } = createColorPair(t.destructive, bg, dark)
+  const { tint: successTint, border: successBorder } = createColorPair(t.success, bg, dark)
+  const { tint: warningTint, border: warningBorder } = createColorPair(t.warning, bg, dark)
 
   return {
     ...t,
@@ -153,6 +113,8 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
     ring: t.accent ?? t.primary,
     input: t.border,
-    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16),
+    separator: dark
+      ? mixWithBackground(t.border, WHITE, 0.78)
+      : mixWithBackground(t.border, BLACK, 0.84),
   }
 }

package/src/tokens.ts

@@ -49,17 +49,17 @@ export const SHADOWS = {
   },
   lg: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.16,
-    shadowRadius: 16,
-    elevation: 10,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 8,
   },
   xl: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.24,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.18,
     shadowRadius: 24,
-    elevation: 18,
+    elevation: 16,
   },
 } as const
 
@@ -200,6 +200,20 @@ export const TYPOGRAPHY = {
     lineHeight: 18,
     letterSpacing: 0,
   },
+  'code-sm': {
+    fontFamily: 'SohneMono-Regular',
+    fontSize: 13,
+    fontWeight: '400' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  'code-md': {
+    fontFamily: 'SohneMono-Regular',
+    fontSize: 15,
+    fontWeight: '400' as const,
+    lineHeight: 22,
+    letterSpacing: 0,
+  },
 } as const
 
 // ─── Types ────────────────────────────────────────────────────────────────────

package/src/utils/curatedIcons.ts

@@ -106,31 +106,22 @@ const CATEGORIES: CuratedCategoryDef[] = [
   },
 ]
 
-let _allIcons: string[] | null = null
-let _categorized: CuratedCategoryDef[] | null = null
-
 export function getAllCuratedIcons(): string[] {
-  if (!_allIcons) {
-    const seen = new Set<string>()
-    const result: string[] = []
-    for (const cat of CATEGORIES) {
-      for (const name of cat.icons) {
-        if (!seen.has(name)) {
-          seen.add(name)
-          result.push(name)
-        }
+  const seen = new Set<string>()
+  const result: string[] = []
+  for (const cat of CATEGORIES) {
+    for (const name of cat.icons) {
+      if (!seen.has(name)) {
+        seen.add(name)
+        result.push(name)
       }
     }
-    _allIcons = result
   }
-  return _allIcons!
+  return result
 }
 
 export function getCuratedCategories(): CuratedCategoryDef[] {
-  if (!_categorized) {
-    _categorized = CATEGORIES.map((cat) => ({ ...cat, icons: [...cat.icons] }))
-  }
-  return _categorized!
+  return CATEGORIES.map((cat) => ({ ...cat, icons: [...cat.icons] }))
 }
 
 export function getIconCategory(name: string): string | undefined {

package/src/utils/haptics.ts

@@ -1,45 +1,34 @@
 import { Platform } from 'react-native'
+import * as Haptics from 'expo-haptics'
 
-let _haptics: typeof import('expo-haptics') | null = null
-let _loaded = false
-
-async function getHaptics(): Promise<typeof import('expo-haptics') | null> {
-  if (Platform.OS === 'web') return null
-  if (!_loaded) {
-    _loaded = true
-    try {
-      _haptics = await import('expo-haptics')
-    } catch {
-      _haptics = null
-    }
-  }
-  return _haptics
+function maybeHaptics() {
+  return Platform.OS === 'web' ? null : Haptics
 }
 
 export function selectionAsync(): void {
-  getHaptics().then((h) => h?.selectionAsync())
+  maybeHaptics()?.selectionAsync()
 }
 
 export function impactLight(): void {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light))
+  maybeHaptics()?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
 }
 
 export function impactMedium(): void {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium))
+  maybeHaptics()?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
 }
 
 export function impactHeavy(): void {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Heavy))
+  maybeHaptics()?.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
 }
 
 export function notificationSuccess(): void {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success))
+  maybeHaptics()?.notificationAsync(Haptics.NotificationFeedbackType.Success)
 }
 
 export function notificationError(): void {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Error))
+  maybeHaptics()?.notificationAsync(Haptics.NotificationFeedbackType.Error)
 }
 
 export function notificationWarning(): void {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Warning))
+  maybeHaptics()?.notificationAsync(Haptics.NotificationFeedbackType.Warning)
 }

package/src/utils/icons.ts

@@ -26,27 +26,20 @@ const ALL_FAMILIES: { name: IconFamily; component: IconComponentType; glyphMap?:
   { name: 'Ionicons',      component: Ionicons as unknown as IconComponentType },
 ]
 
-// Lazy singleton cache — populates on first Icon render, persists for session.
-let glyphCacheInitialized = false
-function ensureGlyphCache() {
-  if (glyphCacheInitialized) return
-  glyphCacheInitialized = true
-  for (const entry of ALL_FAMILIES) {
-    try {
-      entry.glyphMap = (entry.component as unknown as { glyphMap?: Record<string, number> }).glyphMap
-    } catch {
-      entry.glyphMap = {}
-    }
+function getGlyphMap(component: IconComponentType): Record<string, number> {
+  try {
+    return (component as unknown as { glyphMap?: Record<string, number> }).glyphMap ?? {}
+  } catch {
+    return {}
   }
 }
 
 export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
-  ensureGlyphCache()
   const entry = family
     ? ALL_FAMILIES.find((f) => f.name === family)
     : ALL_FAMILIES.find((f) => {
-        const glyphMap = f.glyphMap
-        return glyphMap ? name in glyphMap : false
+        const glyphMap = getGlyphMap(f.component)
+        return name in glyphMap
       })
 
   if (!entry) return null

package/dist/ListGroup.d.mts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-
-type ListGroupVariant = 'plain' | 'card';
-interface ListGroupProps {
-    children: React.ReactNode;
-    /**
-     * - `plain` (default): no background, plain ListItems inside.
-     * - `card`: card surface with background + border wrapping plain ListItems.
-     */
-    variant?: ListGroupVariant;
-    style?: ViewStyle;
-}
-interface ListGroupHeaderProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-interface ListGroupFooterProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-/**
- * ListGroup wraps multiple ListItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-declare function ListGroup({ children, variant, style }: ListGroupProps): React.JSX.Element;
-declare namespace ListGroup {
-    var Header: typeof ListGroupHeader;
-    var Footer: typeof ListGroupFooter;
-}
-declare function ListGroupHeader({ children, style }: ListGroupHeaderProps): React.JSX.Element;
-declare function ListGroupFooter({ children, style }: ListGroupFooterProps): React.JSX.Element;
-
-export { ListGroup, ListGroupFooter, type ListGroupFooterProps, ListGroupHeader, type ListGroupHeaderProps, type ListGroupProps, type ListGroupVariant };

package/dist/ListGroup.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-
-type ListGroupVariant = 'plain' | 'card';
-interface ListGroupProps {
-    children: React.ReactNode;
-    /**
-     * - `plain` (default): no background, plain ListItems inside.
-     * - `card`: card surface with background + border wrapping plain ListItems.
-     */
-    variant?: ListGroupVariant;
-    style?: ViewStyle;
-}
-interface ListGroupHeaderProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-interface ListGroupFooterProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-/**
- * ListGroup wraps multiple ListItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-declare function ListGroup({ children, variant, style }: ListGroupProps): React.JSX.Element;
-declare namespace ListGroup {
-    var Header: typeof ListGroupHeader;
-    var Footer: typeof ListGroupFooter;
-}
-declare function ListGroupHeader({ children, style }: ListGroupHeaderProps): React.JSX.Element;
-declare function ListGroupFooter({ children, style }: ListGroupFooterProps): React.JSX.Element;
-
-export { ListGroup, ListGroupFooter, type ListGroupFooterProps, ListGroupHeader, type ListGroupHeaderProps, type ListGroupProps, type ListGroupVariant };

package/dist/ListGroup.mjs

@@ -1,4 +0,0 @@
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-OBV72JD4.mjs';
-import './chunk-QY3X2UYR.mjs';
-import './chunk-KSSVIFYR.mjs';
-import './chunk-2CE3TQVY.mjs';

package/dist/MenuGroup.d.mts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-
-type MenuGroupVariant = 'plain' | 'card';
-interface MenuGroupProps {
-    children: React.ReactNode;
-    /**
-     * - `plain` (default): no background, plain MenuItems inside.
-     * - `card`: card surface with background + border wrapping plain MenuItems.
-     */
-    variant?: MenuGroupVariant;
-    style?: ViewStyle;
-}
-interface MenuGroupHeaderProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-interface MenuGroupFooterProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-/**
- * MenuGroup wraps multiple MenuItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-declare function MenuGroup({ children, variant, style }: MenuGroupProps): React.JSX.Element;
-declare namespace MenuGroup {
-    var Header: typeof MenuGroupHeader;
-    var Footer: typeof MenuGroupFooter;
-}
-declare function MenuGroupHeader({ children, style }: MenuGroupHeaderProps): React.JSX.Element;
-declare function MenuGroupFooter({ children, style }: MenuGroupFooterProps): React.JSX.Element;
-
-export { MenuGroup, MenuGroupFooter, type MenuGroupFooterProps, MenuGroupHeader, type MenuGroupHeaderProps, type MenuGroupProps, type MenuGroupVariant };

package/dist/MenuGroup.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-
-type MenuGroupVariant = 'plain' | 'card';
-interface MenuGroupProps {
-    children: React.ReactNode;
-    /**
-     * - `plain` (default): no background, plain MenuItems inside.
-     * - `card`: card surface with background + border wrapping plain MenuItems.
-     */
-    variant?: MenuGroupVariant;
-    style?: ViewStyle;
-}
-interface MenuGroupHeaderProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-interface MenuGroupFooterProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-/**
- * MenuGroup wraps multiple MenuItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-declare function MenuGroup({ children, variant, style }: MenuGroupProps): React.JSX.Element;
-declare namespace MenuGroup {
-    var Header: typeof MenuGroupHeader;
-    var Footer: typeof MenuGroupFooter;
-}
-declare function MenuGroupHeader({ children, style }: MenuGroupHeaderProps): React.JSX.Element;
-declare function MenuGroupFooter({ children, style }: MenuGroupFooterProps): React.JSX.Element;
-
-export { MenuGroup, MenuGroupFooter, type MenuGroupFooterProps, MenuGroupHeader, type MenuGroupHeaderProps, type MenuGroupProps, type MenuGroupVariant };

package/dist/MenuGroup.js

@@ -1,106 +0,0 @@
-'use strict';
-
-var React2 = require('react');
-var reactNative = require('react-native');
-var reactNativeSizeMatters = require('react-native-size-matters');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-
-// src/components/MenuGroup/MenuGroup.tsx
-var ThemeContext = React2.createContext(void 0);
-function useTheme() {
-  const context = React2.useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}
-var isWeb = reactNative.Platform.OS === "web";
-var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
-var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
-
-// src/tokens.ts
-var RADIUS = {
-  md: 14};
-
-// src/components/MenuGroup/MenuGroup.tsx
-function MenuGroup({ children, variant = "plain", style }) {
-  const { colors } = useTheme();
-  const processedChildren = React2__default.default.Children.map(children, (child, index) => {
-    if (!React2__default.default.isValidElement(child)) return child;
-    if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
-      return child;
-    }
-    const childProps = child.props;
-    const isMenuItem = "onPress" in childProps;
-    if (!isMenuItem) return child;
-    const isLast = index === React2__default.default.Children.count(children) - 1;
-    if (childProps["showSeparator"] === void 0 && !isLast) {
-      return React2__default.default.cloneElement(child, {
-        showSeparator: true
-      });
-    }
-    return child;
-  });
-  const cardStyle = variant === "card" ? {
-    backgroundColor: colors.card,
-    borderRadius: RADIUS.md,
-    borderWidth: 1,
-    borderColor: colors.border,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 6,
-    elevation: 2,
-    paddingVertical: vs(4)
-  } : {};
-  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.container, cardStyle, style] }, processedChildren);
-}
-function MenuGroupHeader({ children, style }) {
-  const { colors } = useTheme();
-  if (typeof children === "string") {
-    return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
-  }
-  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, children);
-}
-function MenuGroupFooter({ children, style }) {
-  const { colors } = useTheme();
-  if (typeof children === "string") {
-    return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.footer, style] }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
-  }
-  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.footer, style] }, children);
-}
-MenuGroup.Header = MenuGroupHeader;
-MenuGroup.Footer = MenuGroupFooter;
-var styles = reactNative.StyleSheet.create({
-  container: {
-    overflow: "hidden"
-  },
-  header: {
-    paddingHorizontal: s(16),
-    paddingTop: vs(12),
-    paddingBottom: vs(8),
-    borderBottomWidth: reactNative.StyleSheet.hairlineWidth
-  },
-  headerText: {
-    fontFamily: "Sohne-SemiBold",
-    fontSize: 13,
-    letterSpacing: 0.32,
-    textTransform: "uppercase"
-  },
-  footer: {
-    paddingHorizontal: s(16),
-    paddingTop: vs(8),
-    paddingBottom: vs(12)
-  },
-  footerText: {
-    fontFamily: "Sohne-Regular",
-    fontSize: 12
-  }
-});
-
-exports.MenuGroup = MenuGroup;
-exports.MenuGroupFooter = MenuGroupFooter;
-exports.MenuGroupHeader = MenuGroupHeader;

package/dist/MenuGroup.mjs

@@ -1,4 +0,0 @@
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-S2VGME7X.mjs';
-import './chunk-QY3X2UYR.mjs';
-import './chunk-KSSVIFYR.mjs';
-import './chunk-2CE3TQVY.mjs';

package/dist/chunk-ARONDO7M.mjs

@@ -1,40 +0,0 @@
-import { Platform } from 'react-native';
-
-// src/utils/haptics.ts
-var _haptics = null;
-var _loaded = false;
-async function getHaptics() {
-  if (Platform.OS === "web") return null;
-  if (!_loaded) {
-    _loaded = true;
-    try {
-      _haptics = await import('expo-haptics');
-    } catch {
-      _haptics = null;
-    }
-  }
-  return _haptics;
-}
-function selectionAsync() {
-  getHaptics().then((h) => h?.selectionAsync());
-}
-function impactLight() {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
-}
-function impactMedium() {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium));
-}
-function impactHeavy() {
-  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Heavy));
-}
-function notificationSuccess() {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
-}
-function notificationError() {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Error));
-}
-function notificationWarning() {
-  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Warning));
-}
-
-export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync };