@aortl/admin-react 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -11,6 +11,7 @@ let _base_ui_react_switch = require("@base-ui/react/switch");
 let _base_ui_react_select = require("@base-ui/react/select");
 let _base_ui_react_field = require("@base-ui/react/field");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
+let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
 //#region src/Accordion.tsx
 function AccordionRoot({ className, ...rest }) {
@@ -712,6 +713,131 @@ var Card = Object.assign(CardRoot, {
 	Actions: CardActions
 });
 //#endregion
+//#region src/Dialog.tsx
+var DialogContext = (0, react.createContext)(null);
+function DefaultCloseIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(null);
+	const onOpenChangeRef = (0, react.useRef)(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	(0, react.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]);
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (!el) return;
+		const handleClose = () => onOpenChangeRef.current?.(false);
+		el.addEventListener("close", handleClose);
+		return () => el.removeEventListener("close", handleClose);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContext.Provider, {
+		value: { close: () => ref.current?.close() },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+			ref,
+			className: (0, clsx.clsx)("dialog", size !== "md" && `dialog-${size}`, className),
+			closedby,
+			...rest,
+			children
+		})
+	});
+}
+function DialogHeader({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.clsx)("dialog-header", className),
+		...rest
+	});
+}
+function DialogTitle({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
+		className: (0, clsx.clsx)("dialog-title", className),
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function DialogDescription({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: (0, clsx.clsx)("dialog-description", className),
+		...rest
+	});
+}
+function DialogBody({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.clsx)("dialog-body", className),
+		...rest
+	});
+}
+function DialogFooter({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.clsx)("dialog-footer", className),
+		...rest
+	});
+}
+function DialogCloseButton({ icon, className, children, onClick, type = "button", "aria-label": ariaLabel = "Close", ...rest }) {
+	const ctx = (0, react.useContext)(DialogContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type,
+		className: (0, clsx.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(DialogContainer, {
+		...containerProps,
+		children: [
+			showHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, {
+				icon,
+				children: title
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }), dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
+			description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : null,
+			children !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, { children }) : null,
+			actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Root, {
@@ -950,6 +1076,48 @@ var Tabs = Object.assign(TabsRoot, {
 	Indicator: TabsIndicator
 });
 //#endregion
+//#region src/Tooltip.tsx
+function TooltipProvider(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Provider, { ...props });
+}
+function TooltipRoot(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Root, { ...props });
+}
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Trigger, { ...props });
+}
+function TooltipPopup({ size = "md", side = "top", align = "center", sideOffset = 6, role = "tooltip", className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
+		sideOffset,
+		side,
+		align,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Popup, {
+			role,
+			className: cn(["tooltip", size !== "md" && `tooltip-${size}`], className),
+			...rest,
+			children
+		})
+	}) });
+}
+function TooltipShorthand({ content, side, align, sideOffset, size, children, ...rootProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipRoot, {
+		...rootProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Trigger, { render: children }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -1180,6 +1348,7 @@ exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Dialog = Dialog;
 exports.Field = Field;
 exports.FileInput = FileInput;
 exports.Footer = Footer;
@@ -1198,6 +1367,7 @@ exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
+exports.Tooltip = Tooltip;
 exports.getPaginationItems = getPaginationItems;
 exports.useAppShell = useAppShell;