imperijal-components 0.0.0

package/packages/date-time-picker/src/index.ts

@@ -0,0 +1,19 @@
+export { DateTimePicker, type DateTimePickerProps } from './components/date-time-picker';
+export {
+	DateTimePickerContent,
+	type DateTimePickerContentProps,
+} from './components/date-time-picker-content';
+export { useDateTimeSelection } from './components/use-date-time-selection';
+export {
+	toLocalInputValue,
+	parseLocalInputValue,
+	combineLocalDateTime,
+	formatLocalInputDisplay,
+} from './lib/local-input-value';
+export {
+	generateTimeSlots,
+	timeSlotKey,
+	type TimeSlot,
+	type TimeSlotConfig,
+} from './lib/time-slots';
+export { getQuickDateOptions, type QuickDateOption } from './lib/quick-dates';

package/packages/date-time-picker/src/lib/local-input-value.ts

@@ -0,0 +1,45 @@
+/**
+ * Utilities for the `datetime-local` value format: `YYYY-MM-DDTHH:mm`
+ * (local time, no seconds, no timezone suffix).
+ */
+
+/** Format a Date as a datetime-local string. */
+export function toLocalInputValue(d: Date): string {
+	const pad = (n: number) => String(n).padStart(2, '0');
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** Parse a datetime-local string into a Date, or null if invalid. */
+export function parseLocalInputValue(value: string): Date | null {
+	if (!value || !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value)) return null;
+	const d = new Date(value);
+	return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/** Combine a calendar date with hours/minutes into a datetime-local string. */
+export function combineLocalDateTime(
+	date: Date,
+	hours: number,
+	minutes: number,
+): string {
+	const d = new Date(date);
+	d.setHours(hours, minutes, 0, 0);
+	return toLocalInputValue(d);
+}
+
+/** Human-readable label for the trigger button. */
+export function formatLocalInputDisplay(
+	value: string,
+	placeholder?: string,
+): string {
+	const d = parseLocalInputValue(value);
+	if (!d) return placeholder ?? 'Select date & time';
+	return d.toLocaleString(undefined, {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit',
+		hour12: false,
+	});
+}

package/packages/date-time-picker/src/lib/quick-dates.ts

@@ -0,0 +1,59 @@
+import {
+	addDays,
+	format,
+	isSaturday,
+	isSunday,
+	nextSaturday,
+	nextSunday,
+	startOfDay,
+} from 'date-fns';
+
+export type QuickDateOption = {
+	id: string;
+	label: string;
+	sublabel: string;
+	date: Date;
+};
+
+function upcomingSaturday(reference: Date): Date {
+	return isSaturday(reference) ? startOfDay(reference) : nextSaturday(reference);
+}
+
+function upcomingSunday(reference: Date): Date {
+	return isSunday(reference) ? startOfDay(reference) : nextSunday(reference);
+}
+
+/** Quick-pick chips: Today, Tomorrow, upcoming Sat/Sun. */
+export function getQuickDateOptions(reference = new Date()): QuickDateOption[] {
+	const today = startOfDay(reference);
+	const tomorrow = addDays(today, 1);
+	const saturday = upcomingSaturday(today);
+	const sunday = upcomingSunday(today);
+
+	return [
+		{
+			id: 'today',
+			label: 'Today',
+			sublabel: format(today, 'MMM d'),
+			date: today,
+		},
+		{
+			id: 'tomorrow',
+			label: 'Tomorrow',
+			sublabel: format(tomorrow, 'MMM d'),
+			date: tomorrow,
+		},
+		{
+			id: 'saturday',
+			label: format(saturday, 'EEE'),
+			sublabel: format(saturday, 'MMM d'),
+			date: saturday,
+		},
+		{
+			id: 'sunday',
+			label: format(sunday, 'EEE'),
+			sublabel: format(sunday, 'MMM d'),
+			date: sunday,
+		},
+	];
+}

package/packages/date-time-picker/src/lib/time-slots.ts

@@ -0,0 +1,46 @@
+export type TimeSlot = {
+	hours: number;
+	minutes: number;
+	label: string;
+};
+
+export type TimeSlotConfig = {
+	startHour?: number;
+	endHour?: number;
+	intervalMinutes?: number;
+};
+
+const DEFAULT_CONFIG: Required<TimeSlotConfig> = {
+	startHour: 5,
+	endHour: 24,
+	intervalMinutes: 30,
+};
+
+/** Generate half-hour (or custom) time slots for the picker grid. */
+export function generateTimeSlots(config: TimeSlotConfig = {}): TimeSlot[] {
+	const { startHour, endHour, intervalMinutes } = {
+		...DEFAULT_CONFIG,
+		...config,
+	};
+
+	const slots: TimeSlot[] = [];
+	let totalMinutes = startHour * 60;
+	const endMinutes = endHour * 60;
+
+	while (totalMinutes < endMinutes) {
+		const hours = Math.floor(totalMinutes / 60);
+		const minutes = totalMinutes % 60;
+		slots.push({
+			hours,
+			minutes,
+			label: `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`,
+		});
+		totalMinutes += intervalMinutes;
+	}
+
+	return slots;
+}
+
+export function timeSlotKey(hours: number, minutes: number): string {
+	return `${hours}:${minutes}`;
+}

package/packages/date-time-picker/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 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';
+ */
+.imperijal-date-time-picker {
+	--background: #ffffff;
+	--foreground: #0b1c30;
+	--popover: #ffffff;
+	--popover-foreground: #0b1c30;
+	--primary: #004ac6;
+	--primary-foreground: #ffffff;
+	--secondary: #5c5f61;
+	--muted-foreground: #737686;
+	--accent: #eff4ff;
+	--accent-foreground: #0b1c30;
+	--border: #c3c6d7;
+	--input: #c3c6d7;
+	--ring: #2563eb;
+}

package/packages/date-time-picker/src/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				icon: 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : 'button';
+
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/packages/date-time-picker/src/ui/calendar.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import * as React from 'react';
+import {
+	ChevronDownIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
+} from 'lucide-react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
+
+import { cn } from '../lib/utils';
+import { Button, buttonVariants } from './button';
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = 'label',
+	buttonVariant = 'ghost',
+	formatters,
+	components,
+	...props
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				'bg-background group/calendar p-3 [--cell-size:2.5rem]',
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString('default', { month: 'short' }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn('w-fit', defaultClassNames.root),
+				months: cn(
+					'flex gap-4 flex-col md:flex-row relative',
+					defaultClassNames.months,
+				),
+				month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+				nav: cn(
+					'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+					defaultClassNames.month_caption,
+				),
+				caption_label: cn(
+					'select-none font-medium text-sm',
+					defaultClassNames.caption_label,
+				),
+				table: 'w-full border-collapse',
+				weekdays: cn('flex', defaultClassNames.weekdays),
+				weekday: cn(
+					'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+					defaultClassNames.weekday,
+				),
+				week: cn('flex w-full mt-2', defaultClassNames.week),
+				day: cn(
+					'relative w-full h-full p-0 text-center group/day aspect-square select-none',
+					defaultClassNames.day,
+				),
+				outside: cn(
+					'text-muted-foreground aria-selected:text-muted-foreground',
+					defaultClassNames.outside,
+				),
+				disabled: cn(
+					'text-muted-foreground opacity-50',
+					defaultClassNames.disabled,
+				),
+				hidden: cn('invisible', defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Chevron: ({ className, orientation, ...chevronProps }) => {
+					if (orientation === 'left') {
+						return (
+							<ChevronLeftIcon
+								className={cn('size-4', className)}
+								{...chevronProps}
+							/>
+						);
+					}
+					if (orientation === 'right') {
+						return (
+							<ChevronRightIcon
+								className={cn('size-4', className)}
+								{...chevronProps}
+							/>
+						);
+					}
+					return (
+						<ChevronDownIcon
+							className={cn('size-4', className)}
+							{...chevronProps}
+						/>
+					);
+				},
+				DayButton: CalendarDayButton,
+				...components,
+			}}
+			{...props}
+		/>
+	);
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = React.useRef<HTMLButtonElement>(null);
+
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			className={cn(
+				'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground flex aspect-square size-auto w-full min-w-(--cell-size) font-normal',
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar };

package/packages/date-time-picker/src/ui/collapsible.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root {...props} />;
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return <CollapsiblePrimitive.CollapsibleTrigger {...props} />;
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return <CollapsiblePrimitive.CollapsibleContent {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/packages/date-time-picker/src/ui/popover.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../lib/utils';
+
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root {...props} />;
+}
+
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground z-50 w-72 origin-[--radix-popover-content-transform-origin] rounded-md border p-4 shadow-md outline-none',
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+export { Popover, PopoverTrigger, PopoverContent };

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

@@ -0,0 +1,8 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"outDir": "dist"
+	},
+	"include": ["src"]
+}

package/packages/date-time-picker/tsup.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+	entry: ['src/index.ts'],
+	format: ['esm', 'cjs'],
+	dts: true,
+	sourcemap: true,
+	clean: true,
+	treeshake: true,
+	external: [
+		'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',
+	],
+});

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/tsconfig.base.json

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