@juv/codego-react-ui 1.0.1 → 1.0.4

package/README.md

@@ -8,14 +8,233 @@ A collection of reusable React UI components built with Tailwind CSS, Motion, an
 
 ---
 
+## Prerequisites
+
+Before installing this package, make sure the following are set up in your project:
+
+### 1. React 18+
+
+```bash
+npm install react react-dom
+```
+
+### 2. Tailwind CSS v4
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+Add the plugin to your `vite.config.ts`:
+
+```ts
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+})
+```
+
+Then import Tailwind in your main CSS file:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');
+@import "tailwindcss";
+@source "../node_modules/@juv/codego-react-ui/dist/index.js";
+
+@theme {
+  --font-sans: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-info: var(--info);
+  --color-info-hover: var(--info-hover);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-hover: var(--warning-hover);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-success: var(--success);
+  --color-success-hover: var(--success-hover);
+  --color-success-foreground: var(--success-foreground);
+  --radius: var(--radius);
+}
+
+@layer base {
+  :root {
+    --background: #ffffff;
+    --foreground: #09090b;
+    --card: #ffffff;
+    --card-foreground: #09090b;
+    --popover: #ffffff;
+    --popover-foreground: #09090b;
+    --primary: #6366f1; /* Indigo 500 */
+    --primary-hover: #4f46e5;
+    --primary-foreground: #ffffff;
+    --secondary: #f4f4f5;
+    --secondary-hover: #e4e4e7;
+    --secondary-foreground: #18181b;
+    --info: #3b82f6; /* Blue 500 */
+    --info-hover: #2563eb;
+    --info-foreground: #ffffff;
+    --warning: #f59e0b; /* Amber 500 */
+    --warning-hover: #d97706;
+    --warning-foreground: #ffffff;
+  --danger: #ef4444; /* Red 500 */
+  --danger-hover: #dc2626;
+  --danger-foreground: #ffffff;
+  --success: #22c55e; /* Green 500 */
+  --success-hover: #16a34a;
+  --success-foreground: #ffffff;
+  --muted: #f4f4f5;
+    --muted-foreground: #71717a;
+    --accent: #f4f4f5;
+    --accent-foreground: #18181b;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --border: #e4e4e7;
+    --input: #e4e4e7;
+    --ring: var(--primary);
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: #030303; /* Deep black */
+    --foreground: #ededed;
+    --card: #0a0a0a; /* Slightly lighter black */
+    --card-foreground: #ededed;
+    --popover: #0a0a0a;
+    --popover-foreground: #ededed;
+    --primary: #8b5cf6; /* Neon Violet */
+    --primary-hover: #7c3aed;
+    --primary-foreground: #ffffff;
+    --secondary: #171717;
+    --secondary-hover: #262626;
+    --secondary-foreground: #ededed;
+    --info: #3b82f6;
+    --info-hover: #2563eb;
+    --info-foreground: #ffffff;
+    --warning: #f59e0b;
+    --warning-hover: #d97706;
+    --warning-foreground: #ffffff;
+  --danger: #ef4444;
+  --danger-hover: #dc2626;
+  --danger-foreground: #ffffff;
+  --success: #22c55e;
+  --success-hover: #16a34a;
+  --success-foreground: #ffffff;
+  --muted: #171717;
+    --muted-foreground: #a1a1aa;
+    --accent: #1f1f2e; /* Subtle purple tint */
+    --accent-foreground: #c4b5fd;
+    --destructive: #7f1d1d;
+    --destructive-foreground: #ededed;
+    --border: #1f1f1f;
+    --input: #1f1f1f;
+    --ring: var(--primary);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-background/60 backdrop-blur-xl border border-white/10;
+  }
+  .dark .glass {
+    @apply bg-black/40 border-white/5;
+  }
+  .text-gradient {
+    background: linear-gradient(to right, var(--primary), var(--info));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  .glow {
+    box-shadow: 0 0 20px -5px var(--primary);
+  }
+}
+/* Hide calendar icon (Chrome, Edge, Safari) */
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+/* Optional: remove clear (X) button */
+input[type="datetime-local"]::-webkit-clear-button {
+  display: none;
+}
+
+/* Optional: remove spin buttons */
+input[type="datetime-local"]::-webkit-inner-spin-button {
+  display: none;
+}
+```
+
+### 3. Lucide React (icons)
+
+```bash
+npm install lucide-react
+```
+
+### 4. Motion (animations)
+
+```bash
+npm install motion
+```
+
+### 5. date-fns (date utilities — required by Calendar, Date Picker, Date Range Picker)
+
+```bash
+npm install date-fns
+```
+
+### 6. tailwind-merge + clsx (utility — used internally)
+
+```bash
+npm install tailwind-merge clsx
+```
+
+---
+
 ## Installation
 
+Once all prerequisites are installed:
+
 ```bash
 npm install @juv/codego-react-ui
 ```
 
-> Requires React >= 18 and Tailwind CSS configured in your project.
-
 ---
 
 ## Usage