imperijal-components 0.0.0 → 0.0.1

package/CUSTOMIZATION.md

@@ -0,0 +1,191 @@
+# Customization — `@imperijal/date-time-picker`
+
+## Does Tailwind need to be installed?
+
+**Yes.** This package ships **Tailwind class names** in the components — it does **not** bundle Tailwind CSS.
+
+Your app must have:
+
+1. **Tailwind CSS** configured (v3 or v4)
+2. **Content scan** including the package:
+
+```js
+// tailwind.config (v3)
+content: [
+  './src/**/*.{js,ts,jsx,tsx}',
+  './node_modules/@imperijal/date-time-picker/dist/**/*.js',
+]
+```
+
+```css
+/* globals.css (v4) */
+@source "../node_modules/@imperijal/date-time-picker/dist/**/*.js";
+```
+
+3. **CSS theme variables** (`--primary`, `--border`, etc.) — either from shadcn/ui or:
+
+```css
+@import '@imperijal/date-time-picker/styles.css';
+```
+
+4. **Peer dependencies** installed (see package README)
+
+Without Tailwind + theme variables, the component renders **unstyled / empty-looking**.
+
+---
+
+## Customization via props
+
+You customize with **props** (pass Tailwind classes as strings). You do **not** install Tailwind inside the package itself.
+
+### `className` — trigger button
+
+```tsx
+<DateTimePicker
+  value={value}
+  onChange={setValue}
+  className="mt-2 border-slate-200 bg-white shadow-sm focus-visible:ring-indigo-400"
+/>
+```
+
+### `popoverClassName` — popover panel
+
+```tsx
+<DateTimePicker
+  value={value}
+  onChange={setValue}
+  popoverClassName="border-2 border-indigo-200 shadow-xl"
+/>
+```
+
+### `contentClassName` — inner picker (date chips + time grid)
+
+```tsx
+<DateTimePicker
+  value={value}
+  onChange={setValue}
+  contentClassName="text-sm"
+/>
+```
+
+### `size` — preset trigger size
+
+```tsx
+<DateTimePicker size="sm" ... />   // compact (delivery rows)
+<DateTimePicker size="default" ... />
+```
+
+### `placeholder`
+
+```tsx
+<DateTimePicker placeholder="Pick deadline" ... />
+```
+
+### `disabled`
+
+```tsx
+<DateTimePicker disabled ... />
+```
+
+### `align` — popover position
+
+```tsx
+<DateTimePicker align="start" ... />   // default
+<DateTimePicker align="center" ... />
+<DateTimePicker align="end" ... />
+```
+
+### `timeSlots` — time range & interval
+
+```tsx
+<DateTimePicker
+  timeSlots={{
+    startHour: 5,           // 05:00 first slot
+    endHour: 24,            // up to 23:30 (exclusive end)
+    intervalMinutes: 30,    // 30 min steps
+  }}
+/>
+```
+
+Examples:
+
+| Config | Result |
+|--------|--------|
+| Default | 05:00–23:30 every 30 min |
+| `{ startHour: 9, endHour: 18 }` | Business hours |
+| `{ intervalMinutes: 15 }` | 15-minute slots |
+
+---
+
+## Customization via CSS variables (global theme)
+
+Override colors for **all** pickers in your app:
+
+```css
+:root {
+  --primary: #9810fa;
+  --primary-foreground: #ffffff;
+  --border: #e2e8f0;
+  --accent: #f1f5f9;
+}
+```
+
+Or import the package defaults and override after:
+
+```css
+@import '@imperijal/date-time-picker/styles.css';
+
+:root {
+  --primary: #004ac6;
+}
+```
+
+---
+
+## What is NOT customizable via props (today)
+
+| Part | How to customize |
+|------|------------------|
+| Date chip labels (Today, Tomorrow) | Fork / PR — hardcoded in `quick-dates.ts` |
+| Step titles ("Step 1: Choose Date") | Use `DateTimePickerContent` directly |
+| Confirm button text | Use `DateTimePickerContent` directly |
+| Icons | Uses `lucide-react` internally |
+
+For full control, use the headless export:
+
+```tsx
+import { DateTimePickerContent, useDateTimeSelection } from '@imperijal/date-time-picker';
+```
+
+---
+
+## restoranico example
+
+```tsx
+<DateTimePicker
+  value={defaultDeadline}
+  onChange={handleDefaultDeadlineChange}
+  className="mt-0.5 border-slate-200 focus-visible:ring-indigo-400"
+/>
+
+<DateTimePicker
+  value={d.deadline}
+  onChange={(deadline) => updateDelivery(d.id, { deadline })}
+  size="sm"
+  className="mt-0.5 border-slate-200 focus-visible:ring-indigo-400"
+/>
+```
+
+restoranico already has Tailwind + shadcn variables — no extra install needed beyond the npm package.
+
+---
+
+## Summary
+
+| Question | Answer |
+|----------|--------|
+| Install Tailwind in consumer app? | **Yes** |
+| Pass Tailwind via props? | **Yes** — `className`, `popoverClassName`, `contentClassName` |
+| Tailwind inside the npm package? | **No** — peer / consumer responsibility |
+| Change colors globally? | CSS variables on `:root` |
+| Change time range? | `timeSlots` prop |

package/DEMO.md

@@ -0,0 +1,311 @@
+# Demo playground — local iteration & public preview
+
+How to **preview components locally**, ship **v2**, add **new components**, and show a **live demo** to npm users.
+
+---
+
+## Monorepo layout
+
+```
+imperijal-components/
+├── apps/
+│   └── demo/                    ← local + public demo site (NOT published to npm)
+├── packages/
+│   ├── date-time-picker/        ← @imperijal/date-time-picker (published)
+│   └── your-next-component/     ← future packages
+├── DEMO.md                      ← this file
+├── INSTALL_AND_USAGE.md
+└── PUBLISHING.md
+```
+
+| Folder | Published to npm? | Purpose |
+|--------|-------------------|---------|
+| `apps/demo` | No | Playground + public website |
+| `packages/*` | Yes | Reusable components |
+
+---
+
+## 1. Run demo locally (daily workflow)
+
+From monorepo root:
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+pnpm install
+pnpm demo
+```
+
+Opens **http://localhost:5173** with all component demos.
+
+### How hot reload works
+
+`apps/demo/vite.config.ts` aliases the package to **source**:
+
+```ts
+'@imperijal/date-time-picker' → packages/date-time-picker/src/index.ts
+```
+
+So when you edit files in `packages/date-time-picker/src/`, the demo updates **immediately** — no rebuild needed while iterating v2.
+
+---
+
+## 2. Iterate v2 of DateTimePicker
+
+```bash
+# Terminal 1 — demo (keep running)
+pnpm demo
+
+# Terminal 2 — edit component
+code packages/date-time-picker/src/components/date-time-picker.tsx
+```
+
+Check variants in the demo:
+- Default size
+- Small size (`size="sm"`)
+- Custom `timeSlots`
+
+When v2 is ready:
+
+```bash
+cd packages/date-time-picker
+npm version minor          # 0.1.0 → 0.2.0  (or patch / major)
+pnpm build
+pnpm publish --access public
+```
+
+Or from root:
+
+```bash
+pnpm publish:date-time-picker
+```
+
+Update in restoranico:
+
+```bash
+cd ../restoranico
+pnpm update @imperijal/date-time-picker
+```
+
+---
+
+## 3. Add a new component to the same group
+
+### Step A — Create package
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+cp -r packages/date-time-picker packages/my-widget
+```
+
+Edit `packages/my-widget/package.json`:
+
+```json
+{
+  "name": "@imperijal/my-widget",
+  "version": "0.1.0",
+  ...
+}
+```
+
+Clear `src/` and implement your component. Add root script:
+
+```json
+"publish:my-widget": "pnpm --filter @imperijal/my-widget publish --access public --no-git-checks"
+```
+
+### Step B — Add to demo app
+
+1. In `apps/demo/package.json`:
+
+```json
+"@imperijal/my-widget": "workspace:*"
+```
+
+2. Create `apps/demo/src/demos/MyWidgetDemo.tsx`
+
+3. Register in `apps/demo/src/App.tsx`:
+
+```tsx
+const DEMOS = [
+  { id: 'date-time-picker', label: 'Date & Time Picker', package: '@imperijal/date-time-picker' },
+  { id: 'my-widget', label: 'My Widget', package: '@imperijal/my-widget' },
+];
+```
+
+4. Add Vite alias in `vite.config.ts`:
+
+```ts
+'@imperijal/my-widget': path.resolve(root, '../../packages/my-widget/src/index.ts'),
+```
+
+5. Run `pnpm install && pnpm demo`
+
+### Step C — Publish separately
+
+Each package gets its own npm page:
+
+```bash
+pnpm --filter @imperijal/my-widget publish --access public
+```
+
+---
+
+## 4. Public demo for npm users
+
+npm does **not** host interactive demos. You deploy `apps/demo` as a website and link it from:
+
+- Package README on npm
+- `homepage` field in `package.json`
+
+### Option A — Vercel (easiest)
+
+1. Push repo to GitHub
+2. [vercel.com](https://vercel.com) → Import `imperijal-components`
+3. Settings:
+   - **Root Directory:** `apps/demo`
+   - **Build Command:** `pnpm build`
+   - **Install Command:** `cd ../.. && pnpm install`
+   - **Output Directory:** `dist`
+
+4. Add to `packages/date-time-picker/package.json`:
+
+```json
+"homepage": "https://imperijal-components.vercel.app"
+```
+
+5. Add to package README:
+
+```markdown
+## Live demo
+
+https://imperijal-components.vercel.app
+```
+
+npm shows the **homepage** link on the package page.
+
+### Option B — GitHub Pages
+
+Build with base path:
+
+```bash
+cd apps/demo
+IMPERIJAL_DEMO_BASE=/imperijal-components/ pnpm build
+```
+
+Deploy `apps/demo/dist` to GitHub Pages (see `.github/workflows/demo-pages.yml` if added).
+
+Homepage URL:
+
+```
+https://YOUR_USERNAME.github.io/imperijal-components/
+```
+
+---
+
+## 5. What npm users see
+
+On [npmjs.com/package/@imperijal/date-time-picker](https://www.npmjs.com/package/@imperijal/date-time-picker):
+
+| Field | Shows |
+|-------|--------|
+| **README** | Install + usage (from package README) |
+| **homepage** | Link to live demo (if set in package.json) |
+| **Repository** | GitHub source link |
+
+They install via:
+
+```bash
+pnpm add @imperijal/date-time-picker
+```
+
+They try live UI on your deployed demo URL — not on npm itself.
+
+---
+
+## 6. Fix `ENOSPC: System limit for number of file watchers reached`
+
+Linux limits how many files Vite can watch. Monorepos + `node_modules` + restoranico dev server can exceed the default (**65536**).
+
+### Option A — Permanent fix (recommended)
+
+Run in your terminal (requires password once):
+
+```bash
+echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/99-inotify.conf
+echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.d/99-inotify.conf
+sudo sysctl -p /etc/sysctl.d/99-inotify.conf
+```
+
+Then retry:
+
+```bash
+pnpm demo
+```
+
+### Option B — No sudo (polling fallback)
+
+Uses more CPU but avoids file watchers:
+
+```bash
+pnpm demo:poll
+```
+
+### Option C — Free watchers temporarily
+
+Stop other dev servers (e.g. restoranico `pnpm dev`) before running the demo — each Next/Vite instance consumes many watchers.
+
+---
+
+## 7. Quick command reference
+
+| Task | Command |
+|------|---------|
+| Local demo | `pnpm demo` |
+| Demo (ENOSPC workaround) | `pnpm demo:poll` |
+| Build demo for deploy | `pnpm demo:build` |
+| Preview production build | `pnpm demo:preview` |
+| Build all packages | `pnpm build` |
+| Publish date-time-picker | `pnpm publish:date-time-picker` |
+| Typecheck package | `pnpm --filter @imperijal/date-time-picker typecheck` |
+
+---
+
+## 7. Recommended release loop
+
+```
+edit packages/…/src
+    ↓
+pnpm demo          (verify in browser)
+    ↓
+pnpm build         (verify dist)
+    ↓
+npm version patch  (in package folder)
+    ↓
+pnpm publish --access public
+    ↓
+git tag + push
+    ↓
+Vercel auto-deploys demo (optional)
+    ↓
+pnpm update in restoranico
+```
+
+---
+
+## 8. Test in restoranico before publishing (optional)
+
+Use file dependency while iterating:
+
+```json
+// restoranico/package.json
+"@imperijal/date-time-picker": "file:../imperijal-components/packages/date-time-picker"
+```
+
+Or link:
+
+```bash
+cd imperijal-components/packages/date-time-picker && pnpm link --global
+cd restoranico && pnpm link --global @imperijal/date-time-picker
+```
+
+Switch back to npm version when published.

package/README.md

@@ -2,13 +2,27 @@
 
 Monorepo of reusable React UI packages published under the `@imperijal/*` scope.
 
+![DateTimePicker — live demo screenshot](./apps/demo/demo.png)
+
 ## Documentation
 
 | Guide | Purpose |
 |-------|---------|
+| [**VERSIONING.md**](./VERSIONING.md) | Bump version, publish, update apps |
+| [**CUSTOMIZATION.md**](./CUSTOMIZATION.md) | Tailwind setup, props, theming |
+| [**DEMO.md**](./DEMO.md) | Local demo app, v2 iteration, public preview for npm users |
 | [**INSTALL_AND_USAGE.md**](./INSTALL_AND_USAGE.md) | Install in an app + component usage |
 | [**PUBLISHING.md**](./PUBLISHING.md) | Publish to npm + fix E403 / 2FA errors |
 
+## Quick start — local demo
+
+```bash
+pnpm install
+pnpm demo
+```
+
+Opens http://localhost:5173 — edit `packages/date-time-picker/src/` and see changes live.
+
 ## Packages
 
 | Package | Description |

package/VERSIONING.md

@@ -0,0 +1,156 @@
+# Versioning & publishing packages
+
+How to bump versions, publish to npm, and update apps that use `@imperijal/*` packages.
+
+---
+
+## Semantic versioning (semver)
+
+| Bump | When | Example |
+|------|------|---------|
+| **patch** | Bug fix, CSS fix, docs | `0.1.0` → `0.1.1` |
+| **minor** | New feature, new optional prop | `0.1.1` → `0.2.0` |
+| **major** | Breaking API change | `0.2.0` → `1.0.0` |
+
+---
+
+## Step-by-step: release a new version
+
+### 1. Develop & verify locally
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+pnpm demo              # or pnpm demo:poll if ENOSPC
+```
+
+Edit files in `packages/date-time-picker/src/`.
+
+### 2. Build the package
+
+```bash
+pnpm --filter @imperijal/date-time-picker build
+```
+
+Check `packages/date-time-picker/dist/` exists.
+
+### 3. Bump the version
+
+From the **package folder** (not monorepo root):
+
+```bash
+cd packages/date-time-picker
+
+# Pick one:
+npm version patch    # 0.1.1 → 0.1.2  (bug fix)
+npm version minor    # 0.1.1 → 0.2.0  (new feature)
+npm version major    # 0.2.0 → 1.0.0  (breaking change)
+```
+
+This updates `package.json` and creates a git tag (if inside a git repo).
+
+**Manual alternative** — edit `packages/date-time-picker/package.json`:
+
+```json
+"version": "0.1.2"
+```
+
+### 4. Commit & tag (recommended)
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+git add packages/date-time-picker
+git commit -m "chore(date-time-picker): release v0.1.2"
+git tag date-time-picker-v0.1.2
+git push && git push --tags
+```
+
+### 5. Publish to npm
+
+Requires npm login + 2FA enabled (see [PUBLISHING.md](./PUBLISHING.md)).
+
+```bash
+cd packages/date-time-picker
+pnpm publish --access public
+```
+
+Or from monorepo root:
+
+```bash
+pnpm publish:date-time-picker
+```
+
+Enter OTP from your authenticator when prompted.
+
+### 6. Update consumer apps (restoranico)
+
+```bash
+cd /home/marko-og/Documents/wappa/restoranico
+pnpm update @imperijal/date-time-picker
+# or pin exact version in package.json:
+# "@imperijal/date-time-picker": "0.1.2"
+pnpm install
+```
+
+---
+
+## Release checklist
+
+- [ ] `pnpm demo` — component looks correct
+- [ ] `pnpm --filter @imperijal/date-time-picker build` — no errors
+- [ ] `pnpm --filter @imperijal/date-time-picker typecheck` — passes
+- [ ] Version bumped in `packages/date-time-picker/package.json`
+- [ ] CHANGELOG or commit message describes changes
+- [ ] `pnpm publish --access public` from package folder
+- [ ] Consumer app updated
+
+---
+
+## Multiple packages in this monorepo
+
+Each package under `packages/` has **its own version**:
+
+```
+packages/date-time-picker/     → @imperijal/date-time-picker@0.1.1
+packages/my-widget/            → @imperijal/my-widget@0.1.0
+```
+
+Bump and publish **each package separately**:
+
+```bash
+cd packages/my-widget
+npm version patch
+pnpm publish --access public
+```
+
+Add a root script when you create a new package:
+
+```json
+"publish:my-widget": "pnpm --filter @imperijal/my-widget publish --access public --no-git-checks"
+```
+
+---
+
+## Version history example
+
+| Version | Changes |
+|---------|---------|
+| `0.1.0` | Initial publish |
+| `0.1.1` | Fix `:root` theme CSS; add `popoverClassName` / `contentClassName` props |
+
+---
+
+## Never publish these
+
+| Path | Why |
+|------|-----|
+| Monorepo root `imperijal-components` | `"private": true` — not a package |
+| `apps/demo` | Demo site only — not on npm |
+
+---
+
+## Related docs
+
+- [PUBLISHING.md](./PUBLISHING.md) — npm login, 2FA, E403 fixes
+- [DEMO.md](./DEMO.md) — local demo playground
+- [CUSTOMIZATION.md](./CUSTOMIZATION.md) — Tailwind & props
+- [INSTALL_AND_USAGE.md](./INSTALL_AND_USAGE.md) — install in apps

package/apps/demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Imperijal Components — Demo</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/apps/demo/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@imperijal/demo",
+	"private": false,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@imperijal/date-time-picker": "workspace:*",
+		"@radix-ui/react-collapsible": "^1.1.11",
+		"@radix-ui/react-popover": "^1.1.14",
+		"@radix-ui/react-slot": "^1.2.3",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"lucide-react": "^0.511.0",
+		"react": "^19.0.0",
+		"react-day-picker": "^9.7.0",
+		"react-dom": "^19.0.0",
+		"tailwind-merge": "^3.0.0"
+	},
+	"devDependencies": {
+		"@tailwindcss/vite": "^4.1.8",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^4.5.2",
+		"tailwindcss": "^4.1.8",
+		"typescript": "^5.8.0",
+		"vite": "^6.3.5"
+	}
+}

package/apps/demo/src/App.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+
+import { DateTimePickerDemo } from './demos/DateTimePickerDemo';
+
+type DemoId = 'date-time-picker';
+
+const DEMOS: { id: DemoId; label: string; package: string }[] = [
+	{
+		id: 'date-time-picker',
+		label: 'Date & Time Picker',
+		package: '@imperijal/date-time-picker',
+	},
+];
+
+export default function App() {
+	const [active, setActive] = useState<DemoId>('date-time-picker');
+	const current = DEMOS.find((d) => d.id === active)!;
+
+	return (
+		<div className="flex min-h-screen">
+			<aside className="w-64 shrink-0 border-r border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur-xl">
+				<div className="mb-6">
+					<p className="text-[10px] font-bold uppercase tracking-widest text-primary/70">
+						Imperijal
+					</p>
+					<h1 className="bg-gradient-to-r from-primary to-indigo-500 bg-clip-text text-lg font-bold text-transparent">
+						Components
+					</h1>
+					<p className="text-xs text-muted-foreground">Local demo playground</p>
+				</div>
+
+				<nav className="space-y-1">
+					{DEMOS.map((demo) => (
+						<button
+							key={demo.id}
+							type="button"
+							onClick={() => setActive(demo.id)}
+							className={`w-full rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+								active === demo.id
+									? 'bg-primary text-primary-foreground'
+									: 'hover:bg-accent'
+							}`}
+						>
+							{demo.label}
+						</button>
+					))}
+				</nav>
+
+				<p className="mt-8 text-[10px] leading-relaxed text-muted-foreground">
+					Add new packages under{' '}
+					<code className="text-foreground">packages/</code> and register them
+					here.
+				</p>
+			</aside>
+
+			<main className="flex-1 p-8">
+				<p className="mb-6 text-xs text-muted-foreground">
+					Package:{' '}
+					<code className="rounded-md border border-white/50 bg-white/60 px-1.5 py-0.5 shadow-sm backdrop-blur-sm">
+						{current.package}
+					</code>
+				</p>
+				{active === 'date-time-picker' ? <DateTimePickerDemo /> : null}
+			</main>
+		</div>
+	);
+}

package/apps/demo/src/demos/DateTimePickerDemo.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+import {
+	DateTimePicker,
+	toLocalInputValue,
+} from '@imperijal/date-time-picker';
+
+export function DateTimePickerDemo() {
+	const [defaultSize, setDefaultSize] = useState(() =>
+		toLocalInputValue(new Date(Date.now() + 4 * 60 * 60 * 1000)),
+	);
+	const [smallSize, setSmallSize] = useState(() => toLocalInputValue(new Date()));
+	const [earlyHours, setEarlyHours] = useState('');
+
+	return (
+		<div className="space-y-8">
+			<header>
+				<h2 className="text-xl font-bold">DateTimePicker</h2>
+				<p className="mt-1 text-sm text-muted-foreground">
+					Output format:{' '}
+					<code className="rounded-md border border-white/50 bg-white/60 px-1.5 py-0.5 text-xs shadow-sm backdrop-blur-sm">
+						YYYY-MM-DDTHH:mm
+					</code>
+				</p>
+			</header>
+
+			<section className="grid gap-6 lg:grid-cols-2">
+				<div className="rounded-xl border border-white/50 bg-white/70 p-5 shadow-lg shadow-primary/5 backdrop-blur-md">
+					<h3 className="mb-1 text-sm font-semibold">Default size</h3>
+					<p className="mb-4 text-xs text-muted-foreground">
+						Default deadline-style usage
+					</p>
+					<DateTimePicker value={defaultSize} onChange={setDefaultSize} />
+					<p className="mt-3 font-mono text-xs text-primary">{defaultSize || '—'}</p>
+				</div>
+
+				<div className="rounded-xl border border-white/50 bg-white/70 p-5 shadow-lg shadow-primary/5 backdrop-blur-md">
+					<h3 className="mb-1 text-sm font-semibold">Small size</h3>
+					<p className="mb-4 text-xs text-muted-foreground">
+						Matches delivery list rows in restoranico
+					</p>
+					<DateTimePicker
+						value={smallSize}
+						onChange={setSmallSize}
+						size="sm"
+					/>
+					<p className="mt-3 font-mono text-xs text-primary">{smallSize || '—'}</p>
+				</div>
+
+				<div className="rounded-xl border border-white/50 bg-white/70 p-5 shadow-lg shadow-primary/5 backdrop-blur-md lg:col-span-2">
+					<h3 className="mb-1 text-sm font-semibold">Custom time range</h3>
+					<p className="mb-4 text-xs text-muted-foreground">
+						06:00–22:00, 15-minute slots
+					</p>
+					<div className="max-w-sm">
+						<DateTimePicker
+							value={earlyHours}
+							onChange={setEarlyHours}
+							popoverClassName="shadow-2xl"
+							timeSlots={{
+								startHour: 6,
+								endHour: 22,
+								intervalMinutes: 15,
+							}}
+						/>
+					</div>
+					<p className="mt-3 font-mono text-xs text-primary">
+						{earlyHours || '—'}
+					</p>
+				</div>
+			</section>
+		</div>
+	);
+}

package/apps/demo/src/index.css

@@ -0,0 +1,51 @@
+@import 'tailwindcss';
+@import 'react-day-picker/style.css';
+@import '../../../packages/date-time-picker/src/styles.css';
+
+@source "../../../packages/date-time-picker/src/**/*.tsx";
+@source "./**/*.tsx";
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--radius-md: 0.5rem;
+	--radius-xl: 0.75rem;
+}
+
+@layer base {
+	* {
+		border-color: var(--border);
+	}
+	body {
+		@apply min-h-screen text-foreground antialiased;
+		background-color: #f8f9ff;
+		background-image:
+			radial-gradient(
+				ellipse 80% 50% at 20% -10%,
+				color-mix(in srgb, var(--primary) 18%, transparent),
+				transparent
+			),
+			radial-gradient(
+				ellipse 60% 45% at 100% 0%,
+				color-mix(in srgb, #6366f1 14%, transparent),
+				transparent
+			),
+			radial-gradient(
+				ellipse 70% 50% at 50% 100%,
+				color-mix(in srgb, var(--primary) 10%, #dce9ff),
+				#f8f9ff
+			);
+		background-attachment: fixed;
+	}
+}

package/apps/demo/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/apps/demo/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"strict": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"isolatedModules": true,
+		"resolveJsonModule": true
+	},
+	"include": ["src"]
+}

package/apps/demo/vite.config.ts

@@ -0,0 +1,39 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+const root = path.dirname(fileURLToPath(import.meta.url));
+const pickerSrc = path.resolve(
+	root,
+	'../../packages/date-time-picker/src/index.ts',
+);
+
+export default defineConfig({
+	plugins: [react(), tailwindcss()],
+	// GitHub Pages: set IMPERIJAL_DEMO_BASE=/imperijal-components/ when deploying
+	base: process.env.IMPERIJAL_DEMO_BASE ?? '/',
+	resolve: {
+		alias: {
+			// Live source — edit packages/date-time-picker and see changes instantly
+			'@imperijal/date-time-picker': pickerSrc,
+		},
+	},
+	server: {
+		port: 5173,
+		open: true,
+		watch: {
+			// Reduce watchers (helps ENOSPC on Linux with low fs.inotify.max_user_watches)
+			ignored: [
+				'**/node_modules/**',
+				'**/.git/**',
+				'**/dist/**',
+				'**/.pnpm/**',
+			],
+			// Set CHOKIDAR_USEPOLLING=true if you still hit ENOSPC (no sudo needed)
+			usePolling: process.env.CHOKIDAR_USEPOLLING === 'true',
+		},
+	},
+});

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "imperijal-components",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Imperijal reusable React component packages (monorepo root — not published to npm)",
-  "keywords": [
-    "react",
-    "components",
-    "ui"
-  ],
   "license": "MIT",
   "engines": {
     "node": ">=18"
   },
   "scripts": {
-    "build": "pnpm -r build",
-    "dev": "pnpm -r dev",
-    "lint": "pnpm -r lint",
+    "build": "pnpm -r --filter './packages/*' build",
+    "dev": "pnpm --filter @imperijal/date-time-picker dev",
+    "demo": "pnpm --filter @imperijal/demo dev",
+    "demo:poll": "CHOKIDAR_USEPOLLING=true pnpm --filter @imperijal/demo dev",
+    "demo:build": "pnpm --filter @imperijal/demo build",
+    "demo:preview": "pnpm --filter @imperijal/demo preview",
     "typecheck": "pnpm -r typecheck",
     "publish:date-time-picker": "pnpm --filter @imperijal/date-time-picker publish --access public --no-git-checks"
   }

package/packages/date-time-picker/README.md

@@ -2,6 +2,14 @@
 
 Lumina-style date & time picker for React. Outputs **`YYYY-MM-DDTHH:mm`** (same as HTML `datetime-local`).
 
+![DateTimePicker demo](https://raw.githubusercontent.com/belforto/imperijal-components/main/apps/demo/demo.png)
+
+## Live demo
+
+After deploying `apps/demo` (see [DEMO.md](../DEMO.md)):
+
+**https://YOUR_DEMO_URL.vercel.app**
+
 ## Install
 
 ```bash
@@ -64,6 +72,12 @@ Your app needs shadcn-style CSS variables (`--primary`, `--border`, etc.) or imp
 | `size` | `'default' \| 'sm'` | `'default'` |
 | `timeSlots` | `{ startHour?, endHour?, intervalMinutes? }` | 5–24h, 30 min |
 | `disabled` | `boolean` | `false` |
+| `className` | `string` | — | Tailwind classes on **trigger button** |
+| `popoverClassName` | `string` | — | Tailwind classes on **popover panel** |
+| `contentClassName` | `string` | — | Tailwind classes on **inner content** |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` |
+
+See [CUSTOMIZATION.md](../../CUSTOMIZATION.md) for Tailwind setup and theming.
 
 ## Exports
 

package/packages/date-time-picker/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@imperijal/date-time-picker",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Lumina-style date & time picker for React (outputs YYYY-MM-DDTHH:mm)",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -43,9 +43,10 @@
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/YOUR_ORG/imperijal-components.git",
+		"url": "https://github.com/belforto/imperijal-components.git",
 		"directory": "packages/date-time-picker"
 	},
+	"homepage": "https://github.com/belforto/imperijal-components#readme",
 	"publishConfig": {
 		"access": "public"
 	},

package/packages/date-time-picker/src/components/date-time-picker.tsx

@@ -20,7 +20,12 @@ export type DateTimePickerProps = {
 	onChange: (value: string) => void;
 	placeholder?: string;
 	disabled?: boolean;
+	/** Tailwind classes on the trigger button */
 	className?: string;
+	/** Tailwind classes on the popover panel wrapper */
+	popoverClassName?: string;
+	/** Tailwind classes on the inner picker content */
+	contentClassName?: string;
 	id?: string;
 	size?: 'default' | 'sm';
 	timeSlots?: TimeSlotConfig;
@@ -33,6 +38,8 @@ export function DateTimePicker({
 	placeholder = 'Select date & time',
 	disabled = false,
 	className,
+	popoverClassName,
+	contentClassName,
 	id,
 	size = 'default',
 	timeSlots,
@@ -73,19 +80,24 @@ export function DateTimePicker({
 			</PopoverTrigger>
 			<PopoverContent
 				align={align}
-				className="w-[min(calc(100vw-2rem),28rem)] p-4"
+				className={cn(
+					'w-[min(calc(100vw-2rem),28rem)] p-4',
+					popoverClassName,
+				)}
 				onOpenAutoFocus={(e) => e.preventDefault()}
 			>
 				<div className="mb-4 flex items-center gap-2 border-b border-border/60 pb-3">
 					<ClockIcon className="size-5 text-primary" />
 					<h3 className="text-sm font-semibold">Select Date &amp; Time</h3>
 				</div>
-				<DateTimePickerContent
-					value={value}
-					open={open}
-					onConfirm={handleConfirm}
-					timeSlots={timeSlots}
-				/>
+				<div className={contentClassName}>
+					<DateTimePickerContent
+						value={value}
+						open={open}
+						onConfirm={handleConfirm}
+						timeSlots={timeSlots}
+					/>
+				</div>
 			</PopoverContent>
 		</Popover>
 	);

package/packages/date-time-picker/src/styles.css

@@ -1,8 +1,8 @@
 /**
- * Optional theme tokens for apps that don't already use shadcn-style CSS variables.
- * Import in your global CSS: @import '@imperijal/date-time-picker/styles.css';
+ * Theme tokens for apps without shadcn CSS variables.
+ * Import in global CSS: @import '@imperijal/date-time-picker/styles.css';
  */
-.imperijal-date-time-picker {
+:root {
 	--background: #ffffff;
 	--foreground: #0b1c30;
 	--popover: #ffffff;

package/pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - 'packages/*'
+  - 'apps/*'