npm - @mvn-ui/react - Versions diffs - 0.1.2 → 0.1.4 - Mend

@mvn-ui/react 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/themes.css ADDED Viewed

@@ -0,0 +1,653 @@
+/**
+ * MVN-UI Theme Profiles
+ * Easy-to-use color themes inspired by popular browser themes.
+ * Apply theme by adding the class to your root element: <html class="theme-ocean">
+ *
+ * Available themes:
+ * - theme-default (Deep blue - calm, professional)
+ * - theme-sunset (Orange/coral - warm, energetic)
+ * - theme-lavender (Purple - creative, elegant)
+ * - theme-rose (Pink - soft, modern)
+ * - theme-slate (Gray/neutral - minimal, clean)
+ * - theme-midnight (Deep purple-blue - dark mode optimized)
+ */
+/* ============================================
+   THEME: Sunset (Orange/Coral)
+   Warm, energetic, creative
+   ============================================ */
+.theme-sunset,
+.theme-sunset :root {
+  --primary: #f97316;
+  --primary-foreground: #ffffff;
+  --primary-50: #fef6ee;
+  --primary-100: #fdead7;
+  --primary-200: #fbd0a8;
+  --primary-300: #f8a862;
+  --primary-400: #f88433;
+  --primary-500: #f97316;
+  --primary-600: #e65c0a;
+  --primary-700: #bf4a0b;
+  --primary-800: #99390f;
+  --primary-900: #732a10;
+  --ring: #f97316;
+  --accent: #fef6ee;
+  --accent-foreground: #e65c0a;
+  /* Chart colors */
+  --chart-1: #f97316;
+  --chart-2: #fb8c3c;
+  --chart-3: #fca660;
+  --chart-4: #f59e0b;
+  --chart-5: #ef6350;
+  /* Surface colors */
+  --background: #fefcfb;
+  --foreground: #2e1e14;
+  --muted: #faf5f2;
+  --muted-foreground: #7a6354;
+  --card: #fefcfb;
+  --card-foreground: #2e1e14;
+  --popover: #fefcfb;
+  --popover-foreground: #2e1e14;
+  --border: #e8ddd5;
+  --secondary: #faf5f2;
+  --secondary-foreground: #2e1e14;
+  --input: #e8ddd5;
+}
+.theme-sunset.dark,
+.theme-sunset .dark {
+  --primary: #fb8c3c;
+  --primary-foreground: #1a0d05;
+  --primary-50: #2a1508;
+  --primary-100: #3d1f0b;
+  --primary-200: #663411;
+  --primary-300: #995219;
+  --primary-400: #cc7121;
+  --primary-500: #fb8c3c;
+  --primary-600: #fca660;
+  --primary-700: #fdc08a;
+  --primary-800: #fed9b3;
+  --primary-900: #feefdc;
+  --ring: #fb8c3c;
+  --accent: #3d1f0b;
+  --accent-foreground: #fdc08a;
+  /* Chart colors */
+  --chart-1: #fb8c3c;
+  --chart-2: #fca660;
+  --chart-3: #fdc08a;
+  --chart-4: #f7a832;
+  --chart-5: #f27552;
+  /* Surface colors */
+  --background: #1a1310;
+  --foreground: #ede5e0;
+  --muted: #2b211b;
+  --muted-foreground: #a99485;
+  --card: #211a15;
+  --card-foreground: #ede5e0;
+  --popover: #211a15;
+  --popover-foreground: #ede5e0;
+  --border: #44352a;
+  --secondary: #2b211b;
+  --secondary-foreground: #ede5e0;
+  --input: #44352a;
+}
+/* ============================================
+   THEME: Lavender (Purple)
+   Creative, elegant, premium
+   ============================================ */
+.theme-lavender,
+.theme-lavender :root {
+  --primary: #8b5cf6;
+  --primary-foreground: #ffffff;
+  --primary-50: #f6f3fe;
+  --primary-100: #ede6fd;
+  --primary-200: #d8c9fb;
+  --primary-300: #b89cf8;
+  --primary-400: #9c75f7;
+  --primary-500: #8b5cf6;
+  --primary-600: #7c3aed;
+  --primary-700: #6829d3;
+  --primary-800: #551eae;
+  --primary-900: #421785;
+  --ring: #8b5cf6;
+  --accent: #f6f3fe;
+  --accent-foreground: #7c3aed;
+  /* Chart colors */
+  --chart-1: #8b5cf6;
+  --chart-2: #a07ff8;
+  --chart-3: #b5a2fa;
+  --chart-4: #a855f7;
+  --chart-5: #6366f1;
+  /* Surface colors */
+  --background: #fcfbfe;
+  --foreground: #221634;
+  --muted: #f5f2fa;
+  --muted-foreground: #6b5785;
+  --card: #fcfbfe;
+  --card-foreground: #221634;
+  --popover: #fcfbfe;
+  --popover-foreground: #221634;
+  --border: #dfd6ed;
+  --secondary: #f5f2fa;
+  --secondary-foreground: #221634;
+  --input: #dfd6ed;
+}
+.theme-lavender.dark,
+.theme-lavender .dark {
+  --primary: #a78bfa;
+  --primary-foreground: #0f0819;
+  --primary-50: #1c1229;
+  --primary-100: #281a3d;
+  --primary-200: #3e2866;
+  --primary-300: #5a3d99;
+  --primary-400: #7b59cc;
+  --primary-500: #a78bfa;
+  --primary-600: #b9a1fb;
+  --primary-700: #cbb7fc;
+  --primary-800: #ddcefd;
+  --primary-900: #eee4fe;
+  --ring: #a78bfa;
+  --accent: #281a3d;
+  --accent-foreground: #cbb7fc;
+  /* Chart colors */
+  --chart-1: #a78bfa;
+  --chart-2: #b9a1fb;
+  --chart-3: #cbb7fc;
+  --chart-4: #b78bf7;
+  --chart-5: #818cf8;
+  /* Surface colors */
+  --background: #14101a;
+  --foreground: #e6e0ed;
+  --muted: #221b2b;
+  --muted-foreground: #9b8cad;
+  --card: #1a1422;
+  --card-foreground: #e6e0ed;
+  --popover: #1a1422;
+  --popover-foreground: #e6e0ed;
+  --border: #3a2e4a;
+  --secondary: #221b2b;
+  --secondary-foreground: #e6e0ed;
+  --input: #3a2e4a;
+}
+/* ============================================
+   THEME: Rose (Pink)
+   Soft, modern, approachable
+   ============================================ */
+.theme-rose,
+.theme-rose :root {
+  --primary: #e11d5a;
+  --primary-foreground: #ffffff;
+  --primary-50: #fdf2f6;
+  --primary-100: #fbe5ed;
+  --primary-200: #f8c5d8;
+  --primary-300: #f38ab7;
+  --primary-400: #eb4d8b;
+  --primary-500: #e11d5a;
+  --primary-600: #c4154c;
+  --primary-700: #a3123f;
+  --primary-800: #850f33;
+  --primary-900: #630c26;
+  --ring: #e11d5a;
+  --accent: #fdf2f6;
+  --accent-foreground: #c4154c;
+  /* Chart colors */
+  --chart-1: #e11d5a;
+  --chart-2: #e94778;
+  --chart-3: #f07196;
+  --chart-4: #d946a0;
+  --chart-5: #dc4545;
+  /* Surface colors */
+  --background: #fefbfc;
+  --foreground: #301621;
+  --muted: #faf3f6;
+  --muted-foreground: #7d5867;
+  --card: #fefbfc;
+  --card-foreground: #301621;
+  --popover: #fefbfc;
+  --popover-foreground: #301621;
+  --border: #ead6dd;
+  --secondary: #faf3f6;
+  --secondary-foreground: #301621;
+  --input: #ead6dd;
+}
+.theme-rose.dark,
+.theme-rose .dark {
+  --primary: #eb4d8b;
+  --primary-foreground: #190710;
+  --primary-50: #280c18;
+  --primary-100: #3d1224;
+  --primary-200: #661f3b;
+  --primary-300: #992e58;
+  --primary-400: #cc3e75;
+  --primary-500: #eb4d8b;
+  --primary-600: #f07196;
+  --primary-700: #f599b4;
+  --primary-800: #f9c0d1;
+  --primary-900: #fce7ed;
+  --ring: #eb4d8b;
+  --accent: #3d1224;
+  --accent-foreground: #f599b4;
+  /* Chart colors */
+  --chart-1: #eb4d8b;
+  --chart-2: #f07196;
+  --chart-3: #f599b4;
+  --chart-4: #e052a3;
+  --chart-5: #e05050;
+  /* Surface colors */
+  --background: #1a1013;
+  --foreground: #ede0e5;
+  --muted: #2b1b21;
+  --muted-foreground: #ad8c98;
+  --card: #211519;
+  --card-foreground: #ede0e5;
+  --popover: #211519;
+  --popover-foreground: #ede0e5;
+  --border: #442e38;
+  --secondary: #2b1b21;
+  --secondary-foreground: #ede0e5;
+  --input: #442e38;
+}
+/* ============================================
+   THEME: Slate (Gray/Neutral)
+   Minimal, clean, professional
+   ============================================ */
+.theme-slate,
+.theme-slate :root {
+  --primary: #64748b;
+  --primary-foreground: #ffffff;
+  --primary-50: #f8f9fa;
+  --primary-100: #f1f3f5;
+  --primary-200: #dfe3e8;
+  --primary-300: #b9c0cb;
+  --primary-400: #8d97a6;
+  --primary-500: #64748b;
+  --primary-600: #526177;
+  --primary-700: #414e61;
+  --primary-800: #333c4a;
+  --primary-900: #262c36;
+  --ring: #64748b;
+  --accent: #f8f9fa;
+  --accent-foreground: #526177;
+  /* Chart colors */
+  --chart-1: #64748b;
+  --chart-2: #7d8b9e;
+  --chart-3: #98a4b3;
+  --chart-4: #588da1;
+  --chart-5: #7075a1;
+  /* Surface colors */
+  --background: #fcfcfd;
+  --foreground: #1c2127;
+  --muted: #f4f5f7;
+  --muted-foreground: #5c6370;
+  --card: #fcfcfd;
+  --card-foreground: #1c2127;
+  --popover: #fcfcfd;
+  --popover-foreground: #1c2127;
+  --border: #d8dce2;
+  --secondary: #f4f5f7;
+  --secondary-foreground: #1c2127;
+  --input: #d8dce2;
+}
+.theme-slate.dark,
+.theme-slate .dark {
+  --primary: #8d97a6;
+  --primary-foreground: #0f1114;
+  --primary-50: #1a1d22;
+  --primary-100: #262c34;
+  --primary-200: #353d48;
+  --primary-300: #4d5766;
+  --primary-400: #647080;
+  --primary-500: #8d97a6;
+  --primary-600: #a3abb7;
+  --primary-700: #bac0c9;
+  --primary-800: #d1d5db;
+  --primary-900: #e8eaed;
+  --ring: #8d97a6;
+  --accent: #262c34;
+  --accent-foreground: #bac0c9;
+  /* Chart colors */
+  --chart-1: #8d97a6;
+  --chart-2: #a3abb7;
+  --chart-3: #bac0c9;
+  --chart-4: #6f9aab;
+  --chart-5: #888db5;
+  /* Surface colors */
+  --background: #12141a;
+  --foreground: #e6e8eb;
+  --muted: #1e2128;
+  --muted-foreground: #8b919a;
+  --card: #181a20;
+  --card-foreground: #e6e8eb;
+  --popover: #181a20;
+  --popover-foreground: #e6e8eb;
+  --border: #2f343d;
+  --secondary: #1e2128;
+  --secondary-foreground: #e6e8eb;
+  --input: #2f343d;
+}
+/* ============================================
+   THEME: Midnight (Deep Purple-Blue)
+   Dark mode optimized, dramatic, sleek
+   ============================================ */
+.theme-midnight,
+.theme-midnight :root {
+  --primary: #4f46e5;
+  --primary-foreground: #ffffff;
+  --primary-50: #f5f3ff;
+  --primary-100: #ede9fe;
+  --primary-200: #ddd6fe;
+  --primary-300: #b9a8fa;
+  --primary-400: #8b7cf6;
+  --primary-500: #4f46e5;
+  --primary-600: #4338ca;
+  --primary-700: #3730a3;
+  --primary-800: #2e2882;
+  --primary-900: #231f5f;
+  --ring: #4f46e5;
+  --accent: #f5f3ff;
+  --accent-foreground: #4338ca;
+  /* Chart colors */
+  --chart-1: #4f46e5;
+  --chart-2: #6f66eb;
+  --chart-3: #9490f1;
+  --chart-4: #7c3aed;
+  --chart-5: #3b82f6;
+  /* Surface colors */
+  --background: #fcfcfe;
+  --foreground: #1a1838;
+  --muted: #f3f2f9;
+  --muted-foreground: #5c5780;
+  --card: #fcfcfe;
+  --card-foreground: #1a1838;
+  --popover: #fcfcfe;
+  --popover-foreground: #1a1838;
+  --border: #dad6ec;
+  --secondary: #f3f2f9;
+  --secondary-foreground: #1a1838;
+  --input: #dad6ec;
+}
+.theme-midnight.dark,
+.theme-midnight .dark {
+  --primary: #6f66eb;
+  --primary-foreground: #0a0918;
+  --primary-50: #141228;
+  --primary-100: #1c193d;
+  --primary-200: #2a2666;
+  --primary-300: #3f399a;
+  --primary-400: #574fcc;
+  --primary-500: #6f66eb;
+  --primary-600: #8c85ef;
+  --primary-700: #aaa5f4;
+  --primary-800: #c8c4f8;
+  --primary-900: #e6e4fc;
+  --ring: #6f66eb;
+  --accent: #1c193d;
+  --accent-foreground: #aaa5f4;
+  /* Chart colors */
+  --chart-1: #6f66eb;
+  --chart-2: #8c85ef;
+  --chart-3: #aaa5f4;
+  --chart-4: #8b5cf6;
+  --chart-5: #60a5fa;
+  /* Surface colors */
+  --background: #0c0b14;
+  --foreground: #e5e3ed;
+  --muted: #181628;
+  --muted-foreground: #9a96b3;
+  --card: #110f1c;
+  --card-foreground: #e5e3ed;
+  --popover: #110f1c;
+  --popover-foreground: #e5e3ed;
+  --border: #2d2944;
+  --secondary: #181628;
+  --secondary-foreground: #e5e3ed;
+  --input: #2d2944;
+}
+/* ============================================
+   THEME: Emerald (Teal-Green)
+   Fresh, tech-forward, balanced
+   ============================================ */
+.theme-emerald,
+.theme-emerald :root {
+  --primary: #10b981;
+  --primary-foreground: #ffffff;
+  --primary-50: #ecfdf5;
+  --primary-100: #d1fae5;
+  --primary-200: #a7f3d0;
+  --primary-300: #6ee7b7;
+  --primary-400: #34d399;
+  --primary-500: #10b981;
+  --primary-600: #059669;
+  --primary-700: #047857;
+  --primary-800: #065f46;
+  --primary-900: #064e3b;
+  --ring: #10b981;
+  --accent: #ecfdf5;
+  --accent-foreground: #059669;
+  /* Chart colors */
+  --chart-1: #10b981;
+  --chart-2: #34d399;
+  --chart-3: #6ee7b7;
+  --chart-4: #14b8a6;
+  --chart-5: #22c55e;
+  /* Surface colors */
+  --background: #fafdfb;
+  --foreground: #142a22;
+  --muted: #f0f8f4;
+  --muted-foreground: #4e7866;
+  --card: #fafdfb;
+  --card-foreground: #142a22;
+  --popover: #fafdfb;
+  --popover-foreground: #142a22;
+  --border: #cee6da;
+  --secondary: #f0f8f4;
+  --secondary-foreground: #142a22;
+  --input: #cee6da;
+}
+.theme-emerald.dark,
+.theme-emerald .dark {
+  --primary: #34d399;
+  --primary-foreground: #051810;
+  --primary-50: #0e2118;
+  --primary-100: #153124;
+  --primary-200: #1e5039;
+  --primary-300: #28754f;
+  --primary-400: #2eaf70;
+  --primary-500: #34d399;
+  --primary-600: #58e0ad;
+  --primary-700: #7eecc4;
+  --primary-800: #a8f3d7;
+  --primary-900: #d4f9eb;
+  --ring: #34d399;
+  --accent: #153124;
+  --accent-foreground: #7eecc4;
+  /* Chart colors */
+  --chart-1: #34d399;
+  --chart-2: #58e0ad;
+  --chart-3: #7eecc4;
+  --chart-4: #2dd4bf;
+  --chart-5: #4ade80;
+  /* Surface colors */
+  --background: #0d1712;
+  --foreground: #e2ebe6;
+  --muted: #172820;
+  --muted-foreground: #7cad96;
+  --card: #121f18;
+  --card-foreground: #e2ebe6;
+  --popover: #121f18;
+  --popover-foreground: #e2ebe6;
+  --border: #254435;
+  --secondary: #172820;
+  --secondary-foreground: #e2ebe6;
+  --input: #254435;
+}
+/* ============================================
+   THEME: Amber (Gold)
+   Premium, warm, attention-grabbing
+   ============================================ */
+.theme-amber,
+.theme-amber :root {
+  --primary: #f59e0b;
+  --primary-foreground: #1a0d00;
+  --primary-50: #fffbeb;
+  --primary-100: #fef3c7;
+  --primary-200: #fde68a;
+  --primary-300: #fcd34d;
+  --primary-400: #fbbf24;
+  --primary-500: #f59e0b;
+  --primary-600: #d97706;
+  --primary-700: #b45309;
+  --primary-800: #92400e;
+  --primary-900: #78350f;
+  --ring: #f59e0b;
+  --accent: #fffbeb;
+  --accent-foreground: #d97706;
+  /* Chart colors */
+  --chart-1: #f59e0b;
+  --chart-2: #fbbf24;
+  --chart-3: #fcd34d;
+  --chart-4: #fb923c;
+  --chart-5: #eab308;
+  /* Surface colors */
+  --background: #fefdfb;
+  --foreground: #2a1e10;
+  --muted: #faf6f0;
+  --muted-foreground: #766450;
+  --card: #fefdfb;
+  --card-foreground: #2a1e10;
+  --popover: #fefdfb;
+  --popover-foreground: #2a1e10;
+  --border: #e5ddd2;
+  --secondary: #faf6f0;
+  --secondary-foreground: #2a1e10;
+  --input: #e5ddd2;
+}
+.theme-amber.dark,
+.theme-amber .dark {
+  --primary: #fbbf24;
+  --primary-foreground: #1a0d00;
+  --primary-50: #261a07;
+  --primary-100: #3a270c;
+  --primary-200: #5c3f14;
+  --primary-300: #8f621f;
+  --primary-400: #c9892a;
+  --primary-500: #fbbf24;
+  --primary-600: #fccb4d;
+  --primary-700: #fdd87a;
+  --primary-800: #fee4a6;
+  --primary-900: #fef1d2;
+  --ring: #fbbf24;
+  --accent: #3a270c;
+  --accent-foreground: #fdd87a;
+  /* Chart colors */
+  --chart-1: #fbbf24;
+  --chart-2: #fccb4d;
+  --chart-3: #fdd87a;
+  --chart-4: #fb9d3c;
+  --chart-5: #efc720;
+  /* Surface colors */
+  --background: #181410;
+  --foreground: #ebe5dd;
+  --muted: #28221a;
+  --muted-foreground: #a39480;
+  --card: #1f1a14;
+  --card-foreground: #ebe5dd;
+  --popover: #1f1a14;
+  --popover-foreground: #ebe5dd;
+  --border: #403526;
+  --secondary: #28221a;
+  --secondary-foreground: #ebe5dd;
+  --input: #403526;
+}
+/* ============================================
+   THEME: Crimson (Red)
+   Bold, urgent, passionate
+   ============================================ */
+.theme-crimson,
+.theme-crimson :root {
+  --primary: #dc2626;
+  --primary-foreground: #ffffff;
+  --primary-50: #fef2f2;
+  --primary-100: #fee2e2;
+  --primary-200: #fecaca;
+  --primary-300: #fca5a5;
+  --primary-400: #f87171;
+  --primary-500: #dc2626;
+  --primary-600: #c81e1e;
+  --primary-700: #a31515;
+  --primary-800: #7f1d1d;
+  --primary-900: #5c1515;
+  --ring: #dc2626;
+  --accent: #fef2f2;
+  --accent-foreground: #c81e1e;
+  /* Chart colors */
+  --chart-1: #dc2626;
+  --chart-2: #ef4444;
+  --chart-3: #f87171;
+  --chart-4: #f4554d;
+  --chart-5: #db2777;
+  /* Surface colors */
+  --background: #fefbfb;
+  --foreground: #301616;
+  --muted: #f9f2f2;
+  --muted-foreground: #7a5656;
+  --card: #fefbfb;
+  --card-foreground: #301616;
+  --popover: #fefbfb;
+  --popover-foreground: #301616;
+  --border: #e8d5d5;
+  --secondary: #f9f2f2;
+  --secondary-foreground: #301616;
+  --input: #e8d5d5;
+}
+.theme-crimson.dark,
+.theme-crimson .dark {
+  --primary: #f87171;
+  --primary-foreground: #1a0707;
+  --primary-50: #2a0e0e;
+  --primary-100: #3d1414;
+  --primary-200: #662222;
+  --primary-300: #993434;
+  --primary-400: #cc4646;
+  --primary-500: #f87171;
+  --primary-600: #fa9191;
+  --primary-700: #fcb0b0;
+  --primary-800: #fdd0d0;
+  --primary-900: #feefef;
+  --ring: #f87171;
+  --accent: #3d1414;
+  --accent-foreground: #fcb0b0;
+  /* Chart colors */
+  --chart-1: #f87171;
+  --chart-2: #fa9191;
+  --chart-3: #fcb0b0;
+  --chart-4: #f7665e;
+  --chart-5: #ec4899;
+  /* Surface colors */
+  --background: #1a1010;
+  --foreground: #ebe0e0;
+  --muted: #2a1a1a;
+  --muted-foreground: #ad8585;
+  --card: #211414;
+  --card-foreground: #ebe0e0;
+  --popover: #211414;
+  --popover-foreground: #ebe0e0;
+  --border: #442a2a;
+  --secondary: #2a1a1a;
+  --secondary-foreground: #ebe0e0;
+  --input: #442a2a;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mvn-ui/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A React UI component library based on shadcn/ui",
   "author": "Marusys Vietnam",
   "license": "MIT",
@@ -36,7 +36,8 @@
       "import": "./dist/index.mjs"
     },
     "./styles.css": "./dist/index.css",
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./themes.css": "./dist/themes.css"
   },
   "files": [
     "dist",
@@ -49,7 +50,7 @@
   "style": "./dist/index.css",
   "scripts": {
     "dev": "tsup --watch",
-    "build": "tsup",
+    "build": "tsup && node -e \"require('fs').copyFileSync('src/styles/themes.css', 'dist/themes.css')\"",
     "type-check": "tsc --noEmit",
     "clean": "node -e \"fs.rmSync('dist', {recursive: true, force: true})\""
   },
@@ -95,6 +96,7 @@
     "react-day-picker": "^9.2.3",
     "react-fast-compare": "^3.2.2",
     "react-hook-form": "^7.66.0",
+    "recharts": "^2.15.0",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.5.2",