@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "scripts": {
@@ -18,38 +18,57 @@
     "dev": "tsup --watch",
     "clean": "rm -rf .turbo node_modules dist",
     "lint:check": "eslint src --max-warnings 0",
-    "type:check": "tsc --noEmit"
+    "type:check": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.0.1",
+    "@butternutbox/pawprint-tokens": "^0.1.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",
     "@rn-primitives/checkbox": "^1.4.0",
     "@rn-primitives/portal": "^1.0.5",
+    "@rn-primitives/progress": "^1.4.0",
     "@rn-primitives/slider": "^1.4.0",
     "@rn-primitives/slot": "^1.0.5",
     "@rn-primitives/switch": "^1.4.0",
     "@rn-primitives/toggle": "^1.4.0",
+    "@rn-primitives/tooltip": "^1.4.0",
     "@rn-primitives/types": "^1.0.5",
+    "date-fns": "^4.1.0",
     "expo": "^55.0.9"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.20.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-worklets": ">=0.5.0"
   },
   "devDependencies": {
     "@butternutbox/pawprint-icons": "workspace:*",
     "@butternutbox/pawprint-illustrations": "workspace:*",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "~19.1.10",
     "@types/react-native": "^0.73.0",
     "eslint": "^8.57.0",
+    "jsdom": "^26.1.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.1",
     "tsup": "^8.5.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vitest": "^3.2.1"
   },
   "publishConfig": {
     "access": "public"

package/src/__mocks__/asset-stub.ts

@@ -0,0 +1 @@
+export default "asset-stub"

package/src/__mocks__/emotion-native.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+/**
+ * Mock of @emotion/native's styled function.
+ * Wraps the component without applying styles — sufficient for unit tests
+ * that verify structure, content, and behaviour rather than visual styles.
+ */
+const styled = (Component: any) => {
+  return (..._styleFns: any[]) => {
+    const Styled = React.forwardRef((props: any, ref: any) => (
+      <Component ref={ref} {...props} />
+    ))
+    Styled.displayName = `Styled(${Component.displayName || Component.name || "Component"})`
+    return Styled
+  }
+}
+
+export default styled

package/src/__mocks__/react-native-gesture-handler.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+type GestureChainable = {
+  onBegin: (_cb: unknown) => GestureChainable
+  onUpdate: (_cb: unknown) => GestureChainable
+  onChange: (_cb: unknown) => GestureChainable
+  onEnd: (_cb: unknown) => GestureChainable
+  onFinalize: (_cb: unknown) => GestureChainable
+  enabled: (_value: boolean) => GestureChainable
+  minDistance: (_value: number) => GestureChainable
+}
+
+const makeChainable = (): GestureChainable => {
+  const chain: GestureChainable = {
+    onBegin: () => chain,
+    onUpdate: () => chain,
+    onChange: () => chain,
+    onEnd: () => chain,
+    onFinalize: () => chain,
+    enabled: () => chain,
+    minDistance: () => chain
+  }
+  return chain
+}
+
+export const Gesture = {
+  Pan: () => makeChainable(),
+  Tap: () => makeChainable()
+}
+
+export const GestureDetector = ({
+  children
+}: {
+  children: React.ReactNode
+}) => <>{children}</>
+
+export const GestureHandlerRootView = ({
+  children
+}: {
+  children: React.ReactNode
+}) => <>{children}</>

package/src/__mocks__/react-native-reanimated.tsx

@@ -0,0 +1,79 @@
+import React from "react"
+
+const AnimatedView = React.forwardRef<HTMLDivElement, Record<string, unknown>>(
+  ({ children, style, ..._rest }, ref) => {
+    const flatStyle = Array.isArray(style)
+      ? Object.assign({}, ...style.filter(Boolean))
+      : style
+    return (
+      <div
+        ref={ref}
+        style={
+          typeof flatStyle === "object" ? (flatStyle as object) : undefined
+        }
+      >
+        {children as React.ReactNode}
+      </div>
+    )
+  }
+)
+AnimatedView.displayName = "Animated.View"
+
+const Animated = {
+  View: AnimatedView
+}
+
+export default Animated
+
+export const useSharedValue = <T,>(initial: T) => ({ value: initial })
+
+export const useAnimatedStyle = (_fn: () => object) => ({})
+
+export const runOnJS =
+  <Args extends unknown[], R>(fn: (..._args: Args) => R) =>
+  (...args: Args) =>
+    fn(...args)
+
+export const withTiming = <T,>(value: T) => value
+
+// Animation builder stub — supports chaining .duration() / .easing() / .delay()
+const createBuilder = () => {
+  const b: Record<string, unknown> = {}
+  b.duration = () => b
+  b.easing = () => b
+  b.delay = () => b
+  return b
+}
+
+export const Easing = {
+  out: (_fn: unknown) => _fn,
+  inOut: (_fn: unknown) => _fn,
+  quad: (t: number) => t * t
+}
+
+export const FadeIn = createBuilder()
+export const FadeOut = createBuilder()
+export const FadeInUp = createBuilder()
+export const FadeOutUp = createBuilder()
+export const FadeInDown = createBuilder()
+export const FadeOutDown = createBuilder()
+export const FadeInLeft = createBuilder()
+export const FadeOutLeft = createBuilder()
+export const FadeInRight = createBuilder()
+export const FadeOutRight = createBuilder()
+export const ZoomIn = createBuilder()
+export const ZoomOut = createBuilder()
+export class ComplexAnimationBuilder {
+  static duration() {
+    return new ComplexAnimationBuilder()
+  }
+  duration() {
+    return this
+  }
+  easing() {
+    return this
+  }
+  delay() {
+    return this
+  }
+}

package/src/__mocks__/react-native-safe-area-context.tsx

@@ -0,0 +1,6 @@
+export const useSafeAreaInsets = () => ({
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+})

package/src/__mocks__/react-native-svg.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+type SvgProps = {
+  children?: React.ReactNode
+  style?: unknown
+  width?: number | string
+  height?: number | string
+  preserveAspectRatio?: string
+  pointerEvents?: string
+}
+
+const passThrough =
+  (name: string) =>
+  ({ children }: { children?: React.ReactNode }) =>
+    React.createElement("div", { "data-mock": name }, children)
+
+const Svg = ({ children }: SvgProps) =>
+  React.createElement("div", { "data-mock": "Svg" }, children)
+
+export default Svg
+export const Defs = passThrough("Defs")
+export const LinearGradient = passThrough("LinearGradient")
+export const Rect = passThrough("Rect")
+export const Stop = passThrough("Stop")
+export const G = passThrough("G")
+export const Path = passThrough("Path")
+export const ClipPath = passThrough("ClipPath")

package/src/__mocks__/react-native-worklets.tsx

@@ -0,0 +1,11 @@
+export const scheduleOnRN = <Args extends unknown[], R>(
+  fn: (..._args: Args) => R,
+  ...args: Args
+): void => {
+  fn(...args)
+}
+
+export const runOnUI =
+  <Args extends unknown[], R>(fn: (..._args: Args) => R) =>
+  (...args: Args) =>
+    fn(...args)

package/src/__mocks__/react-native.tsx

@@ -0,0 +1,338 @@
+import React from "react"
+
+// ─── View ────────────────────────────────────────────────────────────────
+export const View = React.forwardRef<HTMLDivElement, any>(
+  (
+    {
+      testID,
+      accessibilityRole,
+      accessibilityLabel,
+      accessibilityState,
+      accessibilityValue,
+      accessible: _accessible,
+      children,
+      style,
+      onLayout: _onLayout,
+      ..._rest
+    },
+    ref
+  ) => {
+    const domProps: Record<string, any> = {}
+    if (testID) domProps["data-testid"] = testID
+    if (accessibilityRole) {
+      domProps.role =
+        accessibilityRole === "adjustable" ? "slider" : accessibilityRole
+    }
+    if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
+    if (accessibilityState?.disabled) domProps["aria-disabled"] = true
+    if (accessibilityState?.selected) domProps["aria-selected"] = true
+    if (accessibilityState?.checked !== undefined)
+      domProps["aria-checked"] = accessibilityState.checked
+    if (accessibilityState?.busy) domProps["aria-busy"] = true
+    if (accessibilityValue) {
+      if (accessibilityValue.now !== undefined)
+        domProps["aria-valuenow"] = String(accessibilityValue.now)
+      if (accessibilityValue.min !== undefined)
+        domProps["aria-valuemin"] = String(accessibilityValue.min)
+      if (accessibilityValue.max !== undefined)
+        domProps["aria-valuemax"] = String(accessibilityValue.max)
+    }
+    return (
+      <div ref={ref} style={style} {...domProps}>
+        {children}
+      </div>
+    )
+  }
+)
+View.displayName = "View"
+
+// ─── Text ────────────────────────────────────────────────────────────────
+export const Text = React.forwardRef<HTMLSpanElement, any>(
+  (
+    {
+      children,
+      style,
+      testID,
+      numberOfLines: _numberOfLines,
+      ellipsizeMode: _ellipsizeMode,
+      ..._rest
+    },
+    ref
+  ) => (
+    <span ref={ref} style={style} data-testid={testID}>
+      {children}
+    </span>
+  )
+)
+Text.displayName = "Text"
+
+// ─── Pressable ───────────────────────────────────────────────────────────
+export const Pressable = React.forwardRef<HTMLButtonElement, any>(
+  (
+    {
+      testID,
+      disabled,
+      accessibilityRole,
+      accessibilityLabel,
+      accessibilityState,
+      onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+      children,
+      style: _style,
+      ..._rest
+    },
+    ref
+  ) => {
+    const domProps: Record<string, any> = {}
+    if (testID) domProps["data-testid"] = testID
+    if (accessibilityRole) domProps.role = accessibilityRole
+    if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
+    if (accessibilityState?.disabled) domProps["aria-disabled"] = true
+    if (accessibilityState?.selected) domProps["aria-selected"] = true
+    if (accessibilityState?.expanded !== undefined)
+      domProps["aria-expanded"] = accessibilityState.expanded
+    if (accessibilityState?.busy) domProps["aria-busy"] = true
+
+    const content =
+      typeof children === "function" ? children({ pressed: false }) : children
+
+    return (
+      <button
+        ref={ref as any}
+        disabled={disabled}
+        onClick={(e) => !disabled && onPress?.(e)}
+        {...domProps}
+      >
+        {content}
+      </button>
+    )
+  }
+)
+Pressable.displayName = "Pressable"
+
+// ─── TextInput ───────────────────────────────────────────────────────────
+export const TextInput = React.forwardRef<HTMLInputElement, any>(
+  (
+    {
+      testID,
+      placeholderTextColor: _placeholderTextColor,
+      onChangeText,
+      onChange,
+      value,
+      defaultValue,
+      placeholder,
+      editable,
+      keyboardType: _keyboardType,
+      accessibilityState,
+      ..._rest
+    },
+    ref
+  ) => {
+    return (
+      <input
+        ref={ref}
+        data-testid={testID}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        disabled={editable === false}
+        aria-disabled={accessibilityState?.disabled}
+        onChange={(e) => {
+          onChangeText?.(e.target.value)
+          onChange?.(e)
+        }}
+      />
+    )
+  }
+)
+TextInput.displayName = "TextInput"
+
+// ─── ScrollView ──────────────────────────────────────────────────────────
+export const ScrollView = React.forwardRef<HTMLDivElement, any>(
+  (
+    {
+      children,
+      contentContainerStyle,
+      horizontal: _horizontal,
+      showsHorizontalScrollIndicator: _showsHorizontalScrollIndicator,
+      showsVerticalScrollIndicator: _showsVerticalScrollIndicator,
+      nestedScrollEnabled: _nestedScrollEnabled,
+      ..._rest
+    },
+    ref
+  ) => (
+    <div ref={ref} style={contentContainerStyle}>
+      {children}
+    </div>
+  )
+)
+ScrollView.displayName = "ScrollView"
+
+// ─── Modal ───────────────────────────────────────────────────────────────
+export const Modal = React.forwardRef<HTMLDivElement, any>(
+  ({ children, visible, onRequestClose: _onRequestClose, ..._rest }, ref) => {
+    if (!visible) return null
+    return (
+      <div ref={ref} role="dialog">
+        {children}
+      </div>
+    )
+  }
+)
+Modal.displayName = "Modal"
+
+// ─── Image ───────────────────────────────────────────────────────────────
+export const Image = React.forwardRef<HTMLImageElement, any>(
+  ({ source, style, ..._rest }, ref) => (
+    <img ref={ref} src={source?.uri ?? source} style={style} alt="" />
+  )
+)
+Image.displayName = "Image"
+
+// ─── Animated ────────────────────────────────────────────────────────────
+class AnimatedValue {
+  _value: number
+  _listeners: Record<string, (val: { value: number }) => void> = {}
+  _listenerId = 0
+
+  constructor(value: number) {
+    this._value = value
+  }
+  setValue(value: number) {
+    this._value = value
+  }
+  stopAnimation() {}
+  stop() {}
+  interpolate({ outputRange }: { inputRange: number[]; outputRange: any[] }) {
+    return outputRange[0]
+  }
+  addListener(cb: (val: { value: number }) => void): string {
+    const id = String(++this._listenerId)
+    this._listeners[id] = cb
+    return id
+  }
+  removeListener(id: string) {
+    delete this._listeners[id]
+  }
+}
+
+const mockAnim = (cb?: (result: { finished: boolean }) => void) => {
+  if (cb) setTimeout(() => cb({ finished: true }), 0)
+}
+
+export const Animated = {
+  View: React.forwardRef<HTMLDivElement, any>(
+    (
+      {
+        children,
+        style,
+        accessibilityRole,
+        accessibilityLabel,
+        accessibilityState,
+        ..._rest
+      },
+      ref
+    ) => {
+      const domProps: Record<string, any> = {}
+      if (accessibilityRole) domProps.role = accessibilityRole
+      if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
+      if (accessibilityState?.disabled) domProps["aria-disabled"] = true
+      const flatStyle = Array.isArray(style)
+        ? Object.assign({}, ...style.filter(Boolean))
+        : style
+      return (
+        <div
+          ref={ref}
+          style={typeof flatStyle === "object" ? flatStyle : undefined}
+          {...domProps}
+        >
+          {children}
+        </div>
+      )
+    }
+  ),
+  Value: AnimatedValue,
+  timing: (_value: any, _config: any) => ({
+    start: mockAnim,
+    stop: () => {}
+  }),
+  spring: (_value: any, _config: any) => ({
+    start: mockAnim,
+    stop: () => {}
+  }),
+  parallel: (animations: any[]) => ({
+    start: (cb?: (result: { finished: boolean }) => void) => {
+      animations.forEach((anim) => anim.start())
+      if (cb) setTimeout(() => cb({ finished: true }), 0)
+    },
+    stop: () => {
+      animations.forEach((anim) => anim.stop?.())
+    }
+  }),
+  loop: (animation: any) => ({
+    start: () => animation.start(),
+    stop: () => {}
+  })
+}
+Animated.View.displayName = "Animated.View"
+
+// ─── Dimensions ──────────────────────────────────────────────────────────
+export const Dimensions = {
+  get: (_dim: "window" | "screen") => ({ width: 375, height: 812 })
+}
+
+// ─── useWindowDimensions ─────────────────────────────────────────────────
+export const useWindowDimensions = () => ({ width: 375, height: 812 })
+
+// ─── StyleSheet ──────────────────────────────────────────────────────────
+export const StyleSheet = {
+  create: <T extends Record<string, any>>(styles: T): T => styles,
+  flatten: (style: any) => style,
+  absoluteFillObject: {
+    position: "absolute" as const,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }
+}
+
+// ─── Linking ─────────────────────────────────────────────────────────────
+export const Linking = {
+  openURL: (() => {}) as any
+}
+
+// ─── PanResponder ────────────────────────────────────────────────────────
+export const PanResponder = {
+  create: (_config: any) => ({
+    panHandlers: {}
+  })
+}
+
+// ─── Easing ──────────────────────────────────────────────────────────────
+export const Easing = {
+  linear: (t: number) => t,
+  ease: (t: number) => t,
+  bezier: (_x1: number, _y1: number, _x2: number, _y2: number) => (t: number) =>
+    t
+}
+
+// ─── Platform ────────────────────────────────────────────────────────────
+export const Platform = {
+  OS: "ios" as const,
+  select: (obj: any) => obj.ios ?? obj.default
+}
+
+// ─── Type exports (re-exported as empty for TS compat) ───────────────────
+export type ViewProps = any
+export type TextProps = any
+export type PressableProps = any
+export type TextInputProps = any
+export type ViewStyle = any
+export type TextStyle = any
+export type LayoutChangeEvent = any
+export type ImageSourcePropType = any
+export type ScrollViewProps = any
+export type GestureResponderEvent = any
+export type PanResponderInstance = { panHandlers: Record<string, any> }

package/src/__mocks__/rn-primitives/avatar.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  ({ children, alt, ..._rest }, ref) => (
+    <div ref={ref} role="img" aria-label={alt}>
+      {children}
+    </div>
+  )
+)
+Root.displayName = "AvatarPrimitive.Root"
+
+export const Image = React.forwardRef<any, any>(({ source, ..._rest }, ref) => (
+  <img ref={ref} src={source?.uri} alt="" />
+))
+Image.displayName = "AvatarPrimitive.Image"
+
+export const Fallback = React.forwardRef<any, any>(
+  ({ children, ..._rest }, ref) => (
+    <div ref={ref} data-testid="avatar-fallback">
+      {children}
+    </div>
+  )
+)
+Fallback.displayName = "AvatarPrimitive.Fallback"

package/src/__mocks__/rn-primitives/checkbox.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  ({ checked, onCheckedChange, disabled, children, ..._rest }, ref) => (
+    <button
+      ref={ref}
+      role="checkbox"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => !disabled && onCheckedChange?.(!checked)}
+    >
+      {children}
+    </button>
+  )
+)
+Root.displayName = "CheckboxPrimitive.Root"
+
+export const Indicator = ({ children }: any) => <>{children}</>
+Indicator.displayName = "CheckboxPrimitive.Indicator"