rnwind 0.0.1 → 0.0.3

package/src/runtime/hooks/use-interact.ts

@@ -0,0 +1,65 @@
+import { useCallback, useMemo, useState } from 'react'
+import type { GestureResponderEvent, NativeSyntheticEvent, TargetedEvent } from 'react-native'
+import type { InteractState } from '../lookup-css'
+
+/**
+ * Idle state reference reused across every non-interactive render —
+ * when neither `active` nor `focus` is true, every call site returns
+ * the exact same object. That's the ~99 % path for a typical list row,
+ * so sharing the ref is a legitimate allocation elimination.
+ */
+const IDLE_STATE: InteractState = { active: false, focus: false }
+
+/**
+ * Live interact-state snapshot plus the press/focus handlers the
+ * transformer wires onto the JSX opening element. The state object is
+ * referentially stable across renders when the underlying `active` /
+ * `focus` flags don't change, which keeps `lookupCss` cache hits
+ * aligned with React's render cadence (same state ref → same
+ * resolved-array cache key → same reference back, no React diff
+ * triggered).
+ */
+export interface UseInteractResult {
+  /** Current interact flags — forwarded as the 4th arg to `lookupCss`. */
+  state: InteractState
+  /** Wired by the transformer onto `<Pressable onPressIn={…}>` etc. */
+  onPressIn: (event: GestureResponderEvent) => void
+  /** Wired by the transformer onto `<Pressable onPressOut={…}>` etc. */
+  onPressOut: (event: GestureResponderEvent) => void
+  /** Wired by the transformer onto `<TextInput onFocus={…}>` etc. */
+  onFocus: (event: NativeSyntheticEvent<TargetedEvent>) => void
+  /** Wired by the transformer onto `<TextInput onBlur={…}>` etc. */
+  onBlur: (event: NativeSyntheticEvent<TargetedEvent>) => void
+}
+
+/**
+ * React hook driving `active:` / `focus:` variants at runtime. The
+ * transformer injects exactly one call per JSX element that uses an
+ * interactive classname, caching the hook's result into a component-
+ * local `_i` binding so every `lookupCss(…, _i.state)` site shares the
+ * same snapshot per render.
+ *
+ * React Native's `Pressable` fires `onPressIn` / `onPressOut` on touch
+ * down / release — the touch-device analogue of CSS `:active`. Text
+ * fields use `onFocus` / `onBlur`. Both pairs drive `useState` Booleans;
+ * unused handlers on elements that don't emit the corresponding event
+ * are harmless no-ops.
+ *
+ * Result stability: both `state` and the returned wrapper object stay
+ * reference-equal across renders unless `active` / `focus` actually
+ * flip. Downstream `React.memo` + `lookupCss` caches hit on equal refs.
+ * @returns Stable state + handler bundle.
+ */
+export function useInteract(): UseInteractResult {
+  const [active, setActive] = useState(false)
+  const [focus, setFocus] = useState(false)
+  const onPressIn = useCallback(() => setActive(true), [])
+  const onPressOut = useCallback(() => setActive(false), [])
+  const onFocus = useCallback(() => setFocus(true), [])
+  const onBlur = useCallback(() => setFocus(false), [])
+  const state = useMemo<InteractState>(() => {
+    if (!active && !focus) return IDLE_STATE
+    return { active, focus }
+  }, [active, focus])
+  return useMemo(() => ({ state, onPressIn, onPressOut, onFocus, onBlur }), [state, onPressIn, onPressOut, onFocus, onBlur])
+}

package/src/runtime/hooks/use-scheme.ts

@@ -0,0 +1,63 @@
+import type { ThemeTable } from '../../core/types'
+import { useRnwind } from '../components/rnwind-provider'
+
+/**
+ * Synthetic scheme name applied when tokens aren't declared under any
+ * `@variant` block — the "no active variant" fallback every theme table
+ * inherits from.
+ */
+const BASE_SCHEME = 'base'
+
+/**
+ * Access the resolved theme table for the active scheme.
+ *
+ * Tokens declared outside any `@variant` block live in the `base` table and
+ * should apply everywhere — just like the CSS cascade treats `:root` as a
+ * default for every ancestor-scoped override. We merge `base` under the
+ * active scheme so a scheme that doesn't declare a token still sees the
+ * base default, while the scheme's own entries win on overlap.
+ * @returns Token table for the active scheme.
+ */
+export function useTheme(): ThemeTable {
+  const { scheme, tables } = useRnwind()
+  const base = tables[BASE_SCHEME] ?? {}
+  const schemeTable = tables[scheme]
+  if (!schemeTable) return base
+  // Fast path: nothing to merge when the scheme table is empty.
+  if (Object.keys(schemeTable).length === 0) return base
+  return { ...base, ...schemeTable }
+}
+
+/**
+ * Read a raw CSS custom property's value for the active scheme. Accepts
+ * either `--foo` or the bare `foo` form for convenience.
+ * @param cssVariable CSS custom property name (with or without the leading `--`).
+ * @returns The resolved value, or undefined when the token is missing.
+ */
+export function useToken(cssVariable: string): string | number | undefined {
+  const table = useTheme()
+  const name = cssVariable.startsWith('--') ? cssVariable : `--${cssVariable}`
+  return table[name]
+}
+
+/**
+ * Read a color token by shorthand name — `useColor('primary')` resolves
+ * `--color-primary` for the active scheme.
+ * @param name Token suffix after `--color-`.
+ * @returns Resolved color string, or undefined when the token is missing
+ *   or its value isn't a string.
+ */
+export function useColor(name: string): string | undefined {
+  const value = useToken(`--color-${name}`)
+  return typeof value === 'string' ? value : undefined
+}
+
+/**
+ * Read a spacing token by shorthand name — `useSize('4')` resolves
+ * `--spacing-4` for the active scheme.
+ * @param name Token suffix after `--spacing-`.
+ * @returns Resolved spacing value, or undefined when the token is missing.
+ */
+export function useSize(name: string): number | string | undefined {
+  return useToken(`--spacing-${name}`)
+}

package/src/runtime/index.ts

@@ -0,0 +1,54 @@
+
+
+
+
+export {
+  lookupCss,
+  registerAtoms,
+  registerBreakpoints,
+  registerSchemeLoader,
+  setWindowHeightProvider,
+  getBreakpoints,
+  activeBreakpointFor,
+  lookupCss as _l,
+} from './lookup-css'
+export { useR_ } from './components/rnwind-provider'
+export type { HoistedClassName, InteractState, LookupInsets, SafeMarkerSpec } from './lookup-css'
+export { useCss } from './hooks/use-css'
+export { useInteract } from './hooks/use-interact'
+export type { UseInteractResult } from './hooks/use-interact'
+export { chainPress, chainFocus } from './chain-handlers'
+export { InteractiveBox, InteractiveBox as _ib } from './interactive-box'
+export type { InteractiveBoxProps, InteractiveSpec } from './interactive-box'
+export { RnwindProvider, useRnwind } from './components/rnwind-provider'
+export type { RnwindProviderProps, RnwindState, Insets } from './components/rnwind-provider'
+export { useMountHaptic, triggerHaptic, triggerHaptic as _ht, useMountHaptic as _hm } from './haptics'
+
+// ──────────────────────────────────────────────────────────────────────
+// Internal aliases the babel transformer uses. Underscore-prefixed so
+// user code (which imports the public names above) can never collide
+// with what we inject at JSX sites — even if the user shadows
+// `lookupCss` / `useHaptics` / `InteractiveBox` with a local symbol,
+// the transformer's emitted code still references the private alias.
+// Don't import these in app code.
+// ──────────────────────────────────────────────────────────────────────
+/** @internal */
+
+/** @internal */
+
+/** @internal */
+
+/** @internal */
+
+export type { HapticRequest, HapticTrigger, OnHaptics } from '../core/parser/haptics'
+export type { AsLinearGradientProps, LinearGradientPoint } from './gradient-types'
+export type { ThemeTable, ThemeTables } from '../core/types'
+export { useTheme, useToken, useColor, useSize } from './hooks/use-scheme'
+export type { Scheme, RnwindConfig } from './types'
+
+/**
+ * Installed rnwind version, inlined at publish time. Compare against a pinned
+ * string when integrating with build tooling that may see multiple rnwind
+ * copies (e.g. workspace overrides).
+ */
+export const VERSION = '0.0.1' as const

package/src/runtime/interactive-box.tsx

@@ -0,0 +1,57 @@
+import { createElement, type ComponentType, type ElementType, type ReactElement } from 'react'
+import { chainFocus, chainPress } from './chain-handlers'
+import { useInteract } from './hooks/use-interact'
+import { lookupCss, type HoistedClassName } from './lookup-css'
+import type { RnwindState } from './components/rnwind-provider'
+
+/**
+ * Per-element "interactive" spec the transformer packs into the `_rw`
+ * prop on every JSX site it rewrites for active/focus support. Carrying
+ * it as one object prop (rather than four sibling props) keeps the
+ * rewritten JSX legible and avoids colliding with any host component's
+ * own naming.
+ */
+export interface InteractiveSpec {
+  /** The original JSX tag (`Pressable`, `TextInput`, `Animated.View`, …). */
+  readonly as: ElementType
+  /** Hoisted atom-name array (or a dynamic classname string). */
+  readonly cn: HoistedClassName | string | null | undefined
+  /** Full rnwind context — `_t = useRnwind___()` from the call site. */
+  readonly t: RnwindState
+  /** Optional caller-supplied style forwarded as `lookupCss`'s 3rd arg. */
+  readonly us?: unknown
+}
+
+/** Props InteractiveBox accepts — `_rw` plus anything to forward. */
+export interface InteractiveBoxProps {
+  /** Compile-time spec packed by the transformer. */
+  readonly _rw: InteractiveSpec
+  /** Every other prop passes through to the inner component. */
+  readonly [key: string]: unknown
+}
+
+/**
+ * Per-instance wrapper that drives `active:` / `focus:` variants. One
+ * `useInteract()` hook per mounted `InteractiveBox` means each element
+ * owns its own state — siblings never share `active` / `focus` flags.
+ *
+ * The transformer replaces
+ *   `<Pressable className="active:bg-sky-700" onPress={x} />`
+ * with
+ *   `<InteractiveBox _rw={{as: Pressable, cn: _c0, t: _t}} onPress={x} />`.
+ * @param props `_rw` spec + any props to forward to the inner component.
+ * @returns Rendered element of the inner component with interact wiring.
+ */
+export function InteractiveBox(props: InteractiveBoxProps): ReactElement {
+  const { _rw, onPressIn, onPressOut, onFocus, onBlur, ...rest } = props
+  const interact = useInteract()
+  const merged: Record<string, unknown> = {
+    ...rest,
+    style: lookupCss(_rw.cn, _rw.t, _rw.us, interact.state),
+    onPressIn: chainPress(onPressIn as Parameters<typeof chainPress>[0], interact.onPressIn),
+    onPressOut: chainPress(onPressOut as Parameters<typeof chainPress>[0], interact.onPressOut),
+    onFocus: chainFocus(onFocus as Parameters<typeof chainFocus>[0], interact.onFocus),
+    onBlur: chainFocus(onBlur as Parameters<typeof chainFocus>[0], interact.onBlur),
+  }
+  return createElement(_rw.as as ComponentType<Record<string, unknown>>, merged)
+}