@retray-dev/ui-kit 10.1.0 → 10.2.0

package/src/components/NumberStepper/NumberStepper.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { RADIUS } from '../../tokens'
+import { PressableButton } from '../../utils/pressable'
+
+export type NumberStepperSize = 'sm' | 'md' | 'lg'
+
+export interface NumberStepperProps {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  size?: NumberStepperSize
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+const sizeConfig: Record<NumberStepperSize, { button: number; icon: number; valueFontSize: number; valueLineHeight: number; valueMinWidth: number }> = {
+  sm: { button: s(40), icon: 16, valueFontSize: ms(18), valueLineHeight: mvs(24), valueMinWidth: s(32) },
+  md: { button: s(44), icon: 18, valueFontSize: ms(22), valueLineHeight: mvs(28), valueMinWidth: s(36) },
+  lg: { button: s(52), icon: 22, valueFontSize: ms(26), valueLineHeight: mvs(32), valueMinWidth: s(40) },
+}
+
+function NumberStepperBase({
+  value,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  size = 'md',
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: NumberStepperProps) {
+  const { colors } = useTheme()
+
+  const canDecrement = value > min && !disabled
+  const canIncrement = value < max && !disabled
+
+  const handleDecrement = () => {
+    if (!canDecrement) return
+    impactLight()
+    onValueChange(Math.max(min, value - step))
+  }
+
+  const handleIncrement = () => {
+    if (!canIncrement) return
+    impactLight()
+    onValueChange(Math.min(max, value + step))
+  }
+
+  const { button: buttonSize, icon: iconSize, valueFontSize, valueLineHeight, valueMinWidth } = sizeConfig[size]
+
+  const displayValue = String(value)
+
+  return (
+    <View style={[styles.container, style]}>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canDecrement && styles.buttonDisabled,
+        ]}
+        enabled={canDecrement}
+        onPress={handleDecrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Decrease, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canDecrement }}
+      >
+        {renderIcon('minus', iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+      <Text
+        style={[
+          styles.value,
+          {
+            color: colors.foreground,
+            fontSize: valueFontSize,
+            lineHeight: valueLineHeight,
+            minWidth: valueMinWidth,
+          },
+        ]}
+        allowFontScaling={true}
+        accessibilityLabel={accessibilityLabel ?? `Quantity: ${displayValue}`}
+        accessibilityRole="text"
+      >
+        {displayValue}
+      </Text>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canIncrement && styles.buttonDisabled,
+        ]}
+        enabled={canIncrement}
+        onPress={handleIncrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Increase, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canIncrement }}
+      >
+        {renderIcon('plus', iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+    </View>
+  )
+}
+
+export const NumberStepper = React.memo(NumberStepperBase)
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+  },
+  button: {
+    borderRadius: RADIUS.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+  },
+  buttonDisabled: {
+    opacity: 0.35,
+  },
+  value: {
+    fontFamily: 'Sohne-Medium',
+    textAlign: 'center',
+  },
+})

package/src/components/NumberStepper/index.ts

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

package/src/index.ts

@@ -55,12 +55,14 @@ export * from './components/TabBar'
 export * from './components/ImageViewer'
 export * from './components/SheetSelect'
 export * from './components/ImageUpload'
+export * from './components/IconPicker'
+export * from './components/NumberStepper'
 // HolographicCard is intentionally NOT re-exported here — it depends on the
 // optional peer @shopify/react-native-skia, so it must stay out of the main
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
 
 // Icon utility
-export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
+export { Icon, renderIcon, configureIconFamilies, getValidIconNames } from './utils/icons'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'

package/src/utils/curatedIcons.ts

@@ -0,0 +1,286 @@
+/**
+ * Curated icon set — ~320 most useful icons organized by category.
+ * Ordered by usage probability: most-common categories first, niche last.
+ * All names resolve across 6 @expo/vector-icons families via renderIcon().
+ */
+
+export interface IconCategory {
+  name: string
+  label: string
+  labelEs: string
+  /** Icon that represents this category in the tab bar. */
+  categoryIcon: string
+  icons: string[]
+}
+
+export const CURATED_ICONS: IconCategory[] = [
+  {
+    name: 'food',
+    label: 'Food',
+    labelEs: 'Comida',
+    categoryIcon: 'coffee',
+    icons: [
+      // Bebidas
+      'coffee',
+      'wine-glass',
+      'beer',
+      'cocktail',
+      'mug-hot',
+      'glass-cheers',
+      'wine',
+      // Comidas
+      'restaurant',
+      'hamburger',
+      'pizza-slice',
+      'ice-cream',
+      'cake',
+      'egg',
+      'fish',
+      'bread-slice',
+      'cookie',
+      'cheese',
+      'carrot',
+      'hotdog',
+      // Cocina / utilidades
+      'utensils',
+      // Delivery / pedidos
+      'shopping-bag',
+      'clock',
+      'star',
+      'heart',
+      'map-pin',
+      'phone',
+    ],
+  },
+  {
+    name: 'sports',
+    label: 'Sports',
+    labelEs: 'Deportes',
+    categoryIcon: 'activity',
+    icons: [
+      // Deportes específicos
+      'futbol',
+      'dumbbell',
+      'running',
+      'bicycle',
+      'heartbeat',
+      'fitness-center',
+      // Competencia / logros
+      'target',
+      'award',
+      'flag',
+      'star',
+      'zap',
+      // Bienestar
+      'heart',
+      'clock',
+      'activity',
+      'sun',
+      'user',
+      'users',
+    ],
+  },
+  {
+    name: 'business',
+    label: 'Business',
+    labelEs: 'Negocios',
+    categoryIcon: 'briefcase',
+    icons: [
+      'shopping-cart', 'shopping-bag',
+      'credit-card',
+      'dollar-sign', 'percent',
+      'briefcase',
+      'truck', 'package',
+      'gift',
+      'bar-chart', 'bar-chart-2', 'pie-chart',
+      'trending-up', 'trending-down',
+      'activity',
+      'tag',
+      'bookmark',
+      'pocket',
+    ],
+  },
+  {
+    name: 'objects',
+    label: 'Objects',
+    labelEs: 'Objetos',
+    categoryIcon: 'folder',
+    icons: [
+      'file', 'file-text', 'file-plus', 'file-minus',
+      'folder', 'folder-plus', 'folder-minus',
+      'lock', 'unlock', 'key',
+      'shield', 'shield-off',
+      'settings',
+      'sliders', 'toggle-left', 'toggle-right',
+      'tool',
+      'printer',
+      'database', 'server', 'hard-drive',
+      'cpu',
+      'paperclip',
+      'aperture', 'box',
+      'radio',
+    ],
+  },
+  {
+    name: 'status',
+    label: 'Status',
+    labelEs: 'Estado',
+    categoryIcon: 'alert-circle',
+    icons: [
+      'alert-circle', 'alert-triangle', 'alert-octagon',
+      'info', 'help-circle',
+      'bell', 'bell-off',
+      'eye', 'eye-off',
+      'flag',
+      'zap', 'zap-off',
+      'loader', 'clock', 'watch',
+    ],
+  },
+  {
+    name: 'actions',
+    label: 'Actions',
+    labelEs: 'Acciones',
+    categoryIcon: 'edit-3',
+    icons: [
+      'plus', 'plus-circle', 'plus-square',
+      'minus', 'minus-circle', 'minus-square',
+      'x', 'x-circle', 'x-square', 'x-octagon',
+      'check', 'check-circle', 'check-square',
+      'edit', 'edit-2', 'edit-3',
+      'trash', 'trash-2',
+      'copy', 'clipboard', 'scissors',
+      'download', 'download-cloud', 'upload', 'upload-cloud',
+      'share', 'share-2', 'link', 'link-2',
+      'search', 'zoom-in', 'zoom-out',
+      'save', 'archive',
+      'log-in', 'log-out', 'power',
+      'refresh-cw', 'rotate-cw',
+      'slash',
+    ],
+  },
+  {
+    name: 'communication',
+    label: 'Communication',
+    labelEs: 'Comunicación',
+    categoryIcon: 'message-circle',
+    icons: [
+      'mail',
+      'message-circle', 'message-square',
+      'send',
+      'phone', 'phone-call', 'phone-incoming', 'phone-outgoing',
+      'phone-missed', 'phone-off', 'phone-forwarded',
+      'at-sign', 'inbox',
+      'user', 'user-plus', 'user-minus', 'user-check', 'user-x',
+      'users',
+      'smile', 'frown', 'meh',
+      'heart', 'thumbs-up', 'thumbs-down',
+      'star',
+      'award',
+    ],
+  },
+  {
+    name: 'navigation',
+    label: 'Navigation',
+    labelEs: 'Navegación',
+    categoryIcon: 'compass',
+    icons: [
+      'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
+      'arrow-up-left', 'arrow-up-right', 'arrow-down-left', 'arrow-down-right',
+      'chevron-up', 'chevron-down', 'chevron-left', 'chevron-right',
+      'chevrons-up', 'chevrons-down', 'chevrons-left', 'chevrons-right',
+      'corner-up-left', 'corner-up-right', 'corner-down-left', 'corner-down-right',
+      'corner-left-up', 'corner-left-down', 'corner-right-up', 'corner-right-down',
+      'refresh-cw', 'refresh-ccw', 'rotate-cw', 'rotate-ccw',
+      'navigation', 'navigation-2', 'compass', 'map', 'map-pin', 'target', 'crosshair',
+      'home', 'maximize', 'maximize-2', 'minimize', 'minimize-2',
+      'external-link', 'move', 'anchor',
+    ],
+  },
+  {
+    name: 'media',
+    label: 'Media',
+    labelEs: 'Medios',
+    categoryIcon: 'image',
+    icons: [
+      'image', 'film', 'video', 'video-off',
+      'play', 'play-circle', 'pause', 'pause-circle',
+      'square', 'stop-circle',
+      'music', 'headphones', 'speaker',
+      'camera', 'camera-off',
+      'mic', 'mic-off',
+      'volume', 'volume-1', 'volume-2', 'volume-x',
+      'fast-forward', 'rewind', 'skip-forward', 'skip-back',
+      'repeat', 'shuffle',
+      'disc',
+    ],
+  },
+  {
+    name: 'layout',
+    label: 'Layout',
+    labelEs: 'Diseño',
+    categoryIcon: 'grid',
+    icons: [
+      'menu', 'more-horizontal', 'more-vertical',
+      'grid', 'columns', 'sidebar', 'layout',
+      'list',
+      'align-left', 'align-center', 'align-right', 'align-justify',
+      'bold', 'italic', 'underline',
+      'type',
+      'filter',
+      'crop',
+      'layers',
+      'hash',
+      'table', 'trello',
+      'circle', 'square', 'triangle', 'hexagon', 'octagon',
+      'feather', 'pen-tool',
+    ],
+  },
+  {
+    name: 'nature',
+    label: 'Nature',
+    labelEs: 'Naturaleza',
+    categoryIcon: 'sun',
+    icons: [
+      'sun', 'sunrise', 'sunset', 'moon',
+      'cloud', 'cloud-drizzle', 'cloud-lightning',
+      'cloud-off', 'cloud-rain', 'cloud-snow',
+      'wind', 'umbrella', 'thermometer',
+      'droplet',
+      'life-buoy',
+    ],
+  },
+  {
+    name: 'brands',
+    label: 'Brands',
+    labelEs: 'Marcas',
+    categoryIcon: 'globe',
+    icons: [
+      'github', 'gitlab',
+      'twitter',
+      'facebook', 'instagram',
+      'linkedin',
+      'youtube',
+      'dribbble',
+      'twitch', 'slack', 'figma', 'framer',
+      'chrome', 'codepen', 'codesandbox',
+      'globe', 'rss',
+      'airplay', 'cast',
+      'bluetooth', 'wifi', 'wifi-off',
+      'battery', 'battery-charging',
+      'monitor', 'tablet', 'smartphone', 'tv',
+    ],
+  },
+]
+
+/** Flat deduplicated array of all curated icon names (for "Todos" / search). */
+export const ALL_CURATED_ICONS: string[] = [
+  ...new Set(CURATED_ICONS.flatMap((c) => c.icons)),
+]
+
+/** Resolve icon to its category label, or undefined if not found. */
+export function getIconCategory(name: string): string | undefined {
+  for (const cat of CURATED_ICONS) {
+    if (cat.icons.includes(name)) return cat.label
+  }
+  return undefined
+}

package/src/utils/icons.ts

@@ -62,9 +62,9 @@ export function configureIconFamilies(families: IconFamily[]): void {
   resolvedCache = null // invalidate — rebuilt lazily on next resolve
 }
 
-function buildCache(): Map<string, IconFamilyEntry> {
+function buildCache(families?: IconFamilyEntry[]): Map<string, IconFamilyEntry> {
   const cache = new Map<string, IconFamilyEntry>()
-  for (const family of activeFamilies) {
+  for (const family of (families ?? activeFamilies)) {
     const glyphMap = family.getGlyphMap()
     for (const iconName of Object.keys(glyphMap)) {
       cache.set(iconName, family)
@@ -80,6 +80,24 @@ function resolveFamily(name: string): IconFamilyEntry | null {
   return resolvedCache.get(name) ?? null
 }
 
+let cachedIconNames: string[] | null = null
+
+export function getValidIconNames(families?: IconFamily[]): string[] {
+  if (families && families.length > 0) {
+    const tempFamilies = families
+      .map((n) => ALL_FAMILIES.find((f) => f.name === n))
+      .filter((f): f is IconFamilyEntry => f !== undefined)
+    if (tempFamilies.length === 0) return []
+    const cache = buildCache(tempFamilies)
+    return Array.from(cache.keys())
+  }
+  if (!cachedIconNames) {
+    const cache = buildCache()
+    cachedIconNames = Array.from(cache.keys())
+  }
+  return cachedIconNames
+}
+
 export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
   let resolved: IconFamilyEntry | null = null