@retray-dev/ui-kit 9.0.0 → 9.1.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v8.0.0)
+# @retray-dev/ui-kit — Component Reference (v9.1.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:
 
@@ -663,6 +663,8 @@ import { SohneFonts } from '@retray-dev/ui-kit/fonts'
 | iconColor | `string` | — | Override icon color. Defaults to variant label color |
 | iconPosition | `'left' \| 'right'` | `'left'` | Side the icon appears on |
 | style | `ViewStyle` | — | Override container style |
+| accessibilityLabel | `string` | — | Screen reader label. Defaults to `label` |
+| accessibilityHint | `string` | — | Screen reader hint |
 
 **Variants:**
 
@@ -804,6 +806,8 @@ import { SohneFonts } from '@retray-dev/ui-kit/fonts'
 | badge | `boolean \| number` | — | Notification badge overlay |
 | disabled | `boolean` | — | Reduces opacity to 0.5 |
 | style | `ViewStyle` | — | — |
+| accessibilityLabel | `string` | — | Screen reader label |
+| accessibilityHint | `string` | — | Screen reader hint |
 
 **Variants:** Same token logic as Button.
 
@@ -819,7 +823,7 @@ import { SohneFonts } from '@retray-dev/ui-kit/fonts'
 
 | Size | Dimensions | Icon size |
 |------|-----------|-----------|
-| `sm` | 32 × 32px | 16px |
+| `sm` | 44 × 44px | 18px |
 | `md` | 44 × 44px | 20px |
 | `lg` | 52 × 52px | 24px |
 
@@ -880,6 +884,7 @@ import { SohneFonts } from '@retray-dev/ui-kit/fonts'
 | label | `string` | — | Label above the input field |
 | error | `string` | — | Error text below — turns border `destructive` (2px) |
 | hint | `string` | — | Helper text below (hidden when `error` is set) |
+| disabled | `boolean` | — | Reduces opacity to 0.5, disables interaction |
 | prefix | `string \| ReactNode` | — | Content before the input text (e.g. `"$"`, icon node) |
 | suffix | `string \| ReactNode` | — | Content after the input text (e.g. `"kg"`, icon node) |
 | prefixStyle | `TextStyle` | — | Style for prefix string (no effect on ReactNode) |
@@ -1710,6 +1715,8 @@ const renderItem = useCallback(({ item }) => (
 | iconName | `string` | — | Icon name from `@expo/vector-icons`. Takes precedence over `icon` |
 | iconColor | `string` | — | Override icon color. Defaults to `foregroundMuted` |
 | action | `ReactNode` | — | CTA below text — typically a `Button`. Hidden in `compact` size |
+| actionLabel | `string` | — | Shorthand for a primary `Button` CTA — renders a default `Button` with this label. Requires `onAction`. Hidden in `compact` size |
+| onAction | `() => void` | — | Handler for the shorthand `actionLabel` button. Required when `actionLabel` is set |
 | size | `'default' \| 'compact'` | `'default'` | `compact` is smaller, hides description and action |
 | style | `ViewStyle` | — | — |
 
@@ -2211,7 +2218,8 @@ Add `react-native-worklets/plugin` (not `react-native-reanimated/plugin`) to `ba
 | open | `boolean` | required | `true` presents the sheet, `false` dismisses it |
 | onClose | `() => void` | required | Called on swipe-dismiss or backdrop press |
 | title | `string` | — | Sheet heading |
-| subtitle | `string` | — | Supporting text below title (replaces deprecated `description`) |
+| subtitle | `string` | — | Supporting text below title |
+| description | `string` | — | **Deprecated alias** for `subtitle` — prefer `subtitle` |
 | showCloseButton | `boolean` | `false` | Show X close button in the header |
 | children | `ReactNode` | — | Sheet content |
 | style | `ViewStyle` | — | Inner scroll/content container style |
@@ -3028,6 +3036,7 @@ const [categories, setCategories] = useState<number[]>([1, 3])
 | multiSelect | `boolean` | `false` | Allow multiple simultaneous selections |
 | style | `ViewStyle` | — | ScrollView content container style |
 | itemStyle | `ViewStyle` | — | Style applied to each chip's wrapper |
+| accessibilityLabel | `string` | — | Screen reader label for the scroll container |
 
 **CategoryItem type:**
 ```ts
@@ -3909,11 +3918,12 @@ Used internally — not exported. `s()` horizontal scale, `vs()` vertical scale,
 
 ## Full Composition Examples
 
-The package includes **EXAMPLES.md** with complete, working code for 3 real-world app screens:
+The package includes **EXAMPLES.md** with complete, working code for 4 real-world app screens:
 
 1. **Finance Dashboard** — MonthPicker, CurrencyDisplay, Progress, CategoryStrip, ListItem, DetailRow
 2. **Edit Profile** — Avatar, Badge, Input, Select, Switch, Card, AlertBanner
 3. **Onboarding Flow** — Badge, Progress, Input, RadioGroup, EmptyState (multi-step wizard)
+4. **Settings Screen** — MenuGroup, ListGroup, Form, MenuItem, ListItem, compound component patterns
 
 **For AI agents:** Import EXAMPLES.md from the package for full source code and patterns:
 

package/EXAMPLES.md

@@ -605,7 +605,7 @@ function SettingsScreen() {
           title={name}
           subtitle={email}
           rightRender={<Badge label="Pro" variant="success" size="sm" />}
-          onPress={() => toast.success('Profile tapped')}
+          onPress={() => toast({ title: 'Profile tapped' })}
         />
         <ListItem
           leftIcon="calendar"
@@ -634,18 +634,18 @@ function SettingsScreen() {
           label="Personal Information"
           subtitle="Name, email, phone"
           iconName="user"
-          onPress={() => toast('Personal Info')}
+          onPress={() => toast({ title: 'Personal Info' })}
         />
         <MenuItem
           label="Security & Privacy"
           iconName="shield"
-          onPress={() => toast('Security')}
+          onPress={() => toast({ title: 'Security' })}
         />
         <MenuItem
           label="Payments & Payouts"
           iconName="credit-card"
           rightRender={<Badge label="2" variant="warning" size="sm" />}
-          onPress={() => toast('Payments')}
+          onPress={() => toast({ title: 'Payments' })}
         />
       </MenuGroup>
 
@@ -673,7 +673,7 @@ function SettingsScreen() {
           label="Language"
           iconName="globe"
           rightRender={<Text color={colors.foregroundMuted}>English</Text>}
-          onPress={() => toast('Language')}
+          onPress={() => toast({ title: 'Language' })}
         />
       </MenuGroup>
 
@@ -731,11 +731,11 @@ function SettingsScreen() {
             <Button
               label="Cancel"
               variant="secondary"
-              onPress={() => toast('Cancelled')}
+              onPress={() => toast({ title: 'Cancelled' })}
             />
             <Button
               label="Save Changes"
-              onPress={() => toast.success('Profile updated')}
+              onPress={() => toast({ title: 'Profile updated', variant: 'success' })}
             />
           </Form.Footer>
         </Form>
@@ -751,17 +751,17 @@ function SettingsScreen() {
         <MenuItem
           label="Help Center"
           iconName="help-circle"
-          onPress={() => toast('Help')}
+          onPress={() => toast({ title: 'Help' })}
         />
         <MenuItem
           label="Report an Issue"
           iconName="alert-triangle"
-          onPress={() => toast('Report')}
+          onPress={() => toast({ title: 'Report' })}
         />
         <MenuItem
           label="Terms of Service"
           iconName="file-text"
-          onPress={() => toast('Terms')}
+          onPress={() => toast({ title: 'Terms' })}
         />
       </MenuGroup>
 
@@ -845,13 +845,20 @@ Standard 12px gap between fields:
 
 ### Toast Feedback
 
-Use `useToast()` for success/error feedback after actions:
+Two equivalent APIs — use whichever fits your context:
 
 ```tsx
+// Option A: hook (good when you need toast inside a component)
 const { toast } = useToast()
-
 toast({ title: 'Action completed', variant: 'success' })
 toast({ title: 'Error occurred', variant: 'destructive' })
+
+// Option B: direct import (good for callbacks, utilities, outside components)
+import { toast } from '@retray-dev/ui-kit'
+toast.success('Action completed')
+toast.error('Error occurred')
+toast.warning('Slow connection')
+toast('Neutral message')
 ```
 
 ### Button Pairs & Groups

package/package.json

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