@inspirecn/react 1.0.0

package/dist/styles/tokens.css

@@ -0,0 +1,249 @@
+/**
+ * Design Tokens
+ * Auto-generated from tokens.json
+ * Generated at: 2/15/2026, 12:12:44 PM
+ */
+
+@theme {
+  /* Color */
+  --color-primary-25: #F2F4FF;
+  --color-primary-50: #E4E9FF;
+  --color-primary-100: #C6D0FF;
+  --color-primary-200: #A3B3FF;
+  --color-primary-300: #7591FF;
+  --color-primary-400: #2A6EFF;
+  --color-primary-500: #0052FF;
+  --color-primary-600: #0049E4;
+  --color-primary-700: #0040C6;
+  --color-primary-800: #0034A1;
+  --color-primary-900: #002572;
+  --color-primary-950: #00040B;
+  --color-grey-25: #FFFFFF;
+  --color-grey-50: #F9F9F9;
+  --color-grey-100: #F5F5F5;
+  --color-grey-200: #F3F3F3;
+  --color-grey-300: #EEEEEE;
+  --color-grey-400: #A5A5A5;
+  --color-grey-500: #787878;
+  --color-grey-600: #4B4B4B;
+  --color-grey-700: #353535;
+  --color-grey-800: #333333;
+  --color-grey-900: #292929;
+  --color-grey-950: #222222;
+  --color-pomegranate-25: #FFFBFB;
+  --color-pomegranate-50: #FFF2F1;
+  --color-pomegranate-100: #FFE2DF;
+  --color-pomegranate-200: #FFCBC5;
+  --color-pomegranate-300: #FFA69D;
+  --color-pomegranate-400: #FF7364;
+  --color-pomegranate-500: #FF3722;
+  --color-pomegranate-600: #ED2A15;
+  --color-pomegranate-700: #C81F0D;
+  --color-pomegranate-800: #A51D0F;
+  --color-pomegranate-900: #881F14;
+  --color-pomegranate-950: #4B0B04;
+  --color-lima-25: #FCFEFA;
+  --color-lima-50: #F5FFE6;
+  --color-lima-100: #E7FDCA;
+  --color-lima-200: #D1FB9B;
+  --color-lima-300: #B2F660;
+  --color-lima-400: #93EB30;
+  --color-lima-500: #73CF11;
+  --color-lima-600: #58A709;
+  --color-lima-700: #437F0C;
+  --color-lima-800: #386410;
+  --color-lima-900: #305512;
+  --color-lima-950: #162F04;
+  --color-supernova-25: #FFFEFA;
+  --color-supernova-50: #FFFEE7;
+  --color-supernova-100: #FFFEC1;
+  --color-supernova-200: #FFF986;
+  --color-supernova-300: #FFEE41;
+  --color-supernova-400: #FFDD0D;
+  --color-supernova-500: #FFCE00;
+  --color-supernova-600: #D19700;
+  --color-supernova-700: #A66B02;
+  --color-supernova-800: #89540A;
+  --color-supernova-900: #74440F;
+  --color-supernova-950: #442304;
+  --color-flush-orange-25: #FFFDFB;
+  --color-flush-orange-50: #FFF8EB;
+  --color-flush-orange-100: #FFEFD4;
+  --color-flush-orange-200: #FFDBAB;
+  --color-flush-orange-300: #FFC070;
+  --color-flush-orange-400: #FF9437;
+  --color-flush-orange-500: #FF8622;
+  --color-flush-orange-600: #F06006;
+  --color-flush-orange-700: #C74707;
+  --color-flush-orange-800: #9E380E;
+  --color-flush-orange-900: #7F3A0F;
+  --color-flush-orange-950: #451605;
+  
+  /* Radius */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-2xl: 48px;
+  --radius-full: 100%;
+  
+  /* Typography */
+  --font-sans: "GT Walsheim", sans-serif;
+  --text-heading-3xl: 48px;
+  --text-heading-3xl--line-height: 60px;
+  --text-heading-2xl: 32px;
+  --text-heading-2xl--line-height: 40px;
+  --text-heading-xl: 24px;
+  --text-heading-xl--line-height: 30px;
+  --text-heading-lg: 20px;
+  --text-heading-lg--line-height: 24px;
+  --text-heading-md: 18px;
+  --text-heading-md--line-height: 22px;
+  --text-heading-sm: 16px;
+  --text-heading-sm--line-height: 20px;
+  --text-heading-xs: 14px;
+  --text-heading-xs--line-height: 16px;
+  --text-text-xl: 20px;
+  --text-text-xl--line-height: 30px;
+  --text-text-lg: 18px;
+  --text-text-lg--line-height: 28px;
+  --text-text-md: 16px;
+  --text-text-md--line-height: 24px;
+  --text-text-sm: 14px;
+  --text-text-sm--line-height: 20px;
+  --text-text-xs: 12px;
+  --text-text-xs--line-height: 18px;
+  --text-text-xxs: 12px;
+  --text-text-xxs--line-height: 14px;
+  
+  /* Semantic Color Mappings */
+  --color-surface-white: var(--surface-white);
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-surface-tag: var(--surface-tag);
+  --color-surface-icon: var(--surface-icon);
+  --color-cta-primary: var(--cta-primary);
+  --color-cta-secondary: var(--cta-secondary);
+  --color-cta-tertiary: var(--cta-tertiary);
+  --color-focused: var(--focused);
+  --color-hover-primary: var(--hover-primary);
+  --color-hover-secondary: var(--hover-secondary);
+  --color-hover-tertiary: var(--hover-tertiary);
+  --color-delete: var(--delete);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-brand: var(--text-brand);
+  --color-text-white: var(--text-white);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-muted: var(--text-muted);
+  --color-border-primary: var(--border-primary);
+  --color-border-white: var(--border-white);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-brand: var(--icon-brand);
+  --color-icon-white: var(--icon-white);
+  --color-black: var(--black);
+  --color-white: var(--white);
+  --color-delivered: var(--delivered);
+  --color-bounced: var(--bounced);
+  --color-cancelled: var(--cancelled);
+  --color-clicked: var(--clicked);
+  --color-complained: var(--complained);
+  --color-delivered-delayed: var(--delivered-delayed);
+  --color-failed: var(--failed);
+  --color-opened: var(--opened);
+  --color-scheduled: var(--scheduled);
+  --color-sent: var(--sent);
+  --color-queued: var(--queued);
+  --color-suppressed: var(--suppressed);
+  
+}
+
+:root {
+  --surface-white: var(--color-grey-25);
+  --surface-secondary: var(--color-grey-100);
+  --surface-tertiary: var(--color-grey-50);
+  --surface-tag: var(--color-grey-300);
+  --surface-icon: var(--color-primary-25);
+  --cta-primary: var(--color-primary-500);
+  --cta-secondary: var(--color-grey-300);
+  --cta-tertiary: var(--color-grey-200);
+  --focused: var(--color-primary-200);
+  --hover-primary: var(--color-grey-25);
+  --hover-secondary: var(--color-grey-200);
+  --hover-tertiary: var(--color-grey-50);
+  --delete: var(--color-pomegranate-500);
+  --text-primary: var(--color-primary-950);
+  --text-secondary: var(--color-grey-600);
+  --text-brand: var(--color-primary-500);
+  --text-white: var(--color-grey-25);
+  --text-tertiary: var(--color-grey-500);
+  --text-muted: var(--color-grey-300);
+  --border-primary: var(--color-grey-300);
+  --border-white: var(--color-grey-25);
+  --icon-primary: var(--color-primary-950);
+  --icon-secondary: var(--color-grey-600);
+  --icon-tertiary: var(--color-grey-500);
+  --icon-brand: var(--color-primary-500);
+  --icon-white: var(--color-grey-25);
+  --black: var(--color-grey-950);
+  --white: var(--color-grey-25);
+  --delivered: var(--color-lima-500);
+  --bounced: var(--color-pomegranate-700);
+  --cancelled: var(--color-grey-500);
+  --clicked: var(--color-primary-300);
+  --complained: var(--color-pomegranate-300);
+  --delivered-delayed: var(--color-supernova-500);
+  --failed: var(--color-pomegranate-500);
+  --opened: var(--color-primary-500);
+  --scheduled: var(--color-primary-200);
+  --sent: var(--color-lima-300);
+  --queued: var(--color-supernova-600);
+  --suppressed: var(--color-grey-800);
+}
+
+.dark {
+  --surface-white: var(--color-grey-900);
+  --surface-secondary: var(--color-grey-800);
+  --surface-tertiary: var(--color-grey-950);
+  --surface-tag: var(--color-grey-700);
+  --surface-icon: var(--color-primary-600);
+  --cta-primary: var(--color-primary-500);
+  --cta-secondary: var(--color-grey-700);
+  --cta-tertiary: var(--color-grey-800);
+  --focused: var(--color-primary-200);
+  --hover-primary: var(--color-grey-25);
+  --hover-secondary: var(--color-grey-800);
+  --hover-tertiary: var(--color-grey-25);
+  --delete: var(--color-pomegranate-500);
+  --text-primary: var(--color-grey-50);
+  --text-secondary: var(--color-grey-400);
+  --text-brand: var(--color-primary-500);
+  --text-white: var(--color-grey-950);
+  --text-tertiary: var(--color-grey-500);
+  --text-muted: var(--color-primary-950);
+  --border-primary: var(--color-grey-700);
+  --border-white: var(--color-grey-800);
+  --icon-primary: var(--color-grey-25);
+  --icon-secondary: var(--color-grey-25);
+  --icon-tertiary: var(--color-grey-25);
+  --icon-brand: var(--color-primary-500);
+  --icon-white: var(--color-grey-25);
+  --black: var(--color-grey-950);
+  --white: var(--color-grey-25);
+  --delivered: var(--color-lima-500);
+  --bounced: var(--color-pomegranate-700);
+  --cancelled: var(--color-grey-500);
+  --clicked: var(--color-primary-300);
+  --complained: var(--color-pomegranate-300);
+  --delivered-delayed: var(--color-supernova-500);
+  --failed: var(--color-pomegranate-500);
+  --opened: var(--color-primary-500);
+  --scheduled: var(--color-primary-200);
+  --sent: var(--color-lima-300);
+  --queued: var(--color-supernova-600);
+  --suppressed: var(--color-grey-800);
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function ThemeProviders({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAYzE"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,17 @@
+import { ThemeProvider as r } from "next-themes";
+import { jsx as t } from "react/jsx-runtime";
+function i({
+  children: e
+}) {
+  return /* @__PURE__ */ t(r, {
+    attribute: "class",
+    defaultTheme: "system",
+    enableSystem: !0,
+    disableTransitionOnChange: !0,
+    enableColorScheme: !0,
+    children: e
+  });
+}
+export {
+  i as ThemeProviders
+};

package/dist/theme/ToggleTheme.d.ts

@@ -0,0 +1,2 @@
+export declare const ToggleTheme: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToggleTheme.d.ts.map

package/dist/theme/ToggleTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleTheme.d.ts","sourceRoot":"","sources":["../../src/theme/ToggleTheme.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,+CA2BvB,CAAC"}

package/dist/theme/ToggleTheme.js

@@ -0,0 +1,29 @@
+import { Sun as a, Moon as o } from "lucide-react";
+import { useEffect as i } from "react";
+import { useTheme as l } from "./theme.js";
+import { cn as s } from "../lib/utils.js";
+import { jsx as e } from "react/jsx-runtime";
+const g = () => {
+  const {
+    theme: t,
+    setTheme: r
+  } = l();
+  return i(() => {
+    document.body.classList.toggle("dark", t === "dark");
+  }, [t]), /* @__PURE__ */ e("button", {
+    onClick: () => r(t === "light" ? "dark" : "light"),
+    className: "relative h-6 w-11 rounded-full bg-gray-200 transition-colors duration-200 dark:bg-gray-700",
+    "aria-label": `Switch to ${t === "light" ? "dark" : "light"} theme`,
+    children: /* @__PURE__ */ e("div", {
+      className: s("absolute left-0.5 top-0.5 flex h-5 w-5 transform items-center justify-center rounded-full bg-white transition-transform duration-200 ease-in-out dark:bg-gray-600", t === "dark" ? "translate-x-5" : ""),
+      children: t === "light" ? /* @__PURE__ */ e(a, {
+        className: "h-3 w-3 text-amber-500"
+      }) : /* @__PURE__ */ e(o, {
+        className: "h-3 w-3 text-slate-200"
+      })
+    })
+  });
+};
+export {
+  g as ToggleTheme
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ThemeProvider';
+export * from './ToggleTheme';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,9 @@
+import { ThemeProviders as r } from "./ThemeProvider.js";
+import { ToggleTheme as t } from "./ToggleTheme.js";
+import { ThemeContext as h, useTheme as x } from "./theme.js";
+export {
+  h as ThemeContext,
+  r as ThemeProviders,
+  t as ToggleTheme,
+  x as useTheme
+};

package/dist/theme/theme.d.ts

@@ -0,0 +1,8 @@
+export type Theme = 'light' | 'dark';
+export type ThemeContextType = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextType>;
+export declare const useTheme: () => ThemeContextType;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,YAAY,2CAGvB,CAAC;AAEH,eAAO,MAAM,QAAQ,wBAQpB,CAAC"}

package/dist/theme/theme.js

@@ -0,0 +1,15 @@
+import { createContext as t, useContext as o } from "react";
+const r = t({
+  theme: "light",
+  setTheme: () => {
+  }
+}), h = () => {
+  const e = o(r);
+  if (!e)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return e;
+};
+export {
+  r as ThemeContext,
+  h as useTheme
+};

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

@@ -0,0 +1,156 @@
+{
+  "name": "@inspirecn/react",
+  "version": "1.0.0",
+  "homepage": "https://inspirecn.vercel.app",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "postcss.config.mjs",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "tsc -p tsconfig.app.json --watch & cross-env NODE_ENV=development vite build --watch --mode development",
+    "build": "cross-env NODE_ENV=production vite build && pnpm build:types",
+    "build:types": "tsc -p tsconfig.app.json --emitDeclarationOnly",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "clean": "git clean -xdf .cache .turbo node_modules dist",
+    "gen:tokens": "npx tsx scripts/generate-tokens.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "default": "./dist/components/*.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "default": "./dist/hooks/*.js"
+    },
+    "./lib": {
+      "types": "./dist/lib/index.d.ts",
+      "default": "./dist/lib/index.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "default": "./dist/lib/*.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "default": "./dist/theme/*.js"
+    },
+    "./styles/tokens.json": "./src/styles/tokens.json",
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./global.css": "./src/styles/globals.css"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
+    "@hookform/resolvers": "^5.2.2",
+    "@mdx-js/mdx": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tailwindcss/postcss": "catalog:",
+    "@tailwindcss/typography": "^0.5.19",
+    "@vidstack/react": "^1.12.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "highlight.js": "^11.11.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "catalog:",
+    "motion": "^12.29.2",
+    "next-themes": "^0.4.6",
+    "react": "catalog:react-19",
+    "react-day-picker": "9.13.0",
+    "react-dom": "catalog:react-19",
+    "react-dropzone": "^14.4.0",
+    "react-error-boundary": "^6.1.0",
+    "react-hook-form": "^7.71.1",
+    "react-image-crop": "^11.0.10",
+    "react-phone-number-input": "^3.4.14",
+    "react-resizable-panels": "^4.5.7",
+    "recharts": "^2.15.3",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-emoji": "^5.0.2",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "sonner": "^2.0.7",
+    "swr": "^2.4.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "unified": "^11.0.5",
+    "vaul": "^1.1.2",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@inspirecn/typescript-config": "workspace:^",
+    "@storybook/react": "10.2.4",
+    "@storybook/react-vite": "10.2.4",
+    "@types/react": "catalog:react-19",
+    "@types/react-dom": "catalog:react-19",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "cross-env": "^10.1.0",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "glob": "^13.0.0",
+    "globals": "^17.3.0",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-static-copy": "^3.2.0"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/src/styles/globals.css

@@ -0,0 +1,60 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './tokens.css';
+@import '../../public/fonts/index.css';
+
+@source '../../../apps/**/*.{ts,tsx}';
+@source '../../../components/**/*.{ts,tsx}';
+@source '../**/*.{ts,tsx}';
+@source '../../../apps/storybook/**/*.{ts,tsx}';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border-primary;
+  }
+  body {
+    @apply bg-surface-white text-text-primary;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .codebox-scroll::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .codebox-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .codebox-scroll::-webkit-scrollbar-thumb {
+    background-color: var(--color-border-primary);
+    border-radius: 5px;
+    background-clip: content-box;
+    border: 2px solid transparent;
+  }
+
+  .codebox-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-text-secondary);
+  }
+
+  .codebox-scroll {
+    scrollbar-width: thin;
+    margin-right: 4px;
+    scrollbar-color: var(--color-border-primary) transparent;
+  }
+
+  .shadow-primary {
+    box-shadow: 0px 4px 30px 0px rgba(0, 4, 11, 0.1);
+  }
+}