@aortl/admin-react 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useMemo, useState } from "react";
+import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
@@ -10,7 +10,8 @@ import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-import { Dialog } from "@base-ui/react/dialog";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/Accordion.tsx
 function AccordionRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -711,6 +712,131 @@ var Card = Object.assign(CardRoot, {
 	Actions: CardActions
 });
 //#endregion
+//#region src/Dialog.tsx
+var DialogContext = createContext(null);
+function DefaultCloseIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+/**
+* The bare `<dialog>` primitive — no opinions about header, body, or footer.
+* Use this when the default `<Dialog>` layout doesn't fit (custom header,
+* media block, multi-step content).
+*/
+function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ...rest }) {
+	const ref = useRef(null);
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || open === void 0) return;
+		if (open && !el.open) el.showModal();
+		else if (!open && el.open) el.close();
+	}, [open]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const handleClose = () => onOpenChangeRef.current?.(false);
+		el.addEventListener("close", handleClose);
+		return () => el.removeEventListener("close", handleClose);
+	}, []);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: { close: () => ref.current?.close() },
+		children: /* @__PURE__ */ jsx("dialog", {
+			ref,
+			className: clsx("dialog", size !== "md" && `dialog-${size}`, className),
+			closedby,
+			...rest,
+			children
+		})
+	});
+}
+function DialogHeader({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-header", className),
+		...rest
+	});
+}
+function DialogTitle({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("h2", {
+		className: clsx("dialog-title", className),
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function DialogDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx("dialog-description", className),
+		...rest
+	});
+}
+function DialogBody({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-body", className),
+		...rest
+	});
+}
+function DialogFooter({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-footer", className),
+		...rest
+	});
+}
+function DialogCloseButton({ icon, className, children, onClick, type = "button", "aria-label": ariaLabel = "Close", ...rest }) {
+	const ctx = useContext(DialogContext);
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		className: clsx("dialog-close", className),
+		"aria-label": ariaLabel,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) ctx?.close();
+		},
+		...rest,
+		children: children ?? (icon !== void 0 ? renderIcon(icon) : /* @__PURE__ */ jsx(DefaultCloseIcon, {}))
+	});
+}
+/**
+* Standard modal: a `<dialog>` with an opinionated header / body / footer
+* layout driven by shorthand props. For anything outside that shape, use
+* `<Dialog.Container>` and compose by hand.
+*/
+function DialogRoot({ icon, title, description, actions, dismissible = true, closeLabel = "Close", children, ...containerProps }) {
+	const hasTitle = title !== void 0 || icon !== void 0;
+	const showHeader = hasTitle || dismissible;
+	return /* @__PURE__ */ jsxs(DialogContainer, {
+		...containerProps,
+		children: [
+			showHeader ? /* @__PURE__ */ jsxs(DialogHeader, { children: [hasTitle ? /* @__PURE__ */ jsx(DialogTitle, {
+				icon,
+				children: title
+			}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }), dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
+			children !== void 0 ? /* @__PURE__ */ jsx(DialogBody, { children }) : null,
+			actions !== void 0 ? /* @__PURE__ */ jsx(DialogFooter, { children: actions }) : null
+		]
+	});
+}
+var Dialog = Object.assign(DialogRoot, {
+	Container: DialogContainer,
+	Header: DialogHeader,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Body: DialogBody,
+	Footer: DialogFooter,
+	CloseButton: DialogCloseButton
+});
+//#endregion
 //#region src/Field.tsx
 function FieldRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Root, {
@@ -949,6 +1075,48 @@ var Tabs = Object.assign(TabsRoot, {
 	Indicator: TabsIndicator
 });
 //#endregion
+//#region src/Tooltip.tsx
+function TooltipProvider(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, { ...props });
+}
+function TooltipRoot(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
+}
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ...props });
+}
+function TooltipPopup({ size = "md", side = "top", align = "center", sideOffset = 6, role = "tooltip", className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		sideOffset,
+		side,
+		align,
+		children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+			role,
+			className: cn(["tooltip", size !== "md" && `tooltip-${size}`], className),
+			...rest,
+			children
+		})
+	}) });
+}
+function TooltipShorthand({ content, side, align, sideOffset, size, children, ...rootProps }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		...rootProps,
+		children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, { render: children }), /* @__PURE__ */ jsx(TooltipPopup, {
+			side,
+			align,
+			sideOffset,
+			size,
+			children: content
+		})]
+	});
+}
+var Tooltip = Object.assign(TooltipShorthand, {
+	Provider: TooltipProvider,
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Popup: TooltipPopup
+});
+//#endregion
 //#region src/Table.tsx
 function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
 	return /* @__PURE__ */ jsx("table", {
@@ -1020,10 +1188,10 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 			className: clsx("sidebar", className),
 			...rest,
 			children: drawerOpen ? null : children
-		}), shell ? /* @__PURE__ */ jsx(Dialog.Root, {
+		}), shell ? /* @__PURE__ */ jsx(Dialog$1.Root, {
 			open: drawerOpen,
 			onOpenChange: (open) => shell.setMobileDrawerOpen(open),
-			children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "sidebar-drawer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Popup, {
+			children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "sidebar-drawer-backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
 				className: "sidebar-drawer",
 				"aria-label": drawerLabel,
 				onClick: (event) => {
@@ -1168,6 +1336,6 @@ var Sidebar = Object.assign(SidebarRoot, {
 	CollapseToggle: SidebarCollapseToggle
 });
 //#endregion
-export { Accordion, AdminRoot, Alert, AppShell, Badge, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Field, FileInput, Footer, Input, InputGroup, Menu, Navbar, Pagination, Progress, Radio, RadioGroup, Select, Sidebar, Spinner, Switch, Table, Tabs, Textarea, getPaginationItems, useAppShell };
+export { Accordion, AdminRoot, Alert, AppShell, Badge, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Dialog, Field, FileInput, Footer, Input, InputGroup, Menu, Navbar, Pagination, Progress, Radio, RadioGroup, Select, Sidebar, Spinner, Switch, Table, Tabs, Textarea, Tooltip, getPaginationItems, useAppShell };
 
 //# sourceMappingURL=index.mjs.map