@retray-dev/ui-kit 4.0.0 → 5.2.0

package/src/tokens.ts

@@ -1,13 +1,18 @@
+// ─── Spacing ─────────────────────────────────────────────────────────────────
+// 8pt grid with 2pt micro-step. `section` for major band separators (Airbnb: 64px).
 export const SPACING = {
+  xxs: 2,
   xs: 4,
   sm: 8,
   md: 12,
-  lg: 16,
-  xl: 24,
-  '2xl': 32,
-  '3xl': 48,
+  base: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  section: 64,
 } as const
 
+// ─── Icon sizes ───────────────────────────────────────────────────────────────
 export const ICON_SIZES = {
   sm: 14,
   md: 18,
@@ -16,49 +21,178 @@ export const ICON_SIZES = {
   '2xl': 32,
 } as const
 
+// ─── Border radius ────────────────────────────────────────────────────────────
+// Airbnb-aligned shape language — soft everywhere, no hard corners on interactive elements.
+// xs: micro chips/tags  sm: inputs/forms  md: cards  lg: sheet corners  xl: primary CTAs (pill)
 export const RADIUS = {
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 14,
+  lg: 20,
+  xl: 32,
   full: 9999,
 } as const
 
+// ─── Shadows ──────────────────────────────────────────────────────────────────
+// Multi-tier. Default card usage = sm. Hover float = md. Modals = lg/xl.
 export const SHADOWS = {
   sm: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
+    shadowOpacity: 0.06,
     shadowRadius: 4,
     elevation: 2,
   },
   md: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.12,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.10,
     shadowRadius: 8,
     elevation: 5,
   },
   lg: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
+    shadowOpacity: 0.16,
     shadowRadius: 16,
     elevation: 10,
   },
   xl: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.28,
+    shadowOpacity: 0.24,
     shadowRadius: 24,
     elevation: 18,
   },
 } as const
 
+// ─── Breakpoints ──────────────────────────────────────────────────────────────
 export const BREAKPOINTS = {
   wide: 700,
 } as const
 
+// ─── Typography ───────────────────────────────────────────────────────────────
+// Airbnb-inspired hierarchy. Modest weights — 500-600 on display, not 700+.
+// Exception: display-hero (large number display) and display-xl always bold.
+// Poppins carries the full scale. All fontFamily values reference loaded font names.
+export const TYPOGRAPHY = {
+  'display-hero': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 64,
+    fontWeight: '700' as const,
+    lineHeight: 70,
+    letterSpacing: -1,
+  },
+  'display-xl': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 28,
+    fontWeight: '700' as const,
+    lineHeight: 40,
+    letterSpacing: 0,
+  },
+  'display-lg': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 22,
+    fontWeight: '500' as const,
+    lineHeight: 26,
+    letterSpacing: -0.44,
+  },
+  'display-md': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 21,
+    fontWeight: '700' as const,
+    lineHeight: 30,
+    letterSpacing: 0,
+  },
+  'display-sm': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 20,
+    fontWeight: '600' as const,
+    lineHeight: 24,
+    letterSpacing: -0.18,
+  },
+  'title-md': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 16,
+    fontWeight: '600' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'title-sm': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'body-md': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 16,
+    fontWeight: '400' as const,
+    lineHeight: 24,
+    letterSpacing: 0,
+  },
+  'body-sm': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 14,
+    fontWeight: '400' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  caption: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  'caption-sm': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 13,
+    fontWeight: '400' as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  'badge-text': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 11,
+    fontWeight: '600' as const,
+    lineHeight: 13,
+    letterSpacing: 0,
+  },
+  'micro-label': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 12,
+    fontWeight: '700' as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  'uppercase-tag': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 8,
+    fontWeight: '700' as const,
+    lineHeight: 10,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase' as const,
+  },
+  'button-lg': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'button-sm': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+} as const
+
+// ─── Types ────────────────────────────────────────────────────────────────────
 export type Spacing = typeof SPACING
 export type SpacingKey = keyof Spacing
 
@@ -67,3 +201,6 @@ export type IconSizeKey = keyof IconSize
 
 export type Radius = typeof RADIUS
 export type RadiusKey = keyof Radius
+
+export type Typography = typeof TYPOGRAPHY
+export type TypographyKey = keyof Typography

package/src/utils/hover.ts

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react'
+import { Platform } from 'react-native'
+
+export interface HoverHandlers {
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+/**
+ * Web-only hover state hook. Returns `{ hovered, hoverHandlers }`.
+ * On native (iOS/Android) `hovered` is always false and handlers are no-ops.
+ * Spread `hoverHandlers` onto any View/TouchableOpacity to activate.
+ */
+export function useHover(): { hovered: boolean; hoverHandlers: HoverHandlers } {
+  const [hovered, setHovered] = useState(false)
+
+  const onMouseEnter = useCallback(() => setHovered(true), [])
+  const onMouseLeave = useCallback(() => setHovered(false), [])
+
+  if (Platform.OS !== 'web') {
+    return { hovered: false, hoverHandlers: {} }
+  }
+
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } }
+}