@retray-dev/ui-kit 10.0.0 → 10.1.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v10.0.0)
+# @retray-dev/ui-kit — Component Reference (v10.1.0)
 
 This file is the AI reference for this package. Add all three lines below to your project's `CLAUDE.md` to give Claude full context — components, setup guide, and usage examples:
 
@@ -252,19 +252,19 @@ These are the only values you need to supply when customizing the theme. The lib
 | Token | Light Default | Dark Default | Semantic Role |
 |-------|--------------|--------------|---------------|
 | `background` | `#ffffff` | `#0f0f0f` | Screen / page background |
-| `foreground` | `#222222` | `#fafafa` | Primary text — deep near-black, not pure black |
+| `foreground` | `#1a1a1a` | `#fafafa` | Primary text — deep near-black, not pure black |
 | `card` | `#ffffff` | `#1c1c1c` | Card / elevated surface background |
 | `primary` | `#1a1a1a` | `#fafafa` | Primary action (buttons, selected states, active indicators) |
 | `primaryForeground` | `#ffffff` | `#0f0f0f` | Text/icon placed on primary-colored backgrounds |
 | `border` | `#dddddd` | `#303030` | Borders, dividers, input outlines |
-| `destructive` | `#e53935` | `#ef5350` | Error / danger / delete actions |
+| `destructive` | `#c72828` | `#ef5350` | Error / danger / delete actions |
 | `destructiveForeground` | `#ffffff` | `#ffffff` | Text/icon on destructive backgrounds |
 | `success` | `#1a7a45` | `#2e7d52` | Success / confirmation states |
 | `successForeground` | `#ffffff` | `#ffffff` | Text/icon on success backgrounds |
-| `warning` | `#e67e00` | `#f57c00` | Warning / caution states |
-| `warningForeground` | `#ffffff` | `#ffffff` | Text/icon on warning backgrounds |
+| `warning` | `#9a5200` | `#f5a623` | Warning / caution states |
+| `warningForeground` | `#ffffff` | `#0f0f0f` | Text/icon on warning backgrounds |
 | `overlay` *(optional)* | `rgba(0,0,0,0.45)` | `rgba(0,0,0,0.45)` | Backdrop/overlay color behind sheets and dialogs |
-| `accent` *(optional)* | same as `primary` | same as `primary` | Secondary brand accent (e.g. Airbnb coral). Falls back to `primary` |
+| `accent` *(optional)* | `#d4561d` | `#e87645` | Secondary brand accent (e.g. Airbnb coral). Falls back to `primary` |
 | `accentForeground` *(optional)* | same as `primaryForeground` | same as `primaryForeground` | Text/icon on accent backgrounds. Falls back to `primaryForeground` |
 
 ### Derived Tokens (ResolvedColors) — read-only via useTheme().colors
@@ -273,8 +273,8 @@ The full palette components consume. Never supply these directly — they are co
 
 | Token | Derived From | Purpose |
 |-------|-------------|---------|
-| `foregroundSubtle` | `foreground` @ ~55% | Body text, subtitles, secondary content |
-| `foregroundMuted` | `foreground` @ ~38% | Captions, timestamps, placeholders |
+| `foregroundSubtle` | `foreground` @ ~70% | Body text, subtitles, secondary content |
+| `foregroundMuted` | `foreground` @ ~62% | Captions, timestamps, placeholders |
 | `surface` | `background` slightly off-canvas | Chip backgrounds, input fills, tag backgrounds, skeleton |
 | `surfaceStrong` | `background` stronger offset | Pressed/hover fill states |
 | `destructiveTint` | `destructive` blended to bg | Alert banner background, toast background |
@@ -1926,7 +1926,7 @@ const [accepted, setAccepted] = useState(false)
 
 **Dimensions:** Track 52×30px (pill), Thumb 24×24px with 3px offset.
 
-**Animation:** Thumb translates via spring; track color transitions via opacity (150ms).
+**Animation:** Thumb translates via spring (`SPRINGS.elastic`); track color and border animate via `EaseView` `COLOR_TRANSITION`; icons crossfade via `OPACITY_TRANSITION`. All declarative — UI thread.
 
 **Haptics:** `selectionAsync` on toggle.
 
@@ -2277,7 +2277,7 @@ const [tab, setTab] = useState('profile')
 ```ts
 {
   value: string
-  trigger: string
+  trigger: string | ReactNode
   content: ReactNode
   iconName?: string          // Icon name from @expo/vector-icons
   icon?: ReactNode           // Custom icon node
@@ -2285,7 +2285,7 @@ const [tab, setTab] = useState('profile')
 }
 ```
 
-**Animation:** `react-native-reanimated` `withTiming` (220ms) for height and chevron rotation (180°). Press scale uses `withSpring`. Runs on UI thread at 60fps.
+**Animation:** `react-native-reanimated` `withTiming` (240ms expand / 200ms collapse) for height and chevron rotation (180°). Runs on UI thread at 60fps.
 
 **Haptics:** `selectionAsync` on toggle.
 
@@ -2693,11 +2693,13 @@ dismiss(id)
 |------|------|---------|-------|
 | visible | `boolean` | required | Controls dialog visibility |
 | title | `string` | required | Dialog heading |
-| description | `string` | — | Supporting text — describe what exactly will happen |
+| subtitle | `string` | — | Secondary text below title |
+| description | `string` | — | **Deprecated** — use `subtitle` instead |
 | confirmLabel | `string` | `'Confirm'` | Confirm button text |
 | cancelLabel | `string` | `'Cancel'` | Cancel button text |
 | confirmVariant | `'primary' \| 'destructive'` | `'primary'` | Use `'destructive'` for delete/remove actions |
 | loading | `boolean` | `false` | Show spinner in confirm button and disable it (for async `onConfirm`) |
+| showCloseButton | `boolean` | `false` | Show an X close button in the top-right corner |
 | onConfirm | `() => void` | required | Called when confirm is tapped |
 | onCancel | `() => void` | required | Called when cancel is tapped or backdrop pressed |
 
@@ -3766,7 +3768,7 @@ export default function TabLayout() {
 | onClose | `() => void` | required | — |
 | initialIndex | `number` | `0` | Page to open on |
 
-**Behavior:** pinch to zoom (max 3×), double-tap to toggle 2.5× zoom, pan while zoomed. Paging locks automatically while a page is zoomed in. `PagerDots` shown when there is more than one image.
+**Behavior:** pinch to zoom (max 3×), double-tap to toggle 2.5× zoom, pan while zoomed. Paging locks automatically while a page is zoomed in. Swipe down to dismiss (drag down or fling; backdrop fades proportionally). `PagerDots` shown when there is more than one image.
 
 **Example:**
 ```tsx

package/CONSUMER.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Consumer Setup Guide (v9.2.0)
+# @retray-dev/ui-kit — Consumer Setup Guide (v10.1.0)
 
 > **For AI assistants (Claude Code):** Add all three lines below to your project's `CLAUDE.md` so Claude has full context about this UI kit:
 > ```markdown

package/dist/Accordion.d.mts

@@ -3,7 +3,7 @@ import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string;
+    trigger: string | React.ReactNode;
     content: React.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;

package/dist/Accordion.d.ts

@@ -3,7 +3,7 @@ import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string;
+    trigger: string | React.ReactNode;
     content: React.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;

package/dist/Accordion.js

@@ -302,9 +302,9 @@ function AccordionItemComponent({
       },
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: item.trigger
+      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
-    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
     /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React3__default.default.createElement(
     reactNative.View,

package/dist/Accordion.mjs

@@ -1,4 +1,4 @@
-export { Accordion } from './chunk-O3HA6TYM.mjs';
+export { Accordion } from './chunk-DJ7RN37L.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';

package/dist/ConfirmDialog.d.mts

@@ -3,15 +3,20 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
     description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
     /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
+    /** Show an X close button in the top-right corner. */
+    showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.d.ts

@@ -3,15 +3,20 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
     description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
     /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
+    /** Show an X close button in the top-right corner. */
+    showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.js

@@ -2,7 +2,7 @@
 
 var React3 = require('react');
 var reactNative = require('react-native');
-var bottomSheet = require('@gorhom/bottom-sheet');
+var BottomSheet = require('@gorhom/bottom-sheet');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
@@ -17,6 +17,7 @@ var reactNativeReanimated = require('react-native-reanimated');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
+var BottomSheet__default = /*#__PURE__*/_interopDefault(BottomSheet);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -455,26 +456,29 @@ var styles = reactNative.StyleSheet.create({
 function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel
 }) {
   const { colors } = useTheme();
   const ref = React3.useRef(null);
+  const effectiveSubtitle = subtitle ?? description;
   React3.useEffect(() => {
     if (visible) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [visible]);
   const renderBackdrop = (props) => /* @__PURE__ */ React3__default.default.createElement(
-    bottomSheet.BottomSheetBackdrop,
+    BottomSheet.BottomSheetBackdrop,
     {
       ...props,
       disappearsOnIndex: -1,
@@ -483,17 +487,30 @@ function ConfirmDialog({
     }
   );
   return /* @__PURE__ */ React3__default.default.createElement(
-    bottomSheet.BottomSheetModal,
+    BottomSheet__default.default,
     {
       ref,
+      index: -1,
+      onClose: onCancel,
       enableDynamicSizing: true,
-      onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles2.background, { backgroundColor: colors.card }],
       handleIndicatorStyle: [styles2.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React3__default.default.createElement(bottomSheet.BottomSheetView, { style: styles2.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.actions }, /* @__PURE__ */ React3__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(BottomSheet.BottomSheetView, { style: styles2.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.header, accessibilityRole: "header" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.headerRow }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.TouchableOpacity,
+      {
+        onPress: onCancel,
+        style: styles2.closeButton,
+        activeOpacity: 0.6,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+      },
+      /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Feather, { name: "x", size: ms(18), color: colors.foregroundMuted })
+    ) : null), effectiveSubtitle ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.actions }, /* @__PURE__ */ React3__default.default.createElement(
       Button,
       {
         label: confirmLabel,
@@ -540,19 +557,32 @@ var styles2 = reactNative.StyleSheet.create({
     borderRadius: ms(2)
   },
   content: {
-    paddingHorizontal: s(24),
-    paddingBottom: vs(32),
-    gap: vs(12)
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32)
+  },
+  header: {
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4)
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   title: {
     fontFamily: "Sohne-SemiBold",
     fontSize: ms(18),
-    lineHeight: mvs(26)
+    flex: 1
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
   },
-  description: {
+  subtitle: {
     fontFamily: "Sohne-Regular",
-    fontSize: ms(15),
-    lineHeight: mvs(22)
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   },
   actions: {
     gap: vs(10),

package/dist/ConfirmDialog.mjs

@@ -1,4 +1,4 @@
-export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
+export { ConfirmDialog } from './chunk-KZL5VTYK.mjs';
 import './chunk-2TFTAWVJ.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';