@retray-dev/ui-kit 9.1.0 → 9.2.0

package/dist/chunk-URI2WBIV.mjs

@@ -0,0 +1,147 @@
+import { PressableChip } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, mvs, s, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text, ScrollView } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+function SheetSelectChip({
+  option,
+  selected,
+  onPress
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    selectionAsync();
+    onPress();
+  };
+  const iconColor = selected ? colors.primaryForeground : colors.foreground;
+  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null;
+  return /* @__PURE__ */ React.createElement(
+    PressableChip,
+    {
+      onPress: option.disabled ? void 0 : handlePress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: option.disabled ? `${option.label}, unavailable` : option.label,
+      accessibilityState: { selected, disabled: option.disabled }
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.chip, option.disabled && styles.chipDisabled],
+        animate: {
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border
+        },
+        transition: COLOR_TRANSITION
+      },
+      resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon) : null,
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foreground }],
+          allowFontScaling: true
+        },
+        option.label
+      )
+    )
+  );
+}
+function SheetSelect({
+  options,
+  value,
+  onValueChange,
+  multiSelect = false,
+  label,
+  error,
+  wrap = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const isSelected = (optionValue) => {
+    if (Array.isArray(value)) return value.includes(optionValue);
+    return optionValue === value;
+  };
+  const handlePress = (optionValue) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue);
+      return;
+    }
+    const currentArray = Array.isArray(value) ? value : value != null ? [value] : [];
+    const alreadySelected = currentArray.includes(optionValue);
+    const newArray = alreadySelected ? currentArray.filter((v) => v !== optionValue) : [...currentArray, optionValue];
+    onValueChange?.(newArray);
+  };
+  const chips = options.map((opt) => /* @__PURE__ */ React.createElement(
+    SheetSelectChip,
+    {
+      key: opt.value,
+      option: opt,
+      selected: isSelected(opt.value),
+      onPress: () => handlePress(opt.value)
+    }
+  ));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style], accessibilityLabel }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, wrap ? /* @__PURE__ */ React.createElement(View, { style: styles.wrapContainer }, chips) : /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContent
+    },
+    chips
+  ), error ? /* @__PURE__ */ React.createElement(Text, { style: [styles.error, { color: colors.destructive }], allowFontScaling: true, accessibilityLiveRegion: "polite" }, error) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(8)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  scrollContent: {
+    flexDirection: "row",
+    gap: s(8)
+  },
+  wrapContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: s(8)
+  },
+  chip: {
+    borderRadius: RADIUS.full,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(10),
+    minHeight: 44,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: s(5)
+  },
+  chipDisabled: {
+    opacity: 0.4
+  },
+  chipIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipLabel: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  error: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  }
+});
+
+export { SheetSelect };

package/dist/chunk-Y4GL2MHX.mjs

@@ -0,0 +1,112 @@
+import { Spinner } from './chunk-WBOOUHSS.mjs';
+import { PressableCard } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, Image, View, Text, Platform } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+
+function ImageUpload({
+  value,
+  onChange,
+  loading = false,
+  placeholder = "Tap to add image",
+  width,
+  height = 200,
+  borderRadius = RADIUS.lg,
+  resizeMode = "cover",
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = async () => {
+    if (disabled || loading) return;
+    impactLight();
+    let ImagePicker;
+    try {
+      ImagePicker = await import('expo-image-picker');
+    } catch {
+      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed. Add it as a dependency.");
+      return;
+    }
+    if (Platform.OS !== "web") {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== "granted") return;
+    }
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      quality: 0.8
+    });
+    if (!result.canceled && result.assets[0]) {
+      onChange?.(result.assets[0].uri);
+    }
+  };
+  const containerStyle = {
+    width,
+    height,
+    borderRadius,
+    borderWidth: value ? 0 : 1,
+    borderStyle: "dashed",
+    borderColor: colors.border,
+    backgroundColor: value ? "transparent" : colors.surface,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ React.createElement(
+    PressableCard,
+    {
+      onPress: handlePress,
+      enabled: !disabled && !loading,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? (value ? "Change image" : placeholder),
+      accessibilityState: { disabled: disabled || loading },
+      style: [containerStyle, style]
+    },
+    value ? /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        source: { uri: value },
+        style: [StyleSheet.absoluteFillObject, { borderRadius }],
+        resizeMode
+      }
+    ) : /* @__PURE__ */ React.createElement(View, { style: styles.placeholder }, /* @__PURE__ */ React.createElement(Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), /* @__PURE__ */ React.createElement(Text, { style: [styles.placeholderText, { color: colors.foregroundMuted }], allowFontScaling: true }, placeholder)),
+    loading ? /* @__PURE__ */ React.createElement(View, { style: [styles.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React.createElement(Spinner, { size: "md" })) : null,
+    value && !loading ? /* @__PURE__ */ React.createElement(View, { style: styles.editBadge, pointerEvents: "none" }, /* @__PURE__ */ React.createElement(View, { style: [styles.editBadgeInner, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React.createElement(Feather, { name: "edit-2", size: ms(12), color: "#fff" }))) : null
+  );
+}
+var styles = StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: vs(8)
+  },
+  placeholderText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  editBadge: {
+    position: "absolute",
+    bottom: vs(8),
+    right: s(8)
+  },
+  editBadgeInner: {
+    width: s(28),
+    height: s(28),
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export { ImageUpload };

package/dist/index.d.mts

@@ -49,6 +49,8 @@ export { SelectableGrid, SelectableGridItem, SelectableGridProps } from './Selec
 export { PricingCard, PricingCardProps, PricingFeature } from './PricingCard.mjs';
 export { TabBar, TabBarItem, TabBarProps } from './TabBar.mjs';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.mjs';
+export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.mjs';
+export { ImageUpload, ImageUploadProps } from './ImageUpload.mjs';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -158,6 +160,29 @@ declare const richHaptics: {
     rigid: () => void;
 };
 
+interface UseConfirmDialogOptions {
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface UseConfirmDialogResult<T> {
+    /** Pass to ConfirmDialog `visible` prop. */
+    visible: boolean;
+    /** The value passed to `open()` — available during the confirmation flow. */
+    target: T | null;
+    /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
+    loading: boolean;
+    /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
+    open: (target?: T) => void;
+    /** Handlers to pass directly to ConfirmDialog. */
+    dialogProps: {
+        visible: boolean;
+        loading: boolean;
+        onConfirm: () => void;
+        onCancel: () => void;
+    };
+}
+declare function useConfirmDialog<T = undefined>(options: UseConfirmDialogOptions): UseConfirmDialogResult<T>;
+
 declare const SPACING: {
     readonly xxs: 2;
     readonly xs: 4;
@@ -361,4 +386,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };

package/dist/index.d.ts

@@ -49,6 +49,8 @@ export { SelectableGrid, SelectableGridItem, SelectableGridProps } from './Selec
 export { PricingCard, PricingCardProps, PricingFeature } from './PricingCard.js';
 export { TabBar, TabBarItem, TabBarProps } from './TabBar.js';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.js';
+export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.js';
+export { ImageUpload, ImageUploadProps } from './ImageUpload.js';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -158,6 +160,29 @@ declare const richHaptics: {
     rigid: () => void;
 };
 
+interface UseConfirmDialogOptions {
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface UseConfirmDialogResult<T> {
+    /** Pass to ConfirmDialog `visible` prop. */
+    visible: boolean;
+    /** The value passed to `open()` — available during the confirmation flow. */
+    target: T | null;
+    /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
+    loading: boolean;
+    /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
+    open: (target?: T) => void;
+    /** Handlers to pass directly to ConfirmDialog. */
+    dialogProps: {
+        visible: boolean;
+        loading: boolean;
+        onConfirm: () => void;
+        onCancel: () => void;
+    };
+}
+declare function useConfirmDialog<T = undefined>(options: UseConfirmDialogOptions): UseConfirmDialogResult<T>;
+
 declare const SPACING: {
     readonly xxs: 2;
     readonly xs: 4;
@@ -361,4 +386,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };