cortex-react-components 3.0.0 → 3.0.2

package/dist/styles.css

@@ -7,58 +7,16 @@
  * Usage in consuming app:
  * 1. Import this CSS file: import 'cortex-react-components/styles.css';
  * 2. Extend your tailwind.config.js with our preset (see package exports)
+ * 3. Load the Manrope font (e.g., via Google Fonts or self-hosted)
+ * 
+ * To load Manrope font, add to your HTML head:
+ * <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+ * 
+ * Or in Next.js, use next/font:
+ * import { Manrope } from 'next/font/google';
+ * const manrope = Manrope({ subsets: ['latin'] });
  */
 
-/* Font face declarations */
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./fonts/Manrope-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 300;
-  src: url('./fonts/Manrope-Light.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 200;
-  src: url('./fonts/Manrope-ExtraLight.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 500;
-  src: url('./fonts/Manrope-Medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 600;
-  src: url('./fonts/Manrope-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 700;
-  src: url('./fonts/Manrope-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 800;
-  src: url('./fonts/Manrope-ExtraBold.ttf') format('truetype');
-}
-
 /* CSS Custom Properties (Design Tokens) */
 :root {
   --background: 20 14.3% 4.1%;

package/dist/tailwind-preset.js

@@ -13,17 +13,39 @@
  *   presets: [cortexPreset],
  *   content: [
  *     './src/**\/*.{js,ts,jsx,tsx}',
- *     // Include the library's components for Tailwind to scan
- *     './node_modules/cortex-react-components/dist/**\/*.{js,mjs}',
  *   ],
  *   // ... your other config
  * };
  * ```
+ * 
+ * Note: You do NOT need to add node_modules/cortex-react-components to content paths.
+ * The safelist in this preset includes all classes used by the library components.
  */
 
 /** @type {import('tailwindcss').Config} */
 const cortexPreset = {
   darkMode: ['selector'],
+  safelist: [
+    // Brand colors
+    { pattern: /bg-brand-(plum|blue|green|orange|cyan)(-\d{2,3}|foreground)?/ },
+    { pattern: /text-brand-(plum|blue|green|orange|cyan)(-\d{2,3}|foreground)?/ },
+    { pattern: /from-brand-(plum|blue|green|orange|cyan)/ },
+    { pattern: /to-brand-(plum|blue|green|orange|cyan)/ },
+    // Theme colors
+    { pattern: /bg-(background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|input|ring)/ },
+    { pattern: /text-(background|foreground|card|popover|primary|secondary|muted|accent|destructive)/ },
+    { pattern: /border-(background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|error|success|warning)/ },
+    // Sidebar
+    { pattern: /bg-sidebar(-background|-foreground|-primary|-accent|-border|-ring)?/ },
+    { pattern: /text-sidebar(-foreground|-primary-foreground|-accent-foreground)?/ },
+    // Status colors
+    'bg-error/30', 'bg-success/30', 'bg-warning/30',
+    'border-error', 'border-success', 'border-warning',
+    // Layout
+    'lg:col-span-4', 'lg:col-span-6', 'lg:col-span-8', 'lg:col-span-12',
+    // Charts
+    'bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4', 'bg-chart-5',
+  ],
   theme: {
     fontFamily: {
       sans: ['Manrope', 'sans-serif'],
@@ -255,7 +277,8 @@ const cortexPreset = {
   plugins: [
     require('tailwindcss-animated'),
     require('@tailwindcss/typography'),
-    require('tailwindcss-intersect'),
+    // Note: tailwindcss-intersect removed as it can cause CSS parsing issues with some bundlers
+    // If you need it, add it to your own tailwind.config.js: require('tailwindcss-intersect')
     function ({ addUtilities }) {
       addUtilities({
         '.no-scrollbar::-webkit-scrollbar': {

package/dist/tailwind-preset.mjs

@@ -13,17 +13,39 @@
  *   presets: [cortexPreset],
  *   content: [
  *     './src/**\/*.{js,ts,jsx,tsx}',
- *     // Include the library's components for Tailwind to scan
- *     './node_modules/cortex-react-components/dist/**\/*.{js,mjs}',
  *   ],
  *   // ... your other config
  * };
  * ```
+ * 
+ * Note: You do NOT need to add node_modules/cortex-react-components to content paths.
+ * The safelist in this preset includes all classes used by the library components.
  */
 
 /** @type {import('tailwindcss').Config} */
 const cortexPreset = {
   darkMode: ['selector'],
+  safelist: [
+    // Brand colors
+    { pattern: /bg-brand-(plum|blue|green|orange|cyan)(-\d{2,3}|foreground)?/ },
+    { pattern: /text-brand-(plum|blue|green|orange|cyan)(-\d{2,3}|foreground)?/ },
+    { pattern: /from-brand-(plum|blue|green|orange|cyan)/ },
+    { pattern: /to-brand-(plum|blue|green|orange|cyan)/ },
+    // Theme colors
+    { pattern: /bg-(background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|input|ring)/ },
+    { pattern: /text-(background|foreground|card|popover|primary|secondary|muted|accent|destructive)/ },
+    { pattern: /border-(background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|error|success|warning)/ },
+    // Sidebar
+    { pattern: /bg-sidebar(-background|-foreground|-primary|-accent|-border|-ring)?/ },
+    { pattern: /text-sidebar(-foreground|-primary-foreground|-accent-foreground)?/ },
+    // Status colors
+    'bg-error/30', 'bg-success/30', 'bg-warning/30',
+    'border-error', 'border-success', 'border-warning',
+    // Layout
+    'lg:col-span-4', 'lg:col-span-6', 'lg:col-span-8', 'lg:col-span-12',
+    // Charts
+    'bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4', 'bg-chart-5',
+  ],
   theme: {
     fontFamily: {
       sans: ['Manrope', 'sans-serif'],
@@ -255,7 +277,8 @@ const cortexPreset = {
   plugins: [
     require('tailwindcss-animated'),
     require('@tailwindcss/typography'),
-    require('tailwindcss-intersect'),
+    // Note: tailwindcss-intersect removed as it can cause CSS parsing issues with some bundlers
+    // If you need it, add it to your own tailwind.config.js: require('tailwindcss-intersect')
     function ({ addUtilities }) {
       addUtilities({
         '.no-scrollbar::-webkit-scrollbar': {

package/package.json

@@ -2,7 +2,7 @@
   "name": "cortex-react-components",
   "author": "Cortex Reply",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A library of React components with styles. Designed to seamlessly integrate with React and Next.js.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",