@pyreon/kinetic-presets 0.11.5 → 0.11.6

package/README.md

@@ -39,7 +39,7 @@ import { fadeUp, scaleIn, bounceIn } from '@pyreon/kinetic-presets'
 
 // Map access (useful for dynamic selection)
 import { presets } from '@pyreon/kinetic-presets'
-presets.fadeUp   // same as named fadeUp
+presets.fadeUp // same as named fadeUp
 ```
 
 ### Fades (14)
@@ -143,14 +143,20 @@ presets.fadeUp   // same as named fadeUp
 Configurable factories for creating custom presets:
 
 ```ts
-import { createFade, createSlide, createScale, createRotate, createBlur } from '@pyreon/kinetic-presets'
+import {
+  createFade,
+  createSlide,
+  createScale,
+  createRotate,
+  createBlur,
+} from '@pyreon/kinetic-presets'
 ```
 
 ### createFade(options?)
 
 ```ts
-createFade()                                    // Pure opacity fade
-createFade({ direction: 'up', distance: 24 })   // Fade with movement
+createFade() // Pure opacity fade
+createFade({ direction: 'up', distance: 24 }) // Fade with movement
 createFade({ duration: 500, easing: 'ease-in-out' })
 ```
 
@@ -168,7 +174,7 @@ Options: `direction?` (default `'up'`), `distance?` (default 16), `duration?`, `
 
 ```ts
 createScale({ from: 0.5, duration: 400 })
-createScale({ from: 0.8, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })  // spring bounce
+createScale({ from: 0.8, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }) // spring bounce
 ```
 
 Options: `from?` (default 0.9), `duration?`, `leaveDuration?`, `easing?`, `leaveEasing?`.
@@ -177,7 +183,7 @@ Options: `from?` (default 0.9), `duration?`, `leaveDuration?`, `easing?`, `leave
 
 ```ts
 createRotate({ degrees: 30, duration: 400 })
-createRotate({ degrees: -90 })  // counter-clockwise
+createRotate({ degrees: -90 }) // counter-clockwise
 ```
 
 Options: `degrees?` (default 15), `duration?`, `leaveDuration?`, `easing?`, `leaveEasing?`.
@@ -186,7 +192,7 @@ Options: `degrees?` (default 15), `duration?`, `leaveDuration?`, `easing?`, `lea
 
 ```ts
 createBlur({ amount: 12, duration: 400 })
-createBlur({ amount: 8, scale: 0.95 })  // blur with scale
+createBlur({ amount: 8, scale: 0.95 }) // blur with scale
 ```
 
 Options: `amount?` (px, default 8), `scale?` (optional scale factor), `duration?`, `leaveDuration?`, `easing?`, `leaveEasing?`.

package/lib/index.d.ts

@@ -15,7 +15,7 @@ type Preset = {
   leaveFrom?: string | undefined;
   leaveTo?: string | undefined;
 };
-type Direction = "up" | "down" | "left" | "right";
+type Direction = 'up' | 'down' | 'left' | 'right';
 type FadeOptions = {
   direction?: Direction;
   distance?: number;

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/kinetic-presets",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "120+ animation presets for Pyreon transitions",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/kinetic-presets"
   },
-  "description": "120+ animation presets for Pyreon transitions",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,14 +34,17 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/__tests__/factories.test.ts

@@ -1,263 +1,263 @@
-import { describe, expect, it } from "vitest"
-import { createBlur, createFade, createRotate, createScale, createSlide } from "../factories"
+import { describe, expect, it } from 'vitest'
+import { createBlur, createFade, createRotate, createScale, createSlide } from '../factories'
 
-describe("createFade", () => {
-  it("creates pure opacity fade by default", () => {
+describe('createFade', () => {
+  it('creates pure opacity fade by default', () => {
     const p = createFade()
     expect(p.enterStyle).toEqual({ opacity: 0 })
     expect(p.enterToStyle).toEqual({ opacity: 1 })
-    expect(p.enterTransition).toBe("all 300ms ease-out")
-    expect(p.leaveTransition).toBe("all 200ms ease-in")
+    expect(p.enterTransition).toBe('all 300ms ease-out')
+    expect(p.leaveTransition).toBe('all 200ms ease-in')
   })
 
-  it("creates directional fade", () => {
-    const p = createFade({ direction: "up", distance: 24 })
+  it('creates directional fade', () => {
+    const p = createFade({ direction: 'up', distance: 24 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(24px)",
+      transform: 'translateY(24px)',
     })
     expect(p.enterToStyle).toEqual({
       opacity: 1,
-      transform: "translateY(0)",
+      transform: 'translateY(0)',
     })
   })
 
-  it("creates fade with all directions", () => {
-    expect(createFade({ direction: "up" }).enterStyle).toHaveProperty(
-      "transform",
-      "translateY(16px)",
+  it('creates fade with all directions', () => {
+    expect(createFade({ direction: 'up' }).enterStyle).toHaveProperty(
+      'transform',
+      'translateY(16px)',
     )
-    expect(createFade({ direction: "down" }).enterStyle).toHaveProperty(
-      "transform",
-      "translateY(-16px)",
+    expect(createFade({ direction: 'down' }).enterStyle).toHaveProperty(
+      'transform',
+      'translateY(-16px)',
     )
-    expect(createFade({ direction: "left" }).enterStyle).toHaveProperty(
-      "transform",
-      "translateX(16px)",
+    expect(createFade({ direction: 'left' }).enterStyle).toHaveProperty(
+      'transform',
+      'translateX(16px)',
     )
-    expect(createFade({ direction: "right" }).enterStyle).toHaveProperty(
-      "transform",
-      "translateX(-16px)",
+    expect(createFade({ direction: 'right' }).enterStyle).toHaveProperty(
+      'transform',
+      'translateX(-16px)',
     )
   })
 
-  it("custom duration and easing", () => {
+  it('custom duration and easing', () => {
     const p = createFade({
       duration: 500,
       leaveDuration: 300,
-      easing: "linear",
+      easing: 'linear',
     })
-    expect(p.enterTransition).toBe("all 500ms linear")
-    expect(p.leaveTransition).toBe("all 300ms ease-in")
+    expect(p.enterTransition).toBe('all 500ms linear')
+    expect(p.leaveTransition).toBe('all 300ms ease-in')
   })
 
-  it("custom leave easing", () => {
-    const p = createFade({ leaveEasing: "linear" })
-    expect(p.leaveTransition).toBe("all 200ms linear")
+  it('custom leave easing', () => {
+    const p = createFade({ leaveEasing: 'linear' })
+    expect(p.leaveTransition).toBe('all 200ms linear')
   })
 
-  it("populates all six preset fields for non-directional", () => {
+  it('populates all six preset fields for non-directional', () => {
     const p = createFade()
     expect(p.leaveStyle).toEqual({ opacity: 1 })
     expect(p.leaveToStyle).toEqual({ opacity: 0 })
   })
 
-  it("populates all six preset fields for directional", () => {
-    const p = createFade({ direction: "up" })
-    expect(p.leaveStyle).toEqual({ opacity: 1, transform: "translateY(0)" })
-    expect(p.leaveToStyle).toEqual({ opacity: 0, transform: "translateY(16px)" })
+  it('populates all six preset fields for directional', () => {
+    const p = createFade({ direction: 'up' })
+    expect(p.leaveStyle).toEqual({ opacity: 1, transform: 'translateY(0)' })
+    expect(p.leaveToStyle).toEqual({ opacity: 0, transform: 'translateY(16px)' })
   })
 })
 
-describe("createSlide", () => {
-  it("defaults to up direction with 16px", () => {
+describe('createSlide', () => {
+  it('defaults to up direction with 16px', () => {
     const p = createSlide()
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(16px)",
+      transform: 'translateY(16px)',
     })
   })
 
-  it("custom direction and distance", () => {
-    const p = createSlide({ direction: "right", distance: 32 })
+  it('custom direction and distance', () => {
+    const p = createSlide({ direction: 'right', distance: 32 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-32px)",
+      transform: 'translateX(-32px)',
     })
     expect(p.enterToStyle).toEqual({
       opacity: 1,
-      transform: "translateX(0)",
+      transform: 'translateX(0)',
     })
   })
 
-  it("is symmetric", () => {
-    const p = createSlide({ direction: "left", distance: 20 })
+  it('is symmetric', () => {
+    const p = createSlide({ direction: 'left', distance: 20 })
     expect(p.enterStyle).toEqual(p.leaveToStyle)
     expect(p.enterToStyle).toEqual(p.leaveStyle)
   })
 
-  it("down direction", () => {
-    const p = createSlide({ direction: "down" })
+  it('down direction', () => {
+    const p = createSlide({ direction: 'down' })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-16px)",
+      transform: 'translateY(-16px)',
     })
   })
 
-  it("custom duration and easing", () => {
+  it('custom duration and easing', () => {
     const p = createSlide({
       duration: 400,
       leaveDuration: 100,
-      easing: "linear",
-      leaveEasing: "ease-out",
+      easing: 'linear',
+      leaveEasing: 'ease-out',
     })
-    expect(p.enterTransition).toBe("all 400ms linear")
-    expect(p.leaveTransition).toBe("all 100ms ease-out")
+    expect(p.enterTransition).toBe('all 400ms linear')
+    expect(p.leaveTransition).toBe('all 100ms ease-out')
   })
 })
 
-describe("createScale", () => {
-  it("defaults to scale(0.9)", () => {
+describe('createScale', () => {
+  it('defaults to scale(0.9)', () => {
     const p = createScale()
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9)",
+      transform: 'scale(0.9)',
     })
     expect(p.enterToStyle).toEqual({
       opacity: 1,
-      transform: "scale(1)",
+      transform: 'scale(1)',
     })
   })
 
-  it("custom from value", () => {
+  it('custom from value', () => {
     const p = createScale({ from: 0.5 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5)",
+      transform: 'scale(0.5)',
     })
   })
 
-  it("custom spring easing", () => {
+  it('custom spring easing', () => {
     const p = createScale({
       from: 0.8,
-      easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
     })
-    expect(p.enterTransition).toBe("all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)")
+    expect(p.enterTransition).toBe('all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)')
   })
 
-  it("is symmetric", () => {
+  it('is symmetric', () => {
     const p = createScale({ from: 0.5 })
     expect(p.enterStyle).toEqual(p.leaveToStyle)
     expect(p.enterToStyle).toEqual(p.leaveStyle)
   })
 
-  it("custom leave easing", () => {
-    const p = createScale({ leaveEasing: "linear" })
-    expect(p.leaveTransition).toBe("all 200ms linear")
+  it('custom leave easing', () => {
+    const p = createScale({ leaveEasing: 'linear' })
+    expect(p.leaveTransition).toBe('all 200ms linear')
   })
 })
 
-describe("createRotate", () => {
-  it("defaults to 15 degrees", () => {
+describe('createRotate', () => {
+  it('defaults to 15 degrees', () => {
     const p = createRotate()
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-15deg)",
+      transform: 'rotate(-15deg)',
     })
     expect(p.leaveToStyle).toEqual({
       opacity: 0,
-      transform: "rotate(15deg)",
+      transform: 'rotate(15deg)',
     })
   })
 
-  it("custom degrees", () => {
+  it('custom degrees', () => {
     const p = createRotate({ degrees: 45 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-45deg)",
+      transform: 'rotate(-45deg)',
     })
     expect(p.leaveToStyle).toEqual({
       opacity: 0,
-      transform: "rotate(45deg)",
+      transform: 'rotate(45deg)',
     })
   })
 
-  it("negative degrees for counter-clockwise", () => {
+  it('negative degrees for counter-clockwise', () => {
     const p = createRotate({ degrees: -90 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(90deg)",
+      transform: 'rotate(90deg)',
     })
   })
 
-  it("enterToStyle and leaveStyle are identity rotation", () => {
+  it('enterToStyle and leaveStyle are identity rotation', () => {
     const p = createRotate()
-    expect(p.enterToStyle).toEqual({ opacity: 1, transform: "rotate(0)" })
-    expect(p.leaveStyle).toEqual({ opacity: 1, transform: "rotate(0)" })
+    expect(p.enterToStyle).toEqual({ opacity: 1, transform: 'rotate(0)' })
+    expect(p.leaveStyle).toEqual({ opacity: 1, transform: 'rotate(0)' })
   })
 
-  it("custom duration", () => {
+  it('custom duration', () => {
     const p = createRotate({ duration: 600, leaveDuration: 400 })
-    expect(p.enterTransition).toBe("all 600ms ease-out")
-    expect(p.leaveTransition).toBe("all 400ms ease-in")
+    expect(p.enterTransition).toBe('all 600ms ease-out')
+    expect(p.leaveTransition).toBe('all 400ms ease-in')
   })
 })
 
-describe("createBlur", () => {
-  it("defaults to 8px blur", () => {
+describe('createBlur', () => {
+  it('defaults to 8px blur', () => {
     const p = createBlur()
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
+      filter: 'blur(8px)',
     })
     expect(p.enterToStyle).toEqual({
       opacity: 1,
-      filter: "blur(0px)",
+      filter: 'blur(0px)',
     })
   })
 
-  it("custom blur amount", () => {
+  it('custom blur amount', () => {
     const p = createBlur({ amount: 16 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(16px)",
+      filter: 'blur(16px)',
     })
   })
 
-  it("blur with scale", () => {
+  it('blur with scale', () => {
     const p = createBlur({ amount: 8, scale: 0.9 })
     expect(p.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "scale(0.9)",
+      filter: 'blur(8px)',
+      transform: 'scale(0.9)',
     })
     expect(p.enterToStyle).toEqual({
       opacity: 1,
-      filter: "blur(0px)",
-      transform: "scale(1)",
+      filter: 'blur(0px)',
+      transform: 'scale(1)',
     })
   })
 
-  it("custom duration", () => {
+  it('custom duration', () => {
     const p = createBlur({ duration: 500, leaveDuration: 250 })
-    expect(p.enterTransition).toBe("all 500ms ease-out")
-    expect(p.leaveTransition).toBe("all 250ms ease-in")
+    expect(p.enterTransition).toBe('all 500ms ease-out')
+    expect(p.leaveTransition).toBe('all 250ms ease-in')
   })
 
-  it("is symmetric without scale", () => {
+  it('is symmetric without scale', () => {
     const p = createBlur()
     expect(p.enterStyle).toEqual(p.leaveToStyle)
     expect(p.enterToStyle).toEqual(p.leaveStyle)
   })
 
-  it("is symmetric with scale", () => {
+  it('is symmetric with scale', () => {
     const p = createBlur({ scale: 0.8 })
     expect(p.enterStyle).toEqual(p.leaveToStyle)
     expect(p.enterToStyle).toEqual(p.leaveStyle)
   })
 
-  it("custom leave easing", () => {
-    const p = createBlur({ leaveEasing: "linear" })
-    expect(p.leaveTransition).toBe("all 200ms linear")
+  it('custom leave easing', () => {
+    const p = createBlur({ leaveEasing: 'linear' })
+    expect(p.leaveTransition).toBe('all 200ms linear')
   })
 })