@retray-dev/ui-kit 7.0.1 → 9.1.0

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
@@ -892,7 +899,7 @@ These examples are live in the `example/` app included with the source. To run t
 
 ```bash
 # Clone the repo
-git clone https://github.com/YOUR_USERNAME/retray-ui-kit
+git clone https://github.com/retray-dev/retray-ui-kit
 cd retray-ui-kit
 
 # Install dependencies
@@ -907,7 +914,7 @@ pnpm start
 # Or: pnpm ios / pnpm android
 ```
 
-Inside the example app, navigate to the "🖥 App Screen Compositions" accordion to access all three screens.
+Inside the example app, open the **Compose** tab in the bottom tab bar to browse the composed screen patterns alongside the per-category component showcases (Display, Form, Surfaces, Data, Demos, Theme).
 
 ---
 

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.
 
-- 37 components across 7 categories
+- 49 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (25 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -23,11 +23,15 @@ 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 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
+pnpm add expo-font 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 react-native-size-matters react-native-svg react-native-screens sonner-native pressto
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
 
+`pressto` is **required** — it powers the press animations on every interactive component. Omitting it crashes the import. `sonner-native` is **required** for `Toast`.
+
+**Optional:** for richer haptics in a custom dev build (not Expo Go), also `pnpm add react-native-pulsar`. The kit falls back to `expo-haptics` automatically when it is absent. 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`):
 
 ```js
@@ -141,14 +145,16 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
-| Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`                                                |
-| Form        | `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
+| 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` |
 | Composition | `Tabs`, `Accordion`                                                                             |
-| Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
+| Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
+| Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |
-| Data        | `ListItem`, `ListGroup`, `MenuItem`, `MenuGroup`, `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`, `CategoryStrip`, `DetailRow`, `MediaCard`, `VirtualList` |
-| Forms       | `Form`                                                                                          |
-| Utilities   | `Pressable`, `Icon`                                                                             |
+| Data        | `ListItem`, `ListGroup` (+ `.Header` / `.Footer`), `MenuItem`, `MenuGroup` (+ `.Header` / `.Footer`), `VirtualList`, `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`, `CategoryStrip`, `DetailRow` |
+| Utilities   | `Pressable`, `Icon`, `RetrayProvider`, `ErrorBoundary`                                          |
+
+Deep-import only: `HolographicCard` — `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`.
 
 ### Quick examples
 

package/dist/Accordion.js

@@ -23,18 +23,65 @@ var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
 var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
 var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 
-// src/components/Accordion/Accordion.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var _haptics = null;
+var _hapticsLoaded = false;
 async function getHaptics() {
   if (reactNative.Platform.OS === "web") return null;
-  if (!_haptics) {
-    _haptics = await import('expo-haptics');
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
   }
   return _haptics;
 }
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
 function selectionAsync() {
   if (reactNative.Platform.OS === "web") return;
-  getHaptics().then((h) => h?.selectionAsync());
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync();
+    } else {
+      getPulsar()?.Presets.System.selection();
+    }
+  });
 }
 
 // src/theme/colorUtils.ts
@@ -267,7 +314,7 @@ function AccordionItemComponent({
         height.value = e.nativeEvent.layout.height;
       }
     },
-    item.content
+    typeof item.content === "string" || typeof item.content === "number" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.contentText, { color: colors.foregroundMuted }], allowFontScaling: true }, item.content) : item.content
   )));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
@@ -334,6 +381,11 @@ var styles = reactNative.StyleSheet.create({
     paddingBottom: vs(12),
     position: "absolute",
     width: "100%"
+  },
+  contentText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: ms(20)
   }
 });
 

package/dist/Accordion.mjs

@@ -1,6 +1,7 @@
-export { Accordion } from './chunk-QXGYKWI7.mjs';
+export { Accordion } from './chunk-O3HA6TYM.mjs';
+import './chunk-EJ7ZPXOH.mjs';
+import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';
-import './chunk-RTC3CFXF.mjs';
-import './chunk-5IKW3VNC.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/AlertBanner.js

@@ -205,6 +205,7 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
     /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: ms(16), color: accentColor })
   );
   const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
+  const a11yLabel = description ? `${title}. ${description}` : title;
   return /* @__PURE__ */ React3__default.default.createElement(
     reactNative.View,
     {
@@ -212,7 +213,9 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
         styles.container,
         { backgroundColor: bgColor, borderWidth: 1, borderColor },
         style
-      ]
+      ],
+      accessibilityRole: "alert",
+      accessibilityLabel: a11yLabel
     },
     /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.iconSlot }, effectiveIcon),
     /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)

package/dist/AlertBanner.mjs

@@ -1,5 +1,6 @@
-export { AlertBanner } from './chunk-SBZYEV4S.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+export { AlertBanner } from './chunk-M6ZXVBTK.mjs';
 import './chunk-QY3X2UYR.mjs';
+import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/AppHeader.d.mts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface AppHeaderProps {
+    /** Primary title. */
+    title?: string;
+    /** Secondary text below the title. */
+    subtitle?: string;
+    /** Show a back button on the left and call this when pressed. */
+    onBack?: () => void;
+    /** Icon name for the back button. Defaults to `'chevron-left'`. */
+    backIconName?: string;
+    /** Custom left content — overrides the back button. */
+    left?: React.ReactNode;
+    /** Custom right content (actions). */
+    right?: React.ReactNode;
+    /**
+     * Title alignment.
+     * - `'auto'` (default): left on narrow screens, centered when width ≥ `BREAKPOINTS.wide`.
+     * - `'left'` / `'center'`: force alignment.
+     */
+    titleAlign?: 'auto' | 'left' | 'center';
+    /** Render a hairline border under the header. Defaults to true. */
+    bordered?: boolean;
+    /** Apply the top safe-area inset as padding. Defaults to true. */
+    withSafeArea?: boolean;
+    /** Background color. Defaults to theme `background`. */
+    backgroundColor?: string;
+    style?: ViewStyle;
+}
+/**
+ * Top app bar / screen chrome — back button, title/subtitle, and a right action
+ * slot. Responsive: the title left-aligns on phones and centers on wide layouts.
+ *
+ * @example
+ * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ */
+declare function AppHeader({ title, subtitle, onBack, backIconName, left, right, titleAlign, bordered, withSafeArea, backgroundColor, style, }: AppHeaderProps): React.JSX.Element;
+
+export { AppHeader, type AppHeaderProps };

package/dist/AppHeader.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface AppHeaderProps {
+    /** Primary title. */
+    title?: string;
+    /** Secondary text below the title. */
+    subtitle?: string;
+    /** Show a back button on the left and call this when pressed. */
+    onBack?: () => void;
+    /** Icon name for the back button. Defaults to `'chevron-left'`. */
+    backIconName?: string;
+    /** Custom left content — overrides the back button. */
+    left?: React.ReactNode;
+    /** Custom right content (actions). */
+    right?: React.ReactNode;
+    /**
+     * Title alignment.
+     * - `'auto'` (default): left on narrow screens, centered when width ≥ `BREAKPOINTS.wide`.
+     * - `'left'` / `'center'`: force alignment.
+     */
+    titleAlign?: 'auto' | 'left' | 'center';
+    /** Render a hairline border under the header. Defaults to true. */
+    bordered?: boolean;
+    /** Apply the top safe-area inset as padding. Defaults to true. */
+    withSafeArea?: boolean;
+    /** Background color. Defaults to theme `background`. */
+    backgroundColor?: string;
+    style?: ViewStyle;
+}
+/**
+ * Top app bar / screen chrome — back button, title/subtitle, and a right action
+ * slot. Responsive: the title left-aligns on phones and centers on wide layouts.
+ *
+ * @example
+ * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ */
+declare function AppHeader({ title, subtitle, onBack, backIconName, left, right, titleAlign, bordered, withSafeArea, backgroundColor, style, }: AppHeaderProps): React.JSX.Element;
+
+export { AppHeader, type AppHeaderProps };