@nextop-os/ui-system 0.0.17 → 0.0.18

package/dist/styles/base.css

@@ -3,12 +3,32 @@
 @layer base {
   * {
     box-sizing: border-box;
+    scrollbar-width: none;
+  }
+
+  *::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
   }
 
   html {
     color-scheme: light;
   }
 
+  :root {
+    --modal-open-dur: 250ms;
+    --modal-close-dur: 150ms;
+    --modal-scale: 0.96;
+    --modal-scale-close: 0.96;
+    --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --dropdown-open-dur: 250ms;
+    --dropdown-close-dur: 150ms;
+    --dropdown-pre-scale: 0.97;
+    --dropdown-closing-scale: 0.99;
+    --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
   html[data-theme="dark"] {
     color-scheme: dark;
   }
@@ -35,15 +55,73 @@
       linear-gradient(180deg, var(--background) 0%, var(--background-soft) 100%);
     color: var(--foreground);
     font-family: var(--font-sans-system);
+    font-weight: var(--font-weight-regular);
     line-height: 1.5;
     text-rendering: optimizeLegibility;
   }
 
+  :where(:lang(zh), [lang^="zh"]) {
+    --font-weight-regular: var(--font-weight-regular-cjk);
+  }
+
   body,
   #app {
     min-height: 100vh;
   }
 
+  @keyframes nextop-dropdown-open {
+    from {
+      transform: scale(var(--dropdown-pre-scale));
+      opacity: 0;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes nextop-dropdown-close {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(var(--dropdown-closing-scale));
+      opacity: 0;
+    }
+  }
+
+  .t-dropdown {
+    transform: scale(var(--dropdown-pre-scale));
+    opacity: 0;
+    pointer-events: none;
+    will-change: transform, opacity;
+  }
+
+  .t-dropdown[data-state="open"] {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
+    animation: nextop-dropdown-open var(--dropdown-open-dur)
+      var(--dropdown-ease) both;
+  }
+
+  .t-dropdown[data-state="closed"] {
+    transform: scale(var(--dropdown-closing-scale));
+    opacity: 0;
+    pointer-events: none;
+    animation: nextop-dropdown-close var(--dropdown-close-dur)
+      var(--dropdown-ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-dropdown {
+      animation: none !important;
+    }
+  }
+
   button,
   input,
   textarea,
@@ -59,3 +137,10 @@
     outline: none;
   }
 }
+
+@layer utilities {
+  :where(:lang(zh), [lang^="zh"]).font-normal,
+  :where(:lang(zh), [lang^="zh"]) :where(.font-normal) {
+    font-weight: var(--font-weight-regular-cjk);
+  }
+}

package/dist/styles/index.css

@@ -1,3 +1,4 @@
+@import "@fontsource-variable/lexend";
 @import "./theme.css";
 @import "./semantic.css";
 @import "./base.css";

package/dist/styles/semantic.css

@@ -3,6 +3,7 @@
   --font-mono: var(--font-mono-system);
 
   --color-background: var(--background);
+  --color-background-panel: var(--background-panel);
   --color-background-fronted: var(--background-fronted);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -15,11 +16,16 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-disabled: var(--text-disabled);
+  --color-white-stationary: var(--white-stationary);
+  --color-black-stationary: var(--black-stationary);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
+  --color-border-1: var(--border-1);
   --color-input: var(--input);
   --color-ring: var(--ring);
 
@@ -30,6 +36,7 @@
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-transparency-block: var(--transparency-block);
+  --color-transparency-hover: var(--transparency-hover);
 
   --radius-sm: calc(var(--radius) - 0.375rem);
   --radius-md: calc(var(--radius) - 0.25rem);

package/dist/styles/theme.css

@@ -1,15 +1,33 @@
 :root {
   --font-sans-system:
-    "Geist", "SF Pro Text", "IBM Plex Sans", "Segoe UI", sans-serif;
+    "Lexend Variable", "Lexend", -apple-system, BlinkMacSystemFont,
+    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC",
+    "Source Han Sans SC", system-ui, sans-serif;
+  --font-ui: var(--font-sans-system);
+  --font-display: var(--font-ui);
   --font-mono-system:
     "Geist Mono", "SF Mono", "IBM Plex Mono", "JetBrains Mono", monospace;
+  --font-weight-regular: 400;
+  --font-weight-regular-cjk: 500;
 
   --radius: 0.625rem;
 
   --background: oklch(0.986 0.004 84);
+  --background-panel: rgb(248 250 252);
   --background-fronted: rgb(255 255 255 / 1);
   --background-soft: oklch(0.968 0.006 84);
   --foreground: oklch(0.248 0.016 258);
+  --text-primary: rgb(0 0 0);
+  --text-primary-hover: rgb(0 0 0 / 90%);
+  --text-tertiary: rgb(43 43 43 / 50%);
+  --text-placeholder: rgb(0 0 0 / 30%);
+  --text-inverted: rgb(255 255 255);
+  --white-stationary: rgb(255 255 255);
+  --black-stationary: rgb(0 0 0);
+  --toast-neutral-bg: var(--black-stationary);
+  --toast-neutral-fg: var(--white-stationary);
+  --toast-neutral-border: rgb(255 255 255 / 14%);
+  --toast-shadow-color: rgb(19 24 38 / 18%);
 
   --card: oklch(0.995 0.003 84 / 88%);
   --card-foreground: var(--foreground);
@@ -22,13 +40,33 @@
   --secondary-foreground: oklch(0.314 0.018 258);
   --muted: oklch(0.958 0.005 84);
   --muted-foreground: oklch(0.528 0.013 258);
+  --text-secondary: rgb(43 43 43 / 70%);
+  --text-disabled: rgb(0 0 0 / 30%);
+  --rich-text-mention-file: rgb(80, 175, 238);
   --accent: oklch(0.944 0.012 247);
   --accent-foreground: oklch(0.302 0.02 258);
   --destructive: oklch(0.62 0.21 25);
   --destructive-foreground: oklch(0.985 0.004 25);
+  --state-danger: rgb(220 38 38);
+  --state-danger-hover: color-mix(
+    in srgb,
+    var(--state-danger) 90%,
+    transparent
+  );
+  --state-success: rgb(34 197 94);
+  --on-danger: rgb(255 238 242);
+  --on-danger-hover: color-mix(
+    in srgb,
+    var(--on-danger) 92%,
+    var(--state-danger)
+  );
   --border: oklch(0.904 0.005 252);
+  --border-1: rgb(0 0 0 / 8%);
+  --border-2: rgb(43 43 43 / 8%);
+  --border-focus: rgb(66 112 160);
   --input: oklch(0.936 0.006 252);
   --ring: oklch(0.662 0.072 248);
+  --accent-bg: rgb(66 112 160 / 12%);
 
   --panel: oklch(0.975 0.004 84 / 92%);
   --panel-foreground: var(--foreground);
@@ -36,10 +74,14 @@
   --success-foreground: oklch(0.985 0.004 145);
   --warning: oklch(0.774 0.116 86);
   --warning-foreground: oklch(0.29 0.05 84);
+  --backdrop: rgb(255 255 255 / 80%);
 
   --shadow-soft: 0 10px 28px rgb(19 24 38 / 5%);
   --shadow-panel: 0 20px 44px rgb(19 24 38 / 8%);
+  --shadow-elevated: rgb(0 0 0 / 8%);
   --transparency-block: rgba(0, 0, 0, 0.04);
+  --transparency-hover: rgba(0, 0, 0, 0.06);
+  --transparency-active: rgba(0, 0, 0, 0.06);
 
   --z-workbench-chrome: 100100;
   --z-workbench-genie: 100150;
@@ -49,6 +91,7 @@
   --z-panel-popover: 100550;
   --z-dialog-overlay: 100600;
   --z-dialog: 100610;
+  --z-dialog-popover: 100620;
 
   --workbench-canvas-bg: oklch(0.948 0.006 84);
   --workbench-surface-background:
@@ -122,9 +165,21 @@
 
 :root[data-theme="dark"] {
   --background: oklch(0.192 0.008 255);
+  --background-panel: rgb(42 42 43);
   --background-fronted: rgb(51 51 51 / 1);
   --background-soft: oklch(0.224 0.01 255);
   --foreground: oklch(0.955 0.004 84);
+  --text-primary: rgb(255 255 255);
+  --text-primary-hover: rgb(255 255 255 / 90%);
+  --text-tertiary: rgb(255 255 255 / 50%);
+  --text-placeholder: rgb(255 255 255 / 30%);
+  --text-inverted: rgb(0 0 0);
+  --white-stationary: rgb(255 255 255);
+  --black-stationary: rgb(0 0 0);
+  --toast-neutral-bg: var(--white-stationary);
+  --toast-neutral-fg: var(--black-stationary);
+  --toast-neutral-border: rgb(0 0 0 / 10%);
+  --toast-shadow-color: rgb(0 0 0 / 24%);
 
   --card: oklch(0.252 0.01 255 / 88%);
   --card-foreground: var(--foreground);
@@ -137,13 +192,33 @@
   --secondary-foreground: var(--foreground);
   --muted: oklch(0.282 0.008 255);
   --muted-foreground: oklch(0.734 0.012 255);
+  --text-secondary: rgb(255 255 255 / 70%);
+  --text-disabled: rgb(255 255 255 / 30%);
+  --rich-text-mention-file: rgb(80, 175, 238);
   --accent: oklch(0.308 0.014 248);
   --accent-foreground: var(--foreground);
   --destructive: oklch(0.672 0.172 25);
   --destructive-foreground: oklch(0.19 0.01 25);
+  --state-danger: rgb(239 68 68);
+  --state-danger-hover: color-mix(
+    in srgb,
+    var(--state-danger) 90%,
+    transparent
+  );
+  --state-success: rgb(74 222 128);
+  --on-danger: rgb(255 238 242);
+  --on-danger-hover: color-mix(
+    in srgb,
+    var(--on-danger) 92%,
+    var(--state-danger)
+  );
   --border: oklch(0.352 0.012 255);
+  --border-1: rgb(255 255 255 / 12%);
+  --border-2: rgb(255 255 255 / 8%);
+  --border-focus: rgb(217 240 245);
   --input: oklch(0.318 0.011 255);
   --ring: oklch(0.728 0.078 248);
+  --accent-bg: rgb(217 240 245 / 12%);
 
   --panel: oklch(0.236 0.009 255 / 92%);
   --panel-foreground: var(--foreground);
@@ -151,10 +226,14 @@
   --success-foreground: oklch(0.172 0.01 158);
   --warning: oklch(0.82 0.108 86);
   --warning-foreground: oklch(0.204 0.02 84);
+  --backdrop: rgb(0 0 0 / 80%);
 
   --shadow-soft: 0 14px 32px rgb(0 0 0 / 24%);
   --shadow-panel: 0 24px 52px rgb(0 0 0 / 34%);
+  --shadow-elevated: rgb(0 0 0 / 50%);
   --transparency-block: rgb(255 255 255 / 10%);
+  --transparency-hover: rgb(255 255 255 / 14%);
+  --transparency-active: rgb(255 255 255 / 16%);
 
   --workbench-canvas-bg: oklch(0.172 0.008 255);
   --workbench-surface-background:
@@ -228,6 +307,7 @@
 
 [data-workbench-wallpaper-appearance="dark"] {
   --transparency-block: rgb(255 255 255 / 12%);
+  --transparency-hover: rgb(255 255 255 / 16%);
   --workbench-chrome-foreground: rgb(255 255 255 / 88%);
   --workbench-chrome-muted: rgb(255 255 255 / 70%);
   --workbench-chrome-hover-bg: var(--transparency-block);
@@ -235,6 +315,7 @@
 
 [data-workbench-wallpaper-appearance="light"] {
   --transparency-block: rgba(0, 0, 0, 0.04);
+  --transparency-hover: rgba(0, 0, 0, 0.06);
   --workbench-chrome-foreground: color-mix(
     in srgb,
     var(--foreground) 68%,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextop-os/ui-system",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -26,6 +26,10 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./date-format": {
+      "types": "./dist/date-format.d.ts",
+      "import": "./dist/date-format.js"
+    },
     "./dev-vite": {
       "types": "./dist/dev-vite.d.ts",
       "import": "./dist/dev-vite.js"
@@ -48,7 +52,7 @@
     "dist",
     "agent",
     "AGENTS.md",
-    "UI_SYSTEM_GUIDELINES.md",
+    "ui-system.md",
     "README.md"
   ],
   "repository": {
@@ -57,9 +61,9 @@
     "directory": "packages/ui/system"
   },
   "dependencies": {
+    "@fontsource-variable/lexend": "^5.2.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.511.0",
     "radix-ui": "^1.4.2",
     "react-resizable-panels": "^4.11.1",
     "tailwind-merge": "^3.3.0",
@@ -95,6 +99,9 @@
       "components": [
         "./dist/components/index.d.ts"
       ],
+      "date-format": [
+        "./dist/date-format.d.ts"
+      ],
       "icons": [
         "./dist/icons/index.d.ts"
       ],