@retray-dev/ui-kit 2.5.0 → 2.5.2

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v2.1.0)
+# @retray-dev/ui-kit — Component Reference (v2.5.2)
 
 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:
 
@@ -152,7 +152,7 @@ import type { ThemeColors } from '@retray-dev/ui-kit'
 | loading | `boolean` | `false` | Replaces label with a spinner and forces disabled state |
 | fullWidth | `boolean` | `false` | Stretches to container width (`alignSelf: 'stretch'`) |
 | disabled | `boolean` | — | Reduces opacity to 0.5 |
-| icon | `React.ReactNode` | — | Icon rendered alongside the label |
+| icon | `React.ReactNode \| ((props: { label, size, variant }) => React.ReactNode)` | — | Icon rendered alongside the label. Can be a node or a render function |
 | iconPosition | `'left' \| 'right'` | `'left'` | Side the icon appears on |
 
 **Variants:**
@@ -162,7 +162,7 @@ import type { ThemeColors } from '@retray-dev/ui-kit'
 - `ghost`: fully transparent — in-context or low-emphasis actions
 - `destructive`: filled with `destructive` token — irreversible or dangerous actions
 
-**Animations:** Scale springs to 0.97 on `onPressIn`, back to 1.0 on `onPressOut`.
+**Animations:** Scale springs to 0.95 on `onPressIn`, back to 1.0 on `onPressOut`.
 
 **Example:**
 ```tsx
@@ -188,7 +188,10 @@ import type { ThemeColors } from '@retray-dev/ui-kit'
 | hint | `string` | — | Helper text below (hidden when `error` is set) |
 | prefix | `string \| ReactNode` | — | Content rendered before the input field (e.g., `"$"` or an icon) |
 | suffix | `string \| ReactNode` | — | Content rendered after the input field (e.g., `"kg"` or a button) |
+| prefixStyle | `TextStyle` | — | Style applied to the prefix text when prefix is a string |
+| suffixStyle | `TextStyle` | — | Style applied to the suffix text when suffix is a string |
 | type | `'text' \| 'password'` | `'text'` | When `'password'`, shows a visibility toggle button in the suffix slot |
+| containerStyle | `ViewStyle` | — | Style for the outer container `View` |
 
 **Border colors:** `destructive` when `error` is set, `ring` when focused, `border` otherwise.
 
@@ -260,7 +263,8 @@ const [amount, setAmount] = useState(0)
 | label | `string` | — | Label above |
 | error | `string` | — | Error text below; red border |
 | hint | `string` | — | Helper text below |
-| rows | `number` | `4` | Sets `minHeight` (each row ≈ 28px) |
+| rows | `number` | `4` | Sets `minHeight` (each row ≈ 30px) and `numberOfLines` |
+| containerStyle | `ViewStyle` | — | Style for the outer container `View` |
 
 **Example:**
 ```tsx
@@ -505,8 +509,8 @@ All sub-components (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`,
 **Notes:**
 - `CardHeader` and `CardContent` have `padding: 24`. Override via the `style` prop: `<CardContent style={{ padding: 16 }}>`
 - `CardFooter` has `paddingTop: 0` so it connects naturally to `CardContent`
-- `CardTitle`: 18px / 600 weight, `cardForeground` color
-- `CardDescription`: 14px, `mutedForeground` color
+- `CardTitle`: 20px / 600 weight / lineHeight 28, `cardForeground` color
+- `CardDescription`: 15px / lineHeight 22, `mutedForeground` color
 - Press animation scales to 0.98 via `Animated.spring` when `onPress` is provided
 
 ---
@@ -786,7 +790,7 @@ const [tab, setTab] = useState('profile')
 | defaultValue | `string \| string[]` | — | Initially open item(s). Use `string[]` with `type='multiple'` |
 | style | `ViewStyle` | — | — |
 
-**Animation:** Height and chevron rotation are animated on the UI thread via `react-native-reanimated` (`withTiming`, `useSharedValue`). `Easing.out(Easing.ease)` for expand, `Easing.in(Easing.ease)` for collapse (220ms, 60 fps).
+**Animation:** All animation is handled exclusively by `react-native-reanimated` (`withTiming` for height/rotation, `withSpring` for press scale, `useSharedValue`, `useAnimatedStyle`) on the UI thread at 60 fps. `Easing.out(Easing.ease)` for expand, `Easing.in(Easing.ease)` for collapse (220ms). Press scale springs to 0.95 on press-in and back to 1.0 on press-out.
 
 **Example:**
 ```tsx

package/README.md

@@ -23,7 +23,7 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-haptics react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets
+pnpm add expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
@@ -100,7 +100,7 @@ const { colors, colorScheme } = useTheme()
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
-| Surfaces    | `Card`, `Alert`, `EmptyState`                                                                   |
+| Surfaces    | `Card`, `AlertBanner`, `EmptyState`                                                             |
 | Form        | `Button`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
@@ -116,9 +116,7 @@ import {
 } from '@retray-dev/ui-kit'
 
 // Button
-<Button variant="default" size="md" onPress={() => {}}>
-  Save
-</Button>
+<Button label="Save" variant="primary" size="md" onPress={() => {}} />
 
 // Toast
 const { toast } = useToast()