braid-ui 1.0.4 → 1.0.5

package/README.md

@@ -5,7 +5,34 @@ A comprehensive React UI component library built with TypeScript, Tailwind CSS,
 ## Installation
 
 ```bash
-npm install braid-ui-kit
+npm install braid-ui
+```
+
+## Setup
+
+**No additional setup required!** The styles are automatically bundled with the components.
+
+However, if you want to customize the styling, you can configure Tailwind CSS in your project:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+Then update your `tailwind.config.js`:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/braid-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
 ```
 
 ## Usage

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "braid-ui",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -26,10 +26,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./styles": "./src/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles.css"
   ],
   "keywords": [
     "react",
@@ -46,9 +48,7 @@
     "url": "https://github.com/your-username/braid-ui-kit.git"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-router-dom": ">=6.0.0",
+    "@hookform/resolvers": ">=3.0.0",
     "@radix-ui/react-accordion": ">=1.0.0",
     "@radix-ui/react-alert-dialog": ">=1.0.0",
     "@radix-ui/react-aspect-ratio": ">=1.0.0",
@@ -85,16 +85,18 @@
     "input-otp": ">=1.0.0",
     "lucide-react": ">=0.400.0",
     "next-themes": ">=0.3.0",
+    "react": ">=18.0.0",
     "react-day-picker": ">=9.0.0",
+    "react-dom": ">=18.0.0",
     "react-hook-form": ">=7.0.0",
     "react-resizable-panels": ">=2.0.0",
+    "react-router-dom": ">=6.0.0",
     "recharts": ">=2.0.0",
     "sonner": ">=1.0.0",
     "tailwind-merge": ">=2.0.0",
     "tailwindcss-animate": ">=1.0.0",
     "vaul": ">=0.9.0",
-    "zod": ">=3.0.0",
-    "@hookform/resolvers": ">=3.0.0"
+    "zod": ">=3.0.0"
   },
   "scripts": {
     "dev": "vite",
@@ -107,6 +109,8 @@
     "prepublishOnly": "npm run build:lib"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.32.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.16.5",

package/src/styles.css

@@ -0,0 +1,124 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    --background: 240 10% 98%;
+    --foreground: 240 10% 8%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 8%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 8%;
+
+    --primary: 204 100% 54%;
+    --primary-foreground: 0 0% 100%;
+    --primary-glow: 204 100% 64%;
+
+    --secondary: 240 5% 96%;
+    --secondary-foreground: 240 6% 10%;
+
+    --muted: 240 5% 96%;
+    --muted-foreground: 240 4% 60%;
+
+    --accent: 240 5% 96%;
+    --accent-foreground: 240 6% 10%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 6% 90%;
+    --input: 240 6% 90%;
+    --ring: 204 100% 54%;
+
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 98%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 98%;
+
+    /* Form-specific colors */
+    --form-background: 0 0% 100%;
+    --form-border: 240 6% 88%;
+    --form-border-focus: 204 100% 54%;
+    --form-border-error: 0 84% 60%;
+    --form-border-success: 142 76% 36%;
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, hsl(204 100% 54%), hsl(204 100% 64%));
+    --gradient-subtle: linear-gradient(180deg, hsl(240 10% 98%), hsl(240 5% 96%));
+
+    /* Shadows */
+    --shadow-form: 0 1px 3px 0 hsl(240 5% 84% / 0.12), 0 1px 2px 0 hsl(240 5% 84% / 0.24);
+    --shadow-form-focus: 0 0 0 3px hsl(204 100% 54% / 0.12);
+    --shadow-form-error: 0 0 0 3px hsl(0 84% 60% / 0.12);
+
+    /* Animations */
+    --transition-form: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}