@huponx/x-core-ui 0.1.0

package/README.md

@@ -0,0 +1,14 @@
+# x-core-ui
+
+Reusable React design system (Gradient Mesh). Local folder: `core-ui`.
+
+```ts
+import { ThemeProvider, I18nProvider, Button } from "x-core-ui";
+import "x-core-ui/theme.css";
+
+<ThemeProvider storageKey="my-app-theme">
+  <I18nProvider storageKey="my-app-locale">{/* ... */}</I18nProvider>
+</ThemeProvider>
+```
+
+Pass a per-app `storageKey` so locale/theme do not clash when several apps share an origin. Defaults are `x-core-ui-theme` and `x-core-ui-locale`.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@huponx/x-core-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.544.0",
+    "react-day-picker": "^9.11.0",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
+  }
+}

package/src/theme.css

@@ -0,0 +1,331 @@
+@import "react-day-picker/style.css";
+
+@theme inline {
+  --color-nm-bg: var(--nm-bg);
+  --color-nm-bg-elevated: var(--nm-bg-elevated);
+  --color-nm-fg: var(--nm-fg);
+  --color-nm-muted: var(--nm-muted);
+  --color-nm-accent: var(--nm-accent);
+  --color-nm-on-accent: var(--nm-on-accent);
+  --color-nm-accent-2: var(--nm-accent-2);
+  --color-nm-danger: var(--nm-danger);
+  --color-nm-glass: var(--nm-glass);
+  --color-nm-border: var(--nm-border);
+  --color-nm-ring: var(--nm-ring);
+  --font-nm: "Sora", "Segoe UI", system-ui, sans-serif;
+  --radius-nm: 0.75rem;
+  --radius-nm-panel: 1rem;
+  --shadow-nm: var(--nm-shadow);
+}
+
+[data-theme="dark"] {
+  --nm-bg: #16141f;
+  --nm-bg-elevated: #242033;
+  --nm-fg: #f0ebf7;
+  --nm-muted: #b4a8c6;
+  --nm-accent: #c4a6ff;
+  --nm-on-accent: #1a1624;
+  --nm-accent-2: #b4b8ff;
+  --nm-danger: #e08a96;
+  --nm-glass: rgb(32 28 46 / 0.68);
+  --nm-border: rgb(198 180 230 / 0.14);
+  --nm-ring: rgb(196 166 255 / 0.42);
+  --nm-shadow: 0 16px 40px rgb(8 6 16 / 0.45);
+  --nm-blob-1: #f6d365;
+  --nm-blob-2: #ff9a9e;
+  --nm-blob-3: #fecfef;
+  --nm-blob-4: #a1c4fd;
+  --nm-blob-5: #96e6a1;
+  --nm-blob-6: #d4fc79;
+  --rdp-accent-color: var(--nm-accent);
+  --rdp-accent-background-color: rgb(196 166 255 / 0.22);
+  --rdp-background-color: transparent;
+  --rdp-today-color: var(--nm-accent-2);
+}
+
+[data-theme="light"] {
+  --nm-bg: #fdfbfb;
+  --nm-bg-elevated: #fffdf9;
+  --nm-fg: #2a2d3c;
+  --nm-muted: #5d6474;
+  --nm-accent: #6b4ca0;
+  --nm-on-accent: #ffffff;
+  --nm-accent-2: #5b8def;
+  --nm-danger: #c44d5d;
+  --nm-glass: rgb(255 255 255 / 0.78);
+  --nm-border: rgb(90 70 110 / 0.1);
+  --nm-ring: rgb(107 76 160 / 0.35);
+  --nm-shadow: 0 12px 36px rgb(80 60 100 / 0.08);
+  --nm-blob-1: #f6d365;
+  --nm-blob-2: #ff9a9e;
+  --nm-blob-3: #fecfef;
+  --nm-blob-4: #a1c4fd;
+  --nm-blob-5: #96e6a1;
+  --nm-blob-6: #d4fc79;
+  --rdp-accent-color: var(--nm-accent);
+  --rdp-accent-background-color: rgb(107 76 160 / 0.12);
+  --rdp-background-color: transparent;
+  --rdp-today-color: var(--nm-accent-2);
+}
+
+html {
+  --radius-nm: 0.75rem;
+  --radius-nm-panel: 1rem;
+  --nm-mesh:
+    radial-gradient(at 40% 20%, #ff9a9e 0, transparent 50%),
+    radial-gradient(at 80% 0%, #fecfef 0, transparent 50%),
+    radial-gradient(at 0% 50%, #ffecd2 0, transparent 50%),
+    radial-gradient(at 80% 50%, #a1c4fd 0, transparent 50%),
+    radial-gradient(at 0% 100%, #d4fc79 0, transparent 50%),
+    radial-gradient(at 80% 100%, #96e6a1 0, transparent 50%),
+    radial-gradient(at 0% 0%, #f6d365 0, transparent 50%);
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-nm);
+  color: var(--nm-fg);
+  background: var(--nm-bg);
+}
+
+button:not(:disabled),
+[role="button"]:not([data-disabled]),
+[role="tab"]:not([data-disabled]),
+a[href] {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+@media (max-width: 767px) {
+  input,
+  textarea,
+  select {
+    font-size: 16px;
+  }
+}
+
+.nm-app-bg {
+  position: relative;
+  isolation: isolate;
+  min-height: 100dvh;
+  overflow: clip;
+  background: var(--nm-bg);
+}
+
+.nm-app-bg::before {
+  content: "";
+  position: absolute;
+  inset: -18%;
+  z-index: -2;
+  background:
+    radial-gradient(52% 46% at 6% 4%, var(--nm-blob-1), transparent 68%),
+    radial-gradient(50% 42% at 40% 6%, var(--nm-blob-2), transparent 66%),
+    radial-gradient(56% 48% at 94% 8%, var(--nm-blob-3), transparent 70%),
+    radial-gradient(46% 52% at 98% 46%, var(--nm-blob-4), transparent 68%),
+    radial-gradient(54% 46% at 84% 96%, var(--nm-blob-5), transparent 68%),
+    radial-gradient(48% 42% at 10% 94%, var(--nm-blob-6), transparent 66%),
+    radial-gradient(38% 32% at 48% 38%, color-mix(in srgb, var(--nm-blob-2) 70%, var(--nm-blob-3)), transparent 64%);
+  filter: blur(42px) saturate(1.08);
+}
+
+[data-theme="light"] .nm-app-bg::before,
+[data-theme="dark"] .nm-app-bg::before {
+  inset: 0;
+  filter: none;
+  background: var(--nm-mesh);
+}
+
+[data-theme="light"] .nm-blob,
+[data-theme="dark"] .nm-blob {
+  filter: none;
+  background: var(--nm-mesh), var(--nm-bg);
+}
+
+.nm-app-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.12;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+.nm-blob {
+  background:
+    radial-gradient(120% 90% at 0% 0%, var(--nm-blob-1), transparent 58%),
+    radial-gradient(110% 100% at 48% 0%, var(--nm-blob-2), transparent 52%),
+    radial-gradient(110% 100% at 100% 8%, var(--nm-blob-3), transparent 55%),
+    radial-gradient(90% 80% at 100% 70%, var(--nm-blob-4), transparent 50%),
+    radial-gradient(90% 80% at 70% 100%, var(--nm-blob-5), transparent 50%),
+    radial-gradient(70% 70% at 12% 100%, var(--nm-blob-6), transparent 48%);
+  filter: saturate(1.08);
+}
+
+.nm-glass {
+  background: var(--nm-glass);
+  backdrop-filter: blur(22px) saturate(1.2);
+  border: 1px solid var(--nm-border);
+  box-shadow: var(--nm-shadow);
+}
+
+.nm-panel {
+  border-color: rgb(255 255 255 / 0.92);
+}
+
+.nm-control {
+  border-color: rgb(255 255 255 / 0.78);
+}
+
+[data-theme="dark"] .nm-panel {
+  border-color: rgb(255 255 255 / 0.22);
+}
+
+[data-theme="dark"] .nm-control {
+  border-color: rgb(255 255 255 / 0.18);
+}
+
+.nm-focus {
+  outline: none;
+}
+
+.nm-focus:focus-visible {
+  box-shadow: 0 0 0 2px var(--nm-bg), 0 0 0 4px var(--nm-ring);
+}
+
+.nm-rdp.rdp-root {
+  --rdp-accent-color: var(--nm-accent);
+  --rdp-day-width: 100%;
+  --rdp-day-height: 2.5rem;
+  --rdp-day_button-width: 2.25rem;
+  --rdp-day_button-height: 2.25rem;
+  --rdp-nav_button-width: 2rem;
+  --rdp-nav_button-height: 2rem;
+  --rdp-nav-height: 2.5rem;
+  --rdp-weekday-padding: 0.2rem 0;
+  --rdp-weekday-opacity: 0.7;
+  color: var(--nm-fg);
+  width: 100%;
+}
+
+.nm-rdp .rdp-month,
+.nm-rdp .rdp-months,
+.nm-rdp .rdp-month_grid {
+  width: 100%;
+}
+
+.nm-rdp .rdp-month_grid {
+  table-layout: fixed;
+}
+
+.nm-rdp .rdp-caption_label {
+  z-index: 0;
+  max-width: calc(100% - 4.5rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+.nm-rdp .rdp-nav {
+  z-index: 2;
+  pointer-events: none;
+}
+
+.nm-rdp .rdp-button_previous,
+.nm-rdp .rdp-button_next {
+  z-index: 3;
+  pointer-events: auto;
+}
+
+.nm-rdp .rdp-weekday {
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.nm-picker-panel {
+  box-sizing: border-box;
+  width: min(20rem, calc(100vw - 1.5rem));
+  padding: 0.75rem;
+}
+
+@keyframes nm-indeterminate {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(220%);
+  }
+}
+
+.nm-progress-indeterminate {
+  animation: nm-indeterminate 1.4s ease-in-out infinite;
+}
+
+@keyframes nm-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nm-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes nm-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes nm-sheet-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.nm-dialog-overlay[data-state="open"] {
+  animation: nm-overlay-in 220ms ease-out;
+}
+
+.nm-dialog-overlay[data-state="closed"] {
+  animation: nm-overlay-out 180ms ease-in;
+}
+
+.nm-dialog-sheet[data-state="open"] {
+  animation: nm-sheet-in 320ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.nm-dialog-sheet[data-state="closed"] {
+  animation: nm-sheet-out 220ms ease-in;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nm-dialog-overlay,
+  .nm-dialog-sheet {
+    animation: none;
+  }
+}