@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/animations/anm_appear.ts

@@ -0,0 +1,13 @@
+import type { Animation } from '../animations.ts'
+
+export const APPEAR = {
+  id: 'appear',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [{ property: 'opacity', is: 'opacity-none' }],
+    '100%': [{ property: 'opacity', is: 'opacity-full' }],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_blur_in.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const BLUR_IN = {
+  id: 'blur-in',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'filter', is: 'filter-blurred' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'filter', is: 'filter-sharp' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_blur_out.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const BLUR_OUT = {
+  id: 'blur-out',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'filter', is: 'filter-sharp' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'filter', is: 'filter-blurred' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_dismiss.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const DISMISS = {
+  id: 'dismiss',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-shrink' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_drop.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const DROP = {
+  id: 'drop',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-above' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_fall.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const FALL = {
+  id: 'fall',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-below' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_flash.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const FLASH = {
+  id: 'flash',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+    ],
+    '40%': [
+      { property: 'opacity', is: 'opacity-muted' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_glow.ts

@@ -0,0 +1,16 @@
+import type { Animation } from '../animations.ts'
+
+export const GLOW = {
+  id: 'glow',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'boxShadow', is: 'shadow-0' },
+    ],
+    '100%': [
+      { property: 'boxShadow', is: 'shadow-glow' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_lift.ts

@@ -0,0 +1,16 @@
+import type { Animation } from '../animations.ts'
+
+export const LIFT = {
+  id: 'lift',
+  runs: 'motion-quick',
+  eases: 'ease-out',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'transform', is: 'transform-lift' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_nudge.ts

@@ -0,0 +1,16 @@
+import type { Animation } from '../animations.ts'
+
+export const NUDGE = {
+  id: 'nudge',
+  runs: 'motion-quick',
+  eases: 'ease-out',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'transform', is: 'transform-right' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_pop_in.ts

@@ -0,0 +1,23 @@
+import type { Animation } from '../animations.ts'
+
+export const POP_IN = {
+  id: 'pop-in',
+  runs: 'motion-normal',
+  eases: 'ease-spring',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-shrink' },
+    ],
+    '70%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-swell' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_pop_out.ts

@@ -0,0 +1,22 @@
+import type { Animation } from '../animations.ts'
+
+export const POP_OUT = {
+  id: 'pop-out',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '30%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-swell' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-shrink' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_press.ts

@@ -0,0 +1,12 @@
+import type { Animation } from '../animations.ts'
+
+export const PRESS = {
+  id: 'press',
+  runs: 'motion-quick',
+  eases: 'ease-out',
+  stops: {
+    '0%': [{ property: 'transform', is: 'transform-rest' }],
+    '50%': [{ property: 'transform', is: 'transform-press' }],
+    '100%': [{ property: 'transform', is: 'transform-rest' }],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_pulse.ts

@@ -0,0 +1,13 @@
+import type { Animation } from '../animations.ts'
+
+export const PULSE = {
+  id: 'pulse',
+  runs: 'motion-slow',
+  eases: 'ease-in-out',
+  repeats: 'infinite',
+  stops: {
+    '0%': [{ property: 'opacity', is: 'opacity-full' }],
+    '50%': [{ property: 'opacity', is: 'opacity-muted' }],
+    '100%': [{ property: 'opacity', is: 'opacity-full' }],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_rise.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const RISE = {
+  id: 'rise',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-below' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_shake.ts

@@ -0,0 +1,13 @@
+import type { Animation } from '../animations.ts'
+
+export const SHAKE = {
+  id: 'shake',
+  runs: 'motion-quick',
+  eases: 'ease-in-out',
+  stops: {
+    '0%': [{ property: 'transform', is: 'transform-rest' }],
+    '25%': [{ property: 'transform', is: 'transform-left' }],
+    '75%': [{ property: 'transform', is: 'transform-right' }],
+    '100%': [{ property: 'transform', is: 'transform-rest' }],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_slide_in_left.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const SLIDE_IN_LEFT = {
+  id: 'slide-in-left',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-far-left' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_slide_in_right.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const SLIDE_IN_RIGHT = {
+  id: 'slide-in-right',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-far-right' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_slide_out_left.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const SLIDE_OUT_LEFT = {
+  id: 'slide-out-left',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-far-left' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_slide_out_right.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const SLIDE_OUT_RIGHT = {
+  id: 'slide-out-right',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-far-right' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_spin.ts

@@ -0,0 +1,12 @@
+import type { Animation } from '../animations.ts'
+
+export const SPIN = {
+  id: 'spin',
+  runs: 'motion-slow',
+  eases: 'ease-steady',
+  repeats: 'infinite',
+  stops: {
+    '0%': [{ property: 'transform', is: 'transform-rest' }],
+    '100%': [{ property: 'transform', is: 'transform-turn' }],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_swell.ts

@@ -0,0 +1,16 @@
+import type { Animation } from '../animations.ts'
+
+export const SWELL = {
+  id: 'swell',
+  runs: 'motion-quick',
+  eases: 'ease-out',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'transform', is: 'transform-swell' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_wobble.ts

@@ -0,0 +1,24 @@
+import type { Animation } from '../animations.ts'
+
+export const WOBBLE = {
+  id: 'wobble',
+  runs: 'motion-slow',
+  eases: 'ease-in-out',
+  stops: {
+    '0%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '25%': [
+      { property: 'transform', is: 'transform-tilt' },
+    ],
+    '50%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '75%': [
+      { property: 'transform', is: 'transform-tilt-back' },
+    ],
+    '100%': [
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_zoom_in.ts

@@ -0,0 +1,19 @@
+import type { Animation } from '../animations.ts'
+
+export const ZOOM_IN = {
+  id: 'zoom-in',
+  runs: 'motion-normal',
+  eases: 'ease-out',
+
+  fills: 'backwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-grow' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+  },
+} as const satisfies Animation

package/dist/ui/animations/anm_zoom_out.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../animations.ts'
+
+export const ZOOM_OUT = {
+  id: 'zoom-out',
+  runs: 'motion-quick',
+  eases: 'ease-in',
+  fills: 'forwards',
+  stops: {
+    '0%': [
+      { property: 'opacity', is: 'opacity-full' },
+      { property: 'transform', is: 'transform-rest' },
+    ],
+    '100%': [
+      { property: 'opacity', is: 'opacity-none' },
+      { property: 'transform', is: 'transform-grow' },
+    ],
+  },
+} as const satisfies Animation