@retray-dev/ui-kit 0.1.0 → 1.5.0

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react'
+import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export type ToggleVariant = 'default' | 'outline'
+export type ToggleSize = 'sm' | 'md' | 'lg'
+
+export interface ToggleProps extends TouchableOpacityProps {
+  pressed?: boolean
+  onPressedChange?: (pressed: boolean) => void
+  variant?: ToggleVariant
+  size?: ToggleSize
+  label?: string
+  icon?: React.ReactNode
+}
+
+const sizeStyles: Record<ToggleSize, ViewStyle> = {
+  sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
+  md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
+  lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 },
+}
+
+export function Toggle({
+  pressed = false,
+  onPressedChange,
+  variant = 'default',
+  size = 'md',
+  label,
+  icon,
+  disabled,
+  style,
+  ...props
+}: ToggleProps) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (disabled) return
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+  }
+
+  const containerStyle: ViewStyle = pressed
+    ? { backgroundColor: colors.accent }
+    : variant === 'outline'
+      ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border }
+      : { backgroundColor: 'transparent' }
+
+  const textColor = pressed ? colors.accentForeground : colors.foreground
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={[styles.base, containerStyle, sizeStyles[size], disabled && styles.disabled, style]}
+        onPress={() => {
+          Haptics.selectionAsync()
+          onPressedChange?.(!pressed)
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        {...props}
+      >
+        {icon}
+        {label ? <Text style={[styles.label, { color: textColor }]}>{label}</Text> : null}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+})

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle'
+export type { ToggleProps, ToggleVariant, ToggleSize } from './Toggle'

package/src/index.ts

@@ -1,3 +1,29 @@
+// Theme
+export { ThemeProvider, useTheme } from './theme'
+export type { ThemeProviderProps, ThemeColors, Theme, ColorScheme } from './theme'
+export { defaultLight, defaultDark } from './theme'
+
+// Components
 export * from './components/Button'
 export * from './components/Text'
 export * from './components/Input'
+export * from './components/Badge'
+export * from './components/Card'
+export * from './components/Separator'
+export * from './components/Spinner'
+export * from './components/Skeleton'
+export * from './components/Avatar'
+export * from './components/Alert'
+export * from './components/Progress'
+export * from './components/EmptyState'
+export * from './components/Textarea'
+export * from './components/Checkbox'
+export * from './components/Switch'
+export * from './components/Toggle'
+export * from './components/RadioGroup'
+export * from './components/Tabs'
+export * from './components/Accordion'
+export * from './components/Slider'
+export * from './components/Sheet'
+export * from './components/Select'
+export * from './components/Toast'

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { useColorScheme } from 'react-native'
+import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
+import { defaultLight, defaultDark } from './colors'
+
+const ThemeContext = createContext<ThemeContextValue>({
+  colors: defaultLight,
+  colorScheme: 'light',
+})
+
+export interface ThemeProviderProps {
+  children: React.ReactNode
+  /**
+   * Override individual color tokens per scheme. Only provide the tokens you want
+   * to change — the rest fall back to the defaults.
+   * @example
+   * { light: { primary: '#6366f1', primaryForeground: '#fff' },
+   *   dark:  { primary: '#818cf8', primaryForeground: '#fff' } }
+   */
+  theme?: Theme
+  /**
+   * - `'system'` (default): auto-detects device setting and updates when it changes.
+   * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
+   */
+  colorScheme?: ColorScheme
+}
+
+export function ThemeProvider({ children, theme, colorScheme = 'system' }: ThemeProviderProps) {
+  const systemScheme = useColorScheme() ?? 'light'
+  const resolvedScheme: 'light' | 'dark' = colorScheme === 'system' ? systemScheme : colorScheme
+
+  const colors = useMemo<ThemeColors>(() => {
+    const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
+    const overrides = resolvedScheme === 'dark' ? theme?.dark : theme?.light
+    return { ...base, ...overrides }
+  }, [resolvedScheme, theme])
+
+  return (
+    <ThemeContext.Provider value={{ colors, colorScheme: resolvedScheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextValue {
+  return useContext(ThemeContext)
+}

package/src/theme/colors.ts

@@ -0,0 +1,45 @@
+import { ThemeColors } from './types'
+
+export const defaultLight: ThemeColors = {
+  background: '#ffffff',
+  foreground: '#171717',
+  card: '#ffffff',
+  cardForeground: '#171717',
+  primary: '#1a1a1a',
+  primaryForeground: '#fafafa',
+  secondary: '#f5f5f5',
+  secondaryForeground: '#1a1a1a',
+  muted: '#f5f5f5',
+  mutedForeground: '#646464',
+  accent: '#f5f5f5',
+  accentForeground: '#1a1a1a',
+  destructive: '#ef4444',
+  destructiveForeground: '#fafafa',
+  border: '#e5e5e5',
+  input: '#e5e5e5',
+  ring: '#a3a3a3',
+  success: '#16a34a',
+  successForeground: '#ffffff',
+}
+
+export const defaultDark: ThemeColors = {
+  background: '#171717',
+  foreground: '#fafafa',
+  card: '#1f1f1f',
+  cardForeground: '#fafafa',
+  primary: '#fafafa',
+  primaryForeground: '#1a1a1a',
+  secondary: '#2a2a2a',
+  secondaryForeground: '#fafafa',
+  muted: '#2a2a2a',
+  mutedForeground: '#a3a3a3',
+  accent: '#2a2a2a',
+  accentForeground: '#fafafa',
+  destructive: '#dc2626',
+  destructiveForeground: '#fafafa',
+  border: '#2a2a2a',
+  input: '#2a2a2a',
+  ring: '#d4d4d4',
+  success: '#22c55e',
+  successForeground: '#ffffff',
+}

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider, useTheme } from './ThemeProvider'
+export type { ThemeProviderProps } from './ThemeProvider'
+export type { ThemeColors, Theme, ColorScheme } from './types'
+export { defaultLight, defaultDark } from './colors'

package/src/theme/types.ts

@@ -0,0 +1,33 @@
+export type ThemeColors = {
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  muted: string
+  mutedForeground: string
+  accent: string
+  accentForeground: string
+  destructive: string
+  destructiveForeground: string
+  border: string
+  input: string
+  ring: string
+  success: string
+  successForeground: string
+}
+
+export type Theme = {
+  light?: Partial<ThemeColors>
+  dark?: Partial<ThemeColors>
+}
+
+export type ColorScheme = 'light' | 'dark' | 'system'
+
+export type ThemeContextValue = {
+  colors: ThemeColors
+  colorScheme: 'light' | 'dark'
+}