calendar-events 0.1.5 → 0.1.6

package/README.md

@@ -1,6 +1,6 @@
 # calendar-events
 
-A lightweight, customizable React calendar component with event support. Built with TypeScript and Tailwind CSS, featuring generic typed events, render props for full control over event display, a loading state with an animated SVG icon, and seamless dark mode via CSS variables (shadcn/ui compatible).
+A lightweight, customizable React calendar component with event support. Built with TypeScript and native CSS, featuring generic typed events, render props for full control over event display, a loading state with an animated SVG icon, and seamless dark mode via CSS variables.
 
 ## Features
 
@@ -8,13 +8,15 @@ A lightweight, customizable React calendar component with event support. Built w
 - **Render props** — fully control how each event is rendered inside a day cell
 - **Loading state** — built-in animated calendar icon overlay while fetching data
 - **Dark mode** — works out of the box with a `.dark` class using CSS custom properties
-- **shadcn/ui compatible** — uses the same CSS variable conventions, so it slots into any shadcn/ui project with no extra configuration
+- **No framework dependencies** — uses native CSS with `--ce-*` prefixed variables, compatible with any design system
 - **Modular** — all sub-components are exported individually so you can compose your own layout
 
 ## Installation
 
 ```bash
 npm install calendar-events
+# or
+pnpm add calendar-events
 ```
 
 **Peer dependencies** (install if not already present):
@@ -23,6 +25,31 @@ npm install calendar-events
 npm install react react-dom
 ```
 
+## Color palette setup
+
+After installing, run the following command to choose a color palette for your project:
+
+```bash
+npm exec calendar-events
+# or
+pnpm exec calendar-events
+```
+
+This interactive CLI will ask you to pick a **color** and a **shade**, then automatically write the selected values into the `dist/style.css` file.
+
+**Available colors:**
+
+| # | Color | Description |
+|---|-------|-------------|
+| 1 | `verde` | Green |
+| 2 | `rojo` | Red |
+| 3 | `amarillo` | Yellow |
+| 4 | `morado` | Purple |
+| 5 | `azul` | Blue |
+| 6 | `naranja` | Orange |
+
+**Available shades:** `claro` (light) · `medio` (medium) · `oscuro` (dark)
+
 ## Usage
 
 ### 1. Import the styles
@@ -33,8 +60,6 @@ Import the CSS once at the root of your app (e.g. `main.tsx` or `layout.tsx`):
 import 'calendar-events/style.css'
 ```
 
-> **Already using shadcn/ui?** Skip this import — your existing CSS variables are already compatible.
-
 ### 2. Use the component
 
 ```tsx
@@ -112,8 +137,15 @@ Use the `renderEvent` prop to replace the default event pill with anything you w
   events={events}
   renderEvent={(event) => (
     <span
-      className="block rounded px-2 py-0.5 text-xs text-white truncate"
-      style={{ backgroundColor: event.data?.color }}
+      style={{
+        display: 'block',
+        borderRadius: '4px',
+        padding: '2px 8px',
+        fontSize: '0.75rem',
+        color: 'white',
+        overflow: 'hidden',
+        backgroundColor: event.data?.color,
+      }}
     >
       {event.title}
     </span>
@@ -163,18 +195,29 @@ The library styles are built on CSS custom properties. If you imported `calendar
 
 ```css
 :root {
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --border: 214.3 31.8% 91.4%;
-  --background: 0 0% 100%;
-  --radius: 0.5rem;
+  --ce-background: 0 0% 100%;
+  --ce-foreground: 222.2 84% 4.9%;
+  --ce-primary: 222.2 47.4% 11.2%;
+  --ce-primary-foreground: 210 40% 98%;
+  --ce-secondary: 210 40% 96.1%;
+  --ce-muted-foreground: 215.4 16.3% 46.9%;
+  --ce-accent: 210 40% 96.1%;
+  --ce-border: 214.3 31.8% 91.4%;
+  --ce-radius: 0.5rem;
 }
 ```
 
-Values follow the `H S% L%` HSL format (no `hsl()` wrapper) so Tailwind's opacity modifier syntax works correctly.
+Values follow the `H S% L%` HSL format (no `hsl()` wrapper).
+
+If you use shadcn/ui, you can map your existing variables:
+
+```css
+:root {
+  --ce-primary: var(--primary);
+  --ce-border: var(--border);
+  /* etc. */
+}
+```
 
 ## Dark mode
 

package/bin/init.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
-import { createInterface } from 'readline'
-import { readFileSync, writeFileSync, existsSync, createReadStream, createWriteStream } from 'fs'
+import { intro, outro, select, spinner, isCancel, cancel } from '@clack/prompts'
+import { readFileSync, writeFileSync } from 'fs'
 import { join, dirname } from 'path'
 import { fileURLToPath } from 'url'
 
@@ -35,7 +35,7 @@ const PALETTES = {
   },
   naranja: {
     claro:  { primary: '24 90% 63%',  secondary: '24 55% 93%', accent: '24 55% 94%', 'muted-foreground': '24 20% 55%', border: '24 35% 84%' },
-    medio:  { primary: '24 100% 50%', secondary: '24 45% 90%', accent: '24 45% 91%', 'muted-foreground': '24 15% 50%', border: '24 25% 80%' },
+    medio:  { primary: '24 100% 50%', secondary: '24 45% 90%', accent: '24 45% 91%', 'muted-foreground': '24 15% 50%', border: '24 15% 76%' },
     oscuro: { primary: '24 100% 36%', secondary: '24 30% 87%', accent: '24 30% 88%', 'muted-foreground': '24 10% 45%', border: '24 15% 76%' },
   },
 }
@@ -43,62 +43,35 @@ const PALETTES = {
 const COLOR_OPTIONS = ['verde', 'rojo', 'amarillo', 'morado', 'azul', 'naranja']
 const SHADE_OPTIONS = ['claro', 'medio', 'oscuro']
 
-function openTTY() {
-  // When npm/pnpm pipes stdin, we open /dev/tty directly to get
-  // an interactive terminal regardless of how the script was spawned.
-  if (process.stdin.isTTY) {
-    return { input: process.stdin, output: process.stdout }
-  }
-  if (!existsSync('/dev/tty')) return null
-  try {
-    return {
-      input: createReadStream('/dev/tty'),
-      output: createWriteStream('/dev/tty'),
-    }
-  } catch {
-    return null
-  }
-}
-
-function ask(rl, prompt) {
-  return new Promise(resolve => rl.question(prompt, resolve))
-}
-
 async function main() {
-  const tty = openTTY()
-  if (!tty) process.exit(0) // CI/CD — skip setup silently
+  // Salir silenciosamente en CI/CD (sin TTY)
+  if (!process.stdout.isTTY) process.exit(0)
 
-  const rl = createInterface(tty)
+  intro('calendar-events — Setup de color')
 
-  tty.output.write('\ncalendar-events setup\n\n')
+  const colorKey = await select({
+    message: 'Selecciona una paleta de colores:',
+    options: COLOR_OPTIONS.map(c => ({ value: c, label: c })),
+  })
 
-  tty.output.write('Selecciona una paleta de colores:\n')
-  COLOR_OPTIONS.forEach((color, i) => tty.output.write(`  ${i + 1}. ${color}\n`))
-
-  const colorAnswer = (await ask(rl, '\nColor (1-6): ')).trim()
-  const colorKey = COLOR_OPTIONS[parseInt(colorAnswer) - 1]
-
-  if (!colorKey) {
-    tty.output.write('Seleccion invalida.\n')
-    rl.close()
-    process.exit(1)
+  if (isCancel(colorKey)) {
+    cancel('Setup cancelado.')
+    process.exit(0)
   }
 
-  tty.output.write(`\nSelecciona un tono para ${colorKey}:\n`)
-  tty.output.write('  1. Claro\n')
-  tty.output.write('  2. Medio\n')
-  tty.output.write('  3. Oscuro\n')
-
-  const shadeAnswer = (await ask(rl, '\nTono (1-3): ')).trim()
-  const shadeKey = SHADE_OPTIONS[parseInt(shadeAnswer) - 1]
+  const shadeKey = await select({
+    message: `Selecciona un tono para ${colorKey.toLocaleUpperCase()}:`,
+    options: SHADE_OPTIONS.map(s => ({ value: s, label: s })),
+  })
 
-  rl.close()
-
-  if (!shadeKey) {
-    tty.output.write('Seleccion invalida.\n')
-    process.exit(1)
+  if (isCancel(shadeKey)) {
+    cancel('Setup cancelado.')
+    process.exit(0)
   }
 
+  const s = spinner()
+  s.start('Aplicando paleta...')
+
   const palette = PALETTES[colorKey][shadeKey]
   const cssPath = join(__dirname, '..', 'dist', 'style.css')
   let css = readFileSync(cssPath, 'utf-8')
@@ -112,7 +85,8 @@ async function main() {
 
   writeFileSync(cssPath, css)
 
-  tty.output.write(`\nPaleta aplicada: ${colorKey} ${shadeKey}\n`)
+  s.stop('Paleta aplicada.')
+  outro(`${colorKey} ${shadeKey} — listo!`)
 }
 
 main()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calendar-events",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A customizable React calendar component with event support",
   "type": "module",
   "main": "./dist/calendar-events.cjs",
@@ -38,8 +38,7 @@
     "react",
     "calendar",
     "events",
-    "component",
-    "tailwindcss"
+    "component"
   ],
   "author": "",
   "license": "MIT",
@@ -48,6 +47,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@clack/prompts": "^1.0.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
     "tailwind-merge": "^2.5.4"