@retray-dev/ui-kit 3.1.0 → 4.0.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v3.1.0)
+# @retray-dev/ui-kit — Component Reference (v4.0.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:
 
@@ -1009,7 +1009,7 @@ const [tab, setTab] = useState('profile')
 ### Sheet
 
 **Import:** `import { Sheet, BottomSheetModalProvider } from '@retray-dev/ui-kit'`
-**When to use:** Bottom sheet with physics-based gestures, rubber-band overscroll, and snap points. Powered by `@gorhom/bottom-sheet`.
+**When to use:** Bottom sheet that automatically sizes to its content. No snap points needed — just put children inside and it fits. Powered by `@gorhom/bottom-sheet` with `enableDynamicSizing`.
 
 **Required setup** — add to your app root (see Setup section above):
 ```tsx
@@ -1038,7 +1038,6 @@ Add `react-native-worklets/plugin` (not `react-native-reanimated/plugin`) to you
 |------|------|---------|-------|
 | open | `boolean` | required | `true` presents the sheet, `false` dismisses it |
 | onClose | `() => void` | required | Called on swipe-dismiss or backdrop press |
-| snapPoints | `(string \| number)[]` | `['50%']` | Snap positions, e.g. `['40%', '80%']` |
 | title | `string` | — | — |
 | description | `string` | — | — |
 | children | `ReactNode` | — | — |
@@ -1046,11 +1045,16 @@ Add `react-native-worklets/plugin` (not `react-native-reanimated/plugin`) to you
 
 **Example:**
 ```tsx
-<Sheet open={open} onClose={() => setOpen(false)} title="Filters" snapPoints={['50%']}>
+<Sheet open={open} onClose={() => setOpen(false)} title="Filters">
   <RadioGroup options={sortOptions} value={sort} onValueChange={setSort} />
 </Sheet>
 ```
 
+**Notes:**
+- Height is calculated automatically from content via `enableDynamicSizing` (gorhom v5 feature). No `snapPoints` prop.
+- Swipe down to dismiss (`enablePanDownToClose`). Backdrop press also dismisses.
+- `impactAsync(Light)` haptic fires on open.
+
 ---
 
 ### Toast / useToast
@@ -1272,9 +1276,10 @@ const [categories, setCategories] = useState<number[]>([1, 3])
 | onCancel | `() => void` | required | Called when cancel is tapped or backdrop is pressed |
 
 **Notes:**
-- Uses React Native `Modal` with `animationType="fade"` — no bottom-sheet dependency.
-- Tapping outside the dialog card calls `onCancel`.
-- The cancel and confirm buttons are full-width stacked vertically.
+- Powered by `@gorhom/bottom-sheet` with `enableDynamicSizing` — height auto-fits content, no snap points.
+- Swipe down or tap backdrop to cancel (calls `onCancel`).
+- Cancel and confirm buttons are full-width stacked vertically.
+- Requires `BottomSheetModalProvider` at app root (same as `Sheet`).
 
 **Example:**
 ```tsx

package/README.md

@@ -87,9 +87,9 @@ export default function App() {
 | Provider                   | Required by                                |
 | -------------------------- | ------------------------------------------ |
 | `SafeAreaProvider`         | `ToastProvider` (uses `useSafeAreaInsets`) |
-| `GestureHandlerRootView`   | `Sheet` (uses `@gorhom/bottom-sheet`)      |
+| `GestureHandlerRootView`   | `Sheet`, `ConfirmDialog` (`@gorhom/bottom-sheet`) |
 | `ThemeProvider`            | All components                             |
-| `BottomSheetModalProvider` | `Sheet`                                    |
+| `BottomSheetModalProvider` | `Sheet`, `ConfirmDialog`                   |
 | `ToastProvider`            | `useToast` hook                            |
 
 ## Theme
@@ -160,8 +160,8 @@ import {
 const { toast } = useToast()
 toast({ title: 'Saved', variant: 'success' })
 
-// Sheet (bottom sheet)
-<Sheet open={open} onClose={() => setOpen(false)} title="Options" snapPoints={['40%']}>
+// Sheet (bottom sheet — auto-sizes to content)
+<Sheet open={open} onClose={() => setOpen(false)} title="Options">
   <Text>Sheet content</Text>
 </Sheet>
 

package/dist/index.d.mts

@@ -427,15 +427,10 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
-    /**
-     * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
-     * absolute point values (`300`). Defaults to `['50%']`.
-     */
-    snapPoints?: (string | number)[];
     /** Style for the inner `BottomSheetView` content container. */
     style?: ViewStyle;
 }
-declare function Sheet({ open, onClose, title, description, children, snapPoints, style, }: SheetProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
 
 interface SelectOption {
     label: string;

package/dist/index.d.ts

@@ -427,15 +427,10 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
-    /**
-     * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
-     * absolute point values (`300`). Defaults to `['50%']`.
-     */
-    snapPoints?: (string | number)[];
     /** Style for the inner `BottomSheetView` content container. */
     style?: ViewStyle;
 }
-declare function Sheet({ open, onClose, title, description, children, snapPoints, style, }: SheetProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
 
 interface SelectOption {
     label: string;

package/dist/index.js

@@ -1757,7 +1757,6 @@ function Sheet({
   title,
   description,
   children,
-  snapPoints = ["50%"],
   style
 }) {
   const { colors } = useTheme();
@@ -1783,7 +1782,7 @@ function Sheet({
     bottomSheet.BottomSheetModal,
     {
       ref,
-      snapPoints,
+      enableDynamicSizing: true,
       onDismiss: onClose,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles21.background, { backgroundColor: colors.card }],
@@ -2578,7 +2577,7 @@ function ConfirmDialog({
     bottomSheet.BottomSheetModal,
     {
       ref,
-      snapPoints: ["35%"],
+      enableDynamicSizing: true,
       onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles27.background, { backgroundColor: colors.card }],

package/dist/index.mjs

@@ -1744,7 +1744,6 @@ function Sheet({
   title,
   description,
   children,
-  snapPoints = ["50%"],
   style
 }) {
   const { colors } = useTheme();
@@ -1770,7 +1769,7 @@ function Sheet({
     BottomSheetModal,
     {
       ref,
-      snapPoints,
+      enableDynamicSizing: true,
       onDismiss: onClose,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles21.background, { backgroundColor: colors.card }],
@@ -2565,7 +2564,7 @@ function ConfirmDialog({
     BottomSheetModal,
     {
       ref,
-      snapPoints: ["35%"],
+      enableDynamicSizing: true,
       onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles27.background, { backgroundColor: colors.card }],

package/package.json

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

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -57,7 +57,7 @@ export function ConfirmDialog({
   return (
     <BottomSheetModal
       ref={ref}
-      snapPoints={['35%']}
+      enableDynamicSizing
       onDismiss={onCancel}
       backdropComponent={renderBackdrop}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}

package/src/components/Sheet/Sheet.tsx

@@ -19,11 +19,6 @@ export interface SheetProps {
   title?: string
   description?: string
   children?: React.ReactNode
-  /**
-   * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
-   * absolute point values (`300`). Defaults to `['50%']`.
-   */
-  snapPoints?: (string | number)[]
   /** Style for the inner `BottomSheetView` content container. */
   style?: ViewStyle
 }
@@ -34,7 +29,6 @@ export function Sheet({
   title,
   description,
   children,
-  snapPoints = ['50%'],
   style,
 }: SheetProps) {
   const { colors } = useTheme()
@@ -61,7 +55,7 @@ export function Sheet({
   return (
     <BottomSheetModal
       ref={ref}
-      snapPoints={snapPoints}
+      enableDynamicSizing
       onDismiss={onClose}
       backdropComponent={renderBackdrop}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}