@mcnivendev/design-system 1.0.6 → 1.1.0

package/package.json

@@ -1,15 +1,36 @@
 {
   "name": "@mcnivendev/design-system",
-  "version": "1.0.6",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "1.1.0",
   "type": "module",
+  "description": "Tailwind 4 design system with React components and precompiled CSS",
+  "main": "tailwind/index.js",
   "exports": {
-    "./tailwind": "./tailwind/index.js"
+    "./tailwind": "./tailwind/index.js",
+    "./react": "./react/index.ts",
+    "./css": "./dist/tailwind.css"
+  },
+  "scripts": {
+    "build:css": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify"
   },
   "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tailwindcss": "^4.0.0"
-  }
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.1.0"
+  },
+  "files": [
+    "tailwind",
+    "react",
+    "dist"
+  ],
+  "keywords": [
+    "tailwind",
+    "design-system",
+    "react",
+    "wordpress"
+  ],
+  "license": "MIT"
 }

package/react/Btn.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+interface BtnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'default'
+}
+
+export const Btn: React.FC<BtnProps> = ({ variant = 'default', ...props }) => {
+  // Only allow preset classes, no className override
+  const baseClass = 'btn'
+  const variantClass = variant === 'primary' ? 'btn-primary' : ''
+  return <button className={`${baseClass} ${variantClass}`} {...props} />
+}

package/react/Card.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Card: React.FC<CardProps> = ({ children, ...props }) => {
+  // Only the design system class
+  return <div className="card" {...props}>{children}</div>
+}

package/react/index.ts

@@ -0,0 +1,2 @@
+export { Btn } from './Btn'
+export { Card } from './Card'

package/tailwind/index.js

@@ -1,25 +1,39 @@
 import plugin from 'tailwindcss/plugin'
 
 export default plugin(
-  ({ addBase, addComponents}) => {
-    /* ---------- Base tokens (optional) ---------- */
+  ({ addBase, addComponents, theme }) => {
+    // Optional CSS variables
     addBase({
       ':root': {
-        '--color-brand-primary': '#00bc42',
+        '--color-brand-main': theme('colors.brand.main'),
+        '--color-brand-light': theme('colors.brand.light'),
+        '--color-brand-dark': theme('colors.brand.dark'),
       },
     }),
+    // Components
     addComponents({
-    '.btn': {
-      '@apply inline-flex items-center justify-center font-medium transition rounded-md': {},
-    },
-    '.btn-primary': {
-      '@apply btn bg-brand-primary text-white hover:bg-brand-primary/90': {},
-    },
-    '.card': {
-      '@apply bg-white rounded-lg shadow-md p-6': {},
+      '.btn': {
+        '@apply inline-flex items-center justify-center font-medium transition rounded-md': {},
+      },
+      '.btn-primary': {
+        '@apply btn bg-brand-main text-white px-12 py-12 hover:bg-brand-main/90': {},
+      },
+      '.test': {
+        '@apply bg-brand-main py-12': {},
+      }
+    })
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          brand: {
+            main: '#da4697',
+            light: '#3e9f65',
+            dark: '#1d4ed8',
+          },
+        },
+      },
     },
-  })
-
-    
   }
 )