@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/dialog/DialogClose.js

@@ -1,35 +1,33 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { forwardRef, useContext } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
-import '../dialog-kit/DialogKitProvider.js';
-
-const DialogClose = forwardRef(
-  ({ appearance = "subtle", asChild, children, onClick, ...props }, ref) => {
-    const { onDismiss } = useContext(DialogKitContext) ?? {};
-    return /* @__PURE__ */ jsx(
-      RadixDialog.Close,
-      {
-        asChild: true,
-        onClick: (event) => {
-          if (onDismiss) {
-            onDismiss(event, "cancel");
-            if (event.defaultPrevented) {
-              return;
-            }
-          }
-          onClick?.(event);
-        },
-        ref,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children })
-      }
-    );
-  }
-);
+import { Button } from "../button/Button.js";
+import { DialogKitContext } from "../dialog-kit/DialogKitContext.js";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+//#region src/dialog/DialogClose.tsx
+/**
+* @extends Button
+* @group Dialog
+*/
+const DialogClose = forwardRef(({ appearance = "subtle", asChild, children, onClick, ...props }, ref) => {
+	const { onDismiss } = useContext(DialogKitContext) ?? {};
+	return /* @__PURE__ */ jsx(RadixDialog.Close, {
+		asChild: true,
+		onClick: (event) => {
+			if (onDismiss) {
+				onDismiss(event, "cancel");
+				if (event.defaultPrevented) return;
+			}
+			onClick?.(event);
+		},
+		ref,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx(Button, {
+			appearance,
+			children
+		})
+	});
+});
 DialogClose.displayName = "@optiaxiom/react/DialogClose";
-
+//#endregion
 export { DialogClose };

package/dist/esm/packages/react/src/dialog/DialogContent-css.js

@@ -1,12 +1,36 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DphjBjD-.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var backdrop$1 = recipeRuntime({variants:{hidden:{false:{},true:'_3ydc0j'}}});
-var content$5 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1qiye16'],variants:{size:{sm:'_1nicnex',md:'_1jb3yfj',lg:'_1o89cfz',fullscreen:'w4oo0a'}}});
-var nestedDialogCountVar$1 = 'var(--_84jvtb)';
-var scrollPaddingBottomVar = 'var(--_16wihd3)';
-var scrollPaddingTopVar = 'var(--omd6rq)';
-
-export { backdrop$1 as backdrop, content$5 as content, nestedDialogCountVar$1 as nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };
+import { __exportAll } from "../../../../_virtual/_rolldown/runtime.js";
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-0zUyMVwg.css";
+import "./../../../../assets/src/dialog/DialogContent.css.ts.vanilla-PFdFmYsY.css";
+//#region src/dialog/DialogContent.css.ts
+var DialogContent_css_exports = /* @__PURE__ */ __exportAll({
+	backdrop: () => backdrop,
+	content: () => content,
+	nestedDialogCountVar: () => nestedDialogCountVar,
+	scrollPaddingBottomVar: () => scrollPaddingBottomVar,
+	scrollPaddingTopVar: () => scrollPaddingTopVar
+});
+var backdrop = recipeRuntime({ variants: { hidden: {
+	false: {},
+	true: "_68em0g"
+} } });
+var content = recipeRuntime({
+	base: [{
+		color: "fg.default",
+		display: "flex",
+		flexDirection: "column",
+		overflow: "auto"
+	}, "_1gipyjw"],
+	variants: { size: {
+		sm: "_1n2528z",
+		md: "yjvsxo",
+		lg: "_1u00k12",
+		fullscreen: "_2b6y4s"
+	} }
+});
+var nestedDialogCountVar = "var(--ph6j02)";
+var scrollPaddingBottomVar = "var(--_2zayyv)";
+var scrollPaddingTopVar = "var(--_162ge2o)";
+//#endregion
+export { DialogContent_css_exports, backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog/DialogContent.js

@@ -1,112 +1,94 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ModalProvider } from '@optiaxiom/globals';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useContext, useRef, useEffect } from 'react';
-import { Backdrop } from '../backdrop/Backdrop.js';
-import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
-import '../dialog-kit/DialogKitProvider.js';
-import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
-import '../focus-bookmark/FocusBookmarkRestore.js';
-import { Paper } from '../paper/Paper.js';
-import { Portal } from '../portal/Portal.js';
-import { useSurface } from '../surface/useSurface.js';
-import { Transition } from '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { backdrop, content, nestedDialogCountVar } from './DialogContent-css.js';
-import { DialogContentImpl } from './DialogContentImpl.js';
-import { useDialogContext } from './DialogContext.js';
-
-const DialogContent = forwardRef(
-  ({
-    children,
-    className,
-    onCloseAutoFocus,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    size = "md",
-    style,
-    ...props
-  }, outerRef) => {
-    const { nestedDialogCount, open } = useDialogContext(
-      "@optiaxiom/react/DialogContent"
-    );
-    const { onClose, onDismiss } = useContext(DialogKitContext) ?? {};
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const { track } = useSurface("dialog") ?? {};
-    useEffect(() => {
-      if (open) {
-        track?.({ name: "viewed" });
-      }
-    }, [open, track]);
-    return /* @__PURE__ */ jsxs(TransitionGroup, { open, children: [
-      /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
-        Backdrop,
-        {
-          asChild: true,
-          ...backdrop({ hidden: nestedDialogCount > 0 }),
-          children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { forceMount: true })
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
-        Paper,
-        {
-          asChild: true,
-          elevation: size === "fullscreen" ? "screen" : "dialog",
-          onBlur: onReactSelectInputBlur,
-          style: {
-            ...assignInlineVars({
-              [nestedDialogCountVar]: `${nestedDialogCount}`
-            }),
-            ...style
-          },
-          ...content({ size }, className),
-          ...props,
-          children: /* @__PURE__ */ jsx(
-            RadixDialog.Content,
-            {
-              asChild: true,
-              forceMount: true,
-              onCloseAutoFocus: (event) => {
-                onCloseAutoFocus?.(event);
-                onClose?.();
-              },
-              onEscapeKeyDown: (event) => {
-                if (onDismiss) {
-                  onDismiss(event, "cancel");
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-                }
-                onEscapeKeyDown?.(event);
-              },
-              onPointerDownOutside: onPointerDownOutside ? (event) => {
-                onPointerDownOutside(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (onDismiss) {
-                  onDismiss(event, "cancel");
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-                }
-              } : (event) => event.preventDefault(),
-              ref,
-              children: /* @__PURE__ */ jsx(DialogContentImpl, { children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) })
-            }
-          )
-        }
-      ) }) })
-    ] });
-  }
-);
+import { useSurface } from "../surface/useSurface.js";
+import { onReactSelectInputBlur } from "../utils/onReactSelectInputBlur.js";
+import { Transition } from "../transition/Transition.js";
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { DialogKitContext } from "../dialog-kit/DialogKitContext.js";
+import { FocusBookmarkProvider } from "../focus-bookmark/FocusBookmarkProvider.js";
+import { useDialogContext } from "./DialogContext.js";
+import { Backdrop } from "../backdrop/Backdrop.js";
+import { Paper } from "../paper/Paper.js";
+import { Portal } from "../portal/Portal.js";
+import { backdrop, content, nestedDialogCountVar } from "./DialogContent-css.js";
+import { DialogContentImpl } from "./DialogContentImpl.js";
+import { forwardRef, useContext, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ModalProvider } from "@optiaxiom/globals";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+//#region src/dialog/DialogContent.tsx
+/**
+* @group Dialog
+*/
+const DialogContent = forwardRef(({ children, className, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, size = "md", style, ...props }, outerRef) => {
+	const { nestedDialogCount, open } = useDialogContext("@optiaxiom/react/DialogContent");
+	const { onClose, onDismiss } = useContext(DialogKitContext) ?? {};
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const { track } = useSurface("dialog") ?? {};
+	useEffect(() => {
+		if (open) track?.({ name: "viewed" });
+	}, [open, track]);
+	return /* @__PURE__ */ jsxs(TransitionGroup, {
+		open,
+		children: [/* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, {
+				asChild: true,
+				...backdrop({ hidden: nestedDialogCount > 0 }),
+				children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { forceMount: true })
+			}) })
+		}), /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Transition, {
+				type: "pop",
+				children: /* @__PURE__ */ jsx(Paper, {
+					asChild: true,
+					elevation: size === "fullscreen" ? "screen" : "dialog",
+					onBlur: onReactSelectInputBlur,
+					style: {
+						...assignInlineVars({ [nestedDialogCountVar]: `${nestedDialogCount}` }),
+						...style
+					},
+					...content({ size }, className),
+					...props,
+					children: /* @__PURE__ */ jsx(RadixDialog.Content, {
+						asChild: true,
+						forceMount: true,
+						onCloseAutoFocus: (event) => {
+							onCloseAutoFocus?.(event);
+							onClose?.();
+						},
+						onEscapeKeyDown: (event) => {
+							if (onDismiss) {
+								onDismiss(event, "cancel");
+								if (event.defaultPrevented) return;
+							}
+							onEscapeKeyDown?.(event);
+						},
+						onPointerDownOutside: onPointerDownOutside ? (event) => {
+							onPointerDownOutside(event);
+							if (event.defaultPrevented) return;
+							if (onDismiss) {
+								onDismiss(event, "cancel");
+								if (event.defaultPrevented) return;
+							}
+						} : (event) => event.preventDefault(),
+						ref,
+						children: /* @__PURE__ */ jsx(DialogContentImpl, { children: /* @__PURE__ */ jsx(ModalProvider, {
+							shardRef: innerRef,
+							children: /* @__PURE__ */ jsx(FocusBookmarkProvider, {
+								containerRef: innerRef,
+								children
+							})
+						}) })
+					})
+				})
+			})
+		})]
+	});
+});
 DialogContent.displayName = "@optiaxiom/react/DialogContent";
-
+//#endregion
 export { DialogContent };

package/dist/esm/packages/react/src/dialog/DialogContentImpl.js

@@ -1,43 +1,37 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { setElementVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useRef, useEffect } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import * as DialogContent_css from './DialogContent-css.js';
-import { useDialogContext } from './DialogContext.js';
-
+import { Box } from "../box/Box.js";
+import { useDialogContext } from "./DialogContext.js";
+import { DialogContent_css_exports } from "./DialogContent-css.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { setElementVars } from "@vanilla-extract/dynamic";
+//#region src/dialog/DialogContentImpl.tsx
 const DialogContentImpl = forwardRef(({ children, ...props }, outerRef) => {
-  const { footerRef, headerRef } = useDialogContext(
-    "@optiaxiom/react/DialogContentImpl"
-  );
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      if (!innerRef.current) {
-        return;
-      }
-      const padding = 16;
-      const vars = {};
-      for (const entry of entries) {
-        const side = entry.target === headerRef.current ? "Top" : "Bottom";
-        vars[DialogContent_css[`scrollPadding${side}Var`]] = `${entry.borderBoxSize[0].blockSize + padding}px`;
-      }
-      setElementVars(innerRef.current, vars);
-    });
-    if (headerRef.current) {
-      observer.observe(headerRef.current);
-    }
-    if (footerRef.current) {
-      observer.observe(footerRef.current);
-    }
-    return () => observer.disconnect();
-  }, [footerRef, headerRef]);
-  return /* @__PURE__ */ jsx(Box, { ref, ...props, children });
+	const { footerRef, headerRef } = useDialogContext("@optiaxiom/react/DialogContentImpl");
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	useEffect(() => {
+		const observer = new ResizeObserver((entries) => {
+			if (!innerRef.current) return;
+			const padding = 16;
+			const vars = {};
+			for (const entry of entries) {
+				const side = entry.target === headerRef.current ? "Top" : "Bottom";
+				vars[DialogContent_css_exports[`scrollPadding${side}Var`]] = `${entry.borderBoxSize[0].blockSize + padding}px`;
+			}
+			setElementVars(innerRef.current, vars);
+		});
+		if (headerRef.current) observer.observe(headerRef.current);
+		if (footerRef.current) observer.observe(footerRef.current);
+		return () => observer.disconnect();
+	}, [footerRef, headerRef]);
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...props,
+		children
+	});
 });
 DialogContentImpl.displayName = "@optiaxiom/react/DialogContentImpl";
-
+//#endregion
 export { DialogContentImpl };

package/dist/esm/packages/react/src/dialog/DialogContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/dialog/DialogContext.ts
 const [DialogProvider, useDialogContext] = createContext("@optiaxiom/react/Dialog");
-
+//#endregion
 export { DialogProvider, useDialogContext };

package/dist/esm/packages/react/src/dialog/DialogFooter-css.js

@@ -1,7 +1,15 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-9RIp8wE5.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var footer$1 = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1fmzexm']});
-
-export { footer$1 as footer };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-B9O2fXkR.css";
+//#region src/dialog/DialogFooter.css.ts
+var footer = recipeRuntime({ base: [{
+	bg: "bg.default",
+	borderColor: "border.secondary",
+	borderT: "1",
+	gap: "16",
+	justifyContent: "flex-end",
+	px: "24",
+	py: "20"
+}, "kdahb5"] });
+//#endregion
+export { footer };

package/dist/esm/packages/react/src/dialog/DialogFooter.js

@@ -1,19 +1,27 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef } from 'react';
-import { ButtonProvider } from '../button/ButtonContext.js';
-import { Group } from '../group/Group.js';
-import { useDialogContext } from './DialogContext.js';
-import { footer } from './DialogFooter-css.js';
-
-const DialogFooter = forwardRef(
-  ({ children, className, ...props }, outerRef) => {
-    const { footerRef } = useDialogContext("@optiaxiom/react/DialogFooter");
-    const ref = useComposedRefs(footerRef, outerRef);
-    return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Group, { ref, ...footer({}, className), ...props, children }) });
-  }
-);
+import { ButtonProvider } from "../button/ButtonContext.js";
+import { Group } from "../group/Group.js";
+import { useDialogContext } from "./DialogContext.js";
+import { footer } from "./DialogFooter-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/dialog/DialogFooter.tsx
+/**
+* @group Dialog
+*/
+const DialogFooter = forwardRef(({ children, className, ...props }, outerRef) => {
+	const { footerRef } = useDialogContext("@optiaxiom/react/DialogFooter");
+	return /* @__PURE__ */ jsx(ButtonProvider, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Group, {
+			ref: useComposedRefs(footerRef, outerRef),
+			...footer({}, className),
+			...props,
+			children
+		})
+	});
+});
 DialogFooter.displayName = "@optiaxiom/react/DialogFooter";
-
+//#endregion
 export { DialogFooter };

package/dist/esm/packages/react/src/dialog/DialogForm.js

@@ -1,25 +1,27 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-
-const DialogForm = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        className,
-        display: "flex",
-        flexDirection: "column",
-        ...boxProps,
-        children: /* @__PURE__ */ jsx("form", { ref, ...restProps, children })
-      }
-    );
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/DialogForm.tsx
+/**
+* @group Dialog
+*/
+const DialogForm = forwardRef(({ children, className, ...props }, ref) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		className,
+		display: "flex",
+		flexDirection: "column",
+		...boxProps,
+		children: /* @__PURE__ */ jsx("form", {
+			ref,
+			...restProps,
+			children
+		})
+	});
+});
 DialogForm.displayName = "@optiaxiom/react/DialogForm";
-
+//#endregion
 export { DialogForm };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,11 +1,27 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-4K0CO5Rr.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var actions = recipeRuntime({base:[{gap:'8'},'_1ul1yhb']});
-var close = recipeRuntime({base:['_13e8ssr']});
-var description$1 = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'vntuor']});
-var header$2 = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_6uobqh']});
-var title$1 = recipeRuntime({base:[{flex:'1',fontWeight:'600'},'_1xhngwm']});
-
-export { actions, close, description$1 as description, header$2 as header, title$1 as title };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DpXLCFkS.css";
+//#region src/dialog/DialogHeader.css.ts
+var actions = recipeRuntime({ base: [{ gap: "8" }, "_169wpic"] });
+var close = recipeRuntime({ base: ["tib7e8"] });
+var description = recipeRuntime({ base: [{
+	color: "fg.secondary",
+	fontSize: "md",
+	fontWeight: "400",
+	w: "full"
+}, "y9zbsi"] });
+var header = recipeRuntime({ base: [{
+	bg: "bg.default",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "8",
+	p: "24",
+	pb: "16",
+	z: "10"
+}, "yonfn0"] });
+var title = recipeRuntime({ base: [{
+	flex: "1",
+	fontWeight: "600"
+}, "_1my7b37"] });
+//#endregion
+export { actions, close, description, header, title };