@omnific/atelier 0.1.0

package/README.md

@@ -0,0 +1,20 @@
+# @omnific/atelier
+
+A refined React component library for Omnific.
+
+```tsx
+import { Button } from '@omnific/atelier';
+import '@omnific/atelier/styles.css';
+
+<Button variant='primary'>Continue</Button>;
+```
+
+## Storybook
+
+Curated component examples live under `packages/atelier/__stories__` and
+`packages/*/examples`. Run Storybook from the repository root:
+
+- Local dev: `pnpm storybook`
+- Production build: `pnpm build:storybook`
+- Static output: `packages/atelier/storybook-static`
+- Online preview: https://monhan-97.github.io/omnific/atelier/

package/dist/button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "./types.js";
+//#region button/Button.d.ts
+/**
+ * 通用按钮。
+ */
+export declare const Button: (props: ButtonProps) => import("react").JSX.Element;
+//#endregion

package/dist/button/Button.js

@@ -0,0 +1,43 @@
+import { buttonPrefixCls } from "./constants.js";
+import LoadingIcon from "./LoadingIcon.js";
+import { hasValue, isNil } from "@omnific/utils";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region button/Button.tsx
+/**
+* 通用按钮。
+*/
+const Button = (props) => {
+	const { block = false, children, className, disabled, icon, loading = false, onClick, ref, shape = "default", size = "default", type = "button", variant = "secondary", ...rest } = props;
+	const hasChildren = hasValue(children);
+	const isIconOnly = isNil(children) && (hasValue(icon) || loading);
+	const classes = clsx(buttonPrefixCls, `${buttonPrefixCls}-${variant}`, `${buttonPrefixCls}-size-${size}`, {
+		[`${buttonPrefixCls}-shape-${shape}`]: shape !== "default",
+		[`${buttonPrefixCls}-icon-only`]: isIconOnly,
+		[`${buttonPrefixCls}-block`]: block,
+		[`${buttonPrefixCls}-loading`]: loading
+	}, className);
+	const handleClick = (event) => {
+		if (loading || disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const iconNode = loading || isNil(icon) ? /* @__PURE__ */ jsx(LoadingIcon, {
+		iconOnly: isIconOnly,
+		loading
+	}) : icon;
+	return /* @__PURE__ */ jsxs("button", {
+		...rest,
+		"aria-busy": loading || void 0,
+		className: classes,
+		disabled,
+		onClick: handleClick,
+		ref,
+		type,
+		children: [iconNode, hasChildren && /* @__PURE__ */ jsx("span", { children })]
+	});
+};
+//#endregion
+export { Button };

package/dist/button/LoadingIcon.js

@@ -0,0 +1,45 @@
+import { buttonPrefixCls } from "./constants.js";
+import "../transition/types.js";
+import { useTransitionStatus } from "../transition/useTransitionStatus.js";
+import { clsx } from "clsx";
+import { LoadingIcon } from "@omnific/icons";
+import { jsx } from "react/jsx-runtime";
+//#region button/LoadingIcon.tsx
+/**
+* 渲染按钮内部的加载图标。
+*/
+const LoadingIcon$1 = (props) => {
+	const { className, iconOnly = false, loading = false, style } = props;
+	const { handleRef, isMounted, status } = useTransitionStatus({
+		appear: true,
+		enter: {
+			opacity: 1,
+			scale: 1,
+			width: "auto",
+			marginRight: iconOnly ? 0 : 8
+		},
+		exit: {
+			opacity: 0,
+			scale: 0,
+			width: 0,
+			marginRight: 0
+		},
+		in: loading,
+		unmountOnExit: true
+	});
+	if (!isMounted) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: clsx(`${buttonPrefixCls}-loading-icon`, className),
+		ref: handleRef,
+		style: {
+			visibility: status === "exited" && !loading ? "hidden" : void 0,
+			opacity: 0,
+			width: 0,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(LoadingIcon, { size: "1em" })
+	});
+};
+//#endregion
+export { LoadingIcon$1 as default };

package/dist/button/constants.js

@@ -0,0 +1,8 @@
+import { getPrefixCls } from "../utils/getPrefixCls.js";
+//#region button/constants.ts
+/**
+* Button 组件的 CSS 类名前缀。
+*/
+const buttonPrefixCls = getPrefixCls("button");
+//#endregion
+export { buttonPrefixCls };

package/dist/button/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps, ButtonShape, ButtonVariant } from "./types.js";
+import { Button } from "./Button.js";
+export { Button, type ButtonProps, type ButtonShape, type ButtonVariant };

package/dist/button/index.js

@@ -0,0 +1,2 @@
+import { Button } from "./Button.js";
+export { Button };

package/dist/button/types.d.ts

@@ -0,0 +1,43 @@
+import { ComponentSize } from "../types.js";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region button/types.d.ts
+/**
+ * 按钮形状。
+ */
+export type ButtonShape = 'default' | 'circle' | 'round';
+/**
+ * 按钮视觉变体。危险操作用 `danger`，不再与其他变体叠加。
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'dashed' | 'outline' | 'danger';
+/**
+ * 按钮属性。
+ *
+ * 使用 `interface` 扩展原生 button props，便于 Storybook Docgen 推断 Controls。
+ */
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  /**
+   * 将按钮宽度调整为父容器宽度。
+   */
+  block?: boolean;
+  /**
+   * 设置按钮图标。
+   */
+  icon?: ReactNode;
+  /**
+   * 设置按钮加载状态。
+   */
+  loading?: boolean;
+  /**
+   * 设置按钮形状。
+   */
+  shape?: ButtonShape;
+  /**
+   * 设置按钮大小。
+   */
+  size?: ComponentSize;
+  /**
+   * 设置按钮视觉变体。
+   */
+  variant?: ButtonVariant;
+}
+//#endregion

package/dist/main.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "./button/types.js";
+import { Button } from "./button/Button.js";
+import "./button/index.js";
+import { ENTERED, ENTERING, EXITED, EXITING, TransitionOptions, UNMOUNTED } from "./transition/types.js";
+import { useTransitionStatus } from "./transition/useTransitionStatus.js";
+import "./transition/index.js";
+export { Button, type ButtonProps, ENTERED, ENTERING, EXITED, EXITING, type TransitionOptions, UNMOUNTED, useTransitionStatus };

package/dist/main.js

@@ -0,0 +1,4 @@
+import { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED } from "./transition/types.js";
+import { useTransitionStatus } from "./transition/useTransitionStatus.js";
+import { Button } from "./button/Button.js";
+export { Button, ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED, useTransitionStatus };

package/dist/styles.css

@@ -0,0 +1,175 @@
+:root {
+  --color-text: rgb(0 0 0 / 88%);
+  --color-bg: #ffffff;
+  --color-border: #d9d9d9;
+  --color-primary: #1677ff;
+  --color-primary-hover: #4096ff;
+  --color-primary-active: #0958d9;
+  --color-primary-fg: #ffffff;
+  --color-danger: #ff4d4f;
+  --color-danger-hover: #ff7875;
+  --color-danger-active: #d9363e;
+  --color-danger-fg: #ffffff;
+  --color-disabled-text: rgb(0 0 0 / 25%);
+  --color-disabled-bg: rgb(239 239 239);
+  --focus-ring: rgb(21 112 239 / 25%);
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --control-height-sm: 24px;
+  --control-height-md: 32px;
+  --control-height-lg: 40px;
+  --shadow-control: 0 2px 0 rgb(0 0 0 / 2%);
+  --shadow-primary: 0 2px 0 rgb(5 145 255 / 10%);
+}
+
+.atelier-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--btn-size, var(--control-height-md));
+  padding: 0 15px;
+  line-height: 1.5715;
+  white-space: nowrap;
+}
+.atelier-button > :first-child:not(:only-child) {
+  margin-right: 8px;
+}
+.atelier-button-size-small {
+  --btn-size: var(--control-height-sm);
+  padding: 0 7px;
+}
+.atelier-button-size-large {
+  --btn-size: var(--control-height-lg);
+}
+.atelier-button-shape-circle, .atelier-button-icon-only {
+  width: var(--btn-size, var(--control-height-md));
+  padding: 0;
+}
+.atelier-button-block {
+  display: flex;
+  width: 100%;
+}
+.atelier-button-loading-icon {
+  flex: 0 0 auto;
+  height: 1em;
+  overflow: hidden;
+}
+
+.atelier-button {
+  appearance: none;
+  font: inherit;
+  font-family: var(--font-sans);
+  font-weight: 400;
+  color: var(--btn-color, var(--color-text));
+  user-select: none;
+  cursor: pointer;
+  background: var(--btn-background, var(--color-bg));
+  border: 1px solid var(--btn-border, var(--color-border));
+  border-radius: var(--radius-md);
+  box-shadow: var(--btn-shadow, var(--shadow-control));
+  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
+  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.atelier-button:not(.atelier-button-loading):hover:not(:disabled) {
+  color: var(--btn-hover-color, var(--color-primary-hover));
+  background: var(--btn-hover, var(--color-bg));
+  border-color: var(--btn-hover-border, var(--color-primary-hover));
+}
+.atelier-button:not(.atelier-button-loading):active:not(:disabled) {
+  color: var(--btn-active-color, var(--color-primary-active));
+  background: var(--btn-active, var(--color-bg));
+  border-color: var(--btn-active-border, var(--color-primary-active));
+}
+.atelier-button:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+.atelier-button:disabled, .atelier-button-loading {
+  box-shadow: none;
+}
+.atelier-button:disabled {
+  color: var(--color-disabled-text);
+  cursor: not-allowed;
+  background: var(--color-disabled-bg);
+  border-color: var(--color-border);
+}
+.atelier-button-loading {
+  cursor: default;
+  opacity: 0.65;
+  pointer-events: none;
+}
+.atelier-button-size-small {
+  font-size: var(--font-size-md);
+  border-radius: var(--radius-sm);
+}
+.atelier-button-size-default {
+  font-size: var(--font-size-md);
+  border-radius: var(--radius-md);
+}
+.atelier-button-size-large {
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-lg);
+}
+.atelier-button-shape-round {
+  border-radius: var(--btn-size, var(--control-height-md));
+}
+.atelier-button-shape-circle, .atelier-button-icon-only, .atelier-button-loading-icon {
+  border-radius: 50%;
+}
+.atelier-button > span {
+  display: inline-block;
+}
+.atelier-button-primary {
+  --btn-color: var(--color-primary-fg);
+  --btn-background: var(--color-primary);
+  --btn-border: transparent;
+  --btn-hover: var(--color-primary-hover);
+  --btn-active: var(--color-primary-active);
+  --btn-hover-color: var(--color-primary-fg);
+  --btn-active-color: var(--color-primary-fg);
+  --btn-hover-border: transparent;
+  --btn-active-border: transparent;
+  --btn-shadow: var(--shadow-primary);
+}
+.atelier-button-dashed {
+  border-style: dashed;
+}
+.atelier-button-outline {
+  --btn-color: var(--color-primary);
+  --btn-background: transparent;
+  --btn-border: var(--color-primary);
+  --btn-hover: transparent;
+  --btn-active: transparent;
+  --btn-hover-color: var(--color-primary-hover);
+  --btn-active-color: var(--color-primary-active);
+  --btn-hover-border: var(--color-primary-hover);
+  --btn-active-border: var(--color-primary-active);
+  --btn-shadow: none;
+}
+.atelier-button-danger {
+  --btn-color: var(--color-danger-fg);
+  --btn-background: var(--color-danger);
+  --btn-border: transparent;
+  --btn-hover: var(--color-danger-hover);
+  --btn-active: var(--color-danger-active);
+  --btn-hover-color: var(--color-danger-fg);
+  --btn-active-color: var(--color-danger-fg);
+  --btn-hover-border: transparent;
+  --btn-active-border: transparent;
+  --btn-shadow: var(--shadow-primary);
+}
+.atelier-button-loading-icon > svg {
+  animation: atelier-button-spin 0.7s linear infinite;
+}
+
+@keyframes atelier-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/transition/index.d.ts

@@ -0,0 +1,3 @@
+import { ENTERED, ENTERING, EXITED, EXITING, TransitionChildren, TransitionCycle, TransitionOptions, TransitionResult, TransitionStatus, TransitionStyles, UNMOUNTED, Variant, Variants } from "./types.js";
+import { useTransitionStatus } from "./useTransitionStatus.js";
+export { ENTERED, ENTERING, EXITED, EXITING, TransitionChildren, TransitionCycle, TransitionOptions, TransitionResult, TransitionStatus, TransitionStyles, UNMOUNTED, Variant, Variants, useTransitionStatus };

package/dist/transition/index.js

@@ -0,0 +1,3 @@
+import { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED } from "./types.js";
+import { useTransitionStatus } from "./useTransitionStatus.js";
+export { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED, useTransitionStatus };

package/dist/transition/types.d.ts

@@ -0,0 +1,128 @@
+import { CSSProperties, ReactElement, Ref, RefCallback } from "react";
+import { DOMKeyframesDefinition } from "motion";
+//#region transition/types.d.ts
+/**
+ * 过渡已退出。
+ */
+export declare const EXITED = "exited";
+/**
+ * 过渡正在进入。
+ */
+export declare const ENTERING = "entering";
+/**
+ * 过渡已进入。
+ */
+export declare const ENTERED = "entered";
+/**
+ * 过渡正在退出。
+ */
+export declare const EXITING = "exiting";
+/**
+ * 过渡元素未挂载。
+ */
+export declare const UNMOUNTED = "unmounted";
+/**
+ * 过渡动画当前状态。
+ */
+export type TransitionStatus = typeof UNMOUNTED | typeof EXITED | typeof ENTERING | typeof ENTERED | typeof EXITING;
+/**
+ * 过渡动画生命周期回调。
+ */
+export type TransitionCycle = {
+  /**
+   * 进入动画开始时触发。
+   */
+  onEnter?: (node: HTMLElement) => void;
+  /**
+   * 进入动画完成时触发。
+   */
+  onEntered?: (node: HTMLElement) => void;
+  /**
+   * 退出动画开始时触发。
+   */
+  onExit?: (node: HTMLElement) => void;
+  /**
+   * 退出动画完成时触发。
+   */
+  onExited?: (node: HTMLElement) => void;
+};
+/**
+ * 动画关键帧或根据自定义参数生成关键帧的函数。
+ */
+export type Variant<Custom = unknown> = DOMKeyframesDefinition | ((custom: Custom | undefined, node: HTMLElement) => DOMKeyframesDefinition);
+/**
+ * 进入与退出动画变体集合。
+ */
+export type Variants<Custom = unknown> = Record<'enter' | 'exit', Variant<Custom>>;
+/**
+ * 各过渡状态对应的行内样式。
+ */
+export type TransitionStyles = Partial<Record<TransitionStatus, CSSProperties>>;
+/**
+ * useTransitionStatus Hook 返回的过渡状态。
+ */
+export type TransitionResult = {
+  /**
+   * 同步 Motion 与外部元素引用的回调。
+   */
+  handleRef: RefCallback<HTMLElement> | undefined;
+  /**
+   * 过渡元素当前是否应挂载。
+   */
+  isMounted: boolean;
+  /**
+   * 过渡动画当前状态。
+   */
+  status: TransitionStatus;
+};
+/**
+ * useTransitionStatus Hook 配置。
+ */
+export type TransitionOptions<Custom = unknown> = TransitionCycle & {
+  /**
+   * 组件首次挂载时是否执行进入动画。
+   */
+  appear?: boolean;
+  /**
+   * 传递给动画变体生成函数的自定义参数。
+   */
+  custom?: Custom;
+  /**
+   * 动画持续时间，单位为秒。
+   */
+  duration?: number;
+  /**
+   * 进入动画。
+   */
+  enter?: Variant<Custom>;
+  /**
+   * 退出动画。
+   */
+  exit?: Variant<Custom>;
+  /**
+   * 是否显示元素并触发进入或退出状态。
+   */
+  in?: boolean;
+  /**
+   * 过渡元素引用。
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * 退出动画完成后是否卸载元素。
+   */
+  unmountOnExit?: boolean;
+};
+/**
+ * 可由 Transition 控制的 React 元素。
+ */
+export type TransitionChildren = ReactElement<{
+  /**
+   * 过渡元素引用。
+   */
+  ref: Ref<HTMLElement>;
+  /**
+   * 过渡元素行内样式。
+   */
+  style?: CSSProperties;
+}>;
+//#endregion

package/dist/transition/types.js

@@ -0,0 +1,23 @@
+//#region transition/types.ts
+/**
+* 过渡已退出。
+*/
+const EXITED = "exited";
+/**
+* 过渡正在进入。
+*/
+const ENTERING = "entering";
+/**
+* 过渡已进入。
+*/
+const ENTERED = "entered";
+/**
+* 过渡正在退出。
+*/
+const EXITING = "exiting";
+/**
+* 过渡元素未挂载。
+*/
+const UNMOUNTED = "unmounted";
+//#endregion
+export { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED };

package/dist/transition/useTransitionStatus.d.ts

@@ -0,0 +1,7 @@
+import { TransitionOptions, TransitionResult } from "./types.js";
+//#region transition/useTransitionStatus.d.ts
+/**
+ * 管理元素进入、退出、挂载状态及对应 Motion 动画。
+ */
+export declare const useTransitionStatus: <Custom = unknown>(options: TransitionOptions<Custom>) => TransitionResult;
+//#endregion

package/dist/transition/useTransitionStatus.js

@@ -0,0 +1,54 @@
+import { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED } from "./types.js";
+import { isNil, resolveValue } from "@omnific/utils";
+import { useForkRef } from "@omnific/hooks";
+import { useAnimate } from "motion/react";
+import { useEffectEvent, useLayoutEffect, useState } from "react";
+//#region transition/useTransitionStatus.ts
+/**
+* 管理元素进入、退出、挂载状态及对应 Motion 动画。
+*/
+const useTransitionStatus = (options) => {
+	const { appear = false, custom, duration = .3, enter, exit, in: isOpen = false, onEnter, onEntered, onExit, onExited, ref, unmountOnExit = false } = options;
+	const [scope, animate] = useAnimate();
+	const [status, setStatus] = useState(() => {
+		if (isOpen) return appear ? EXITED : ENTERED;
+		return unmountOnExit ? UNMOUNTED : EXITED;
+	});
+	const handleRef = useForkRef(scope, ref);
+	const handleEnterMotion = useEffectEvent(async () => {
+		if (status === "unmounted") {
+			setStatus(EXITED);
+			return;
+		}
+		if (isNil(enter) || isNil(scope.current)) return;
+		setStatus(ENTERING);
+		onEnter?.(scope.current);
+		await animate(scope.current, resolveValue(enter, custom, scope.current), { duration });
+		setStatus(ENTERED);
+		onEntered?.(scope.current);
+	});
+	const handleExitMotion = useEffectEvent(async () => {
+		if (isNil(exit) || isNil(scope.current)) return;
+		setStatus(EXITING);
+		onExit?.(scope.current);
+		await animate(scope.current, resolveValue(exit, custom, scope.current), { duration });
+		onExited?.(scope.current);
+		setStatus(unmountOnExit ? UNMOUNTED : EXITED);
+	});
+	useLayoutEffect(() => {
+		const canEnter = status === "exited" || status === "unmounted";
+		const canExit = status === "entering" || status === "entered";
+		if (isOpen) {
+			if (canEnter) handleEnterMotion();
+			return;
+		}
+		if (canExit) handleExitMotion();
+	}, [isOpen, status]);
+	return {
+		handleRef,
+		isMounted: status !== UNMOUNTED,
+		status
+	};
+};
+//#endregion
+export { useTransitionStatus };

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+//#region types.d.ts
+/**
+ * 通用控件尺寸。
+ */
+export type ComponentSize = 'small' | 'default' | 'large';
+//#endregion

package/dist/utils/getPrefixCls.js

@@ -0,0 +1,11 @@
+//#region utils/getPrefixCls.ts
+/**
+* Atelier 样式的根类名前缀。
+*/
+const rootPrefixCls = "atelier";
+/**
+* 获取 Atelier 组件的 CSS 类名前缀。
+*/
+const getPrefixCls = (suffixCls) => `${rootPrefixCls}-${suffixCls}`;
+//#endregion
+export { getPrefixCls, rootPrefixCls };

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@omnific/atelier",
+  "version": "0.1.0",
+  "description": "A refined React component library for Omnific",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "react",
+    "components",
+    "ui"
+  ],
+  "author": "monhan-97",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monhan-97/omnific.git",
+    "directory": "packages/atelier"
+  },
+  "bugs": {
+    "url": "https://github.com/monhan-97/omnific.git/issues"
+  },
+  "main": "./dist/main.js",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "default": "./dist/main.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js",
+      "default": "./dist/button/index.js"
+    },
+    "./transition": {
+      "types": "./dist/transition/index.d.ts",
+      "import": "./dist/transition/index.js",
+      "default": "./dist/transition/index.js"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@omnific/hooks": "0.2.1",
+    "@omnific/icons": "0.1.0",
+    "@omnific/types": "0.0.8",
+    "@omnific/utils": "0.3.1",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "motion": "^13.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@omnific/tsconfig": "0.2.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "motion": "^13.4.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass-embedded": "1.104.1"
+  },
+  "scripts": {
+    "dev": "pnpm --dir ../.. storybook",
+    "build": "tsdown -c tsdown.config.mjs && pnpm build:styles",
+    "build:styles": "sass --style=expanded --no-source-map styles/index.scss dist/styles.css",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}