xiod-ui 1.0.0

package/dist/components/date-picker.js

@@ -0,0 +1,261 @@
+"use client";
+import { Button } from "./button.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { Calendar as Calendar$1 } from "./calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Calendar } from "xiod-icons/icons/Calendar";
+//#region src/components/date-picker.tsx
+const MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const MONTHS_SHORT = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+const formatSingleDate = (d, style = "PPP") => {
+	if (style === "yyyy-MM-dd") return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+	const day = d.getDate();
+	const month = MONTHS_SHORT[d.getMonth()];
+	const year = d.getFullYear();
+	if (style === "LLL dd, y") return `${month} ${day}, ${year}`;
+	return `${MONTHS[d.getMonth()]} ${day}, ${year}`;
+};
+const parseDateString = (val) => {
+	const parts = val.split("-");
+	if (parts.length === 3) {
+		const y = parseInt(parts[0], 10);
+		const m = parseInt(parts[1], 10) - 1;
+		const d = parseInt(parts[2], 10);
+		if (!Number.isNaN(y) && !Number.isNaN(m) && !Number.isNaN(d) && m >= 0 && m < 12 && d >= 1 && d <= 31) {
+			const parsed = new Date(y, m, d);
+			if (!Number.isNaN(parsed.getTime())) return parsed;
+		}
+	}
+	return null;
+};
+function handleInputKeyDown(event) {
+	if (event.key === "Enter") event.currentTarget.blur();
+}
+function DatePicker({ className, mode = "single", triggerType = "button", defaultValue, value, onSelect, placeholder, formatStr = "PPP", minDate, maxDate, disabled, numberOfMonths = 1, fixedWeeks = true, weekStartsOn = 0, showOutsideDays = true, disableOutsideDays = false, triggerClassName, triggerVariant = "outline", triggerSize = "default", ...props }) {
+	const [open, setOpen] = React$1.useState(false);
+	const inputGroupRef = React$1.useRef(null);
+	const [uncontrolledVal, setUncontrolledVal] = React$1.useState(defaultValue);
+	const isControlled = value !== void 0;
+	const activeValue = isControlled ? value : uncontrolledVal;
+	const [inputValFrom, setInputValFrom] = React$1.useState("");
+	const [inputValTo, setInputValTo] = React$1.useState("");
+	React$1.useEffect(() => {
+		if (mode === "single") {
+			const parsed = parseDateString(inputValFrom);
+			if ((activeValue instanceof Date ? activeValue.getTime() : null) !== (parsed ? parsed.getTime() : null)) {
+				if (activeValue instanceof Date) setInputValFrom(formatSingleDate(activeValue, "yyyy-MM-dd"));
+				else setInputValFrom("");
+			}
+		} else {
+			const range = activeValue;
+			const parsedFrom = parseDateString(inputValFrom);
+			const parsedTo = parseDateString(inputValTo);
+			const activeFromTime = range?.from ? range.from.getTime() : null;
+			const activeToTime = range?.to ? range.to.getTime() : null;
+			const parsedFromTime = parsedFrom ? parsedFrom.getTime() : null;
+			const parsedToTime = parsedTo ? parsedTo.getTime() : null;
+			if (activeFromTime !== parsedFromTime) {
+				if (range?.from) setInputValFrom(formatSingleDate(range.from, "yyyy-MM-dd"));
+				else setInputValFrom("");
+			}
+			if (activeToTime !== parsedToTime) {
+				if (range?.to) setInputValTo(formatSingleDate(range.to, "yyyy-MM-dd"));
+				else setInputValTo("");
+			}
+		}
+	}, [
+		activeValue,
+		mode,
+		inputValFrom,
+		inputValTo
+	]);
+	const handleSelect = (val) => {
+		if (!isControlled) setUncontrolledVal(val);
+		onSelect?.(val);
+		if (triggerType === "button") {
+			if (mode === "single" && val) setOpen(false);
+			else if (mode === "range" && val && typeof val === "object" && "from" in val && "to" in val && val.from && val.to) setOpen(false);
+		}
+	};
+	const handleInputChangeFrom = (e) => {
+		const val = e.target.value;
+		setInputValFrom(val);
+		const parsed = parseDateString(val);
+		if (parsed) {
+			if (mode === "single") handleSelect(parsed);
+			else handleSelect({
+				from: parsed,
+				to: (activeValue || {}).to
+			});
+		} else if (val === "") {
+			if (mode === "single") handleSelect(void 0);
+			else handleSelect({
+				from: void 0,
+				to: (activeValue || {}).to
+			});
+		}
+	};
+	const handleInputChangeTo = (e) => {
+		const val = e.target.value;
+		setInputValTo(val);
+		const parsed = parseDateString(val);
+		if (parsed) handleSelect({
+			from: (activeValue || {}).from,
+			to: parsed
+		});
+		else if (val === "") handleSelect({
+			from: (activeValue || {}).from,
+			to: void 0
+		});
+	};
+	const handleInputBlurFrom = () => {
+		const parsed = parseDateString(inputValFrom);
+		if (parsed) setInputValFrom(formatSingleDate(parsed, "yyyy-MM-dd"));
+		else if (mode === "single") {
+			if (activeValue instanceof Date) setInputValFrom(formatSingleDate(activeValue, "yyyy-MM-dd"));
+			else setInputValFrom("");
+		} else {
+			const range = activeValue;
+			if (range?.from) setInputValFrom(formatSingleDate(range.from, "yyyy-MM-dd"));
+			else setInputValFrom("");
+		}
+	};
+	const handleInputBlurTo = () => {
+		const parsed = parseDateString(inputValTo);
+		if (parsed) setInputValTo(formatSingleDate(parsed, "yyyy-MM-dd"));
+		else {
+			const range = activeValue;
+			if (range?.to) setInputValTo(formatSingleDate(range.to, "yyyy-MM-dd"));
+			else setInputValTo("");
+		}
+	};
+	const renderTriggerLabel = () => {
+		if (mode === "single") return activeValue instanceof Date ? formatSingleDate(activeValue, formatStr) : placeholder || "Pick a date";
+		const range = activeValue;
+		if (range?.from) {
+			if (range.to) return `${formatSingleDate(range.from, "LLL dd, y")} - ${formatSingleDate(range.to, "LLL dd, y")}`;
+			return `${formatSingleDate(range.from, "LLL dd, y")} - ...`;
+		}
+		return placeholder || "Pick a date range";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "date-picker",
+		className: cn("relative w-full max-w-sm", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [triggerType === "button" ? /* @__PURE__ */ jsxs(PopoverTrigger, {
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: triggerVariant,
+					size: triggerSize,
+					className: cn("w-full justify-start text-left font-normal tabular-nums [&_svg]:text-muted-foreground/80 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", !activeValue && "text-muted-foreground", triggerClassName)
+				}),
+				children: [/* @__PURE__ */ jsx(Calendar, { className: "size-4 shrink-0 pointer-events-none mr-2" }), renderTriggerLabel()]
+			}) : /* @__PURE__ */ jsxs(InputGroup, {
+				ref: inputGroupRef,
+				className: "w-full",
+				children: [mode === "single" ? /* @__PURE__ */ jsx(InputGroupInput, {
+					type: "date",
+					placeholder: placeholder || "YYYY-MM-DD",
+					value: inputValFrom,
+					onChange: handleInputChangeFrom,
+					onKeyDown: handleInputKeyDown,
+					onBlur: handleInputBlurFrom,
+					onClick: (e) => e.stopPropagation(),
+					"data-slot": "date-picker-input",
+					className: "font-medium tabular-nums *:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5 flex-1 px-3 py-1",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "date",
+							placeholder: "Start (YYYY-MM-DD)",
+							value: inputValFrom,
+							onChange: handleInputChangeFrom,
+							onKeyDown: handleInputKeyDown,
+							onBlur: handleInputBlurFrom,
+							onClick: (e) => e.stopPropagation(),
+							"data-slot": "date-picker-input-from",
+							className: "bg-transparent border-none outline-none font-medium text-sm w-full tabular-nums text-foreground placeholder:text-muted-foreground/50 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground/50 text-[10px] uppercase font-bold select-none shrink-0",
+							children: "to"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "date",
+							placeholder: "End (YYYY-MM-DD)",
+							value: inputValTo,
+							onChange: handleInputChangeTo,
+							onKeyDown: handleInputKeyDown,
+							onBlur: handleInputBlurTo,
+							onClick: (e) => e.stopPropagation(),
+							"data-slot": "date-picker-input-to",
+							className: "bg-transparent border-none outline-none font-medium text-sm w-full tabular-nums text-foreground placeholder:text-muted-foreground/50 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+						})
+					]
+				}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "icon-xs",
+						variant: "ghost",
+						className: "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
+						"aria-label": "Open Calendar popup"
+					}),
+					children: /* @__PURE__ */ jsx(Calendar, { className: "size-4 shrink-0 pointer-events-none" })
+				}) })]
+			}), /* @__PURE__ */ jsx(PopoverPopup, {
+				align: "start",
+				alignOffset: triggerType === "input" ? -1 : 0,
+				sideOffset: 8,
+				anchor: triggerType === "input" ? inputGroupRef : void 0,
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					mode,
+					selected: activeValue,
+					onSelect: handleSelect,
+					minDate,
+					maxDate,
+					disabled,
+					numberOfMonths,
+					fixedWeeks,
+					weekStartsOn,
+					showOutsideDays,
+					disableOutsideDays,
+					className: "border-none bg-transparent shadow-none p-0 before:shadow-none!"
+				})
+			})]
+		})
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };

package/dist/components/dialog.d.ts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.d.ts
+declare const DialogCreateHandle: typeof Dialog$1.createHandle;
+declare const Dialog: <Payload>(props: Dialog$1.Root.Props<Payload>) => React$1.JSX.Element;
+declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function DialogTrigger(props: Dialog$1.Trigger.Props): React$1.JSX.Element;
+declare function DialogClose(props: Dialog$1.Close.Props): React$1.JSX.Element;
+declare function DialogBackdrop({ className, ...props }: Dialog$1.Backdrop.Props): React$1.JSX.Element;
+declare function DialogViewport({ className, ...props }: Dialog$1.Viewport.Props): React$1.JSX.Element;
+declare function DialogPopup({ className, children, showCloseButton, bottomStickOnMobile, closeProps, ...props }: Dialog$1.Popup.Props & {
+  showCloseButton?: boolean;
+  bottomStickOnMobile?: boolean;
+  closeProps?: Dialog$1.Close.Props;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, variant, ...props }: React$1.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React$1.JSX.Element;
+declare function DialogPanel({ className, scrollFade, ...props }: React$1.ComponentProps<"div"> & {
+  scrollFade?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dialog.js

@@ -0,0 +1,97 @@
+"use client";
+import { ScrollArea } from "./scroll-area.js";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.tsx
+const DialogCreateHandle = Dialog$1.createHandle;
+const Dialog = Dialog$1.Root;
+const DialogPortal = Dialog$1.Portal;
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+		"data-slot": "dialog-backdrop",
+		...props
+	});
+}
+function DialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Viewport, {
+		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", className),
+		"data-slot": "dialog-viewport",
+		...props
+	});
+}
+function DialogPopup({ className, children, showCloseButton = true, bottomStickOnMobile = true, closeProps, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsx(DialogViewport, {
+		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
+		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+			className: cn("translate-y-[calc(-1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none", className),
+			"data-slot": "dialog-popup",
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+				"aria-label": "Close",
+				className: "absolute inset-e-2 top-2",
+				render: /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "ghost"
+				}),
+				...closeProps,
+				children: /* @__PURE__ */ jsx(Cancel, {})
+			})]
+		})
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4", className),
+		"data-slot": "dialog-header",
+		...props
+	});
+}
+function DialogFooter({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "border-t bg-muted/72 pt-[calc(--spacing(4)-1px)] pb-4", variant === "bare" && "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6", className),
+		"data-slot": "dialog-footer",
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		className: cn("font-heading font-semibold text-xl leading-none", className),
+		"data-slot": "dialog-title",
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "dialog-description",
+		...props
+	});
+}
+function DialogPanel({ className, scrollFade = true, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollFade,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1", className),
+			"data-slot": "dialog-panel",
+			...props
+		})
+	});
+}
+//#endregion
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dot-matrix.d.ts

@@ -0,0 +1,32 @@
+import * as React$1 from "react";
+//#region src/components/dot-matrix.d.ts
+export type DotMatrixShape = "circle" | "square" | "diamond" | "heart";
+export type DotMatrixPreset = "ripple" | "spiral" | "snake" | "wave" | "wave-vertical" | "pulse" | "diagonal" | "diagonal-reverse" | "rotor" | "columns-flux" | "helix" | "infinity" | "heart-pulse" | "orbit" | "matrix-rain" | "sine-wave" | "crt-glide" | "twin-orbit" | "rung-shift" | "lunar-breath" | "nova-wheel" | "prism-bloom" | "half-helix" | "honey-gate" | "spiral-lattice" | "altitude-wave" | "glyph-cluster" | "rail-scan" | "halo-drift" | "none";
+export type DotMatrixColorPreset = "solid" | "sunset" | "ocean" | "neon" | "aurora" | "fire" | "prism";
+export interface DotMatrixProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  rows?: number;
+  cols?: number;
+  mode?: "animation" | "static" | "vu";
+  pattern?: number[][] | boolean[][];
+  preset?: DotMatrixPreset;
+  frames?: number[][][];
+  isPlaying?: boolean;
+  loop?: boolean;
+  autoplay?: boolean;
+  fps?: number;
+  speed?: number;
+  levels?: number[];
+  dotSize?: number;
+  gap?: number;
+  shape?: DotMatrixShape;
+  colorPreset?: DotMatrixColorPreset;
+  color?: string;
+  colorOff?: string;
+  bloom?: boolean;
+  bloomIntensity?: number;
+  halo?: boolean;
+  ariaLabel?: string;
+  onFrame?: (index: number) => void;
+}
+export declare function DotMatrix({ rows, cols, mode, pattern, preset, frames, isPlaying, loop, autoplay, fps, speed, levels, dotSize, gap, shape, colorPreset, color, colorOff, bloom, bloomIntensity, halo, ariaLabel, className, onFrame, ...props }: DotMatrixProps): React$1.JSX.Element;
+//#endregion