@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-ZJKGQMYH.mjs

@@ -0,0 +1,131 @@
+import { PressableRow } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+
+function MenuItemBase({
+  label,
+  subtitle,
+  iconName,
+  icon,
+  iconColor,
+  rightRender,
+  showChevron = true,
+  onPress,
+  disabled = false,
+  variant = "plain",
+  showSeparator = false,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    selectionAsync();
+    onPress();
+  };
+  const resolvedIcon = iconName ? renderIcon(iconName, 22, iconColor ?? colors.foreground) : icon;
+  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
+  } : {};
+  const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label);
+  return /* @__PURE__ */ React.createElement(View, { style: disabled && styles.disabled }, /* @__PURE__ */ React.createElement(
+    PressableRow,
+    {
+      style: [styles.container, cardStyle, style],
+      onPress: handlePress,
+      enabled: !disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: { disabled }
+    },
+    resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconContainer }, resolvedIcon) : null,
+    /* @__PURE__ */ React.createElement(View, { style: styles.labelContainer }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, { color: colors.foreground }, labelStyle],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      label
+    ), subtitle ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.subtitle, { color: colors.foregroundMuted }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null),
+    rightRender !== void 0 ? /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: styles.rightContainer,
+        onStartShouldSetResponder: () => true,
+        onResponderRelease: () => {
+        }
+      },
+      rightRender
+    ) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-right", size: 18, color: colors.foregroundMuted }) : null
+  ), showSeparator ? /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
+}
+var MenuItem = React.memo(MenuItemBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    minHeight: vs(54),
+    gap: s(12)
+  },
+  iconContainer: {
+    width: s(22),
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  labelContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    marginTop: vs(1)
+  },
+  rightContainer: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 0
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+
+export { MenuItem };

package/dist/index-wt-orHUi.d.mts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type ThemeColors = {
+    background: string;
+    foreground: string;
+    card: string;
+    primary: string;
+    primaryForeground: string;
+    border: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
+    overlay?: string;
+    /** Color accent (e.g. Airbnb coral). Default: same as primary */
+    accent?: string;
+    /** Text color on accent background. Default: same as primaryForeground */
+    accentForeground?: string;
+};
+type ResolvedColors = ThemeColors & {
+    foregroundSubtle: string;
+    foregroundMuted: string;
+    surface: string;
+    surfaceStrong: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
+    warningTint: string;
+    warningBorder: string;
+    overlay: string;
+    accentResolved: string;
+    accentForegroundResolved: string;
+    ring: string;
+    input: string;
+    separator: string;
+};
+type Theme = {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+};
+type ColorScheme = 'light' | 'dark' | 'system';
+type ThemeContextValue = {
+    colors: ResolvedColors;
+    colorScheme: 'light' | 'dark';
+};
+
+interface RetrayProviderProps {
+    children: React.ReactNode;
+    /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
+    theme?: Theme;
+    /**
+     * - `'system'` (default): auto-detects device setting.
+     * - `'light'` / `'dark'`: forces a specific scheme.
+     */
+    colorScheme?: ColorScheme;
+}
+/**
+ * All-in-one provider that wires every provider the UI kit needs, in the one
+ * correct order:
+ *
+ * `SafeAreaProvider` → `GestureHandlerRootView` → `ThemeProvider` →
+ * `BottomSheetModalProvider` → `ToastProvider`
+ *
+ * Use this at your app root instead of nesting the five providers by hand — it
+ * removes an entire class of provider-order bugs. The individual providers stay
+ * exported for consumers who need a custom tree.
+ *
+ * @example
+ * import { RetrayProvider } from '@retray-dev/ui-kit'
+ *
+ * export default function App() {
+ *   return (
+ *     <RetrayProvider colorScheme="system">
+ *       <RootNavigator />
+ *     </RetrayProvider>
+ *   )
+ * }
+ */
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+
+export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };

package/dist/index-wt-orHUi.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type ThemeColors = {
+    background: string;
+    foreground: string;
+    card: string;
+    primary: string;
+    primaryForeground: string;
+    border: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
+    overlay?: string;
+    /** Color accent (e.g. Airbnb coral). Default: same as primary */
+    accent?: string;
+    /** Text color on accent background. Default: same as primaryForeground */
+    accentForeground?: string;
+};
+type ResolvedColors = ThemeColors & {
+    foregroundSubtle: string;
+    foregroundMuted: string;
+    surface: string;
+    surfaceStrong: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
+    warningTint: string;
+    warningBorder: string;
+    overlay: string;
+    accentResolved: string;
+    accentForegroundResolved: string;
+    ring: string;
+    input: string;
+    separator: string;
+};
+type Theme = {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+};
+type ColorScheme = 'light' | 'dark' | 'system';
+type ThemeContextValue = {
+    colors: ResolvedColors;
+    colorScheme: 'light' | 'dark';
+};
+
+interface RetrayProviderProps {
+    children: React.ReactNode;
+    /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
+    theme?: Theme;
+    /**
+     * - `'system'` (default): auto-detects device setting.
+     * - `'light'` / `'dark'`: forces a specific scheme.
+     */
+    colorScheme?: ColorScheme;
+}
+/**
+ * All-in-one provider that wires every provider the UI kit needs, in the one
+ * correct order:
+ *
+ * `SafeAreaProvider` → `GestureHandlerRootView` → `ThemeProvider` →
+ * `BottomSheetModalProvider` → `ToastProvider`
+ *
+ * Use this at your app root instead of nesting the five providers by hand — it
+ * removes an entire class of provider-order bugs. The individual providers stay
+ * exported for consumers who need a custom tree.
+ *
+ * @example
+ * import { RetrayProvider } from '@retray-dev/ui-kit'
+ *
+ * export default function App() {
+ *   return (
+ *     <RetrayProvider colorScheme="system">
+ *       <RootNavigator />
+ *     </RetrayProvider>
+ *   )
+ * }
+ */
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+
+export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };