fix perf & bump 📦

Author: hiaaryan

bun.lock

@@ -1,6 +1,6 @@
 {
 	"name": "sileo",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"description": "An opinionated, physics based toast notification library for react.",
 	"license": "MIT",
 	"repository": {
@@ -19,21 +19,20 @@
 			},
 			"default": "./dist/index.js"
 		},
-		"./dist/styles.css": "./dist/styles.css"
+		"./styles.css": "./dist/styles.css"
 	},
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"files": [
 		"dist"
 	],
 	"scripts": {
-		"build": "rm -rf dist && bunchee && cp src/sileo.css dist/styles.css",
+		"build": "rm -rf dist && bunchee && cp src/styles.css dist/styles.css",
 		"dev": "bunchee --watch"
 	},
 	"peerDependencies": {
 		"react": ">=18",
-		"react-dom": ">=18",
-		"lucide-react": ">=0.300"
+		"react-dom": ">=18"
 	},
 	"devDependencies": {
 		"bunchee": "^6.9.4"

package.json

@@ -1,6 +1,6 @@
 "use client";
 
-import "./sileo.css";
+import "./styles.css";
 
 export { sileo, Toaster } from "./toast";
 export type {

src/index.ts

@@ -12,7 +12,7 @@ import {
 	useState,
 } from "react";
 import type { SileoButton, SileoState, SileoStyles } from "./types";
-import "./sileo.css";
+import "./styles.css";
 import {
 	ArrowRight,
 	Check,
@@ -368,6 +368,7 @@ export const Sileo = memo(function Sileo({
 	const svgHeight = hasDesc ? Math.max(expanded, minExpanded) : HEIGHT;
 	const expandedContent = Math.max(0, expanded - HEIGHT);
 	const resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT);
+	const pillHeight = HEIGHT + blur * 3;
 
 	const pillX =
 		position === "right"
@@ -383,13 +384,13 @@ export const Sileo = memo(function Sileo({
 			"--_h": `${open ? expanded : HEIGHT}px`,
 			"--_pw": `${resolvedPillWidth}px`,
 			"--_px": `${pillX}px`,
-			"--_sy": `${open ? 1 : HEIGHT / expanded}`,
-			"--_ph": `${open ? expanded - 5 : expanded}px`,
+			"--_sy": `${open ? 1 : HEIGHT / pillHeight}`,
+			"--_ph": `${pillHeight}px`,
 			"--_by": `${open ? 1 : 0}`,
 			"--_ht": `translateY(${open ? (expand === "bottom" ? 3 : -3) : 0}px) scale(${open ? 0.9 : 1})`,
 			"--_co": `${open ? 1 : 0}`,
 		}),
-		[open, expanded, resolvedPillWidth, pillX, expand],
+		[open, expanded, resolvedPillWidth, pillX, expand, pillHeight],
 	);
 
 	/* -------------------------------- Handlers -------------------------------- */

src/sileo.tsx

@@ -158,9 +158,7 @@
 	transition:
 		transform var(--sileo-duration) var(--sileo-spring-easing),
 		width var(--sileo-duration) var(--sileo-spring-easing),
-		height var(--sileo-duration) var(--sileo-spring-easing),
-		x var(--sileo-duration) var(--sileo-spring-easing),
-		fill var(--sileo-duration) var(--sileo-spring-easing);
+		x var(--sileo-duration) var(--sileo-spring-easing);
 }
 
 [data-sileo-toast][data-ready="true"][data-expanded="true"] [data-sileo-pill] {
@@ -170,8 +168,7 @@
 [data-sileo-toast][data-ready="true"] [data-sileo-body] {
 	transition:
 		transform var(--sileo-duration) var(--sileo-spring-easing),
-		opacity var(--sileo-duration) var(--sileo-spring-easing),
-		fill var(--sileo-duration) var(--sileo-spring-easing);
+		opacity var(--sileo-duration) var(--sileo-spring-easing);
 }
 
 /* --------------------------------- Header --------------------------------- */