@spacego/fe-components 0.0.1-alpha.1

package/lib/types/store/modules/theme.store.d.ts

@@ -0,0 +1,186 @@
+import { TUpdateStore } from '../../typings';
+export type ThemeMode = 'light' | 'dark' | 'system';
+type State = {
+    theme: ThemeMode;
+    themeColor: string;
+    /** 是否是自定义主题色 */
+    isCustomThemeColor: boolean;
+};
+type Actions = {
+    SET_THEME: (theme: ThemeMode) => void;
+    TOGGLE_THEME: () => void;
+    SET_THEME_COLOR: (color: string) => void;
+    SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    SET_STATE: (data: {
+        key: keyof State;
+        val: State[keyof State];
+    }) => void;
+};
+type Update = TUpdateStore<State>;
+type ThemeStore = State & Actions;
+export declare const useThemeStore: import('zustand').UseBoundStore<Omit<Omit<import('zustand').StoreApi<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+    SET_STATE: (data: Update) => unknown;
+    SET_THEME: (theme: ThemeMode) => void;
+    TOGGLE_THEME: () => void;
+    SET_THEME_COLOR: (color: string) => void;
+    SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+}>, "setState" | "devtools"> & {
+    setState(partial: (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | Partial<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }> | ((state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) => (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | Partial<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }>), replace?: false | undefined, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    setState(state: (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | ((state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) => Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }), replace: true, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    devtools: {
+        cleanup: () => void;
+    };
+}, "setState" | "persist"> & {
+    setState(partial: (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | Partial<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }> | ((state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) => (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | Partial<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }>), replace?: false | undefined, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): unknown;
+    setState(state: (Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) | ((state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }) => Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+        SET_STATE: (data: Update) => unknown;
+        SET_THEME: (theme: ThemeMode) => void;
+        TOGGLE_THEME: () => void;
+        SET_THEME_COLOR: (color: string) => void;
+        SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+    }), replace: true, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): unknown;
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+            SET_STATE: (data: Update) => unknown;
+            SET_THEME: (theme: ThemeMode) => void;
+            TOGGLE_THEME: () => void;
+            SET_THEME_COLOR: (color: string) => void;
+            SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+        }, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+            SET_STATE: (data: Update) => unknown;
+            SET_THEME: (theme: ThemeMode) => void;
+            TOGGLE_THEME: () => void;
+            SET_THEME_COLOR: (color: string) => void;
+            SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+        }) => void) => () => void;
+        onFinishHydration: (fn: (state: Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+            SET_STATE: (data: Update) => unknown;
+            SET_THEME: (theme: ThemeMode) => void;
+            TOGGLE_THEME: () => void;
+            SET_THEME_COLOR: (color: string) => void;
+            SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+        }) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<Omit<ThemeStore, "SET_STATE" | "SET_THEME" | "TOGGLE_THEME" | "SET_THEME_COLOR" | "SET_IS_CUSTOM_THEME_COLOR"> & {
+            SET_STATE: (data: Update) => unknown;
+            SET_THEME: (theme: ThemeMode) => void;
+            TOGGLE_THEME: () => void;
+            SET_THEME_COLOR: (color: string) => void;
+            SET_IS_CUSTOM_THEME_COLOR: (isCustom: boolean) => void;
+        }, unknown, unknown>>;
+    };
+}>;
+export {};

package/lib/types/utils/icon.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+/**
+ * 根据图标名称获取图标组件
+ * @param iconName 图标名称，如 'HomeOutlined'
+ * @returns 图标组件
+ */
+export declare function getIcon(iconName?: string): ComponentType<any> | null;
+/**
+ * 渲染图标
+ * @param iconName 图标名称
+ * @param props 图标属性
+ * @returns JSX元素
+ */
+export declare function renderIcon(iconName?: string, props?: any): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './theme';

package/lib/types/utils/theme.d.ts

@@ -0,0 +1,43 @@
+import { ThemeMode } from '../store';
+/**
+ * 获取当前主题（实际显示的 light/dark）
+ * @param mode 主题模式 (light/dark/system)
+ * @returns 实际主题 (light/dark)
+ */
+export declare function getRealTheme(mode: ThemeMode): 'light' | 'dark';
+/**
+ * 应用主题到 DOM
+ * @param theme 主题模式
+ */
+export declare function applyTheme(theme: ThemeMode): void;
+/**
+ * 获取当前主题
+ * @returns 当前主题模式
+ */
+export declare function getTheme(): ThemeMode;
+/**
+ * 监听系统主题变化
+ */
+export declare function listenSystemTheme(): void;
+/**
+ * 初始化主题
+ */
+export declare function initTheme(): ThemeMode;
+/**
+ * 切换主题
+ * @param currentTheme 当前主题
+ * @returns 新主题
+ */
+export declare function toggleTheme(currentTheme: ThemeMode): ThemeMode;
+/**
+ * 应用主题色到 DOM
+ * @param color 主题色
+ */
+export declare function applyThemeColor(color: string): void;
+/**
+ * 从指定位置开始应用主题过渡效果
+ * @param theme 新主题模式
+ * @param x 点击位置的 x 坐标
+ * @param y 点击位置的 y 坐标
+ */
+export declare function applyThemeWithTransition(theme: ThemeMode, x: number, y: number): Promise<void>;

package/lib/utils/icon.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as c from "@ant-design/icons";
+function e(n) {
+  return n && c[n] || null;
+}
+function l(n, o) {
+  const t = e(n);
+  return t ? /* @__PURE__ */ r(t, { ...o }) : null;
+}
+export {
+  e as getIcon,
+  l as renderIcon
+};

package/lib/utils/theme.js

@@ -0,0 +1,100 @@
+import "../store/modules/layout-config.store.js";
+import { useThemeStore as u } from "../store/modules/theme.store.js";
+const p = "data-theme";
+function w(e) {
+  return e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
+}
+function r(e) {
+  const t = document.documentElement, n = w(e);
+  t.setAttribute(p, n), t.classList.toggle("dark", n === "dark");
+}
+function T() {
+  const t = document.documentElement.getAttribute(p);
+  if (t && (t === "light" || t === "dark"))
+    return t;
+  const { theme: n } = u.getState();
+  return n && (n === "light" || n === "dark") ? n : window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function k() {
+  const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (n) => {
+    const { theme: a } = u.getState();
+    if (a === "system") {
+      const s = n.matches ? "dark" : "light";
+      document.documentElement.classList.toggle("dark", s === "dark");
+    }
+  };
+  e.addEventListener("change", t);
+}
+function v() {
+  const e = T();
+  return r(e), k(), e;
+}
+function M(e) {
+  let t;
+  return e === "system" ? t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark" : t = e === "light" ? "dark" : "light", r(t), t;
+}
+function $(e) {
+  document.documentElement && document.documentElement.style.setProperty("--color-primary", e);
+}
+function P(e, t, n) {
+  return document.startViewTransition ? new Promise((a) => {
+    const s = window.innerWidth, f = window.innerHeight, o = t, i = n, g = Math.hypot(
+      Math.max(o, s - o),
+      Math.max(i, f - i)
+    ), m = w(e) === "dark", c = document.createElement("style");
+    c.innerHTML = `
+      ::view-transition-old(root),
+      ::view-transition-new(root) {
+        animation: none;
+        mix-blend-mode: normal;
+        display: block;
+      }
+      ${m ? `
+        ::view-transition-old(root) { z-index: 9999; }
+        ::view-transition-new(root) { z-index: 1; }
+      ` : ""}
+    `, document.head.appendChild(c);
+    const d = document.startViewTransition(() => {
+      r(e), a();
+    });
+    d.ready.then(() => {
+      const l = [
+        `circle(0px at ${o}px ${i}px)`,
+        `circle(${g}px at ${o}px ${i}px)`
+      ], h = {
+        duration: 500,
+        easing: "ease-in-out",
+        fill: "forwards"
+      };
+      m ? document.documentElement.animate(
+        {
+          clipPath: [...l].reverse()
+        },
+        {
+          ...h,
+          pseudoElement: "::view-transition-old(root)"
+        }
+      ) : document.documentElement.animate(
+        {
+          clipPath: l
+        },
+        {
+          ...h,
+          pseudoElement: "::view-transition-new(root)"
+        }
+      );
+    }), d.finished.then(() => {
+      document.head.removeChild(c);
+    });
+  }) : (r(e), Promise.resolve());
+}
+export {
+  r as applyTheme,
+  $ as applyThemeColor,
+  P as applyThemeWithTransition,
+  w as getRealTheme,
+  T as getTheme,
+  v as initTheme,
+  k as listenSystemTheme,
+  M as toggleTheme
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@spacego/fe-components",
+  "version": "0.0.1-alpha.1",
+  "description": "🚀 A component library for fe to use.",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.js"
+    },
+    "./*": {
+      "types": "./lib/types/*.d.ts",
+      "import": "./lib/*.js",
+      "require": "./lib/*.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [
+    "components",
+    "react",
+    "spacego",
+    "fe"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "author": "dshuais",
+  "license": "MIT",
+  "packageManager": "pnpm@10.8.0",
+  "devDependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@spacego/turbo-utils": "workspace:^",
+    "@spacego/zustand": "workspace:^",
+    "@vitejs/plugin-react-swc": "3.5.0",
+    "antd": "^6.2.1",
+    "axios": "^1.13.4",
+    "nprogress": "^0.2.0",
+    "react": "^18.2.0",
+    "@types/react": "^18.2.66",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.12.0",
+    "rollup-plugin-clear": "^2.0.7",
+    "sass": "^1.97.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-svgr": "^4.5.0",
+    "zustand": "^5.0.10",
+    "@tailwindcss/vite": "^4.1.18"
+  }
+}

package/src/assets/styles/animate.css

@@ -0,0 +1,62 @@
+@keyframes enter-x-animation {
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-right {
+  0% {
+    opacity: 0;
+    transform: translate(50px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+@keyframes exit-x-animation {
+  0% {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(50px);
+  }
+}
+
+@keyframes scale-pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.hover-scale-animation:hover {
+  animation: scale-pulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/src/assets/styles/index.css

@@ -0,0 +1,49 @@
+@import "./animate.css";
+
+/* 配置 Tailwind CSS dark 模式为 class 模式，而不是跟随系统 */
+/* 这样 dark: 前缀会基于 html.dark 类，而不是系统主题 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --color-primary: #006BE6;
+  --global-background-color: white;
+  --border-color: #e4e4e7;
+  --text-color: #323639;
+}
+
+[data-theme='dark'] {
+  --global-background-color: #1a1c1f;
+  --border-color: #36363a;
+  --text-color: #f2f2f2;
+}
+
+html {
+  background-color: var(--global-background-color);
+  --hover-primary-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+
+#root,
+body,
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  min-height: 100vh;
+}
+
+/* Spin 遮罩样式，确保在当前容器内撑满 */
+.spin-wrapper-full {
+  width: 100%;
+  height: 100%;
+
+  .ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ant-spin {
+    max-height: 100% !important;
+  }
+}

package/src/assets/svg/chrome-bg-after.svg

@@ -0,0 +1 @@
+<svg data-v-f1ce25ed="" class="tabs-chrome__background-after absolute bottom-0 right-[-7px] fill-transparent transition-all duration-500 group-[.is-active]:fill-(--background-primary-light)" height="7" width="7"><path data-v-f1ce25ed="" d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path></svg>

package/src/assets/svg/chrome-bg-before.svg

@@ -0,0 +1 @@
+<svg data-v-f1ce25ed="" class="tabs-chrome__background-before absolute bottom-0 left-[-7px] fill-transparent transition-all duration-500 group-[.is-active]:fill-(--background-primary-light)" height="7" width="7"><path data-v-f1ce25ed="" d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z"></path></svg>

package/src/assets/svg/icon-arrows-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg>

package/src/assets/svg/icon-bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide size-4 lucide-bell-icon lucide-bell size-4"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>

package/src/assets/svg/icon-custom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide z-1 absolute size-5 opacity-60"><path d="M2 21a8 8 0 0 1 10.821-7.487"></path><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"></path><circle cx="10" cy="8" r="5"></circle></svg>

package/src/assets/svg/icon-sun-moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide mx-9 size-5 lucide-sun-moon-icon lucide-sun-moon mx-9 size-5"><path d="M12 2v2"></path><path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"></path><path d="M16 12a4 4 0 0 0-4-4"></path><path d="m19 5-1.256 1.256"></path><path d="M20 12h2"></path></svg>

package/src/assets/svg/icon-system.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide size-4 lucide-settings-icon lucide-settings size-4"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>

package/src/assets/svg/loading.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="spin-animation">
+  <g clipPath="url(#clip0_324_2488)">
+    <path d="M15 0H10C9.44772 0 9 0.447715 9 1V6C9 6.55228 9.44772 7 10 7H15C15.5523 7 16 6.55228 16 6V1C16 0.447715 15.5523 0 15 0Z" fill="var(--color-primary)" />
+    <path opacity="0.5" d="M15 9H10C9.44772 9 9 9.44772 9 10V15C9 15.5523 9.44772 16 10 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9Z" fill="var(--color-primary)" />
+    <path opacity="0.1" d="M6 9H1C0.447715 9 0 9.44772 0 10V15C0 15.5523 0.447715 16 1 16H6C6.55228 16 7 15.5523 7 15V10C7 9.44772 6.55228 9 6 9Z" fill="var(--color-primary)" />
+    <path opacity="0.2" d="M6 0H1C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H6C6.55228 7 7 6.55228 7 6V1C7 0.447715 6.55228 0 6 0Z" fill="var(--color-primary)" />
+  </g>
+  <defs>
+    <clipPath id="clip0_324_2488">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>