@retray-dev/ui-kit 2.6.0 → 2.7.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v2.6.0)
+# @retray-dev/ui-kit — Component Reference (v2.7.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:
 
@@ -105,6 +105,99 @@ import type { ThemeColors } from '@retray-dev/ui-kit'
 
 ---
 
+## Design Tokens
+
+Static structural constants exported from the package root — no context or provider needed. Use these instead of hardcoding values.
+
+```ts
+import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/ui-kit'
+```
+
+### SPACING
+
+8pt-grid spacing scale.
+
+| Key | Value |
+|-----|-------|
+| `xs` | 4 |
+| `sm` | 8 |
+| `md` | 12 |
+| `lg` | 16 |
+| `xl` | 24 |
+| `2xl` | 32 |
+| `3xl` | 48 |
+
+**Types:** `Spacing`, `SpacingKey`
+
+```tsx
+<View style={{ gap: SPACING.md, padding: SPACING.lg }} />
+```
+
+### ICON_SIZES
+
+Semantic icon size scale aligned to HIG roles.
+
+| Key | Value |
+|-----|-------|
+| `sm` | 14 |
+| `md` | 18 |
+| `lg` | 22 |
+| `xl` | 28 |
+| `2xl` | 32 |
+
+**Types:** `IconSize`, `IconSizeKey`
+
+```tsx
+<Icon name="home" size={ICON_SIZES.md} color={colors.foreground} />
+```
+
+### RADIUS
+
+Border radius scale used throughout the library.
+
+| Key | Value | Used in |
+|-----|-------|---------|
+| `sm` | 4 | — |
+| `md` | 8 | Inputs, Buttons, Checkboxes, Toggles, Tabs |
+| `lg` | 12 | Cards, AlertBanner, Toast, EmptyState, Select list |
+| `xl` | 16 | Sheet top corners |
+| `full` | 9999 | Pills, circular elements |
+
+**Types:** `Radius`, `RadiusKey`
+
+```tsx
+<View style={{ borderRadius: RADIUS.lg }} />
+```
+
+### SHADOWS
+
+Cross-platform shadow presets (RN `shadow*` properties + `elevation`).
+
+| Key | Height | Opacity | Radius | Elevation |
+|-----|--------|---------|--------|-----------|
+| `sm` | 1 | 0.08 | 4 | 2 |
+| `md` | 3 | 0.12 | 8 | 5 |
+| `lg` | 6 | 0.20 | 16 | 10 |
+| `xl` | 12 | 0.28 | 24 | 18 |
+
+```tsx
+<View style={[styles.card, SHADOWS.md]} />
+```
+
+### BREAKPOINTS
+
+Layout breakpoints.
+
+| Key | Value |
+|-----|-------|
+| `wide` | 700 |
+
+```tsx
+const isWide = width >= BREAKPOINTS.wide
+```
+
+---
+
 ## Components
 
 ---

package/README.md

@@ -95,6 +95,24 @@ const { colors, colorScheme } = useTheme()
 
 **Available tokens:** `background`, `foreground`, `card`, `cardForeground`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `muted`, `mutedForeground`, `accent`, `accentForeground`, `destructive`, `destructiveForeground`, `border`, `input`, `ring`, `success`, `successForeground`
 
+## Design Tokens
+
+Static structural constants — no provider required:
+
+```ts
+import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/ui-kit'
+
+<View style={{ gap: SPACING.md, padding: SPACING.lg, borderRadius: RADIUS.lg, ...SHADOWS.sm }} />
+```
+
+| Token | Keys |
+|-------|------|
+| `SPACING` | `xs` (4), `sm` (8), `md` (12), `lg` (16), `xl` (24), `2xl` (32), `3xl` (48) |
+| `ICON_SIZES` | `sm` (14), `md` (18), `lg` (22), `xl` (28), `2xl` (32) |
+| `RADIUS` | `sm` (4), `md` (8), `lg` (12), `xl` (16), `full` (9999) |
+| `SHADOWS` | `sm`, `md`, `lg`, `xl` — cross-platform shadow presets |
+| `BREAKPOINTS` | `wide` (700) |
+
 ## Components
 
 | Category    | Components                                                                                      |

package/dist/index.d.mts

@@ -615,4 +615,79 @@ interface IconProps {
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
-export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, Icon, type IconFamily, type IconProps, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };
+declare const SPACING: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly '2xl': 32;
+    readonly '3xl': 48;
+};
+declare const ICON_SIZES: {
+    readonly sm: 14;
+    readonly md: 18;
+    readonly lg: 22;
+    readonly xl: 28;
+    readonly '2xl': 32;
+};
+declare const RADIUS: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+declare const SHADOWS: {
+    readonly sm: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 4;
+        readonly elevation: 2;
+    };
+    readonly md: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 3;
+        };
+        readonly shadowOpacity: 0.12;
+        readonly shadowRadius: 8;
+        readonly elevation: 5;
+    };
+    readonly lg: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 6;
+        };
+        readonly shadowOpacity: 0.2;
+        readonly shadowRadius: 16;
+        readonly elevation: 10;
+    };
+    readonly xl: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 12;
+        };
+        readonly shadowOpacity: 0.28;
+        readonly shadowRadius: 24;
+        readonly elevation: 18;
+    };
+};
+declare const BREAKPOINTS: {
+    readonly wide: 700;
+};
+type Spacing = typeof SPACING;
+type SpacingKey = keyof Spacing;
+type IconSize = typeof ICON_SIZES;
+type IconSizeKey = keyof IconSize;
+type Radius = typeof RADIUS;
+type RadiusKey = keyof Radius;
+
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };

package/dist/index.d.ts

@@ -615,4 +615,79 @@ interface IconProps {
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
-export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, Icon, type IconFamily, type IconProps, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };
+declare const SPACING: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly '2xl': 32;
+    readonly '3xl': 48;
+};
+declare const ICON_SIZES: {
+    readonly sm: 14;
+    readonly md: 18;
+    readonly lg: 22;
+    readonly xl: 28;
+    readonly '2xl': 32;
+};
+declare const RADIUS: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+declare const SHADOWS: {
+    readonly sm: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 4;
+        readonly elevation: 2;
+    };
+    readonly md: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 3;
+        };
+        readonly shadowOpacity: 0.12;
+        readonly shadowRadius: 8;
+        readonly elevation: 5;
+    };
+    readonly lg: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 6;
+        };
+        readonly shadowOpacity: 0.2;
+        readonly shadowRadius: 16;
+        readonly elevation: 10;
+    };
+    readonly xl: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 12;
+        };
+        readonly shadowOpacity: 0.28;
+        readonly shadowRadius: 24;
+        readonly elevation: 18;
+    };
+};
+declare const BREAKPOINTS: {
+    readonly wide: 700;
+};
+type Spacing = typeof SPACING;
+type SpacingKey = keyof Spacing;
+type IconSize = typeof ICON_SIZES;
+type IconSizeKey = keyof IconSize;
+type Radius = typeof RADIUS;
+type RadiusKey = keyof Radius;
+
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };

package/dist/index.js

@@ -31,12 +31,7 @@ var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 var Animated10__default = /*#__PURE__*/_interopDefault(Animated10);
 var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
 
-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');
-});
+// src/theme/ThemeProvider.tsx
 
 // src/theme/colors.ts
 var defaultLight = {
@@ -104,21 +99,29 @@ function useTheme() {
   }
   return context;
 }
-var Haptics = null;
-if (reactNative.Platform.OS !== "web") {
-  Haptics = __require("expo-haptics");
+var _haptics = null;
+async function getHaptics() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_haptics) {
+    _haptics = await import('expo-haptics');
+  }
+  return _haptics;
 }
 function selectionAsync() {
-  Haptics?.selectionAsync();
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => h?.selectionAsync());
 }
 function impactLight() {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
 }
 function notificationSuccess() {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success);
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
 }
 function notificationError() {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error);
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Error));
 }
 var isWeb = reactNative.Platform.OS === "web";
 var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
@@ -2526,6 +2529,64 @@ var styles27 = reactNative.StyleSheet.create({
   }
 });
 
+// src/tokens.ts
+var SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  "2xl": 32,
+  "3xl": 48
+};
+var ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  "2xl": 32
+};
+var RADIUS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999
+};
+var SHADOWS = {
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10
+  },
+  xl: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 18
+  }
+};
+var BREAKPOINTS = {
+  wide: 700
+};
+
 Object.defineProperty(exports, "BottomSheetModalProvider", {
   enumerable: true,
   get: function () { return bottomSheet.BottomSheetModalProvider; }
@@ -2533,6 +2594,7 @@ Object.defineProperty(exports, "BottomSheetModalProvider", {
 exports.Accordion = Accordion;
 exports.AlertBanner = AlertBanner;
 exports.Avatar = Avatar;
+exports.BREAKPOINTS = BREAKPOINTS;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
@@ -2549,13 +2611,17 @@ exports.CurrencyDisplay = CurrencyDisplay;
 exports.CurrencyInput = CurrencyInput;
 exports.CurrencyInputLarge = CurrencyInput;
 exports.EmptyState = EmptyState;
+exports.ICON_SIZES = ICON_SIZES;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.LabelValue = LabelValue;
 exports.ListItem = ListItem;
 exports.MonthPicker = MonthPicker;
 exports.Progress = Progress;
+exports.RADIUS = RADIUS;
 exports.RadioGroup = RadioGroup;
+exports.SHADOWS = SHADOWS;
+exports.SPACING = SPACING;
 exports.Select = Select;
 exports.Separator = Separator;
 exports.Sheet = Sheet;

package/dist/index.mjs

@@ -18,12 +18,7 @@ import { scheduleOnRN } from 'react-native-worklets';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-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');
-});
+// src/theme/ThemeProvider.tsx
 
 // src/theme/colors.ts
 var defaultLight = {
@@ -91,21 +86,29 @@ function useTheme() {
   }
   return context;
 }
-var Haptics = null;
-if (Platform.OS !== "web") {
-  Haptics = __require("expo-haptics");
+var _haptics = null;
+async function getHaptics() {
+  if (Platform.OS === "web") return null;
+  if (!_haptics) {
+    _haptics = await import('expo-haptics');
+  }
+  return _haptics;
 }
 function selectionAsync() {
-  Haptics?.selectionAsync();
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.selectionAsync());
 }
 function impactLight() {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
 }
 function notificationSuccess() {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success);
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
 }
 function notificationError() {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error);
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Error));
 }
 var isWeb = Platform.OS === "web";
 var s = isWeb ? (n) => n : scale;
@@ -2513,4 +2516,62 @@ var styles27 = StyleSheet.create({
   }
 });
 
-export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, Icon, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, renderIcon, useTheme, useToast };
+// src/tokens.ts
+var SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  "2xl": 32,
+  "3xl": 48
+};
+var ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  "2xl": 32
+};
+var RADIUS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999
+};
+var SHADOWS = {
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10
+  },
+  xl: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 18
+  }
+};
+var BREAKPOINTS = {
+  wide: 700
+};
+
+export { Accordion, AlertBanner, Avatar, BREAKPOINTS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, ICON_SIZES, Icon, Input, LabelValue, ListItem, MonthPicker, Progress, RADIUS, RadioGroup, SHADOWS, SPACING, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, renderIcon, useTheme, useToast };

package/package.json

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

package/src/index.ts

@@ -40,3 +40,20 @@ export * from './components/MonthPicker'
 // Icon utility
 export { Icon, renderIcon } from './utils/icons'
 export type { IconProps, IconFamily } from './utils/icons'
+
+// Design tokens
+export {
+  SPACING,
+  ICON_SIZES,
+  RADIUS,
+  SHADOWS,
+  BREAKPOINTS,
+} from './tokens'
+export type {
+  Spacing,
+  SpacingKey,
+  IconSize,
+  IconSizeKey,
+  Radius,
+  RadiusKey,
+} from './tokens'

package/src/tokens.ts

@@ -0,0 +1,69 @@
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+} as const
+
+export const ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  '2xl': 32,
+} as const
+
+export const RADIUS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const
+
+export const SHADOWS = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 18,
+  },
+} as const
+
+export const BREAKPOINTS = {
+  wide: 700,
+} as const
+
+export type Spacing = typeof SPACING
+export type SpacingKey = keyof Spacing
+
+export type IconSize = typeof ICON_SIZES
+export type IconSizeKey = keyof IconSize
+
+export type Radius = typeof RADIUS
+export type RadiusKey = keyof Radius

package/src/utils/haptics.ts

@@ -1,32 +1,38 @@
 import { Platform } from 'react-native'
 
-/**
- * Web-safe haptics helpers. All calls are no-ops on web since expo-haptics
- * is a native-only module and throws on web.
- */
+type HapticsModule = typeof import('expo-haptics')
 
-let Haptics: typeof import('expo-haptics') | null = null
+let _haptics: HapticsModule | null = null
 
-if (Platform.OS !== 'web') {
-  Haptics = require('expo-haptics')
+async function getHaptics(): Promise<HapticsModule | null> {
+  if (Platform.OS === 'web') return null
+  if (!_haptics) {
+    _haptics = await import('expo-haptics')
+  }
+  return _haptics
 }
 
 export function selectionAsync(): void {
-  Haptics?.selectionAsync()
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.selectionAsync())
 }
 
 export function impactLight(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Light))
 }
 
 export function impactMedium(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Medium))
 }
 
 export function notificationSuccess(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Success))
 }
 
 export function notificationError(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Error))
 }