@retray-dev/ui-kit 3.0.0 → 4.0.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v3.0.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:
 
@@ -713,8 +713,8 @@ All sub-components (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`,
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| title | `string` | — | Bold heading |
-| description | `string` | — | Detail text |
+| title | `string` | required | Bold heading |
+| description | `string` | — | Optional detail text below the title |
 | variant | `'default' \| 'destructive' \| 'success'` | `'default'` | Controls border/text color |
 | icon | `ReactNode` | — | Icon placed to the left of the text content. Defaults to a variant-appropriate symbol (`ℹ`, `⚠`, `✓`) |
 | iconName | `string` | — | Icon name from `@expo/vector-icons`. Takes precedence over `icon` (but still falls back to the variant default when neither is set) |
@@ -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

@@ -150,8 +150,10 @@ interface InputProps extends TextInputProps {
     type?: 'text' | 'password';
     /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
     containerStyle?: ViewStyle;
+    /** Style for the inner border wrapper (overrides padding, etc). */
+    inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -245,7 +247,7 @@ declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success';
 interface AlertBannerProps {
-    title?: string;
+    title: string;
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
@@ -425,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;
@@ -501,12 +498,10 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
-    /** Icon or element rendered at the left edge inside the input field. */
-    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;

package/dist/index.d.ts

@@ -150,8 +150,10 @@ interface InputProps extends TextInputProps {
     type?: 'text' | 'password';
     /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
     containerStyle?: ViewStyle;
+    /** Style for the inner border wrapper (overrides padding, etc). */
+    inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -245,7 +247,7 @@ declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success';
 interface AlertBannerProps {
-    title?: string;
+    title: string;
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
@@ -425,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;
@@ -501,12 +498,10 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
-    /** Icon or element rendered at the left edge inside the input field. */
-    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;

package/dist/index.js

@@ -393,7 +393,7 @@ function Text2({ variant = "body", color, style, children, ...props }) {
   );
 }
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React25.useState(false);
   const [showPassword, setShowPassword] = React25.useState(false);
@@ -409,7 +409,8 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
         {
           borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           backgroundColor: colors.background
-        }
+        },
+        inputWrapperStyle
       ]
     },
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles3.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles3.prefixContainer }, effectivePrefix) : null,
@@ -1756,7 +1757,6 @@ function Sheet({
   title,
   description,
   children,
-  snapPoints = ["50%"],
   style
 }) {
   const { colors } = useTheme();
@@ -1782,7 +1782,7 @@ function Sheet({
     bottomSheet.BottomSheetModal,
     {
       ref,
-      snapPoints,
+      enableDynamicSizing: true,
       onDismiss: onClose,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles21.background, { backgroundColor: colors.card }],
@@ -2199,10 +2199,10 @@ function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style
 }) {
+  const { colors } = useTheme();
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
@@ -2213,6 +2213,7 @@ function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
   const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
+  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.mutedForeground);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React25__default.default.createElement(
     Input,
@@ -2225,8 +2226,9 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? "0",
       editable,
-      prefix: prefixIcon,
+      prefix: dollarIcon,
       containerStyle,
+      inputWrapperStyle: size === "large" ? { paddingVertical: 10 } : void 0,
       style: [inputStyle, style]
     }
   );
@@ -2575,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

@@ -380,7 +380,7 @@ function Text2({ variant = "body", color, style, children, ...props }) {
   );
 }
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -396,7 +396,8 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
         {
           borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           backgroundColor: colors.background
-        }
+        },
+        inputWrapperStyle
       ]
     },
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.prefixContainer }, effectivePrefix) : null,
@@ -1743,7 +1744,6 @@ function Sheet({
   title,
   description,
   children,
-  snapPoints = ["50%"],
   style
 }) {
   const { colors } = useTheme();
@@ -1769,7 +1769,7 @@ function Sheet({
     BottomSheetModal,
     {
       ref,
-      snapPoints,
+      enableDynamicSizing: true,
       onDismiss: onClose,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles21.background, { backgroundColor: colors.card }],
@@ -2186,10 +2186,10 @@ function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style
 }) {
+  const { colors } = useTheme();
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
@@ -2200,6 +2200,7 @@ function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
   const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
+  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.mutedForeground);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React25.createElement(
     Input,
@@ -2212,8 +2213,9 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? "0",
       editable,
-      prefix: prefixIcon,
+      prefix: dollarIcon,
       containerStyle,
+      inputWrapperStyle: size === "large" ? { paddingVertical: 10 } : void 0,
       style: [inputStyle, style]
     }
   );
@@ -2562,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.0.0",
+  "version": "4.0.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/AlertBanner/AlertBanner.tsx

@@ -8,7 +8,7 @@ import { renderIcon } from '../../utils/icons'
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
 export interface AlertBannerProps {
-  title?: string
+  title: string
   description?: string
   variant?: AlertBannerVariant
   icon?: React.ReactNode

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/CurrencyInput/CurrencyInput.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 import { ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { useTheme } from '../../theme'
 
 export interface CurrencyInputProps {
   value?: string
@@ -20,8 +22,6 @@ export interface CurrencyInputProps {
   hint?: string
   placeholder?: string
   editable?: boolean
-  /** Icon or element rendered at the left edge inside the input field. */
-  prefixIcon?: React.ReactNode
   containerStyle?: ViewStyle
   style?: TextStyle
 }
@@ -44,10 +44,10 @@ export function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style,
 }: CurrencyInputProps) {
+  const { colors } = useTheme()
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
@@ -60,6 +60,8 @@ export function CurrencyInput({
 
   const inputStyle: TextStyle = size === 'large' ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) } : { fontFamily: 'Poppins-Regular' }
 
+  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.mutedForeground)
+
   // Remove prefix from display value if present
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value
 
@@ -73,8 +75,9 @@ export function CurrencyInput({
       hint={hint}
       placeholder={placeholder ?? '0'}
       editable={editable}
-      prefix={prefixIcon}
+      prefix={dollarIcon}
       containerStyle={containerStyle}
+      inputWrapperStyle={size === 'large' ? { paddingVertical: 10 } : undefined}
       style={[inputStyle, style]}
     />
   )

package/src/components/Input/Input.tsx

@@ -42,9 +42,11 @@ export interface InputProps extends TextInputProps {
   type?: 'text' | 'password'
   /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
+  /** Style for the inner border wrapper (overrides padding, etc). */
+  inputWrapperStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -79,6 +81,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
                 : colors.border,
             backgroundColor: colors.background,
           },
+          inputWrapperStyle,
         ]}
       >
         {effectivePrefix ? (

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 }]}