@retray-dev/ui-kit 1.7.0 → 2.3.0

package/src/components/Toggle/Toggle.tsx

@@ -83,15 +83,22 @@ export function Toggle({
       return prop
     }
 
-    if (!pressed) return renderProp(icon)
+    if (pressed) {
+      const active = renderProp(activeIcon)
+      if (active) return <>{active}</>
+      return (
+        <View style={[styles.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }]}>
+          <Text style={[styles.checkMark, { color: colors.primaryForeground }]}>✓</Text>
+        </View>
+      )
+    }
 
-    const active = renderProp(activeIcon)
-    if (active) return <>{active}</>
+    const custom = renderProp(icon)
+    if (custom) return <>{custom}</>
 
+    // Default: empty circle to signal an action is available
     return (
-      <View style={[styles.checkContainer, { borderColor: colors.primary }]}>
-        <Text style={[styles.checkMark, { color: colors.primary }]}>✓</Text>
-      </View>
+      <View style={[styles.checkContainer, { borderColor: colors.mutedForeground }]} />
     )
   }
 

package/src/index.ts

@@ -13,7 +13,7 @@ export * from './components/Separator'
 export * from './components/Spinner'
 export * from './components/Skeleton'
 export * from './components/Avatar'
-export * from './components/Alert'
+export * from './components/AlertBanner'
 export * from './components/Progress'
 export * from './components/EmptyState'
 export * from './components/Textarea'
@@ -29,4 +29,10 @@ export * from './components/Select'
 export * from './components/Toast'
 export * from './components/CurrencyInput'
 export * from './components/CurrencyDisplay'
-export * from './components/CurrencyInputLarge'
+// CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
+export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
+export * from './components/ListItem'
+export * from './components/Chip'
+export * from './components/ConfirmDialog'
+export * from './components/LabelValue'
+export * from './components/MonthPicker'

package/src/theme/ThemeProvider.tsx

@@ -11,11 +11,10 @@ const ThemeContext = createContext<ThemeContextValue>({
 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' } }
+  * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
+  * for `light` and/or `dark` to override the defaults.
+  * @example
+  * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
    */
   theme?: Theme
   /**
@@ -31,8 +30,8 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
 
   const colors = useMemo<ThemeColors>(() => {
     const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
-    const overrides = resolvedScheme === 'dark' ? theme?.dark : theme?.light
-    return { ...base, ...overrides }
+    const override = resolvedScheme === 'dark' ? theme?.dark : theme?.light
+    return override ? { ...base, ...override } : base
   }, [resolvedScheme, theme])
 
   return (
@@ -43,5 +42,9 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
 }
 
 export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext)
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
 }

package/src/theme/colors.ts

@@ -1,45 +1,46 @@
 import { ThemeColors } from './types'
 
+// Full, explicit theme palettes. No derivation — palettes are direct and fully customizable.
 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',
+  primaryForeground: '#ffffff',
+  secondary: '#f1f1f1',
+  secondaryForeground: '#171717',
+  muted: '#f1f1f1',
+  mutedForeground: '#a2a2a2',
+  accent: '#e4e4e4',
+  accentForeground: '#171717',
   destructive: '#ef4444',
-  destructiveForeground: '#fafafa',
+  destructiveForeground: '#1a1a1a',
   border: '#e5e5e5',
   input: '#e5e5e5',
-  ring: '#a3a3a3',
+  ring: '#1a1a1a',
   success: '#16a34a',
-  successForeground: '#ffffff',
+  successForeground: '#1a1a1a',
 }
 
 export const defaultDark: ThemeColors = {
   background: '#171717',
   foreground: '#fafafa',
-  card: '#1f1f1f',
+  card: '#222222',
   cardForeground: '#fafafa',
   primary: '#fafafa',
   primaryForeground: '#1a1a1a',
-  secondary: '#2a2a2a',
+  secondary: '#323232',
   secondaryForeground: '#fafafa',
-  muted: '#2a2a2a',
-  mutedForeground: '#a3a3a3',
-  accent: '#2a2a2a',
+  muted: '#323232',
+  mutedForeground: '#888888',
+  accent: '#323232',
   accentForeground: '#fafafa',
   destructive: '#dc2626',
-  destructiveForeground: '#fafafa',
+  destructiveForeground: '#1a1a1a',
   border: '#2a2a2a',
   input: '#2a2a2a',
-  ring: '#d4d4d4',
+  ring: '#fafafa',
   success: '#22c55e',
-  successForeground: '#ffffff',
+  successForeground: '#1a1a1a',
 }

package/src/theme/types.ts

@@ -20,6 +20,8 @@ export type ThemeColors = {
   successForeground: string
 }
 
+// Theme overrides: consumers may supply partial or full `ThemeColors` objects
+// for `theme.light` / `theme.dark` to override only the tokens they want.
 export type Theme = {
   light?: Partial<ThemeColors>
   dark?: Partial<ThemeColors>

package/src/components/Alert/index.ts

@@ -1,2 +0,0 @@
-export { Alert } from './Alert'
-export type { AlertProps, AlertVariant } from './Alert'

package/src/components/CurrencyInputLarge/CurrencyInputLarge.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { ViewStyle } from 'react-native'
-import { Input } from '../Input'
-
-export interface CurrencyInputLargeProps {
-  value?: string
-  onChangeText?: (formatted: string) => void
-  /** Called with the parsed numeric value (no separators, no prefix). */
-  onChangeValue?: (raw: number) => void
-  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
-  prefix?: string
-  /** Character used to separate groups of three digits. Defaults to `'.'`. */
-  thousandsSeparator?: '.' | ','
-  label?: string
-  /** Red helper text; also changes input border to destructive color. */
-  error?: string
-  hint?: string
-  placeholder?: string
-  editable?: boolean
-  containerStyle?: ViewStyle
-}
-
-function formatCurrency(raw: string, separator: '.' | ','): string {
-  const digits = raw.replace(/\D/g, '')
-  if (!digits) return ''
-  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
-}
-
-export function CurrencyInputLarge({
-  value,
-  onChangeText,
-  onChangeValue,
-  prefix = '$',
-  thousandsSeparator = '.',
-  label,
-  error,
-  hint,
-  placeholder,
-  editable,
-  containerStyle,
-}: CurrencyInputLargeProps) {
-  const handleChange = (text: string) => {
-    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
-    const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
-    const display = formatted ? `${prefix}${formatted}` : ''
-    onChangeText?.(display)
-    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, 'g')
-    const raw = parseFloat(formatted.replace(separatorRegex, '') || '0')
-    onChangeValue?.(isNaN(raw) ? 0 : raw)
-  }
-
-  return (
-    <Input
-      value={value}
-      onChangeText={handleChange}
-      keyboardType="numeric"
-      label={label}
-      error={error}
-      hint={hint}
-      placeholder={placeholder ?? `${prefix}0`}
-      editable={editable}
-      containerStyle={containerStyle}
-      style={{ fontSize: 36 }}
-    />
-  )
-}

package/src/components/CurrencyInputLarge/index.ts

@@ -1 +0,0 @@
-export * from './CurrencyInputLarge'