@retray-dev/ui-kit 13.0.0 → 13.2.0

package/CONSUMER.md

@@ -1,15 +1,30 @@
-# @retray-dev/ui-kit — Consumer Setup Guide (v10.1.0)
+# @retray-dev/ui-kit — Consumer Setup Guide (v13.2.0)
 
-> **For AI assistants (Claude Code):** Add all three lines below to your project's `CLAUDE.md` so Claude has full context about this UI kit:
-> ```markdown
-> ## UI Components
-> @./node_modules/@retray-dev/ui-kit/COMPONENTS.md
-> @./node_modules/@retray-dev/ui-kit/CONSUMER.md
-> @./node_modules/@retray-dev/ui-kit/EXAMPLES.md
-> ```
+## AI Assistant Context (Claude Code)
+
+**Step 1 — Copy docs to your repo root:**
+
+```bash
+cp node_modules/@retray-dev/ui-kit/SKILL.md SKILL.md
+cp node_modules/@retray-dev/ui-kit/CONSUMER.md CONSUMER.md
+cp node_modules/@retray-dev/ui-kit/EXAMPLES.md EXAMPLES.md
+```
+
+> `@./node_modules/...` paths work but break when `node_modules` is regenerated or absent (CI cache miss, new clone). Copying files to repo root guarantees Claude always has context regardless of install state. Re-copy on upgrades.
+
+**Step 2 — Add to `CLAUDE.md`:**
+
+```markdown
+## UI Kit
+@./SKILL.md
+@./CONSUMER.md
+@./EXAMPLES.md
+```
 
 ---
 
+
+
 ## Prerequisites
 
 | Requirement | Minimum | Notes |
@@ -56,7 +71,7 @@ npx expo install \
 ## Install: Optional Peer Dependencies
 
 ```bash
-npx expo install expo-image-picker   # Required only for ImageUpload component
+npx expo install react-native-image-picker   # Required only for ImageUpload component
 
 # HolographicCard only — deep-import, NOT in main barrel:
 npx expo install @shopify/react-native-skia expo-sensors

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 54 components across 9 categories (plus the deep-import `HolographicCard`)
+- 55 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (26 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -23,7 +23,7 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-font expo-haptics expo-linear-gradient expo-image 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 react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease expo-image-picker
+pnpm add expo-font expo-haptics expo-linear-gradient expo-image 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 react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
@@ -32,7 +32,7 @@ For Expo projects, run `npx expo install` instead to get SDK-compatible versions
 
 **Required:** `expo-image` is required for `Avatar`, `ImageUpload`, `ImageViewer`, `ListItem`, and `MediaCard` image rendering. It replaces React Native's built-in `Image` with caching, blurhash placeholders, and cross-fade transitions.
 
-**Optional:** for `ImageUpload`, add `expo-image-picker`. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
+**Optional:** for `ImageUpload`, add `react-native-image-picker`. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
 
 Add the Worklets Babel plugin to `babel.config.js` (required by `@gorhom/bottom-sheet`):
 
@@ -177,18 +177,18 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | `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` |
+| `TYPOGRAPHY` | 17 variants: `display-hero`, `display-xl`, `display-lg`, `display-md`, `display-sm`, `title-md`, `title-sm`, `body-md`, `body-sm`, `caption`, `caption-sm`, `badge-text`, `badge-text-md`, `micro-label`, `uppercase-tag`, `button-lg`, `button-sm` |
 
 ### Color Utilities
 
 - **`withAlpha(hex: string, alpha: number)`** — takes a hex color string (e.g., `"#6366f1"`) and an opacity value (0–1), returns an `rgba()` string. Useful for semi-transparent overlays without adding a separate token.
-- **`hexToRgb(hex: string)`** — returns `{ r, g, b } | null`. Converts hex color to RGB components.
+- **`hexToRgb(hex: string)`** — returns `{ r, g, b } | null`. Converts hex color to RGB components. Import from package root.
 
 ## Components
 
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
-| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats` |
+| Display     | `Text`, `Badge`, `Avatar`, `AvatarGroup`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats` |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
 | Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SelectableCard` (+ `SelectableCardGroup`), `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
 | Composition | `Tabs`, `Accordion`                                                                             |
@@ -236,12 +236,11 @@ const { colors } = useTheme()
 const rgb = hexToRgb('#6366f1') // { r: 99, g: 102, b: 241 }
 ```
 
-Full props reference and more examples are available in [COMPONENTS.md](./COMPONENTS.md), which is also shipped inside the npm package for use with AI tools:
+Full props reference and more examples are available in [SKILL.md](./SKILL.md), which is also shipped inside the npm package for use with AI tools:
 
 ```markdown
-## UI Components
-
-@./node_modules/@retray-dev/ui-kit/COMPONENTS.md
+## UI Kit
+@./node_modules/@retray-dev/ui-kit/SKILL.md
 ```
 
 ## License