uibee 3.2.0 → 3.3.1

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/components/alert/alert.d.ts
+type AlertProps = {
+  children: ReactNode;
+  variant?: 'warning' | 'info';
+  className?: string;
+};
+declare function Alert({
+  children,
+  variant,
+  className
+}: AlertProps): import("react").JSX.Element;
+//#endregion
+export { Alert as default };

package/dist/components/alert/alert.js

@@ -0,0 +1,29 @@
+import LeftBarPanel from "../container/leftBarPanel.js";
+import { CircleAlert, Info } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert/alert.tsx
+const styles = {
+	warning: {
+		color: "border-l-red-500",
+		iconClass: "w-4 h-4 shrink-0 stroke-red-400 mr-3 mt-0.5",
+		Icon: CircleAlert
+	},
+	info: {
+		color: "border-l-blue-500",
+		iconClass: "w-4 h-4 shrink-0 stroke-blue-400 mr-3 mt-0.5",
+		Icon: Info
+	}
+};
+function Alert({ children, variant = "warning", className = "" }) {
+	const { color, iconClass, Icon } = styles[variant] ?? styles.warning;
+	return /* @__PURE__ */ jsxs(LeftBarPanel, {
+		color,
+		className: `flex items-start px-4 py-3 text-sm text-login-100 ${className}`,
+		children: [/* @__PURE__ */ jsx(Icon, { className: iconClass }), /* @__PURE__ */ jsx("div", {
+			className: "leading-relaxed",
+			children
+		})]
+	});
+}
+//#endregion
+export { Alert as default };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/badge/badge.d.ts
+type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'amber' | 'violet' | 'blue' | 'emerald' | 'orange';
+type BadgeProps = {
+  text: string;
+  variant?: BadgeVariant;
+  size?: 'sm' | 'md';
+  className?: string;
+};
+declare function Badge({
+  text,
+  variant,
+  size,
+  className
+}: BadgeProps): import("react").JSX.Element;
+//#endregion
+export { Badge as default };

package/dist/components/badge/badge.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+const variants = {
+	default: "bg-login-600 text-login-100",
+	success: "bg-emerald-500/15 text-emerald-400",
+	warning: "bg-yellow-500/15 text-yellow-400",
+	danger: "bg-red-500/15 text-red-400",
+	info: "bg-sky-500/15 text-sky-400",
+	amber: "bg-amber-500/15 text-amber-400",
+	violet: "bg-violet-500/15 text-violet-400",
+	blue: "bg-blue-500/15 text-blue-400",
+	emerald: "bg-emerald-500/15 text-emerald-400",
+	orange: "bg-login/15 text-login"
+};
+const sizes = {
+	sm: "px-2 py-0.5 text-xs",
+	md: "px-2.5 py-1 text-sm"
+};
+function Badge({ text, variant = "default", size = "sm", className = "" }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: `inline-flex items-center rounded-full font-medium ${variants[variant]} ${sizes[size]} ${className}`,
+		children: text
+	});
+}
+//#endregion
+export { Badge as default };

package/dist/components/buttons/button.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from "react";
+
+//#region src/components/buttons/button.d.ts
+type ButtonProps = {
+  text?: string;
+  className?: string;
+  icon?: string | JSX.Element;
+  path?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'warning' | 'danger' | 'success' | 'info';
+  onClick?: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+};
+declare function Button({
+  text,
+  className,
+  icon,
+  path,
+  variant,
+  type,
+  onClick,
+  disabled
+}: ButtonProps): JSX.Element;
+//#endregion
+export { Button as default };

package/dist/components/buttons/button.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link.js";
+//#region src/components/buttons/button.tsx
+const variants = {
+	primary: "bg-login text-white hover:brightness-110",
+	secondary: "bg-login-500 text-login-50 hover:bg-login-400",
+	warning: "bg-yellow-500 text-black hover:brightness-110",
+	danger: "bg-red-600 text-white hover:brightness-110",
+	success: "bg-green-600 text-white hover:brightness-110",
+	info: "bg-blue-600 text-white hover:brightness-110"
+};
+const base = "cursor-pointer rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150";
+const withText = "px-4 w-fit";
+const iconOnly = "w-9";
+const disabledCls = "opacity-40 cursor-not-allowed pointer-events-none";
+const iconWrap = (icon) => icon ? /* @__PURE__ */ jsx("span", {
+	className: "[&>svg]:w-4 [&>svg]:h-4 flex items-center",
+	children: icon
+}) : null;
+function Button({ text, className, icon, path, variant = "primary", type, onClick, disabled }) {
+	const color = variants[variant];
+	const sizing = icon && !text ? iconOnly : withText;
+	const cls = `${base} ${sizing} ${color} ${disabled ? disabledCls : ""} ${className || ""}`;
+	if (!path) return /* @__PURE__ */ jsxs("button", {
+		type: type || "button",
+		disabled,
+		onClick,
+		"aria-label": text,
+		className: cls,
+		children: [iconWrap(icon), text]
+	});
+	if (disabled) return /* @__PURE__ */ jsxs("div", {
+		className: cls,
+		children: [iconWrap(icon), text]
+	});
+	return /* @__PURE__ */ jsxs(Link, {
+		href: path,
+		className: `${base} ${sizing} ${color} ${className || ""}`,
+		children: [iconWrap(icon), text]
+	});
+}
+//#endregion
+export { Button as default };

package/dist/components/code/code.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+//#region src/components/code/code.d.ts
+type CodeProps = {
+  children: ReactNode;
+  className?: string;
+};
+declare function Code({
+  children,
+  className
+}: CodeProps): import("react").JSX.Element;
+type CodeBlockProps = {
+  code: string;
+  language?: string;
+  className?: string;
+};
+declare function CodeBlock({
+  code,
+  language,
+  className
+}: CodeBlockProps): import("react").JSX.Element;
+//#endregion
+export { Code, CodeBlock };

package/dist/components/code/code.js

@@ -0,0 +1,39 @@
+"use client";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code/code.tsx
+function Code({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: `font-mono text-xs bg-login-700 text-login px-1.5 py-0.5 rounded ${className}`,
+		children
+	});
+}
+function CodeBlock({ code, language, className = "" }) {
+	const [copied, setCopied] = useState(false);
+	function copy() {
+		navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative group rounded-xl border border-login-500/30 bg-login-900 overflow-hidden ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 py-2 border-b border-login-500/20 bg-login-800",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-mono text-login-400",
+				children: language ?? ""
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: copy,
+				className: "flex cursor-pointer items-center gap-1.5 text-xs text-login-400 hover:text-login-100 transition-colors",
+				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 stroke-emerald-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }), copied ? "Copied" : "Copy"]
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto p-4 text-xs font-mono leading-relaxed text-login-100",
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+//#endregion
+export { Code, CodeBlock };

package/dist/components/confirm/confirmPopup.d.ts

@@ -0,0 +1,23 @@
+//#region src/components/confirm/confirmPopup.d.ts
+type ConfirmPopupProps = {
+  isOpen: boolean;
+  header: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  variant?: 'danger' | 'warning' | 'default';
+};
+declare function ConfirmPopup({
+  isOpen,
+  header,
+  description,
+  confirmText,
+  cancelText,
+  onConfirm,
+  onCancel,
+  variant
+}: ConfirmPopupProps): import("react").JSX.Element | null;
+//#endregion
+export { ConfirmPopup as default };

package/dist/components/confirm/confirmPopup.js

@@ -0,0 +1,52 @@
+"use client";
+import { TriangleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/confirm/confirmPopup.tsx
+function ConfirmPopup({ isOpen, header, description, confirmText = "Confirm", cancelText = "Cancel", onConfirm, onCancel, variant = "default" }) {
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "confirm-popup-header",
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		onClick: onCancel,
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }), /* @__PURE__ */ jsxs("div", {
+			className: "\n                    relative z-10 w-full max-w-md mx-4\n                    bg-login-800 border border-login-500/50 rounded-xl\n                    shadow-2xl p-6 flex flex-col gap-4\n                ",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3",
+					children: [variant !== "default" && /* @__PURE__ */ jsx(TriangleAlert, { className: `w-5 h-5 shrink-0 mt-0.5 ${variant === "danger" ? "stroke-red-400" : "stroke-yellow-400"}` }), /* @__PURE__ */ jsx("h2", {
+						id: "confirm-popup-header",
+						className: "text-login-50 text-base font-semibold leading-snug",
+						children: header
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-login-200 text-sm leading-relaxed",
+					children: description
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 mt-1",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onCancel,
+						className: "\n                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium\n                            bg-login-600 hover:bg-login-500 text-login-100\n                            transition-colors duration-150 select-none\n                        ",
+						children: cancelText
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onConfirm,
+						className: `
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium
+                            transition-all duration-150 select-none
+                            ${variant === "danger" ? "bg-red-600 hover:brightness-110 text-white" : variant === "warning" ? "bg-yellow-500 hover:brightness-110 text-black" : "bg-login hover:brightness-110 text-white"}
+                        `,
+						children: confirmText
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ConfirmPopup as default };

package/dist/components/container/accordion.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+//#region src/components/container/accordion.d.ts
+type AccordionProps = {
+  title: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+};
+type AccordionGroupProps = {
+  children: ReactNode;
+  className?: string;
+};
+declare function AccordionGroup({
+  children,
+  className
+}: AccordionGroupProps): import("react").JSX.Element;
+declare function Accordion({
+  title,
+  children,
+  defaultOpen,
+  className
+}: AccordionProps): import("react").JSX.Element;
+//#endregion
+export { AccordionGroup, Accordion as default };

package/dist/components/container/accordion.js

@@ -0,0 +1,41 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/accordion.tsx
+const GroupContext = createContext(false);
+function AccordionGroup({ children, className = "" }) {
+	return /* @__PURE__ */ jsx(GroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: `rounded-lg border border-login-500/40 overflow-hidden divide-y divide-login-500/25 ${className}`,
+			children
+		})
+	});
+}
+function Accordion({ title, children, defaultOpen = false, className = "" }) {
+	const [open, setOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsxs("div", {
+		className: useContext(GroupContext) ? className : `rounded-lg border border-login-500/40 overflow-hidden ${className}`,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			className: "\n                    flex w-full cursor-pointer items-center justify-between\n                    bg-login-800 px-4 py-3 text-left select-none\n                    transition-colors duration-150 hover:bg-login-700\n                ",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-sm font-medium text-login-50",
+				children: title
+			}), /* @__PURE__ */ jsx(ChevronDown, {
+				size: 16,
+				className: `shrink-0 text-login-300 transition-transform duration-200 ${open ? "rotate-180" : ""}`
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: `overflow-hidden bg-login-900 transition-all duration-200 ${open ? "max-h-[9999px]" : "max-h-0"}`,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-3 text-sm text-login-100",
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { AccordionGroup, Accordion as default };

package/dist/components/container/card.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+//#region src/components/container/card.d.ts
+type CardProps = {
+  children: ReactNode;
+  className?: string;
+};
+declare function Card({
+  children,
+  className
+}: CardProps): import("react").JSX.Element;
+//#endregion
+export { Card as default };

package/dist/components/container/card.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/card.tsx
+function Card({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: `rounded-xl border border-login-500/30 bg-login-500/50 ${className}`,
+		children
+	});
+}
+//#endregion
+export { Card as default };

package/dist/components/container/expandableCard.d.ts

@@ -0,0 +1,32 @@
+import { IconBubbleTone } from "./iconBubble.js";
+import { ElementType, ReactNode } from "react";
+
+//#region src/components/container/expandableCard.d.ts
+type PulseVariant = 'online' | 'offline' | 'warning' | 'unknown';
+type ExpandableCardProps = {
+  icon: ElementType;
+  iconTone?: IconBubbleTone;
+  title: string;
+  subtitle?: ReactNode;
+  pulse?: {
+    variant: PulseVariant;
+    label: string;
+  };
+  trailing?: ReactNode;
+  isExpanded: boolean;
+  onToggle: () => void;
+  children?: ReactNode;
+};
+declare function ExpandableCard({
+  icon,
+  iconTone,
+  title,
+  subtitle,
+  pulse,
+  trailing,
+  isExpanded,
+  onToggle,
+  children
+}: ExpandableCardProps): import("react").JSX.Element;
+//#endregion
+export { ExpandableCard as default };

package/dist/components/container/expandableCard.js

@@ -0,0 +1,70 @@
+"use client";
+import Card from "./card.js";
+import IconBubble from "./iconBubble.js";
+import PulseDot from "./pulseDot.js";
+import Button from "../buttons/button.js";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/expandableCard.tsx
+function ExpandableCard({ icon, iconTone = "orange", title, subtitle, pulse, trailing, isExpanded, onToggle, children }) {
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: onToggle,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onToggle();
+			}
+		},
+		"aria-expanded": isExpanded,
+		className: "group flex cursor-pointer select-none items-center gap-4 px-5 py-4",
+		children: [
+			/* @__PURE__ */ jsx(IconBubble, {
+				icon,
+				tone: iconTone,
+				size: "sm"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-semibold text-login-50 transition group-hover:text-login",
+						children: title
+					}), pulse && /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2 text-xs text-login-300",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex h-3 w-3 shrink-0 items-center justify-center",
+							children: /* @__PURE__ */ jsx(PulseDot, {
+								variant: pulse.variant,
+								size: "sm"
+							})
+						}), pulse.label]
+					})]
+				}), subtitle && /* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 text-xs text-login-300",
+					children: subtitle
+				})]
+			}),
+			trailing && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-3",
+				onClick: (e) => e.stopPropagation(),
+				children: trailing
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				icon: /* @__PURE__ */ jsx(ChevronDown, { className: `h-4 w-4 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }),
+				onClick: (e) => {
+					e.stopPropagation();
+					onToggle();
+				}
+			})
+		]
+	}), isExpanded && children && /* @__PURE__ */ jsx("div", {
+		className: "border-t border-white/5 px-5 pb-5 pt-4",
+		children
+	})] });
+}
+//#endregion
+export { ExpandableCard as default };

package/dist/components/container/glassCard.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+//#region src/components/container/glassCard.d.ts
+type GlassCardProps = {
+  children: ReactNode;
+  className?: string;
+};
+declare function GlassCard({
+  children,
+  className
+}: GlassCardProps): import("react").JSX.Element;
+//#endregion
+export { GlassCard as default };

package/dist/components/container/glassCard.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/glassCard.tsx
+function GlassCard({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `rounded-xl border border-login-500/20 bg-login-800/60 backdrop-blur-sm ${className}`,
+		children
+	});
+}
+//#endregion
+export { GlassCard as default };

package/dist/components/container/highlight.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/container/highlight.d.ts
+declare function Highlight({
+  children,
+  className
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { Highlight as default };

package/dist/components/container/highlight.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/highlight.tsx
+function Highlight({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `highlighted-section ${className ?? ""}`,
+		children
+	});
+}
+//#endregion
+export { Highlight as default };

package/dist/components/container/iconBubble.d.ts

@@ -0,0 +1,25 @@
+import { ElementType } from "react";
+
+//#region src/components/container/iconBubble.d.ts
+declare const tones: {
+  readonly amber: "bg-amber-500/10 text-amber-400";
+  readonly blue: "bg-sky-500/10 text-sky-400";
+  readonly emerald: "bg-emerald-500/10 text-emerald-400";
+  readonly rose: "bg-rose-500/10 text-rose-400";
+  readonly slate: "bg-login-600 text-login-100";
+  readonly violet: "bg-violet-500/10 text-violet-400";
+  readonly orange: "bg-login/10 text-login";
+};
+type IconBubbleProps = {
+  icon: ElementType;
+  tone?: keyof typeof tones;
+  size?: 'sm' | 'md' | 'lg';
+};
+type IconBubbleTone = keyof typeof tones;
+declare function IconBubble({
+  icon: Icon,
+  tone,
+  size
+}: IconBubbleProps): import("react").JSX.Element;
+//#endregion
+export { IconBubbleTone, IconBubble as default };

package/dist/components/container/iconBubble.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/iconBubble.tsx
+const tones = {
+	amber: "bg-amber-500/10 text-amber-400",
+	blue: "bg-sky-500/10 text-sky-400",
+	emerald: "bg-emerald-500/10 text-emerald-400",
+	rose: "bg-rose-500/10 text-rose-400",
+	slate: "bg-login-600 text-login-100",
+	violet: "bg-violet-500/10 text-violet-400",
+	orange: "bg-login/10 text-login"
+};
+function IconBubble({ icon: Icon, tone = "slate", size = "md" }) {
+	const sizeClass = size === "sm" ? "h-7 w-7" : size === "lg" ? "h-11 w-11" : "h-9 w-9";
+	const iconSize = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex shrink-0 items-center justify-center rounded-lg ${sizeClass} ${tones[tone]}`,
+		children: /* @__PURE__ */ jsx(Icon, { className: iconSize })
+	});
+}
+//#endregion
+export { IconBubble as default };

package/dist/components/container/leftBarPanel.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/components/container/leftBarPanel.d.ts
+type LeftBarPanelProps = {
+  color: string;
+  children: ReactNode;
+  className?: string;
+};
+declare function LeftBarPanel({
+  color,
+  children,
+  className
+}: LeftBarPanelProps): import("react").JSX.Element;
+//#endregion
+export { LeftBarPanel as default };

package/dist/components/container/leftBarPanel.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/leftBarPanel.tsx
+function LeftBarPanel({ color, children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `bg-login-500/50 border border-login-500/30 border-l-2 rounded-sm ${color} ${className}`,
+		children
+	});
+}
+//#endregion
+export { LeftBarPanel as default };

package/dist/components/container/page.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/container/page.d.ts
+type PageContainerProps = {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+  innerClassName?: string;
+};
+declare function PageContainer({
+  title,
+  children,
+  className,
+  innerClassName
+}: PageContainerProps): import("react").JSX.Element;
+//#endregion
+export { PageContainer as default };

package/dist/components/container/page.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/page.tsx
+function PageContainer({ title, children, className, innerClassName }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full page-container ${className}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `flex flex-col col-start-3 ${innerClassName}`,
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "heading",
+				children: title
+			}), children]
+		})
+	});
+}
+//#endregion
+export { PageContainer as default };