@minimalstuff/ui 0.0.31 → 1.0.0-4

package/dist/minimalstuff-ui.js

@@ -0,0 +1,355 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createElement, useCallback, useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+function r(e) {
+	var g, _, v = "";
+	if (typeof e == "string" || typeof e == "number") v += e;
+	else if (typeof e == "object") if (Array.isArray(e)) {
+		var y = e.length;
+		for (g = 0; g < y; g++) e[g] && (_ = r(e[g])) && (v && (v += " "), v += _);
+	} else for (_ in e) e[_] && (v && (v += " "), v += _);
+	return v;
+}
+function clsx() {
+	for (var e, g, _ = 0, v = "", y = arguments.length; _ < y; _++) (e = arguments[_]) && (g = r(e)) && (v && (v += " "), v += g);
+	return v;
+}
+var clsx_default = clsx, VARIANT_CLASSES$1 = {
+	primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 border-transparent",
+	secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 border-transparent",
+	ghost: "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700/50 border-transparent",
+	outline: "bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800/50",
+	subtle: "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-600/50 border-transparent",
+	danger: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 border-transparent"
+}, SIZE_CLASSES$2 = {
+	xs: "px-2 py-1 text-xs",
+	sm: "px-3 py-1.5 text-sm",
+	md: "px-4 py-2 text-sm",
+	lg: "px-4 py-3 text-base"
+};
+const Button = ({ variant: g = "primary", size: _ = "md", children: v, className: y, fullWidth: b = !1, disabled: x, ...S }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	className: clsx_default("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", VARIANT_CLASSES$1[g], SIZE_CLASSES$2[_], b && "w-full", y),
+	disabled: x,
+	...S,
+	children: v
+});
+var CHARACTER_COUNT_STYLES = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
+function CharacterCount({ current: e, min: _, max: v, showMin: y, showMax: b }) {
+	let x = _ !== void 0 && e <= _, S = v !== void 0 && e >= v, C = v !== void 0 && e > v;
+	return /* @__PURE__ */ jsxs("div", {
+		className: CHARACTER_COUNT_STYLES,
+		children: [
+			y && _ !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: x ? "text-amber-600 dark:text-amber-400" : "",
+				children: [
+					e,
+					"/",
+					_,
+					" min"
+				]
+			}),
+			y && b && " · ",
+			b && v !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: C ? "text-red-600 dark:text-red-400" : S ? "text-amber-600 dark:text-amber-400" : "",
+				children: [
+					e,
+					"/",
+					v,
+					" max"
+				]
+			}),
+			!y && !b && v !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: C ? "text-red-600 dark:text-red-400" : S ? "text-amber-600 dark:text-amber-400" : "",
+				children: [
+					e,
+					"/",
+					v
+				]
+			}),
+			!y && !b && _ !== void 0 && v === void 0 && /* @__PURE__ */ jsxs("span", {
+				className: x ? "text-amber-600 dark:text-amber-400" : "",
+				children: [
+					e,
+					" (min ",
+					_,
+					")"
+				]
+			})
+		]
+	});
+}
+const useClientOnly = () => {
+	let [e, g] = useState(!1);
+	return useEffect(() => {
+		requestAnimationFrame(() => {
+			g(!0);
+		});
+	}, []), e;
+}, withClientOnly = (g) => (_) => useClientOnly() ? /* @__PURE__ */ jsx(g, { ..._ }) : null;
+function ClientOnly({ children: e, fallback: g }) {
+	return useClientOnly() ? createElement(Fragment, { children: e }) : g ?? null;
+}
+var VARIANT_CLASSES = {
+	default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
+	ghost: "text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50",
+	danger: "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20",
+	outline: "text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-white/50 dark:hover:bg-gray-800/50"
+}, SIZE_CLASSES$1 = {
+	sm: "p-1",
+	md: "p-2",
+	lg: "p-3"
+}, ICON_SIZE_CLASSES = {
+	sm: "w-4 h-4",
+	md: "w-5 h-5",
+	lg: "w-6 h-6"
+};
+const IconButton = ({ icon: _, "aria-label": v, variant: y = "default", size: b = "md", className: x, children: S, ref: C, ...w }) => /* @__PURE__ */ jsxs("button", {
+	ref: C,
+	type: "button",
+	"aria-label": v,
+	className: clsx_default("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", VARIANT_CLASSES[y], SIZE_CLASSES$1[b], x),
+	...w,
+	children: [/* @__PURE__ */ jsx("div", { className: clsx_default(_, ICON_SIZE_CLASSES[b], S && "mr-1") }), S]
+}), BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+function Input({ label: _, error: v, showCharCount: y = !1, minLength: b, maxLength: C, className: w, wrapperClassName: T, value: E, defaultValue: D, onChange: O, id: k = "input", ...j }) {
+	let M = `${k}-${useId()}`, [N, P] = useState(typeof D == "string" ? D.length : 0), F = typeof E == "string" ? E.length : E === void 0 ? N : 0, I = y && (b !== void 0 || C !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx_default("w-full", T),
+		children: [
+			_ && /* @__PURE__ */ jsx("label", {
+				className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
+				htmlFor: M,
+				children: _
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id: M,
+				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", v && "border-red-500 dark:border-red-400 focus:ring-red-500", w),
+				value: E,
+				defaultValue: D,
+				minLength: b,
+				maxLength: C,
+				onChange: (e) => {
+					E === void 0 && P(e.target.value.length), O?.(e);
+				},
+				...j
+			}),
+			I && /* @__PURE__ */ jsx(CharacterCount, {
+				current: F,
+				min: b,
+				max: C,
+				showMin: b !== void 0,
+				showMax: C !== void 0
+			}),
+			v && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-red-600 dark:text-red-400 mt-1",
+				children: v
+			})
+		]
+	});
+}
+function useRunAfterAnimation(e) {
+	return useCallback((g) => {
+		let _ = setTimeout(g, e);
+		return () => clearTimeout(_);
+	}, [e]);
+}
+var ANIMATION_DURATION_MS = 200, SIZE_CLASSES = {
+	sm: "max-w-md",
+	md: "max-w-lg",
+	lg: "max-w-2xl",
+	xl: "max-w-4xl"
+};
+function Modal({ isOpen: _ = !1, onClose: v, title: y, children: x, size: w = "md", className: T }) {
+	let [E, D] = useState(!1), [O, k] = useState(!1), [A, j] = useState(!1), M = useRunAfterAnimation(ANIMATION_DURATION_MS);
+	useEffect(() => {
+		if (_ && !O) {
+			document.body.style.overflow = "hidden";
+			let e = setTimeout(() => {
+				k(!0), D(!1), requestAnimationFrame(() => {
+					requestAnimationFrame(() => j(!0));
+				});
+			}, 0);
+			return () => clearTimeout(e);
+		}
+		if (!_ && O) {
+			let e = setTimeout(() => {
+				D(!0), j(!1);
+			}, 0), g = M(() => {
+				k(!1), D(!1), document.body.style.overflow = "";
+			});
+			return () => {
+				clearTimeout(e), g();
+			};
+		}
+	}, [
+		_,
+		O,
+		M
+	]), useEffect(() => {
+		if (!_ || E) return;
+		let e = (e) => {
+			e.key === "Escape" && v?.();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		_,
+		E,
+		v
+	]);
+	let N = () => {
+		E || v?.();
+	};
+	if (!O) return null;
+	let P = A && !E;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200", P ? "opacity-100" : "opacity-0"),
+		onClick: N,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", P ? "opacity-100" : "opacity-0"),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx_default("relative w-full", SIZE_CLASSES[w], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", P ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
+			onClick: (e) => e.stopPropagation(),
+			children: [y && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
+					children: y
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: "i-mdi-close",
+					onClick: v?.bind(null),
+					"aria-label": "Close",
+					variant: "ghost",
+					className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", T),
+				children: x
+			})]
+		})]
+	}), document.body);
+}
+function Tabs({ items: _, defaultIndex: v = 0, className: y, tabListClassName: b, panelClassName: x, onChange: C }) {
+	let [w, T] = useState(v), E = (e) => {
+		_[e]?.disabled || (T(e), C?.(e));
+	}, D = _[w];
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx_default("w-full", y),
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", b),
+			children: _.map((_, v) => /* @__PURE__ */ jsxs("button", {
+				role: "tab",
+				type: "button",
+				"aria-selected": w === v,
+				"aria-disabled": _.disabled,
+				disabled: _.disabled,
+				onClick: () => E(v),
+				className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", w === v ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : clsx_default("text-gray-600 dark:text-gray-400 border border-transparent", _.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
+				children: [_.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", _.icon, w === v ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), _.title]
+			}, v))
+		}), /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", x),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "tabs-panel-inner",
+				children: D?.content
+			}, w)
+		})]
+	});
+}
+function Textarea({ label: _, error: v, showCharCount: y = !1, minLength: b, maxLength: C, className: w, wrapperClassName: T, value: E, defaultValue: D, onChange: O, id: k = "textarea", ...j }) {
+	let M = `${k}-${useId()}`, [N, P] = useState(typeof D == "string" ? D.length : 0), F = typeof E == "string" ? E.length : E === void 0 ? N : 0, I = y && (b !== void 0 || C !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx_default("w-full", T),
+		children: [
+			_ && /* @__PURE__ */ jsx("label", {
+				className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
+				htmlFor: M,
+				children: _
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				id: M,
+				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", v && "border-red-500 dark:border-red-400 focus:ring-red-500", w),
+				value: E,
+				defaultValue: D,
+				minLength: b,
+				maxLength: C,
+				onChange: (e) => {
+					E === void 0 && P(e.target.value.length), O?.(e);
+				},
+				...j
+			}),
+			I && /* @__PURE__ */ jsx(CharacterCount, {
+				current: F,
+				min: b,
+				max: C,
+				showMin: b !== void 0,
+				showMax: C !== void 0
+			}),
+			v && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-red-600 dark:text-red-400 mt-1",
+				children: v
+			})
+		]
+	});
+}
+const useIsClient = () => {
+	let [e, g] = useState(!1);
+	return useEffect(() => {
+		requestAnimationFrame(() => {
+			g(!0);
+		});
+	}, []), e;
+};
+function applyTheme(e) {
+	let g = document.documentElement;
+	e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? g.classList.add("dark") : g.classList.remove("dark") : e === "dark" ? g.classList.add("dark") : g.classList.remove("dark");
+}
+function getIcon(g) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx_default({
+			light: "i-tabler-sun text-yellow-500",
+			dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
+			system: "i-tabler-device-desktop text-blue-500"
+		}[g], "w-5 h-5"),
+		style: {
+			width: 20,
+			height: 20
+		}
+	});
+}
+function ThemeToggle() {
+	let [g, _] = useState("system"), v = useIsClient();
+	return useEffect(() => {
+		let e = localStorage.getItem("theme");
+		requestAnimationFrame(() => {
+			e ? (_(e), applyTheme(e)) : (_("system"), applyTheme("system"));
+		});
+	}, []), useEffect(() => {
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), _ = () => {
+			g === "system" && applyTheme("system");
+		};
+		return e.addEventListener("change", _), () => {
+			e.removeEventListener("change", _);
+		};
+	}, [g]), /* @__PURE__ */ jsx("button", {
+		onClick: useCallback(() => {
+			_((e) => {
+				let g;
+				return g = e === "light" ? "dark" : e === "dark" ? "system" : "light", applyTheme(g), localStorage.setItem("theme", g), g;
+			});
+		}, []),
+		className: "p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer",
+		"aria-label": `Thème actuel: ${g}`,
+		children: v ? getIcon(g) : /* @__PURE__ */ jsx("div", {
+			className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
+			style: {
+				width: "20px",
+				height: "20px"
+			}
+		})
+	});
+}
+export { BASE_INPUT_STYLES, Button, CharacterCount, ClientOnly, IconButton, Input, Modal, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useIsClient, useRunAfterAnimation, withClientOnly };

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,109 +1,97 @@
 {
   "name": "@minimalstuff/ui",
-  "version": "0.0.31",
-  "description": "Minimal UI lib for React built on top of Emotion",
+  "version": "1.0.0-4",
   "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
+  "main": "./dist/minimalstuff-ui.js",
+  "module": "./dist/minimalstuff-ui.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
-    }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/minimalstuff-ui.js",
+      "default": "./dist/minimalstuff-ui.js"
+    },
+    "./style.css": "./dist/minimalstuff-ui.css"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/minimalstuff/ui"
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
-  "scripts": {
-    "prepare": "husky",
-    "build": "tsc && vite build",
-    "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
-    "lint": "eslint . --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
-    "dev": "vite",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test-watch": "vitest",
-    "test:ui": "vitest --ui",
-    "test:staged": "vitest related --run",
-    "release": "release-it --only-version",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+  "imports": {
+    "#components/*": "./src/components/*.js",
+    "#hooks/*": "./src/hooks/*.js",
+    "#types/*": "./src/types/*.js",
+    "#utils/*": "./src/utils/*.js"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-toggle": "^4.0.5",
-    "@types/tinycolor2": "^1.4.6",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
-    "release-it": "^17.4.0",
-    "storybook": "^8.1.11",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.2",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0"
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "hex-rgb": "^5.0.0",
-    "js-cookie": "^3.0.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hotkeys-hook": "^4.5.0",
-    "react-icons": "^5.2.1",
-    "react-select": "^5.8.0",
-    "react-toggle": "^4.1.3",
-    "tinycolor2": "^1.6.0"
+    "clsx": "^2.1.1"
   },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "pnpm format",
-      "pnpm lint",
-      "pnpm test:staged"
-    ]
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-onboarding": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@unocss/preset-icons": "^66.6.0",
+    "@unocss/preset-web-fonts": "^66.6.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.3",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.4.0",
+    "playwright": "^1.58.0",
+    "prettier": "3.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "release-it": "^19.2.4",
+    "storybook": "^10.2.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "unocss": "^66.6.0",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   },
-  "volta": {
-    "node": "20.14.0"
+  "prettier": {
+    "trailingComma": "es5",
+    "semi": true,
+    "singleQuote": true,
+    "useTabs": true,
+    "quoteProps": "as-needed",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "printWidth": 80
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
+  "volta": {
+    "node": "24.13.0"
   },
-  "packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
-}
+  "scripts": {
+    "dev": "storybook dev -p 6006 --ci",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "test": "vitest run --config vitest.ci.config.ts",
+    "test:stories": "vitest run",
+    "preview": "vite preview",
+    "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
+    "storybook": "storybook dev -p 6006 ",
+    "build-storybook": "storybook build",
+    "release": "release-it"
+  }
+}