imperijal-components 0.0.0

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

@@ -0,0 +1,78 @@
+# @imperijal/date-time-picker
+
+Lumina-style date & time picker for React. Outputs **`YYYY-MM-DDTHH:mm`** (same as HTML `datetime-local`).
+
+## Install
+
+```bash
+pnpm add @imperijal/date-time-picker
+```
+
+Peer dependencies (install in your app if missing):
+
+```bash
+pnpm add react react-dom date-fns lucide-react react-day-picker \
+  @radix-ui/react-popover @radix-ui/react-collapsible @radix-ui/react-slot \
+  class-variance-authority clsx tailwind-merge
+```
+
+## Usage
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import {
+  DateTimePicker,
+  toLocalInputValue,
+} from '@imperijal/date-time-picker';
+
+export function Example() {
+  const [value, setValue] = useState(() => toLocalInputValue(new Date()));
+
+  return (
+    <DateTimePicker
+      value={value}
+      onChange={setValue}
+      timeSlots={{ startHour: 5, endHour: 24, intervalMinutes: 30 }}
+    />
+  );
+}
+```
+
+## Tailwind
+
+This package uses Tailwind utility classes. Scan the built output in your app config:
+
+```
+node_modules/@imperijal/date-time-picker/dist/**/*.js
+```
+
+Your app needs shadcn-style CSS variables (`--primary`, `--border`, etc.) or import:
+
+```css
+@import '@imperijal/date-time-picker/styles.css';
+```
+
+## API
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `string` | required — `YYYY-MM-DDTHH:mm` |
+| `onChange` | `(value: string) => void` | required |
+| `placeholder` | `string` | `'Select date & time'` |
+| `size` | `'default' \| 'sm'` | `'default'` |
+| `timeSlots` | `{ startHour?, endHour?, intervalMinutes? }` | 5–24h, 30 min |
+| `disabled` | `boolean` | `false` |
+
+## Exports
+
+- `DateTimePicker`
+- `DateTimePickerContent` (headless panel)
+- `useDateTimeSelection`
+- `toLocalInputValue`, `parseLocalInputValue`, `formatLocalInputDisplay`
+- `generateTimeSlots`, `getQuickDateOptions`
+
+## License
+
+MIT

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

@@ -0,0 +1,82 @@
+{
+	"name": "@imperijal/date-time-picker",
+	"version": "0.1.0",
+	"description": "Lumina-style date & time picker for React (outputs YYYY-MM-DDTHH:mm)",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			},
+			"require": {
+				"types": "./dist/index.d.cts",
+				"default": "./dist/index.cjs"
+			}
+		},
+		"./styles.css": "./src/styles.css"
+	},
+	"files": [
+		"dist",
+		"src/styles.css",
+		"README.md"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"scripts": {
+		"build": "tsup",
+		"dev": "tsup --watch",
+		"typecheck": "tsc --noEmit",
+		"prepublishOnly": "pnpm build"
+	},
+	"keywords": [
+		"react",
+		"datetime",
+		"date-picker",
+		"time-picker",
+		"tailwind"
+	],
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/YOUR_ORG/imperijal-components.git",
+		"directory": "packages/date-time-picker"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"@radix-ui/react-collapsible": "^1.1.0",
+		"@radix-ui/react-popover": "^1.1.0",
+		"@radix-ui/react-slot": "^1.1.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.0",
+		"date-fns": "^4.0.0",
+		"lucide-react": ">=0.400.0",
+		"react": "^18 || ^19",
+		"react-day-picker": "^9.0.0",
+		"react-dom": "^18 || ^19",
+		"tailwind-merge": "^2.0.0 || ^3.0.0"
+	},
+	"devDependencies": {
+		"@radix-ui/react-collapsible": "^1.1.11",
+		"@radix-ui/react-popover": "^1.1.14",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"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",
+		"tsup": "^8.5.0",
+		"typescript": "^5.8.0"
+	}
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { format } from 'date-fns';
+import { CalendarIcon, ChevronDownIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { Calendar } from '../ui/calendar';
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from '../ui/collapsible';
+import { cn } from '../lib/utils';
+
+type DateCalendarPanelProps = {
+	selected: Date | null;
+	onSelect: (date: Date) => void;
+};
+
+export function DateCalendarPanel({ selected, onSelect }: DateCalendarPanelProps) {
+	const [open, setOpen] = useState(false);
+	const month = useMemo(() => selected ?? new Date(), [selected]);
+
+	return (
+		<Collapsible open={open} onOpenChange={setOpen}>
+			<CollapsibleTrigger asChild>
+				<button
+					type="button"
+					className="group flex w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-3 transition-colors hover:bg-accent"
+				>
+					<div className="flex items-center gap-3">
+						<CalendarIcon className="size-5 text-muted-foreground transition-colors group-hover:text-primary" />
+						<span className="text-sm font-medium">View Calendar</span>
+					</div>
+					<ChevronDownIcon
+						className={cn(
+							'size-5 text-muted-foreground transition-transform duration-300',
+							open && 'rotate-180',
+						)}
+					/>
+				</button>
+			</CollapsibleTrigger>
+			<CollapsibleContent className="mt-4 overflow-hidden rounded-xl border border-border bg-background p-4 shadow-sm">
+				<div className="mb-3 flex items-center justify-between px-1">
+					<span className="text-sm font-semibold">
+						{format(month, 'MMMM yyyy')}
+					</span>
+				</div>
+				<Calendar
+					mode="single"
+					selected={selected ?? undefined}
+					onSelect={(date) => {
+						if (!date) return;
+						onSelect(date);
+						setOpen(false);
+					}}
+					defaultMonth={month}
+					className="mx-auto p-0"
+				/>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+}

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

@@ -0,0 +1,45 @@
+import type { QuickDateOption } from '../lib/quick-dates';
+import { cn } from '../lib/utils';
+
+type DateQuickChipsProps = {
+	options: QuickDateOption[];
+	isSelected: (date: Date) => boolean;
+	onSelect: (date: Date) => void;
+};
+
+export function DateQuickChips({
+	options,
+	isSelected,
+	onSelect,
+}: DateQuickChipsProps) {
+	return (
+		<div className="flex gap-2 overflow-x-auto pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+			{options.map((option) => {
+				const active = isSelected(option.date);
+				return (
+					<button
+						key={option.id}
+						type="button"
+						onClick={() => onSelect(option.date)}
+						className={cn(
+							'flex-shrink-0 rounded-xl border px-5 py-2.5 text-left transition-all active:scale-95',
+							active
+								? 'border-primary bg-primary text-primary-foreground shadow-sm ring-2 ring-primary/20'
+								: 'border-border bg-background hover:bg-accent',
+						)}
+					>
+						<span
+							className={cn(
+								'block text-[10px] font-bold uppercase tracking-widest',
+								active ? 'text-primary-foreground/80' : 'text-muted-foreground',
+							)}
+						>
+							{option.label}
+						</span>
+						<span className="block text-sm font-semibold">{option.sublabel}</span>
+					</button>
+				);
+			})}
+		</div>
+	);
+}

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

@@ -0,0 +1,121 @@
+'use client';
+
+import { format } from 'date-fns';
+import { ArrowRightIcon } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { getQuickDateOptions } from '../lib/quick-dates';
+import {
+	generateTimeSlots,
+	type TimeSlotConfig,
+} from '../lib/time-slots';
+import { Button } from '../ui/button';
+import { DateCalendarPanel } from './date-calendar-panel';
+import { DateQuickChips } from './date-quick-chips';
+import { TimeSlotGrid } from './time-slot-grid';
+import { useDateTimeSelection } from './use-date-time-selection';
+
+export type DateTimePickerContentProps = {
+	value: string;
+	open: boolean;
+	onConfirm: (value: string) => void;
+	timeSlots?: TimeSlotConfig;
+};
+
+export function DateTimePickerContent({
+	value,
+	open,
+	onConfirm,
+	timeSlots,
+}: DateTimePickerContentProps) {
+	const quickDates = useMemo(() => getQuickDateOptions(), []);
+	const slots = useMemo(() => generateTimeSlots(timeSlots), [timeSlots]);
+
+	const {
+		draft,
+		selectDate,
+		selectTime,
+		selectedTimeKey,
+		isDateSelected,
+		isDraftComplete,
+		draftValue,
+		matchesQuickDate,
+	} = useDateTimeSelection({ value, open });
+
+	const selectedDateLabel = draft.date
+		? format(draft.date, 'EEE, MMM d')
+		: null;
+	const selectedTimeLabel =
+		draft.hours != null && draft.minutes != null
+			? `${String(draft.hours).padStart(2, '0')}:${String(draft.minutes).padStart(2, '0')}`
+			: null;
+
+	return (
+		<div className="flex max-h-[min(80vh,640px)] flex-col">
+			<div className="flex-1 space-y-6 overflow-y-auto p-1 pr-2">
+				<section>
+					<div className="mb-4 flex items-center justify-between">
+						<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+							Step 1: Choose Date
+						</span>
+						{selectedDateLabel ? (
+							<span className="text-sm font-medium text-primary">
+								{selectedDateLabel}
+							</span>
+						) : null}
+					</div>
+
+					<DateQuickChips
+						options={quickDates}
+						isSelected={matchesQuickDate}
+						onSelect={selectDate}
+					/>
+
+					<div className="mt-4">
+						<DateCalendarPanel selected={draft.date} onSelect={selectDate} />
+					</div>
+				</section>
+
+				<section
+					className={
+						isDateSelected
+							? 'opacity-100 transition-opacity duration-300'
+							: 'pointer-events-none opacity-40 transition-opacity duration-300'
+					}
+				>
+					<div className="mb-4 flex items-center justify-between">
+						<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+							Step 2: Choose Time
+						</span>
+						{selectedTimeLabel ? (
+							<span className="text-sm font-medium text-primary">
+								{selectedTimeLabel}
+							</span>
+						) : null}
+					</div>
+
+					<TimeSlotGrid
+						slots={slots}
+						selectedKey={selectedTimeKey}
+						disabled={!isDateSelected}
+						onSelect={selectTime}
+					/>
+				</section>
+			</div>
+
+			<div className="mt-4 border-t border-border/60 pt-4">
+				<Button
+					type="button"
+					className="h-11 w-full rounded-xl text-sm font-semibold shadow-lg"
+					disabled={!isDraftComplete || !draftValue}
+					onClick={() => {
+						if (draftValue) onConfirm(draftValue);
+					}}
+				>
+					Confirm Selection
+					<ArrowRightIcon className="size-4" />
+				</Button>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { CalendarIcon, ClockIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import {
+	formatLocalInputDisplay,
+} from '../lib/local-input-value';
+import type { TimeSlotConfig } from '../lib/time-slots';
+import { cn } from '../lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import {
+	DateTimePickerContent,
+	type DateTimePickerContentProps,
+} from './date-time-picker-content';
+
+export type DateTimePickerProps = {
+	/** datetime-local string: `YYYY-MM-DDTHH:mm` */
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	disabled?: boolean;
+	className?: string;
+	id?: string;
+	size?: 'default' | 'sm';
+	timeSlots?: TimeSlotConfig;
+	align?: 'start' | 'center' | 'end';
+};
+
+export function DateTimePicker({
+	value,
+	onChange,
+	placeholder = 'Select date & time',
+	disabled = false,
+	className,
+	id,
+	size = 'default',
+	timeSlots,
+	align = 'start',
+}: DateTimePickerProps) {
+	const [open, setOpen] = useState(false);
+
+	const handleConfirm: DateTimePickerContentProps['onConfirm'] = (next) => {
+		onChange(next);
+		setOpen(false);
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<button
+					id={id}
+					type="button"
+					disabled={disabled}
+					className={cn(
+						'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-left shadow-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
+						size === 'sm'
+							? 'px-2 py-1 text-[11px]'
+							: 'px-2 py-1.5 text-xs',
+						className,
+					)}
+				>
+					<span className={cn('truncate', !value && 'text-muted-foreground')}>
+						{formatLocalInputDisplay(value, placeholder)}
+					</span>
+					<CalendarIcon
+						className={cn(
+							'shrink-0 text-muted-foreground',
+							size === 'sm' ? 'size-3.5' : 'size-4',
+						)}
+					/>
+				</button>
+			</PopoverTrigger>
+			<PopoverContent
+				align={align}
+				className="w-[min(calc(100vw-2rem),28rem)] p-4"
+				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}
+				/>
+			</PopoverContent>
+		</Popover>
+	);
+}

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

@@ -0,0 +1,122 @@
+'use client';
+
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { TimeSlot } from '../lib/time-slots';
+import { timeSlotKey } from '../lib/time-slots';
+import { cn } from '../lib/utils';
+
+type TimeSlotGridProps = {
+	slots: TimeSlot[];
+	selectedKey: string | null;
+	disabled?: boolean;
+	onSelect: (hours: number, minutes: number) => void;
+};
+
+const SCROLL_STEP_PX = 128;
+
+export function TimeSlotGrid({
+	slots,
+	selectedKey,
+	disabled = false,
+	onSelect,
+}: TimeSlotGridProps) {
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [canScrollUp, setCanScrollUp] = useState(false);
+	const [canScrollDown, setCanScrollDown] = useState(false);
+
+	const updateScrollState = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setCanScrollUp(el.scrollTop > 1);
+		setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
+	}, []);
+
+	useEffect(() => {
+		updateScrollState();
+	}, [slots, updateScrollState]);
+
+	useEffect(() => {
+		if (!selectedKey || !scrollRef.current) return;
+		const selected = scrollRef.current.querySelector(
+			`[data-slot-key="${selectedKey}"]`,
+		);
+		selected?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+		const timer = window.setTimeout(updateScrollState, 200);
+		return () => window.clearTimeout(timer);
+	}, [selectedKey, updateScrollState]);
+
+	const scrollBy = (delta: number) => {
+		scrollRef.current?.scrollBy({ top: delta, behavior: 'smooth' });
+	};
+
+	return (
+		<div
+			className={cn(
+				'overflow-hidden rounded-xl border border-border bg-background transition-opacity duration-300',
+				disabled && 'pointer-events-none opacity-40',
+			)}
+		>
+			<button
+				type="button"
+				disabled={disabled || !canScrollUp}
+				onClick={() => scrollBy(-SCROLL_STEP_PX)}
+				aria-label="Show earlier times"
+				className={cn(
+					'flex w-full items-center justify-center border-b border-border py-1.5 transition-colors',
+					canScrollUp && !disabled
+						? 'text-primary hover:bg-accent active:scale-95'
+						: 'cursor-default text-muted-foreground/30',
+				)}
+			>
+				<ChevronUpIcon className="size-5" />
+			</button>
+
+			<div
+				ref={scrollRef}
+				onScroll={updateScrollState}
+				className="max-h-52 overflow-y-auto px-2 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+			>
+				<div className="grid grid-cols-3 gap-2">
+					{slots.map((slot) => {
+						const key = timeSlotKey(slot.hours, slot.minutes);
+						const active = selectedKey === key;
+						return (
+							<button
+								key={key}
+								type="button"
+								data-slot-key={key}
+								disabled={disabled}
+								onClick={() => onSelect(slot.hours, slot.minutes)}
+								className={cn(
+									'rounded-xl border py-3 text-sm font-medium transition-all active:scale-95',
+									active
+										? 'border-primary bg-primary text-primary-foreground shadow-md'
+										: 'border-border bg-background hover:border-primary hover:bg-accent',
+								)}
+							>
+								{slot.label}
+							</button>
+						);
+					})}
+				</div>
+			</div>
+
+			<button
+				type="button"
+				disabled={disabled || !canScrollDown}
+				onClick={() => scrollBy(SCROLL_STEP_PX)}
+				aria-label="Show later times"
+				className={cn(
+					'flex w-full items-center justify-center border-t border-border py-1.5 transition-colors',
+					canScrollDown && !disabled
+						? 'text-primary hover:bg-accent active:scale-95'
+						: 'cursor-default text-muted-foreground/30',
+				)}
+			>
+				<ChevronDownIcon className="size-5" />
+			</button>
+		</div>
+	);
+}

package/packages/date-time-picker/src/components/use-date-time-selection.ts

@@ -0,0 +1,83 @@
+import { isSameDay, startOfDay } from 'date-fns';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import {
+	combineLocalDateTime,
+	parseLocalInputValue,
+} from '../lib/local-input-value';
+import { timeSlotKey } from '../lib/time-slots';
+
+export type DateTimeDraft = {
+	date: Date | null;
+	hours: number | null;
+	minutes: number | null;
+};
+
+export function draftFromLocalValue(value: string): DateTimeDraft {
+	const parsed = parseLocalInputValue(value);
+	if (!parsed) return { date: null, hours: null, minutes: null };
+	return {
+		date: startOfDay(parsed),
+		hours: parsed.getHours(),
+		minutes: parsed.getMinutes(),
+	};
+}
+
+export function draftToLocalValue(draft: DateTimeDraft): string | null {
+	if (draft.date == null || draft.hours == null || draft.minutes == null) {
+		return null;
+	}
+	return combineLocalDateTime(draft.date, draft.hours, draft.minutes);
+}
+
+export function isDraftComplete(draft: DateTimeDraft): boolean {
+	return draft.date != null && draft.hours != null && draft.minutes != null;
+}
+
+type UseDateTimeSelectionOptions = {
+	value: string;
+	open: boolean;
+};
+
+export function useDateTimeSelection({
+	value,
+	open,
+}: UseDateTimeSelectionOptions) {
+	const committed = useMemo(() => draftFromLocalValue(value), [value]);
+	const [draft, setDraft] = useState<DateTimeDraft>(committed);
+
+	useEffect(() => {
+		if (open) setDraft(committed);
+	}, [open, committed]);
+
+	const selectDate = useCallback((date: Date) => {
+		setDraft((prev) => ({ ...prev, date: startOfDay(date) }));
+	}, []);
+
+	const selectTime = useCallback((hours: number, minutes: number) => {
+		setDraft((prev) => ({ ...prev, hours, minutes }));
+	}, []);
+
+	const selectedTimeKey =
+		draft.hours != null && draft.minutes != null
+			? timeSlotKey(draft.hours, draft.minutes)
+			: null;
+
+	const isDateSelected = draft.date != null;
+
+	const matchesQuickDate = useCallback(
+		(date: Date) => draft.date != null && isSameDay(draft.date, date),
+		[draft.date],
+	);
+
+	return {
+		draft,
+		selectDate,
+		selectTime,
+		selectedTimeKey,
+		isDateSelected,
+		isDraftComplete: isDraftComplete(draft),
+		draftValue: draftToLocalValue(draft),
+		matchesQuickDate,
+	};
+}