@retray-dev/ui-kit 12.2.0 → 13.0.0

package/dist/chunk-YNROWHQJ.mjs

@@ -1,46 +0,0 @@
-import { PRESS_SCALE, SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useState, useCallback } from 'react';
-import { Platform } from 'react-native';
-import { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
-
-function useHover() {
-  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 } };
-}
-function usePressScale({
-  pressScale = PRESS_SCALE.button,
-  hoverScale = 1.02,
-  pressInSpring = SPRINGS.pressIn,
-  pressOutSpring = SPRINGS.pressOut,
-  disabled = false
-} = {}) {
-  const scale = useSharedValue(1);
-  const { hovered, hoverHandlers } = useHover();
-  const onPressIn = useCallback(() => {
-    if (disabled) return;
-    scale.value = withSpring(pressScale, pressInSpring);
-  }, [disabled, pressScale, pressInSpring, scale]);
-  const onPressOut = useCallback(() => {
-    if (disabled) return;
-    scale.value = withSpring(1, pressOutSpring);
-  }, [disabled, pressOutSpring, scale]);
-  const hoverActive = Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      { scale: scale.value * (hoverActive ? hoverScale : 1) }
-    ]
-  }));
-  return {
-    animatedStyle,
-    onPressIn,
-    onPressOut,
-    hoverHandlers
-  };
-}
-
-export { useHover, usePressScale };

package/src/components/VirtualList/VirtualList.tsx

@@ -1,60 +0,0 @@
-import React, { useCallback } from 'react'
-import { FlatList, FlatListProps, ListRenderItem } from 'react-native'
-
-export interface VirtualListItem {
-  id?: string | number
-}
-
-export interface VirtualListProps<T> extends Omit<FlatListProps<T>, 'getItemLayout'> {
-  /**
-   * Fixed row height in px. When provided, enables `getItemLayout` so the list
-   * skips async measurement — large datasets scroll and `scrollToIndex` jump
-   * without layout passes. Omit only for variable-height rows.
-   */
-  itemHeight?: number
-}
-
-const defaultKeyExtractor = <T,>(item: T, index: number): string => {
-  const id = (item as VirtualListItem | null)?.id
-  return id !== undefined ? String(id) : String(index)
-}
-
-/**
- * Virtualized list primitive. Thin wrapper over `FlatList` with sane defaults
- * for the common case: stable keys + optional fixed-height fast path.
- *
- * For 10k+ rows, pass `itemHeight` and a `React.memo`-wrapped `renderItem` so
- * only on-screen rows mount and re-render.
- *
- * @example
- * const renderItem = useCallback(({ item }) => <ListItem title={item.title} onPress={...} />, [])
- * <VirtualList data={rows} renderItem={renderItem} itemHeight={64} />
- */
-function VirtualListInner<T>(
-  { itemHeight, keyExtractor, renderItem, ...props }: VirtualListProps<T>,
-  ref: React.Ref<FlatList<T>>,
-) {
-  const getItemLayout = useCallback(
-    (_data: ArrayLike<T> | null | undefined, index: number) => ({
-      length: itemHeight ?? 0,
-      offset: (itemHeight ?? 0) * index,
-      index,
-    }),
-    [itemHeight],
-  )
-
-  return (
-    <FlatList<T>
-      ref={ref}
-      keyExtractor={keyExtractor ?? defaultKeyExtractor}
-      renderItem={renderItem as ListRenderItem<T>}
-      getItemLayout={itemHeight !== undefined ? getItemLayout : undefined}
-      removeClippedSubviews
-      {...props}
-    />
-  )
-}
-
-export const VirtualList = React.forwardRef(VirtualListInner) as <T>(
-  props: VirtualListProps<T> & { ref?: React.Ref<FlatList<T>> },
-) => React.ReactElement

package/src/components/VirtualList/index.ts

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

package/src/utils/fontGuard.ts

@@ -1,35 +0,0 @@
-import { isLoaded } from 'expo-font'
-
-declare const __DEV__: boolean
-
-let warned = false
-
-/**
- * Dev-only guard: warns once if the Sohne font family is not loaded.
- *
- * Called lazily from `Text` on first render. Without this, a missing
- * `useFonts(SohneFonts)` call (or a broken font path) produces invisible /
- * system-font text with no signal — a silent failure consumers reported losing
- * hours to. In production (`__DEV__ === false`) this is a no-op.
- */
-export function warnIfFontsMissing(): void {
-  if (warned) return
-  if (typeof __DEV__ !== 'undefined' && !__DEV__) return
-  warned = true
-  try {
-    if (!isLoaded('Sohne-Regular')) {
-      console.warn(
-        '[retray-ui-kit] Sohne fonts are not loaded — text will fall back to the ' +
-          'system font. Load them at your app root before rendering any UI kit ' +
-          'component:\n\n' +
-          "  import { useFonts } from 'expo-font'\n" +
-          '  import { SohneFontNames } from \'@retray-dev/ui-kit/fonts\'\n' +
-          '  // Copy the SohneFonts boilerplate from CONSUMER.md into your App.tsx\n\n' +
-          '  const [fontsLoaded] = useFonts(SohneFonts)\n' +
-          '  if (!fontsLoaded) return null\n',
-      )
-    }
-  } catch {
-    // `isLoaded` not available in this expo-font version — skip the guard silently.
-  }
-}

package/src/utils/hover.ts

@@ -1,25 +0,0 @@
-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 } }
-}

package/src/utils/useColorTransition.ts

@@ -1,40 +0,0 @@
-import { useEffect } from 'react'
-import {
-  useSharedValue,
-  withTiming,
-  interpolateColor,
-  type SharedValue,
-} from 'react-native-reanimated'
-import { TIMINGS, EASINGS } from './animations'
-
-export interface UseColorTransitionOptions {
-  /** Animation duration in ms. Defaults to `160`. */
-  duration?: number
-}
-
-/**
- * Drives a 0→1 `SharedValue` based on a boolean state, animated via `withTiming` on the UI thread.
- * Use with Reanimated's `interpolateColor` inside a `useAnimatedStyle` to drive borderColor/backgroundColor/etc.
- *
- * @example
- *   const progress = useColorTransition(focused)
- *   const animatedStyle = useAnimatedStyle(() => ({
- *     borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
- *   }))
- */
-export function useColorTransition(
-  active: boolean,
-  options: UseColorTransitionOptions = {},
-): SharedValue<number> {
-  const { duration = TIMINGS.state.duration } = options
-  const progress = useSharedValue(active ? 1 : 0)
-
-  useEffect(() => {
-    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard })
-  }, [active, duration, progress])
-
-  return progress
-}
-
-// Re-export interpolateColor for ergonomic consumer access
-export { interpolateColor }

package/src/utils/usePressScale.ts

@@ -1,75 +0,0 @@
-import { useCallback } from 'react'
-import { Platform } from 'react-native'
-import {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-} from 'react-native-reanimated'
-import { SPRINGS, PRESS_SCALE } from './animations'
-import { useHover } from './hover'
-
-export interface SpringConfig {
-  stiffness?: number
-  damping?: number
-  mass?: number
-}
-
-export interface UsePressScaleOptions {
-  /** Scale value while pressed. Defaults to `0.95` (button). */
-  pressScale?: number
-  /** Scale value while hovered on web. Defaults to `1.02`. Set to `1` to disable. */
-  hoverScale?: number
-  /** Spring config for press-in. Defaults to `SPRINGS.pressIn`. */
-  pressInSpring?: SpringConfig
-  /** Spring config for press-out. Defaults to `SPRINGS.pressOut`. */
-  pressOutSpring?: SpringConfig
-  /** Disable all interaction animations (still returns stable handlers). */
-  disabled?: boolean
-}
-
-/**
- * Unified press + hover scale primitive.
- * All animation lives on the UI thread via Reanimated v4 worklets — zero JS-thread cost.
- *
- * Returns:
- *  - `animatedStyle`: spread onto an `Animated.View` (from `react-native-reanimated`)
- *  - `onPressIn` / `onPressOut`: bind to a `TouchableOpacity`
- *  - `hoverHandlers`: spread for web hover scaling (no-op on native)
- */
-export function usePressScale({
-  pressScale = PRESS_SCALE.button,
-  hoverScale = 1.02,
-  pressInSpring = SPRINGS.pressIn,
-  pressOutSpring = SPRINGS.pressOut,
-  disabled = false,
-}: UsePressScaleOptions = {}) {
-  const scale = useSharedValue(1)
-  const { hovered, hoverHandlers } = useHover()
-
-  const onPressIn = useCallback(() => {
-    if (disabled) return
-    // eslint-disable-next-line react-hooks/immutability
-    scale.value = withSpring(pressScale, pressInSpring)
-  }, [disabled, pressScale, pressInSpring, scale])
-
-  const onPressOut = useCallback(() => {
-    if (disabled) return
-    // eslint-disable-next-line react-hooks/immutability
-    scale.value = withSpring(1, pressOutSpring)
-  }, [disabled, pressOutSpring, scale])
-
-  const hoverActive = Platform.OS === 'web' && hovered && hoverScale !== 1 && !disabled
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      { scale: scale.value * (hoverActive ? hoverScale : 1) },
-    ],
-  }))
-
-  return {
-    animatedStyle,
-    onPressIn,
-    onPressOut,
-    hoverHandlers,
-  }
-}