@hzblj/kara-components 0.11.0 → 0.12.0

package/src/atoms/rn-text/rn-text.tsx

@@ -1,36 +1,105 @@
-import {useSplitSx} from '@hzblj/kara-sx'
-import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
-import {Text as RNText, type TextStyle, useWindowDimensions} from 'react-native'
+import {
+  isAnimatedStyle,
+  markMotionComponent,
+  type SxMotion,
+  themeKey,
+  useAnimatedLatch,
+  useSplitSxMotion,
+} from '@hzblj/kara-sx'
+import {
+  type ColorToken,
+  MAX_FONT_SCALE,
+  type TextVariant,
+  type Theme,
+  useAppTheme,
+  useFontScale,
+} from '@hzblj/kara-theme'
+import {Platform, Text as RNText, type StyleProp, type TextStyle} from 'react-native'
+import Animated from 'react-native-reanimated'
 
 import type {RnTextComponent, RnTextProps} from './rn-text.types'
 
-export const RnText: RnTextComponent = ({
-  align,
-  color = 'content.primary',
-  variant = 'body',
-  ...props
-}: RnTextProps) => {
-  const theme = useAppTheme()
-  // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
-  const [sx, rest] = useSplitSx(props) as [TextStyle, Record<string, unknown>]
-  const {fontScale} = useWindowDimensions()
-  const style = theme.typography[variant]
-
-  /**
-   * React Native scales `fontSize` for the user's setting but leaves `lineHeight` alone, so a grown glyph ends up in
-   * an ungrown line and clips. Scaling it here by the same factor keeps the ratio the variant was designed at — and
-   * by the same ceiling `maxFontSizeMultiplier` caps the glyph with, so the two cannot disagree.
-   *
-   * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
-   * height, which scales with it, and Compose reads `lineHeight` in `sp`.
-   */
-  const lineHeight = style.lineHeight * Math.min(fontScale, MAX_FONT_SCALE)
-
-  return (
-    <RNText
-      maxFontSizeMultiplier={MAX_FONT_SCALE}
-      style={[style, sx, {color: theme.color(color), lineHeight, textAlign: align}]}
-      {...rest}
-    />
-  )
+/**
+ * A hundredth of a point off every line on iOS, which no one can see and which keeps the last line on screen. React
+ * Native measures a paragraph and rounds the height up to the pixel grid, then draws it into the frame Yoga laid out,
+ * and that frame can come back a hair short of the exact height (`53.9998` for three 18 pt lines, depending on where
+ * the text sits on the page). With `lineHeight` fixed, the lines need exactly 54 and the text container drops the last
+ * one, cutting the line before it off mid-word. Lines a hair shorter leave the rounding room to absorb the error.
+ */
+const LINE_HEIGHT_SLACK = Platform.OS === 'ios' ? 0.01 : 0
+
+/** Variants, colours and alignments are few, so the text half of the style is shared like the `sx` half. */
+const MAX_TEXT_STYLES = 512
+
+const textStyles = new Map<string, TextStyle>()
+
+/**
+ * The variant at the user's text size, in its colour. React Native scales `fontSize` for the user's setting but leaves
+ * `lineHeight` alone, so a grown glyph ends up in an ungrown line and clips. Scaling it here by the same factor keeps
+ * the ratio the variant was designed at, and by the same ceiling `maxFontSizeMultiplier` caps the glyph with
+ * (`useFontScale` is capped already), so the two cannot disagree.
+ *
+ * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
+ * height, which scales with it, and Compose reads `lineHeight` in `sp`.
+ */
+const textStyle = (
+  theme: Theme,
+  variant: TextVariant,
+  color: ColorToken,
+  align: RnTextProps['align'],
+  fontScale: number
+): TextStyle => {
+  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}`
+  const existing = textStyles.get(key)
+
+  if (existing) {
+    return existing
+  }
+
+  if (textStyles.size >= MAX_TEXT_STYLES) {
+    textStyles.clear()
+  }
+
+  const typography = theme.typography[variant]
+  const style: TextStyle = {
+    ...typography,
+    color: theme.color(color),
+    lineHeight: typography.lineHeight * fontScale - LINE_HEIGHT_SLACK,
+  }
+
+  if (align) {
+    style.textAlign = align
+  }
+
+  textStyles.set(key, style)
+
+  return style
 }
+
+export const RnText: RnTextComponent = markMotionComponent(
+  ({align, color = 'content.primary', style, variant = 'body', ...props}: RnTextProps) => {
+    const theme = useAppTheme()
+    const fontScale = useFontScale()
+    // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
+    const [sx, motion, rest] = useSplitSxMotion(props) as [TextStyle, SxMotion, Record<string, unknown>]
+    const animated = useAnimatedLatch(motion.animated || isAnimatedStyle(style), 'RnText')
+    const text = textStyle(theme, variant, color, align, fontScale)
+
+    if (!animated) {
+      return (
+        <RNText maxFontSizeMultiplier={MAX_FONT_SCALE} style={[text, sx, style as StyleProp<TextStyle>]} {...rest} />
+      )
+    }
+
+    return (
+      <Animated.Text
+        entering={motion.entering}
+        exiting={motion.exiting}
+        layout={motion.layout}
+        maxFontSizeMultiplier={MAX_FONT_SCALE}
+        style={[text, sx, motion.style, style]}
+        {...rest}
+      />
+    )
+  }
+)

package/src/atoms/rn-text/rn-text.types.ts

@@ -1,19 +1,23 @@
-import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {MotionProps, ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
-import type {TextProps as RNTextProps} from 'react-native'
+import type {TextProps as RNTextProps, StyleProp, TextStyle} from 'react-native'
+import type {AnimatedStyle} from 'react-native-reanimated'
 
 /**
  * React Native's `Text` in a theme typography variant: the React Native tier, for text outside a native host. It takes
  * `Box`'s `sx` surface for its own box (margins, flex, padding, a background), all but `align`, which here aligns the
- * lines.
+ * lines, and the motion props a `Box` takes: `entering="fadeUp"` makes it an `Animated.Text` by itself.
  */
 export type RnTextProps = Omit<RNTextProps, 'style'> &
+  MotionProps &
   Omit<ResponsiveViewSx, 'align'> & {
     /** Horizontal alignment, as React Native's `textAlign`. */
     align?: 'center' | 'left' | 'right'
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken
+    /** Goes last, over the variant and the `sx`: an animated style from `useAnimatedStyle`, which it renders through Reanimated for. */
+    style?: StyleProp<AnimatedStyle<TextStyle>>
     /** The typography variant. `body` by default. */
     variant?: TextVariant
   }

package/src/atoms/skeleton/skeleton.tsx

@@ -1,9 +1,9 @@
+import {timing} from '@hzblj/kara-sx'
 import {duration, opacity, useReducedMotion} from '@hzblj/kara-theme'
 import {useEffect} from 'react'
 import {cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
 
-import {timing} from '../../motion'
-import {ABox} from '../box'
+import {Box} from '../box'
 import type {SkeletonComponent, SkeletonProps} from './skeleton.types'
 
 /** A breath, not a transition, so it sits off the scale: `slow` twice each way, at constant speed. */
@@ -28,7 +28,7 @@ export const Skeleton: SkeletonComponent = ({borderRadius = 'small', h, testID,
   const rStyle = useAnimatedStyle(() => ({opacity: pulse.value}), [])
 
   return (
-    <ABox
+    <Box
       aria-hidden
       bg="fill.quaternary"
       borderRadius={borderRadius}

package/src/atoms/stagger/index.ts

@@ -0,0 +1,2 @@
+export * from './stagger'
+export * from './stagger.types'

package/src/atoms/stagger/stagger.tsx

@@ -0,0 +1,98 @@
+import {isMotionComponent, type MotionPresetConfig, type SxEntryExit, type SxLayout} from '@hzblj/kara-sx'
+import {duration} from '@hzblj/kara-theme'
+import {Children, cloneElement, isValidElement, type Key, type ReactElement, useLayoutEffect, useRef} from 'react'
+
+import {Box} from '../box'
+import type {StaggerComponent, StaggerMotion, StaggerProps} from './stagger.types'
+
+type MotionChildProps = {entering?: SxEntryExit; exiting?: SxEntryExit; layout?: SxLayout}
+
+const asConfig = (motion: StaggerMotion): MotionPresetConfig => (typeof motion === 'string' ? {preset: motion} : motion)
+
+/**
+ * The stagger's preset, or the child's own with the delay added: a child that names its look keeps it and only takes
+ * its turn. Reanimated's own builder is the child's, untouched, since adding a delay to one mutates it.
+ */
+const withDelay = (own: SxEntryExit | undefined, fallback: MotionPresetConfig, delay: number): SxEntryExit => {
+  if (own === undefined) {
+    return {...fallback, delay: (fallback.delay ?? 0) + delay}
+  }
+
+  if (typeof own === 'string') {
+    return {delay, preset: own}
+  }
+
+  return typeof own === 'object' && own !== null && 'preset' in own ? {...own, delay: (own.delay ?? 0) + delay} : own
+}
+
+export const Stagger: StaggerComponent = ({
+  children,
+  entering = 'fadeUp',
+  exiting,
+  from = 'start',
+  interval = 'stagger',
+  layout,
+  testID,
+  ...sx
+}: StaggerProps) => {
+  // The children that have arrived already. Only the ones new in this render take turns, so a list that grows by a
+  // page staggers the page, and an item added on its own arrives at once instead of after everything above it.
+  const arrived = useRef(new Set<Key>())
+  const items = Children.toArray(children)
+  const turns = new Map<Key, number>()
+
+  for (const item of items) {
+    if (isValidElement(item) && item.key !== null && !arrived.current.has(item.key)) {
+      turns.set(item.key, turns.size)
+    }
+  }
+
+  // Marked once committed: a render React throws away must not use up a child's turn.
+  useLayoutEffect(() => {
+    for (const key of turns.keys()) {
+      arrived.current.add(key)
+    }
+  })
+
+  const step = duration[interval]
+  const enter = asConfig(entering)
+  const leave = exiting === undefined ? undefined : asConfig(exiting)
+
+  const delayOf = (key: Key | null) => {
+    const turn = key === null ? undefined : turns.get(key)
+
+    if (turn === undefined) {
+      return 0
+    }
+
+    return (from === 'start' ? turn : turns.size - 1 - turn) * step
+  }
+
+  return (
+    // With `layout` the container moves and resizes with its children, so what holds it can follow.
+    <Box layout={layout} testID={testID} {...sx}>
+      {items.map(item => {
+        if (!isValidElement<MotionChildProps>(item)) {
+          return item
+        }
+
+        const delay = delayOf(item.key)
+
+        // A component that takes the motion props gets them directly, with no view added around it.
+        if (isMotionComponent(item.type)) {
+          return cloneElement(item as ReactElement<MotionChildProps>, {
+            entering: withDelay(item.props.entering, enter, delay),
+            exiting: item.props.exiting ?? leave,
+            layout: item.props.layout ?? layout,
+          })
+        }
+
+        return (
+          <Box entering={withDelay(undefined, enter, delay)} exiting={leave} key={item.key} layout={layout}>
+            {item}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/atoms/stagger/stagger.types.ts

@@ -0,0 +1,35 @@
+import type {MotionPreset, MotionPresetConfig, ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {DurationSize, SpringName} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+/** A preset by name, or one adjusted: `{preset: 'fadeUp', duration: 'slow'}`. Its `delay` is where the first one starts. */
+export type StaggerMotion = MotionPreset | MotionPresetConfig
+
+/**
+ * A `Box` whose children arrive one after another: each takes `entering` a step later than the one before. Children
+ * that arrive together are staggered among themselves, the first ones as much as a later batch (the next page of a
+ * list), while a single child added later arrives at once. A `Box`, `RnText` or `Pressable` child takes the motion
+ * itself; any other child is wrapped in a `Box` that does. With motion reduced every child fades, still one after
+ * another. The React Native tier: it needs no host.
+ */
+export type StaggerProps = ResponsiveViewSx & {
+  /** What arrives. A child with an `entering` preset of its own keeps it and only takes the delay. */
+  children?: ReactNode
+  /** How each child arrives. `fadeUp` by default. */
+  entering?: StaggerMotion
+  /** How a child leaves when it is removed. They leave together, not one after another; none by default. */
+  exiting?: StaggerMotion
+  /** Which end arrives first. `start` by default. */
+  from?: 'end' | 'start'
+  /** The step between one child and the next, a duration token. `stagger` (40 ms) by default, `micro` for a slower one. */
+  interval?: DurationSize
+  /**
+   * Moves the other children into place when one arrives or leaves, and the stagger itself to its new size: `true` on
+   * the `smooth` spring, or a spring token. Off by default. Give what sits after it `layout` too, so it follows.
+   */
+  layout?: boolean | SpringName
+  /** Test identifier, forwarded to the view. */
+  testID?: string
+}
+
+export type StaggerComponent = (props: StaggerProps) => ReactNode

package/src/molecules/scroll-edge-container/scroll-edge-container.android.tsx

@@ -1,10 +1,10 @@
+import {timing} from '@hzblj/kara-sx'
 import {opacity} from '@hzblj/kara-theme'
 import {cloneElement, type ReactNode, useCallback, useRef} from 'react'
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'
 import {type SharedValue, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'
 
-import {ABox, Box} from '../../atoms/box'
-import {timing} from '../../motion'
+import {Box} from '../../atoms/box'
 import type {ScrollEdgeContainerComponent, ScrollEdgeContainerProps} from './scroll-edge-container.types'
 
 /** Less than a pixel scrolled is not scrolled — a fling settles a fraction away from the edge. */
@@ -24,7 +24,7 @@ const EdgeBar = ({children, filled}: Bar) => {
 
   return (
     <Box>
-      <ABox
+      <Box
         bg="surface.secondary"
         bottom={0}
         left={0}

package/src/organisms/snackbar/snackbar.tsx

@@ -1,24 +1,13 @@
-import {duration as durations, easing, spacing, useReducedMotion} from '@hzblj/kara-theme'
+import {type SxEntryExit, timing} from '@hzblj/kara-sx'
+import {spacing, useReducedMotion} from '@hzblj/kara-theme'
 import {useEffect, useRef} from 'react'
 import {AccessibilityInfo, Platform} from 'react-native'
-import {
-  Easing,
-  type EntryExitAnimationFunction,
-  FadeIn,
-  FadeInDown,
-  FadeInUp,
-  FadeOut,
-  FadeOutDown,
-  FadeOutUp,
-  ReduceMotion,
-  withTiming,
-} from 'react-native-reanimated'
-
-import {ABox, Box} from '../../atoms/box'
+import {type EntryExitAnimationFunction, withTiming} from 'react-native-reanimated'
+
+import {Box} from '../../atoms/box'
 import {Pressable} from '../../atoms/pressable'
 import {RnText} from '../../atoms/rn-text'
 import {RnGlyph} from '../../glyph'
-import {timing} from '../../motion'
 import type {SnackbarAnimation, SnackbarComponent, SnackbarDuration, SnackbarProps} from './snackbar.types'
 
 /** Material's `SnackbarDuration.Short` and `Long`. */
@@ -29,10 +18,9 @@ const PLATFORM_ANIMATION: SnackbarAnimation = Platform.OS === 'android' ? 'scale
 /** The close glyph at the label's height: an SF Symbol fills its box, Material's icon sits inside a padded one. */
 const CLOSE_SIZE = Platform.OS === 'ios' ? 's12' : 's16'
 
-const SMOOTH_OUT = Easing.bezier(...easing.smoothOut)
 const GROW = timing('quick')
 
-/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. */
+/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. Further than kara's `scale` preset. */
 const scaleIn: EntryExitAnimationFunction = () => {
   'worklet'
 
@@ -42,29 +30,21 @@ const scaleIn: EntryExitAnimationFunction = () => {
   }
 }
 
+type Transition = {entering: SxEntryExit; exiting: SxEntryExit}
+
 /**
- * The presets in and out: arriving in `fast`, leaving in `quick`, both on `smoothOut`. `ReduceMotion.Never`, because
- * `useReducedMotion` has already picked the fade by then, and a fade is what should still run.
+ * kara's motion presets, which arrive in `fast`, leave in `quick` and fade with motion reduced by themselves. A slide
+ * travels further than a preset's default: in from the edge it sits on, and back out toward it.
  */
 const TRANSITIONS = {
-  fade: {
-    entering: FadeIn.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOut.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-  },
+  fade: {entering: 'fade', exiting: 'fade'},
   // Material's exit is a 75 ms fade: `micro`.
-  scale: {entering: scaleIn, exiting: FadeOut.duration(durations.micro).reduceMotion(ReduceMotion.Never)},
-  // Slide: in from the edge it sits on, and back out toward it.
-  slideBottom: {
-    entering: FadeInDown.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOutDown.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-  },
-  slideTop: {
-    entering: FadeInUp.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOutUp.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-  },
-}
+  scale: {entering: scaleIn, exiting: {duration: 'micro', preset: 'fade'}},
+  slideBottom: {entering: {distance: 's24', preset: 'fadeUp'}, exiting: {distance: 's24', preset: 'fadeDown'}},
+  slideTop: {entering: {distance: 's24', preset: 'fadeDown'}, exiting: {distance: 's24', preset: 'fadeUp'}},
+} as const satisfies Record<string, Transition>
 
-const transitionsFor = (animation: SnackbarAnimation, position: 'bottom' | 'top') => {
+const transitionsFor = (animation: SnackbarAnimation, position: 'bottom' | 'top'): Transition => {
   if (animation === 'slide') {
     return position === 'top' ? TRANSITIONS.slideTop : TRANSITIONS.slideBottom
   }
@@ -121,11 +101,11 @@ export const Snackbar: SnackbarComponent = ({
 
   const edge = position === 'top' ? {top: spacing[offset]} : {bottom: spacing[offset]}
   const hasTrailing = Boolean(actionLabel) || dismissible
-  // With motion reduced it only fades: nothing slides or grows.
-  const preset = transitionsFor(reduced ? 'fade' : animation, position)
+  // The presets fade with motion reduced by themselves; Material's scale is a worklet of its own, so it is picked out.
+  const preset = transitionsFor(reduced && animation === 'scale' ? 'fade' : animation, position)
 
   return (
-    <ABox
+    <Box
       align={actionOnNewLine ? 'stretch' : 'center'}
       bg="surface.high.contrast"
       borderRadius="medium"
@@ -161,6 +141,6 @@ export const Snackbar: SnackbarComponent = ({
           ) : null}
         </Box>
       ) : null}
-    </ABox>
+    </Box>
   )
 }

package/src/organisms/snackbar/snackbar.types.ts

@@ -1,8 +1,6 @@
+import type {SxEntryExit} from '@hzblj/kara-sx'
 import type {SpaceSize} from '@hzblj/kara-theme'
-import type {ComponentProps, ReactNode} from 'react'
-import type Animated from 'react-native-reanimated'
-
-type LayoutAnimation = ComponentProps<typeof Animated.View>['entering']
+import type {ReactNode} from 'react'
 
 /** How it comes and goes. */
 export type SnackbarAnimation = 'fade' | 'scale' | 'slide'
@@ -33,10 +31,10 @@ export type SnackbarProps = {
   dismissible?: boolean
   /** How long it stays up before `onDismiss` is called. `indefinite` by default: it never hides itself. */
   duration?: SnackbarDuration
-  /** A Reanimated entering animation of your own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
-  entering?: LayoutAnimation
-  /** A Reanimated exiting animation of your own. It wins over `animation`. */
-  exiting?: LayoutAnimation
+  /** How it arrives instead: a motion preset (`'scale'`), or Reanimated's own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
+  entering?: SxEntryExit
+  /** How it leaves instead: a motion preset, or Reanimated's own. It wins over `animation`. */
+  exiting?: SxEntryExit
   /** The message. */
   message: string
   /** Between the snackbar and its edge, a space token. `s24` by default; raise it above a tab bar. */

package/lib/module/atoms/box/a-box.js

@@ -1,6 +0,0 @@
-"use strict";
-
-import Animated from 'react-native-reanimated';
-import { Box } from "./box.js";
-export const ABox = Animated.createAnimatedComponent(Box);
-//# sourceMappingURL=a-box.js.map

package/lib/module/atoms/box/a-box.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Animated","Box","ABox","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["atoms/box/a-box.ts"],"mappings":";;AAAA,OAAOA,QAAQ,MAAM,yBAAyB;AAE9C,SAAQC,GAAG,QAAO,UAAO;AAEzB,OAAO,MAAMC,IAAI,GAAGF,QAAQ,CAACG,uBAAuB,CAACF,GAAG,CAAC","ignoreList":[]}

package/lib/module/motion.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import { duration, easing } from '@hzblj/kara-theme';
-import { Easing, ReduceMotion } from 'react-native-reanimated';
-
-/**
- * A Reanimated timing from the motion tokens, `smoothOut` unless told otherwise. `ReduceMotion.Never`, because a
- * component has applied `useReducedMotion` before it animates: what is left (a fade, a dim) is meant to run, and
- * Reanimated's own check reads the setting once at launch and never hears of `KaraProvider reduceMotion`.
- */
-export const timing = (size, curve = 'smoothOut') => {
-  const [x1, y1, x2, y2] = easing[curve];
-  return {
-    duration: duration[size],
-    easing: Easing.bezier(x1, y1, x2, y2),
-    reduceMotion: ReduceMotion.Never
-  };
-};
-//# sourceMappingURL=motion.js.map

package/lib/module/motion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["duration","easing","Easing","ReduceMotion","timing","size","curve","x1","y1","x2","y2","bezier","reduceMotion","Never"],"sourceRoot":"../../src","sources":["motion.ts"],"mappings":";;AAAA,SAA2BA,QAAQ,EAAmBC,MAAM,QAAO,mBAAmB;AACtF,SAAQC,MAAM,EAAEC,YAAY,QAA8B,yBAAyB;;AAEnF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGA,CAACC,IAAkB,EAAEC,KAAiB,GAAG,WAAW,KAAuB;EAC/F,MAAM,CAACC,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,EAAE,CAAC,GAAGT,MAAM,CAACK,KAAK,CAAC;EAEtC,OAAO;IAACN,QAAQ,EAAEA,QAAQ,CAACK,IAAI,CAAC;IAAEJ,MAAM,EAAEC,MAAM,CAACS,MAAM,CAACJ,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,EAAE,CAAC;IAAEE,YAAY,EAAET,YAAY,CAACU;EAAK,CAAC;AAC5G,CAAC","ignoreList":[]}

package/lib/typescript/atoms/box/a-box.d.ts

@@ -1,49 +0,0 @@
-export declare const ABox: import("react-native-reanimated/lib/typescript/createAnimatedComponent").AnimatedComponentType<Readonly<Omit<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>, "align" | "alignContent" | "alignSelf" | "aspectRatio" | "basis" | "bg" | "blur" | "borderColor" | "borderRadius" | "borderWidth" | "bottom" | "columnGap" | "display" | "flex" | "flexDirection" | "gap" | "grow" | "h" | "inset" | "justify" | "left" | "m" | "maxH" | "maxW" | "mb" | "minH" | "minW" | "ml" | "mr" | "mt" | "mx" | "my" | "offsetX" | "offsetY" | "opacity" | "overflow" | "p" | "pb" | "pl" | "position" | "pr" | "pt" | "px" | "py" | "right" | "rotate" | "rowGap" | "scale" | "shadow" | "shrink" | "style" | "tall" | "top" | "w" | "wide" | "wrap" | "zIndex" | keyof {
-    borderBottomWidth?: number;
-    borderLeftWidth?: number;
-    borderRightWidth?: number;
-    borderStyle?: import("react-native").ViewStyle['borderStyle'];
-    borderTopWidth?: number;
-} | keyof import("@hzblj/kara-sx").ViewRadiiSx> & Omit<import("@hzblj/kara-sx").ViewSx, "align" | "alignContent" | "alignSelf" | "basis" | "columnGap" | "display" | "flex" | "flexDirection" | "gap" | "grow" | "h" | "justify" | "m" | "maxH" | "maxW" | "mb" | "minH" | "minW" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "rowGap" | "shrink" | "tall" | "w" | "wide" | "wrap"> & {
-    p?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    pb?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    pl?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    pr?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    pt?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    px?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    py?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    tall?: import("@hzblj/kara-sx").Responsive<NonNullable<boolean | undefined>> | undefined;
-    wide?: import("@hzblj/kara-sx").Responsive<NonNullable<boolean | undefined>> | undefined;
-    h?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    minH?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    minW?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    w?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    maxH?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    maxW?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    align?: import("@hzblj/kara-sx").Responsive<NonNullable<import("react-native").FlexAlignType | undefined>> | undefined;
-    alignContent?: import("@hzblj/kara-sx").Responsive<NonNullable<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined>> | undefined;
-    alignSelf?: import("@hzblj/kara-sx").Responsive<NonNullable<"auto" | import("react-native").FlexAlignType | undefined>> | undefined;
-    basis?: import("@hzblj/kara-sx").Responsive<NonNullable<import("@hzblj/kara-sx").SxDimension | undefined>> | undefined;
-    columnGap?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    flex?: import("@hzblj/kara-sx").Responsive<number> | undefined;
-    flexDirection?: import("@hzblj/kara-sx").Responsive<NonNullable<"column" | "column-reverse" | "row" | "row-reverse" | undefined>> | undefined;
-    gap?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    grow?: import("@hzblj/kara-sx").Responsive<number> | undefined;
-    justify?: import("@hzblj/kara-sx").Responsive<NonNullable<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined>> | undefined;
-    rowGap?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    shrink?: import("@hzblj/kara-sx").Responsive<number> | undefined;
-    wrap?: import("@hzblj/kara-sx").Responsive<NonNullable<"nowrap" | "wrap" | "wrap-reverse" | undefined>> | undefined;
-    m?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    mb?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    ml?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    mr?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    mt?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    mx?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    my?: import("@hzblj/kara-sx").Responsive<NonNullable<"s0" | "s1" | "s10" | "s12" | "s16" | "s2" | "s20" | "s24" | "s28" | "s32" | "s36" | "s4" | "s40" | "s48" | "s56" | "s6" | "s64" | "s72" | "s8" | "s80" | "s96" | undefined>> | undefined;
-    display?: import("@hzblj/kara-sx").Responsive<NonNullable<"contents" | "flex" | "none" | undefined>> | undefined;
-} & {
-    style?: import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").ViewStyle | import("react-native").Falsy> | import("react-native").TextStyle | import("react-native").ViewStyle | import("react-native").Falsy;
-}>, import("react").MemoExoticComponent<{
-    ({ style, ...props }: import("@hzblj/kara-sx").SxProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>): import("react").JSX.Element;
-    displayName: string;
-}>>;

package/lib/typescript/motion.d.ts

@@ -1,8 +0,0 @@
-import { type DurationSize, type EasingName } from '@hzblj/kara-theme';
-import { type WithTimingConfig } from 'react-native-reanimated';
-/**
- * A Reanimated timing from the motion tokens, `smoothOut` unless told otherwise. `ReduceMotion.Never`, because a
- * component has applied `useReducedMotion` before it animates: what is left (a fade, a dim) is meant to run, and
- * Reanimated's own check reads the setting once at launch and never hears of `KaraProvider reduceMotion`.
- */
-export declare const timing: (size: DurationSize, curve?: EasingName) => WithTimingConfig;

package/src/atoms/box/a-box.ts

@@ -1,5 +0,0 @@
-import Animated from 'react-native-reanimated'
-
-import {Box} from './box'
-
-export const ABox = Animated.createAnimatedComponent(Box)

package/src/motion.ts

@@ -1,13 +0,0 @@
-import {type DurationSize, duration, type EasingName, easing} from '@hzblj/kara-theme'
-import {Easing, ReduceMotion, type WithTimingConfig} from 'react-native-reanimated'
-
-/**
- * A Reanimated timing from the motion tokens, `smoothOut` unless told otherwise. `ReduceMotion.Never`, because a
- * component has applied `useReducedMotion` before it animates: what is left (a fade, a dim) is meant to run, and
- * Reanimated's own check reads the setting once at launch and never hears of `KaraProvider reduceMotion`.
- */
-export const timing = (size: DurationSize, curve: EasingName = 'smoothOut'): WithTimingConfig => {
-  const [x1, y1, x2, y2] = easing[curve]
-
-  return {duration: duration[size], easing: Easing.bezier(x1, y1, x2, y2), reduceMotion: ReduceMotion.Never}
-}