uibee 3.2.0 → 3.3.1

package/dist/components/inputs/shared/dateTimePickerPopup.js

@@ -0,0 +1,225 @@
+"use client";
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/shared/dateTimePickerPopup.tsx
+const DAYS = [
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa",
+	"Su"
+];
+const MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+function DateTimePickerPopup({ value, onChange, type, onClose, anchorName }) {
+	const [currentDate, setCurrentDate] = useState(/* @__PURE__ */ new Date());
+	const [timeInput, setTimeInput] = useState({
+		hours: value ? value.getHours().toString() : "0",
+		minutes: value ? value.getMinutes().toString() : "0"
+	});
+	useEffect(() => {
+		if (value) {
+			setCurrentDate(value);
+			setTimeInput((prev) => ({
+				hours: prev.hours === "" && value.getHours() === 0 ? "" : value.getHours().toString(),
+				minutes: prev.minutes === "" && value.getMinutes() === 0 ? "" : value.getMinutes().toString()
+			}));
+		}
+	}, [value]);
+	function handleDateSelect(day) {
+		const newDate = new Date(currentDate);
+		newDate.setDate(day);
+		if (value) {
+			newDate.setHours(value.getHours());
+			newDate.setMinutes(value.getMinutes());
+		} else newDate.setHours(0, 0, 0, 0);
+		onChange(newDate);
+		if (type === "date" && onClose) onClose();
+	}
+	function handleTimeChange(timeUnit, val) {
+		const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
+		if (!value) newDate.setHours(0, 0, 0, 0);
+		if (timeUnit === "hours") {
+			if (val < 0 || val > 23) return;
+			newDate.setHours(val);
+		}
+		if (timeUnit === "minutes") {
+			if (val < 0 || val > 59) return;
+			newDate.setMinutes(val);
+		}
+		onChange(newDate);
+	}
+	function onTimeInputChange(unit, val) {
+		if (val === "") {
+			setTimeInput((prev) => ({
+				...prev,
+				[unit]: ""
+			}));
+			handleTimeChange(unit, 0);
+			return;
+		}
+		if (!/^\d+$/.test(val)) return;
+		const num = parseInt(val);
+		if (unit === "hours" && num > 23) return;
+		if (unit === "minutes" && num > 59) return;
+		setTimeInput((prev) => ({
+			...prev,
+			[unit]: val
+		}));
+		handleTimeChange(unit, num);
+	}
+	function onTimeInputBlur(unit) {
+		if (timeInput[unit] === "") {
+			const num = unit === "hours" ? value?.getHours() ?? 0 : value?.getMinutes() ?? 0;
+			setTimeInput((prev) => ({
+				...prev,
+				[unit]: num.toString()
+			}));
+		}
+	}
+	function getDaysInMonth(year, month) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+	function getFirstDayOfMonth(year, month) {
+		return new Date(year, month, 1).getDay();
+	}
+	function renderCalendar() {
+		const year = currentDate.getFullYear();
+		const month = currentDate.getMonth();
+		const daysInMonth = getDaysInMonth(year, month);
+		const firstDay = getFirstDayOfMonth(year, month);
+		const days = [];
+		const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+		for (let i = 0; i < adjustedFirstDay; i++) days.push(/* @__PURE__ */ jsx("div", { className: "w-8 h-8" }, `empty-${i}`));
+		for (let i = 1; i <= daysInMonth; i++) {
+			const isSelected = value && value.getDate() === i && value.getMonth() === month && value.getFullYear() === year;
+			const isToday = (/* @__PURE__ */ new Date()).getDate() === i && (/* @__PURE__ */ new Date()).getMonth() === month && (/* @__PURE__ */ new Date()).getFullYear() === year;
+			days.push(/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handleDateSelect(i),
+				className: `
+                        w-8 h-8 flex items-center justify-center rounded-full text-sm
+                        hover:bg-login-600 transition-colors
+                        ${isSelected ? "bg-login! text-white! hover:bg-login!" : ""}
+                        ${!isSelected && isToday ? "text-login! font-bold" : ""}
+                        ${!isSelected && !isToday ? "text-login-text!" : ""}
+                    `,
+				children: i
+			}, i));
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "p-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between mb-2",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCurrentDate(new Date(year, month - 1)),
+							className: "p-1 hover:bg-login-600 rounded-full text-login-text transition-colors",
+							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "font-medium text-login-text",
+							children: [
+								MONTHS[month],
+								" ",
+								year
+							]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCurrentDate(new Date(year, month + 1)),
+							className: "p-1 hover:bg-login-600 rounded-full text-login-text transition-colors",
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-7 gap-1 mb-1",
+					children: DAYS.map((d) => /* @__PURE__ */ jsx("div", {
+						className: "w-8 text-center text-xs text-login-200 font-medium",
+						children: d
+					}, d))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-7 gap-1",
+					children: days
+				})
+			]
+		});
+	}
+	function renderTimePicker() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "p-2 border-t border-login-500/25 flex justify-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs text-login-200 mb-1",
+						children: "Hour"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						inputMode: "numeric",
+						value: timeInput.hours,
+						onChange: (e) => onTimeInputChange("hours", e.target.value),
+						onBlur: () => onTimeInputBlur("hours"),
+						className: `
+                            w-16 p-1 bg-login-600 rounded text-center text-login-text text-sm
+                            border border-login-500/50 focus:border-login/60 focus:ring-1 focus:ring-login/30 outline-none
+                        `
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-end pb-2 text-login-text",
+					children: ":"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs text-login-200 mb-1",
+						children: "Minute"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						inputMode: "numeric",
+						value: timeInput.minutes,
+						onChange: (e) => onTimeInputChange("minutes", e.target.value),
+						onBlur: () => onTimeInputBlur("minutes"),
+						className: `
+                            w-16 p-1 bg-login-600 rounded text-center text-login-text text-sm
+                            border border-login-500/50 focus:border-login/60 focus:ring-1 focus:ring-login/30 outline-none
+                        `
+					})]
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed z-50 bg-login-700 border border-login-500/50 rounded-md shadow-xl p-1 min-w-70 anchor-popup",
+		style: {
+			positionAnchor: anchorName,
+			positionArea: "bottom span-right",
+			insetArea: "bottom span-right",
+			positionTryFallbacks: "flip-block",
+			margin: "0.25rem 0"
+		},
+		children: [type !== "time" && renderCalendar(), (type === "time" || type === "datetime-local") && renderTimePicker()]
+	});
+}
+//#endregion
+export { DateTimePickerPopup as default };

package/dist/components/inputs/shared/fieldWrapper.js

@@ -0,0 +1,33 @@
+import InputLabel from "./inputLabel.js";
+import InputInfo from "./inputInfo.js";
+import InputError from "./inputError.js";
+import MarkdownRender from "../../markdownrender/markdownRender.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/shared/fieldWrapper.tsx
+function FieldWrapper({ label, name, required, info, error, description, textSize = "sm", children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-1 w-full relative ${className || ""}`,
+		children: [
+			(label || info) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between mb-1",
+				children: [label && /* @__PURE__ */ jsx(InputLabel, {
+					label,
+					name,
+					required,
+					className: `ml-1 ${textSize === "sm" ? "text-sm!" : "text-base!"}`
+				}), info && /* @__PURE__ */ jsx(InputInfo, { info })]
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: "text-login-100 **:text-xs! ml-1 mb-1",
+				children: /* @__PURE__ */ jsx(MarkdownRender, { MDstr: String(description || "") })
+			}),
+			children,
+			/* @__PURE__ */ jsx(InputError, {
+				error,
+				id: `${name}-error`
+			})
+		]
+	});
+}
+//#endregion
+export { FieldWrapper as default };

package/dist/components/inputs/shared/index.js

@@ -0,0 +1,6 @@
+import InputLabel from "./inputLabel.js";
+import "./inputInfo.js";
+import "./inputError.js";
+import FieldWrapper from "./fieldWrapper.js";
+import "./colorPickerPopup.js";
+export { FieldWrapper, InputLabel };

package/dist/components/inputs/shared/inputError.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/shared/inputError.tsx
+function InputError({ error, id }) {
+	if (!error) return /* @__PURE__ */ jsx("div", { className: "h-4" });
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-4",
+		children: /* @__PURE__ */ jsx("span", {
+			id,
+			className: "text-xs text-red-400 ml-1 truncate block",
+			role: "alert",
+			title: error,
+			children: error
+		})
+	});
+}
+//#endregion
+export { InputError as default };

package/dist/components/inputs/shared/inputInfo.js

@@ -0,0 +1,13 @@
+import { CircleHelp } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/shared/inputInfo.tsx
+function InputInfo({ info }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-login-200 hover:text-login-text transition-colors",
+		"aria-label": info,
+		title: info,
+		children: /* @__PURE__ */ jsx(CircleHelp, { className: "w-4 h-4" })
+	});
+}
+//#endregion
+export { InputInfo as default };

package/dist/components/inputs/shared/inputLabel.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/shared/inputLabel.tsx
+function InputLabel({ label, name, required, disabled, className }) {
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: name,
+		className: `text-sm font-medium text-login-text ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className || ""}`,
+		title: label,
+		children: [
+			label,
+			" ",
+			required && /* @__PURE__ */ jsx("span", {
+				className: "text-red-500",
+				children: "*"
+			})
+		]
+	});
+}
+//#endregion
+export { InputLabel as default };

package/dist/components/inputs/switch.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/inputs/switch.d.ts
+type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  info?: string;
+  description?: string;
+  className?: string;
+  switchOnly?: boolean;
+  textSize?: 'sm' | 'md';
+};
+declare function Switch(props: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { SwitchProps, Switch as default };

package/dist/components/inputs/switch.js

@@ -0,0 +1,37 @@
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/switch.tsx
+function Switch(props) {
+	const { name, label, error, info, description, className, switchOnly, textSize = "sm", ...inputProps } = props;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: inputProps.required,
+		info,
+		error,
+		description,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: `group/sw inline-flex items-center cursor-pointer ${switchOnly ? "h-fit" : "h-10"}`,
+			children: [/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				type: "checkbox",
+				id: name,
+				name,
+				className: "sr-only"
+			}), /* @__PURE__ */ jsx("div", {
+				className: `
+                    relative flex items-center w-11 h-6 rounded-full transition-colors
+                    bg-login-600 group-has-[input:checked]/sw:bg-login
+                    ${inputProps.disabled ? "opacity-40 cursor-not-allowed" : ""}
+                    ${error ? "ring-1 ring-red-500/60" : ""}
+                `,
+				children: /* @__PURE__ */ jsx("span", { className: "\n                        absolute inset-y-0 my-auto left-0.5 h-5 w-5\n                        rounded-full bg-white shadow-sm transition-all\n                        group-has-[input:checked]/sw:translate-x-full\n                    " })
+			})]
+		})
+	});
+}
+//#endregion
+export { Switch as default };

package/dist/components/inputs/tagInput.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/inputs/tagInput.d.ts
+type TagInputProps = {
+  label?: string;
+  name: string;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+  disabled?: boolean;
+  required?: boolean;
+  info?: string;
+  description?: string;
+  textSize?: 'sm' | 'md';
+};
+declare function TagInput({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  disabled,
+  required,
+  info,
+  description,
+  textSize
+}: TagInputProps): import("react").JSX.Element;
+//#endregion
+export { TagInputProps, TagInput as default };

package/dist/components/inputs/tagInput.js

@@ -0,0 +1,72 @@
+"use client";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { useState } from "react";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/tagInput.tsx
+function TagInput({ label, name, value = [], onChange, placeholder = "Add...", error, className, disabled, required, info, description, textSize = "sm" }) {
+	const [inputValue, setInputValue] = useState("");
+	function handleKeyDown(e) {
+		if ((e.key === "Enter" || e.key === ",") && inputValue.trim()) {
+			e.preventDefault();
+			const val = inputValue.trim().replace(/,$/, "");
+			if (val && !value.includes(val)) {
+				const newValue = [...value, val];
+				if (onChange) onChange(newValue);
+			}
+			setInputValue("");
+		} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+			const newValue = value.slice(0, -1);
+			if (onChange) onChange(newValue);
+		}
+	}
+	function removeTag(index) {
+		if (disabled) return;
+		const newValue = value.filter((_, i) => i !== index);
+		if (onChange) onChange(newValue);
+	}
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		label,
+		name,
+		required,
+		info,
+		description,
+		error,
+		className,
+		textSize,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `
+                    flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500
+                    text-login-text min-h-10
+                    focus-within:border-login/60 focus-within:ring-1 focus-within:ring-login/30
+                    transition-all duration-150
+                    ${error ? "border-red-500/70 focus-within:border-red-500/70 focus-within:ring-red-500/30" : ""}
+                `,
+			children: [value.map((tag, index) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 px-2 py-0.5 bg-login-600 text-login-100 border border-login-500 rounded text-sm",
+				children: [tag, !disabled && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => removeTag(index),
+					className: "hover:text-red-200 transition-colors",
+					children: /* @__PURE__ */ jsx(X, { size: 14 })
+				})]
+			}, index)), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value: inputValue,
+				required: required && value.length === 0,
+				onChange: (e) => setInputValue(e.target.value),
+				onKeyDown: handleKeyDown,
+				disabled,
+				placeholder: value.length === 0 ? placeholder : "",
+				className: "flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200"
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value.join(",")
+		})]
+	});
+}
+//#endregion
+export { TagInput as default };

package/dist/components/inputs/textarea.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/inputs/textarea.d.ts
+type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  className?: string;
+  info?: string;
+  description?: string;
+  type?: 'markdown' | 'json' | 'text';
+  textSize?: 'sm' | 'md';
+};
+declare function Textarea(props: TextareaProps): import("react").JSX.Element;
+//#endregion
+export { TextareaProps, Textarea as default };

package/dist/components/inputs/textarea.js

@@ -0,0 +1,76 @@
+"use client";
+import MarkdownRender from "../markdownrender/markdownRender.js";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { useState } from "react";
+import { Eye, Pencil } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/textarea.tsx
+function isValidJson(str) {
+	try {
+		JSON.parse(str);
+		return null;
+	} catch (error) {
+		return error.message;
+	}
+}
+function Textarea(props) {
+	const { name, label, error, className, info, description, type = "text", rows = 4, textSize = "sm", ...textareaProps } = props;
+	const { value } = textareaProps;
+	const [preview, setPreview] = useState(false);
+	const displayError = (type === "json" && value ? isValidJson(value) : void 0) || error;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: textareaProps.required,
+		info,
+		description,
+		error: displayError,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				type === "markdown" && /* @__PURE__ */ jsx("div", {
+					className: "absolute right-2 top-2 z-10 flex gap-2",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setPreview(!preview),
+						className: "p-1 rounded hover:bg-login-500/50 text-login-text transition-colors",
+						title: preview ? "Edit" : "Preview",
+						children: preview ? /* @__PURE__ */ jsx(Pencil, { size: 16 }) : /* @__PURE__ */ jsx(Eye, { size: 16 })
+					})
+				}),
+				type === "markdown" && preview && /* @__PURE__ */ jsx("div", {
+					className: `
+                            w-full rounded-md bg-login-500/50 border border-login-500
+                            p-3 overflow-y-auto ${error ? "border-red-500/70" : ""}
+                        `,
+					children: /* @__PURE__ */ jsx(MarkdownRender, { MDstr: String(value || "") })
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					...textareaProps,
+					id: name,
+					name,
+					rows,
+					title: label,
+					"aria-invalid": !!error,
+					"aria-describedby": error ? `${name}-error` : void 0,
+					className: `
+                        ${type === "markdown" && preview ? "hidden" : ""}
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text placeholder-login-200 text-sm
+                        focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        p-3 pr-10
+                        transition-all duration-150
+                        resize-y
+                        ${error ? "border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30" : ""}
+                    `
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Textarea as default };

package/dist/components/inputs/toggle.d.ts

@@ -0,0 +1,21 @@
+//#region src/components/inputs/toggle.d.ts
+type ToggleOption<T> = {
+  value: T;
+  label?: string;
+  text?: string;
+  icon?: React.ReactNode;
+};
+type ToggleProps<T> = {
+  value: T;
+  onChange: (value: T) => void;
+  left: ToggleOption<T>;
+  right: ToggleOption<T>;
+};
+declare function Toggle<T>({
+  value,
+  onChange,
+  left,
+  right
+}: ToggleProps<T>): import("react").JSX.Element;
+//#endregion
+export { Toggle as default };

package/dist/components/inputs/toggle.js

@@ -0,0 +1,33 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/toggle.tsx
+function Toggle({ value, onChange, left, right }) {
+	const active = "bg-login text-white shadow-sm";
+	const idle = "text-login-200 hover:text-login-50 hover:bg-login-500/50";
+	const base = "flex items-center justify-center rounded-md px-3 h-7 transition-all duration-150 gap-1.5 text-sm";
+	function renderContent(opt) {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [opt.icon, opt.text && /* @__PURE__ */ jsx("span", { children: opt.text })] });
+	}
+	const isLeftActive = value === left.value;
+	const isRightActive = value === right.value;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center w-fit bg-login-500/50 border border-login-500 rounded-lg p-1 gap-0.5",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onChange(left.value),
+			"aria-label": left.label ?? left.text,
+			"aria-pressed": isLeftActive,
+			className: `${base} ${isLeftActive ? active : idle}`,
+			children: renderContent(left)
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onChange(right.value),
+			"aria-label": right.label ?? right.text,
+			"aria-pressed": isRightActive,
+			className: `${base} ${isRightActive ? active : idle}`,
+			children: renderContent(right)
+		})]
+	});
+}
+//#endregion
+export { Toggle as default };

package/dist/components/login/loginPage.d.ts

@@ -0,0 +1,15 @@
+import { LoginPageProps } from "uibee/components";
+
+//#region src/components/login/loginPage.d.ts
+declare function LoginPage({
+  title,
+  description,
+  redirectPath,
+  version,
+  btg,
+  handleSubmit,
+  guestRedirectPath,
+  guestText
+}: LoginPageProps): import("react").JSX.Element;
+//#endregion
+export { LoginPage as default };