@retray-dev/ui-kit 5.1.0 → 5.2.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v5.0.0)
+# @retray-dev/ui-kit — Component Reference (v5.2.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -1828,11 +1828,14 @@ Add `react-native-worklets/plugin` (not `react-native-reanimated/plugin`) to `ba
 | description | `string` | — | Supporting text below title |
 | children | `ReactNode` | — | Sheet content |
 | style | `ViewStyle` | — | Inner content container style |
+| scrollable | `boolean` | `false` | Wraps children in `BottomSheetScrollView` — fixes gesture conflict on both platforms when content needs to scroll |
+| maxHeight | `number` | — | Caps sheet height (dp). Automatically enables scrolling when content exceeds this value |
 
 **Features:**
 - `enableDynamicSizing` — height auto-fits content, no `snapPoints` needed
 - `enablePanDownToClose` — swipe down to dismiss
 - Backdrop press dismisses
+- **Scrollable content:** use `scrollable` prop (explicit) or `maxHeight` prop (capped height). Both use `BottomSheetScrollView` internally — do NOT use plain `ScrollView` inside Sheet, it breaks gesture handling on iOS
 
 **Styling:** `RADIUS.lg = 20px` top corners, 16px horizontal + 20px bottom padding.
 
@@ -1855,6 +1858,18 @@ const [open, setOpen] = useState(false)
   />
 </Sheet>
 
+// Scrollable sheet — long list
+<Sheet open={open} onClose={() => setOpen(false)} title="Logs" scrollable>
+  {logs.map((log) => (
+    <Text key={log.id}>{log.message}</Text>
+  ))}
+</Sheet>
+
+// Capped height — scroll kicks in when content overflows 400dp
+<Sheet open={open} onClose={() => setOpen(false)} title="Results" maxHeight={400}>
+  {results.map((r) => <ListItem key={r.id} title={r.name} />)}
+</Sheet>
+
 // Filter sheet
 <Sheet open={filterOpen} onClose={() => setFilterOpen(false)} title="Filters">
   <View style={{ gap: SPACING.lg }}>

package/README.md

@@ -3,7 +3,7 @@
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
 - 36 components across 7 categories
-- Light/dark theme with 23 color tokens and full customization
+- Light/dark theme with 12 public tokens (24 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
 - Built with TypeScript — full type declarations included
@@ -113,25 +113,28 @@ import { useTheme } from '@retray-dev/ui-kit'
 const { colors, colorScheme } = useTheme()
 ```
 
-**Available tokens:** `background`, `foreground`, `card`, `cardForeground`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `muted`, `mutedForeground`, `accent`, `accentForeground`, `destructive`, `destructiveForeground`, `destructiveTint`, `destructiveBorder`, `border`, `input`, `ring`, `success`, `successForeground`, `successTint`, `successBorder`
+**Public tokens (12 — override these):** `background`, `foreground`, `card`, `primary`, `primaryForeground`, `border`, `destructive`, `destructiveForeground`, `success`, `successForeground`, `warning`, `warningForeground`
+
+**Derived tokens (read-only via `useTheme()`):** `foregroundSubtle`, `foregroundMuted`, `surface`, `surfaceStrong`, `destructiveTint`, `destructiveBorder`, `successTint`, `successBorder`, `warningTint`, `warningBorder`, `ring`, `input`
 
 ## Design Tokens
 
 Static structural constants — no provider required:
 
 ```ts
-import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/ui-kit'
+import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@retray-dev/ui-kit'
 
-<View style={{ gap: SPACING.md, padding: SPACING.lg, borderRadius: RADIUS.lg, ...SHADOWS.sm }} />
+<View style={{ gap: SPACING.md, padding: SPACING.base, borderRadius: RADIUS.md, ...SHADOWS.sm }} />
 ```
 
 | Token | Keys |
 |-------|------|
-| `SPACING` | `xs` (4), `sm` (8), `md` (12), `lg` (16), `xl` (24), `2xl` (32), `3xl` (48) |
+| `SPACING` | `xxs` (2), `xs` (4), `sm` (8), `md` (12), `base` (16), `lg` (24), `xl` (32), `xxl` (48), `section` (64) |
 | `ICON_SIZES` | `sm` (14), `md` (18), `lg` (22), `xl` (28), `2xl` (32) |
-| `RADIUS` | `sm` (4), `md` (8), `lg` (12), `xl` (16), `full` (9999) |
+| `RADIUS` | `none` (0), `xs` (4), `sm` (8), `md` (14), `lg` (20), `xl` (32), `full` (9999) |
 | `SHADOWS` | `sm`, `md`, `lg`, `xl` — cross-platform shadow presets |
 | `BREAKPOINTS` | `wide` (700) |
+| `TYPOGRAPHY` | 16 variants: `display-hero`, `display-xl`, `display-lg`, `display-md`, `display-sm`, `title-md`, `title-sm`, `body-md`, `body-sm`, `caption`, `caption-sm`, `badge-text`, `micro-label`, `uppercase-tag`, `button-lg`, `button-sm` |
 
 ## Components
 
@@ -139,7 +142,7 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/u
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`                                                |
-| Form        | `Button`, `IconButton`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
+| Form        | `Button`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |

package/dist/index.d.mts

@@ -413,10 +413,14 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
-    /** Style for the inner `BottomSheetView` content container. */
+    /** Style for the inner content container. */
     style?: ViewStyle;
+    /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
+    scrollable?: boolean;
+    /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+    maxHeight?: number;
 }
-declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, description, children, style, scrollable, maxHeight, }: SheetProps): React.JSX.Element;
 
 interface SelectOption {
     label: string;

package/dist/index.d.ts

@@ -413,10 +413,14 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
-    /** Style for the inner `BottomSheetView` content container. */
+    /** Style for the inner content container. */
     style?: ViewStyle;
+    /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
+    scrollable?: boolean;
+    /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+    maxHeight?: number;
 }
-declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, description, children, style, scrollable, maxHeight, }: SheetProps): React.JSX.Element;
 
 interface SelectOption {
     label: string;

package/dist/index.js

@@ -2159,7 +2159,9 @@ function Sheet({
   title,
   description,
   children,
-  style
+  style,
+  scrollable,
+  maxHeight
 }) {
   const { colors } = useTheme();
   const ref = React25.useRef(null);
@@ -2180,6 +2182,8 @@ function Sheet({
       pressBehavior: "close"
     }
   );
+  const headerNode = title || description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles21.header }, title ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles21.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles21.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null;
+  const useScroll = scrollable || !!maxHeight;
   return /* @__PURE__ */ React25__default.default.createElement(
     bottomSheet.BottomSheetModal,
     {
@@ -2191,7 +2195,7 @@ function Sheet({
       handleIndicatorStyle: [styles21.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles21.content, style] }, title || description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles21.header }, title ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles21.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles21.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children)
+    /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: maxHeight ? { maxHeight } : void 0 }, useScroll ? /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetScrollView, { contentContainerStyle: [styles21.content, style] }, headerNode, children) : /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles21.content, style] }, headerNode, children))
   );
 }
 var styles21 = reactNative.StyleSheet.create({
@@ -3024,15 +3028,6 @@ function ConfirmDialog({
       enablePanDownToClose: true
     },
     /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: styles27.content }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles27.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles27.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles27.actions }, /* @__PURE__ */ React25__default.default.createElement(
-      Button,
-      {
-        label: cancelLabel,
-        variant: "secondary",
-        fullWidth: true,
-        onPress: onCancel,
-        icon: /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: 15, color: colors.foreground })
-      }
-    ), /* @__PURE__ */ React25__default.default.createElement(
       Button,
       {
         label: confirmLabel,
@@ -3048,6 +3043,15 @@ function ConfirmDialog({
           }
         )
       }
+    ), /* @__PURE__ */ React25__default.default.createElement(
+      Button,
+      {
+        label: cancelLabel,
+        variant: "secondary",
+        fullWidth: true,
+        onPress: onCancel,
+        icon: /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: 15, color: colors.foreground })
+      }
     )))
   );
 }

package/dist/index.mjs

@@ -11,7 +11,7 @@ import { AntDesign as AntDesign$1, Feather as Feather$1, Entypo as Entypo$1, Fon
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated11, { useSharedValue, useDerivedValue, withTiming, Easing as Easing$1, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import RNSlider from '@react-native-community/slider';
-import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetView, BottomSheetScrollView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { Picker } from '@react-native-picker/picker';
 import { scheduleOnRN } from 'react-native-worklets';
@@ -2146,7 +2146,9 @@ function Sheet({
   title,
   description,
   children,
-  style
+  style,
+  scrollable,
+  maxHeight
 }) {
   const { colors } = useTheme();
   const ref = useRef(null);
@@ -2167,6 +2169,8 @@ function Sheet({
       pressBehavior: "close"
     }
   );
+  const headerNode = title || description ? /* @__PURE__ */ React25.createElement(View, { style: styles21.header }, title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null;
+  const useScroll = scrollable || !!maxHeight;
   return /* @__PURE__ */ React25.createElement(
     BottomSheetModal,
     {
@@ -2178,7 +2182,7 @@ function Sheet({
       handleIndicatorStyle: [styles21.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: [styles21.content, style] }, title || description ? /* @__PURE__ */ React25.createElement(View, { style: styles21.header }, title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children)
+    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: maxHeight ? { maxHeight } : void 0 }, useScroll ? /* @__PURE__ */ React25.createElement(BottomSheetScrollView, { contentContainerStyle: [styles21.content, style] }, headerNode, children) : /* @__PURE__ */ React25.createElement(BottomSheetView, { style: [styles21.content, style] }, headerNode, children))
   );
 }
 var styles21 = StyleSheet.create({
@@ -3011,15 +3015,6 @@ function ConfirmDialog({
       enablePanDownToClose: true
     },
     /* @__PURE__ */ React25.createElement(BottomSheetView, { style: styles27.content }, /* @__PURE__ */ React25.createElement(Text, { style: [styles27.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles27.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React25.createElement(View, { style: styles27.actions }, /* @__PURE__ */ React25.createElement(
-      Button,
-      {
-        label: cancelLabel,
-        variant: "secondary",
-        fullWidth: true,
-        onPress: onCancel,
-        icon: /* @__PURE__ */ React25.createElement(Feather$1, { name: "x", size: 15, color: colors.foreground })
-      }
-    ), /* @__PURE__ */ React25.createElement(
       Button,
       {
         label: confirmLabel,
@@ -3035,6 +3030,15 @@ function ConfirmDialog({
           }
         )
       }
+    ), /* @__PURE__ */ React25.createElement(
+      Button,
+      {
+        label: cancelLabel,
+        variant: "secondary",
+        fullWidth: true,
+        onPress: onCancel,
+        icon: /* @__PURE__ */ React25.createElement(Feather$1, { name: "x", size: 15, color: colors.foreground })
+      }
     )))
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -74,13 +74,6 @@ export function ConfirmDialog({
           </Text>
         ) : null}
         <View style={styles.actions}>
-          <Button
-            label={cancelLabel}
-            variant="secondary"
-            fullWidth
-            onPress={onCancel}
-            icon={<Feather name="x" size={15} color={colors.foreground} />}
-          />
           <Button
             label={confirmLabel}
             variant={confirmVariant}
@@ -98,6 +91,13 @@ export function ConfirmDialog({
               />
             }
           />
+          <Button
+            label={cancelLabel}
+            variant="secondary"
+            fullWidth
+            onPress={onCancel}
+            icon={<Feather name="x" size={15} color={colors.foreground} />}
+          />
         </View>
       </BottomSheetView>
     </BottomSheetModal>

package/src/components/Sheet/Sheet.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
   BottomSheetView,
+  BottomSheetScrollView,
   BottomSheetBackdrop,
   BottomSheetModalProvider,
   type BottomSheetBackdropProps,
@@ -19,8 +20,12 @@ export interface SheetProps {
   title?: string
   description?: string
   children?: React.ReactNode
-  /** Style for the inner `BottomSheetView` content container. */
+  /** Style for the inner content container. */
   style?: ViewStyle
+  /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
+  scrollable?: boolean
+  /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+  maxHeight?: number
 }
 
 export function Sheet({
@@ -30,6 +35,8 @@ export function Sheet({
   description,
   children,
   style,
+  scrollable,
+  maxHeight,
 }: SheetProps) {
   const { colors } = useTheme()
   const ref = useRef<BottomSheetModal>(null)
@@ -52,6 +59,21 @@ export function Sheet({
     />
   )
 
+  const headerNode = (title || description) ? (
+    <View style={styles.header}>
+      {title ? (
+        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
+      ) : null}
+      {description ? (
+        <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  ) : null
+
+  const useScroll = scrollable || !!maxHeight
+
   return (
     <BottomSheetModal
       ref={ref}
@@ -62,20 +84,18 @@ export function Sheet({
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
     >
-      <BottomSheetView style={[styles.content, style]}>
-        {title || description ? (
-          <View style={styles.header}>
-            {title ? (
-              <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
-            ) : null}
-            {description ? (
-              <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-                {description}
-              </Text>
-            ) : null}
-          </View>
-        ) : null}
-        {children}
+      <BottomSheetView style={maxHeight ? { maxHeight } : undefined}>
+        {useScroll ? (
+          <BottomSheetScrollView contentContainerStyle={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetScrollView>
+        ) : (
+          <BottomSheetView style={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetView>
+        )}
       </BottomSheetView>
     </BottomSheetModal>
   )