@retray-dev/ui-kit 13.0.0 → 13.2.0

package/dist/{chunk-CBIZLRYH.mjs → chunk-422IVD3H.mjs}

@@ -52,6 +52,7 @@ function AccordionItemComponent({
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
       accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0,
+      accessibilityHint: item.accessibilityHint,
       style: styles.trigger
     },
     /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),

package/dist/{chunk-4ZO5PTKF.mjs → chunk-77UOVFIS.mjs}

@@ -13,7 +13,8 @@ function Checkbox({
   label,
   disabled,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -34,6 +35,7 @@ function Checkbox({
         touchSoundDisabled: true,
         accessibilityRole: "checkbox",
         accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityHint,
         accessibilityState: { checked, disabled: !!disabled }
       },
       /* @__PURE__ */ React.createElement(

package/dist/{chunk-2QOHHBJC.mjs → chunk-7BZJRB77.mjs}

@@ -1,7 +1,7 @@
 import { impactMedium } from './chunk-ARONDO7M.mjs';
 import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useCallback, useEffect } from 'react';
+import React, { useRef, useId, useState, useEffect, useCallback } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
@@ -39,23 +39,33 @@ function Sheet({
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const ref = useRef(null);
-  const wasOpened = useRef(false);
-  const isPresentedRef = useRef(false);
+  const sheetState = useRef("idle");
+  const onCloseRef = useRef(onClose);
   const name = useId();
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false;
-    onClose?.();
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    onCloseRef.current = onClose;
   }, [onClose]);
+  const handleDismiss = useCallback(() => {
+    sheetState.current = "idle";
+    onCloseRef.current?.();
+    setTick((t) => t + 1);
+  }, []);
   useEffect(() => {
-    if (open && !isPresentedRef.current) {
-      impactMedium();
-      ref.current?.present();
-      wasOpened.current = true;
-      isPresentedRef.current = true;
-    } else if (!open && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss();
+    if (open) {
+      if (sheetState.current === "idle") {
+        sheetState.current = "presenting";
+        impactMedium();
+        ref.current?.present();
+        sheetState.current = "presented";
+      }
+    } else {
+      if (sheetState.current === "presented" || sheetState.current === "presenting") {
+        sheetState.current = "dismissing";
+        ref.current?.dismiss();
+      }
     }
-  }, [open]);
+  }, [open, tick]);
   const renderBackdrop = useCallback(
     (props) => /* @__PURE__ */ React.createElement(
       BottomSheetBackdrop,
@@ -191,4 +201,4 @@ var styles = StyleSheet.create({
   }
 });
 
-export { Sheet };
+export { Sheet, SheetContent, SheetFooter, SheetHeader };

package/dist/{chunk-UOKFSFNJ.mjs → chunk-C5ZRMR2E.mjs}

@@ -16,6 +16,7 @@ function Slider({
   showValue = false,
   formatValue = (v) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style
 }) {
@@ -34,6 +35,7 @@ function Slider({
       style: [styles.wrapper, style],
       accessibilityRole: "adjustable",
       accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
       accessibilityValue: {
         min: minimumValue,
         max: maximumValue,

package/dist/{chunk-E4EQSCKR.mjs → chunk-COA2YZOX.mjs}

@@ -22,7 +22,8 @@ function MenuItemBase({
   showSeparator = false,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -53,6 +54,7 @@ function MenuItemBase({
       activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
+      accessibilityHint,
       accessibilityState: { disabled }
     },
     resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconContainer }, resolvedIcon) : null,

package/dist/{chunk-6QLBHUEG.mjs → chunk-CZN6L2QU.mjs}

@@ -31,7 +31,8 @@ function ListItemBase({
   subtitleStyle,
   subtitleNumberOfLines = 2,
   captionStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -96,6 +97,7 @@ function ListItemBase({
         activateOnHover: true,
         accessibilityRole: "button",
         accessibilityLabel: a11yLabel,
+        accessibilityHint,
         accessibilityState: { disabled: !!disabled }
       },
       content

package/dist/{chunk-BTUW5LSG.mjs → chunk-E2PONRJG.mjs}

@@ -15,7 +15,7 @@ var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 var ICON_SIZE = s(13);
 var DISABLED_OPACITY = 0.45;
-function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
+function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel, accessibilityHint }) {
   const { colors } = useTheme();
   const isDisabled = !!disabled;
   return /* @__PURE__ */ React.createElement(View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
@@ -30,6 +30,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
+      accessibilityHint,
       accessibilityState: { checked, disabled: isDisabled },
       style: styles.touchable
     },

package/dist/{chunk-6CR4S6W2.mjs → chunk-H6MQL7PS.mjs}

@@ -1,5 +1,6 @@
 import { IconButton } from './chunk-ZTPYUU5C.mjs';
 import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
 import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
@@ -11,6 +12,7 @@ function AppHeader({
   subtitle,
   onBack,
   backIconName = "chevron-left",
+  iconName,
   left,
   right,
   titleAlign = "auto",
@@ -24,7 +26,7 @@ function AppHeader({
   const { width } = useWindowDimensions();
   const isWide = width >= BREAKPOINTS.wide;
   const centered = titleAlign === "center" || titleAlign === "auto" && isWide;
-  const leftNode = left ?? (onBack ? /* @__PURE__ */ React.createElement(
+  const leftNode = left ?? /* @__PURE__ */ React.createElement(React.Fragment, null, onBack ? /* @__PURE__ */ React.createElement(
     IconButton,
     {
       iconName: backIconName,
@@ -33,7 +35,7 @@ function AppHeader({
       onPress: onBack,
       accessibilityLabel: "Atr\xE1s"
     }
-  ) : null);
+  ) : null, iconName && !left ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: 20, color: colors.foreground }) : null);
   const titleBlock = /* @__PURE__ */ React.createElement(View, { style: [styles.titleBlock, centered && styles.titleBlockCentered], pointerEvents: "none" }, title ? /* @__PURE__ */ React.createElement(
     Text,
     {
@@ -83,10 +85,13 @@ var styles = StyleSheet.create({
     minWidth: s(44),
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start"
+    justifyContent: "flex-start",
+    paddingLeft: s(8),
+    gap: s(4)
   },
   sideRight: {
-    justifyContent: "flex-end"
+    justifyContent: "flex-end",
+    paddingRight: s(8)
   },
   titleBlock: {
     flex: 1,

package/dist/{chunk-EROPDCB5.mjs → chunk-HHOOFDBA.mjs}

@@ -4,7 +4,6 @@ import { impactLight } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
-import { __require } from './chunk-Y6FXYEAI.mjs';
 import React, { useState } from 'react';
 import { Image } from 'expo-image';
 import { StyleSheet, View, Text } from 'react-native';
@@ -20,7 +19,6 @@ function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = "cover",
-  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
@@ -28,25 +26,32 @@ function ImageUpload({
 }) {
   const { colors } = useTheme();
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [isPicking, setIsPicking] = useState(false);
   const handlePress = async () => {
-    if (disabled || loading) return;
+    if (disabled || loading || isPicking) return;
     impactLight();
     onPickerStarting?.();
-    let picker;
+    setIsPicking(true);
     try {
-      picker = __require("expo-image-picker");
+      const { launchImageLibrary } = await import('react-native-image-picker');
+      const result = await new Promise((resolve) => {
+        launchImageLibrary(
+          {
+            mediaType: "photo",
+            quality: 0.8,
+            selectionLimit: 1,
+            includeBase64: false
+          },
+          resolve
+        );
+      });
+      if (!result.didCancel && !result.errorCode && result.assets?.[0]?.uri) {
+        setImageLoaded(false);
+        onChange?.(result.assets[0].uri);
+      }
     } catch {
-      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed.");
-      return;
-    }
-    const result = await picker.launchImageLibraryAsync({
-      mediaTypes: ["images"],
-      allowsEditing,
-      quality: 0.8
-    });
-    if (!result.canceled && result.assets?.[0]) {
-      setImageLoaded(false);
-      onChange?.(result.assets[0].uri);
+    } finally {
+      setIsPicking(false);
     }
   };
   const containerStyle = {
@@ -89,7 +94,7 @@ function ImageUpload({
       },
       placeholder
     ) : null),
-    loading ? /* @__PURE__ */ React.createElement(View, { style: [styles.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React.createElement(Spinner, { size: "md" })) : null,
+    loading || isPicking ? /* @__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
   );
 }
@@ -112,12 +117,12 @@ var styles = StyleSheet.create({
   },
   editBadge: {
     position: "absolute",
-    bottom: vs(8),
-    right: s(8)
+    bottom: vs(14),
+    right: s(14)
   },
   editBadgeInner: {
-    width: s(28),
-    height: s(28),
+    width: s(24),
+    height: s(24),
     borderRadius: 999,
     alignItems: "center",
     justifyContent: "center"

package/dist/{chunk-URIH43IJ.mjs → chunk-IDVUZIVY.mjs}

@@ -20,7 +20,8 @@ function Select({
   error,
   disabled,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const [pickerVisible, setPickerVisible] = useState(false);
@@ -64,6 +65,7 @@ function Select({
       touchSoundDisabled: true,
       accessibilityRole: "combobox",
       accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
       accessibilityValue: { text: selected?.label ?? placeholder },
       accessibilityState: { disabled: !!disabled, expanded: pickerVisible }
     },

package/dist/{chunk-MP7GLMIR.mjs → chunk-NPCBNGNE.mjs}

@@ -30,7 +30,6 @@ function Cell({ item, selected, width, onPress }) {
         { width },
         styles.cell,
         {
-          backgroundColor: selected ? colors.primary + "14" : colors.surface,
           borderColor: selected ? colors.primary : "transparent"
         },
         item.disabled && styles.cellDisabled

package/dist/{chunk-V2ZB2XNS.mjs → chunk-UMZTPUB3.mjs}

@@ -2,7 +2,7 @@ import { Button } from './chunk-Y6YS33GM.mjs';
 import { impactMedium, notificationSuccess, selectionAsync } from './chunk-ARONDO7M.mjs';
 import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useCallback, useEffect } from 'react';
+import React, { useRef, useId, useState, useEffect, useCallback } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -18,28 +18,39 @@ function ConfirmDialog({
   loading = false,
   showCloseButton = false,
   onConfirm,
-  onCancel
+  onCancel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const ref = useRef(null);
-  const wasOpened = useRef(false);
-  const isPresentedRef = useRef(false);
+  const dialogState = useRef("idle");
+  const onCancelRef = useRef(onCancel);
   const name = useId();
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false;
-    onCancel();
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    onCancelRef.current = onCancel;
   }, [onCancel]);
+  const handleDismiss = useCallback(() => {
+    dialogState.current = "idle";
+    onCancelRef.current?.();
+    setTick((t) => t + 1);
+  }, []);
   useEffect(() => {
-    if (visible && !isPresentedRef.current) {
-      impactMedium();
-      ref.current?.present();
-      wasOpened.current = true;
-      isPresentedRef.current = true;
-    } else if (!visible && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss();
+    if (visible) {
+      if (dialogState.current === "idle") {
+        dialogState.current = "presenting";
+        impactMedium();
+        ref.current?.present();
+        dialogState.current = "presented";
+      }
+    } else {
+      if (dialogState.current === "presented" || dialogState.current === "presenting") {
+        dialogState.current = "dismissing";
+        ref.current?.dismiss();
+      }
     }
-  }, [visible]);
+  }, [visible, tick]);
   const renderBackdrop = useCallback(
     (props) => /* @__PURE__ */ React.createElement(
       BottomSheetBackdrop,
@@ -89,6 +100,7 @@ function ConfirmDialog({
           notificationSuccess();
           onConfirm();
         },
+        accessibilityHint,
         icon: /* @__PURE__ */ React.createElement(
           Feather,
           {

package/dist/fonts.mjs

@@ -1,5 +1,3 @@
-import './chunk-Y6FXYEAI.mjs';
-
 // src/fonts.ts
 var SohneFontNames = [
   // Sohne base (14)

package/dist/index.d.mts

@@ -23,7 +23,7 @@ export { RadioGroup, RadioGroupProps, RadioOption } from './RadioGroup.mjs';
 export { TabItem, Tabs, TabsContent, TabsContentProps, TabsProps } from './Tabs.mjs';
 export { Accordion, AccordionItem, AccordionProps } from './Accordion.mjs';
 export { Slider, SliderProps } from './Slider.mjs';
-export { Sheet, SheetProps } from './Sheet.mjs';
+export { Sheet, SheetContent, SheetContentProps, SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps, SheetProps } from './Sheet.mjs';
 export { Select, SelectOption, SelectProps } from './Select.mjs';
 export { ToastProvider, useToast } from './Toast.mjs';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput.mjs';

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { RadioGroup, RadioGroupProps, RadioOption } from './RadioGroup.js';
 export { TabItem, Tabs, TabsContent, TabsContentProps, TabsProps } from './Tabs.js';
 export { Accordion, AccordionItem, AccordionProps } from './Accordion.js';
 export { Slider, SliderProps } from './Slider.js';
-export { Sheet, SheetProps } from './Sheet.js';
+export { Sheet, SheetContent, SheetContentProps, SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps, SheetProps } from './Sheet.js';
 export { Select, SelectOption, SelectProps } from './Select.js';
 export { ToastProvider, useToast } from './Toast.js';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput.js';