@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/popover/Popover.js

@@ -1,44 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPopover from '@radix-ui/react-popover';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState } from 'react';
-import { PopoverProvider } from './PopoverContext.js';
-import { usePopoverScope } from './usePopoverScope.js';
-
-function Popover({
-  children,
-  defaultOpen = false,
-  modal,
-  onOpenChange,
-  open: openProp
-}) {
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/Popover",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [presence, setPresence] = useState(false);
-  return /* @__PURE__ */ jsx(
-    RadixPopover.Root,
-    {
-      modal,
-      onOpenChange: setOpen,
-      open,
-      ...usePopoverScope(void 0),
-      children: /* @__PURE__ */ jsx(
-        PopoverProvider,
-        {
-          open,
-          presence,
-          setPresence,
-          children
-        }
-      )
-    }
-  );
+import { PopoverProvider } from "./PopoverContext.js";
+import { usePopoverScope } from "./usePopoverScope.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import * as RadixPopover from "@radix-ui/react-popover";
+//#region src/popover/Popover.tsx
+/**
+* Display arbitrary rich content inside a non-modal dialog triggered by a button.
+*
+* @category overlay
+* @group Popover
+* @since 0.1.0
+*/
+function Popover({ children, defaultOpen = false, modal, onOpenChange, open: openProp }) {
+	const [open, setOpen] = useControllableState({
+		caller: "@optiaxiom/react/Popover",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [presence, setPresence] = useState(false);
+	return /* @__PURE__ */ jsx(RadixPopover.Root, {
+		modal,
+		onOpenChange: setOpen,
+		open,
+		...usePopoverScope(void 0),
+		children: /* @__PURE__ */ jsx(PopoverProvider, {
+			open,
+			presence,
+			setPresence,
+			children
+		})
+	});
 }
 Popover.displayName = "@optiaxiom/react/Popover";
-
+//#endregion
 export { Popover };

package/dist/esm/packages/react/src/popover/PopoverAnchor.js

@@ -1,38 +1,35 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPopper from '@radix-ui/react-popper';
-import { forwardRef, useState, useEffect } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { usePopoverContext } from './PopoverContext.js';
-import { usePopoverScope } from './usePopoverScope.js';
-
-const PopoverAnchor = forwardRef(
-  ({ asChild, children, staticRef, ...props }, ref) => {
-    const { __scopePopover } = usePopoverScope(void 0);
-    const { open } = usePopoverContext("@optiaxiom/react/PopoverAnchor");
-    const [virtualRef, setVirtualRef] = useState({ current: null });
-    useEffect(() => {
-      if (!staticRef?.current || !open) {
-        return;
-      }
-      const rect = staticRef.current.getBoundingClientRect();
-      setVirtualRef({ current: { getBoundingClientRect: () => rect } });
-    }, [open, staticRef]);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ref,
-        virtualRef: staticRef ? virtualRef : void 0,
-        ...props,
-        ...{ __scopePopper: __scopePopover },
-        children: /* @__PURE__ */ jsx(RadixPopper.Anchor, { asChild, children })
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { usePopoverContext } from "./PopoverContext.js";
+import { usePopoverScope } from "./usePopoverScope.js";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixPopper from "@radix-ui/react-popper";
+//#region src/popover/PopoverAnchor.tsx
+/**
+* @group Popover
+*/
+const PopoverAnchor = forwardRef(({ asChild, children, staticRef, ...props }, ref) => {
+	const { __scopePopover } = usePopoverScope(void 0);
+	const { open } = usePopoverContext("@optiaxiom/react/PopoverAnchor");
+	const [virtualRef, setVirtualRef] = useState({ current: null });
+	useEffect(() => {
+		if (!staticRef?.current || !open) return;
+		const rect = staticRef.current.getBoundingClientRect();
+		setVirtualRef({ current: { getBoundingClientRect: () => rect } });
+	}, [open, staticRef]);
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		ref,
+		virtualRef: staticRef ? virtualRef : void 0,
+		...props,
+		__scopePopper: __scopePopover,
+		children: /* @__PURE__ */ jsx(RadixPopper.Anchor, {
+			asChild,
+			children
+		})
+	});
+});
 PopoverAnchor.displayName = "@optiaxiom/react/PopoverAnchor";
-
+//#endregion
 export { PopoverAnchor };

package/dist/esm/packages/react/src/popover/PopoverContent.js

@@ -1,72 +1,61 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPopover from '@radix-ui/react-popover';
-import { forwardRef } from 'react';
-import { ModalListbox } from '../modal/ModalListbox.js';
-import { Portal } from '../portal/Portal.js';
-import '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { PopoverContentImpl } from './PopoverContentImpl.js';
-import { usePopoverContext } from './PopoverContext.js';
-import { usePopoverScope } from './usePopoverScope.js';
-
-const PopoverContent = forwardRef(
-  ({
-    align = "start",
-    asChild,
-    children,
-    onCloseAutoFocus,
-    sideOffset = 4,
-    ...props
-  }, ref) => {
-    const { open, presence, setPresence } = usePopoverContext(
-      "@optiaxiom/react/PopoverContent"
-    );
-    return /* @__PURE__ */ jsx(
-      TransitionGroup,
-      {
-        onPresenceChange: setPresence,
-        open,
-        presence,
-        children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
-          ModalListbox,
-          {
-            asChild: true,
-            onBlur: onReactSelectInputBlur,
-            p: "16",
-            ...props,
-            children: /* @__PURE__ */ jsx(
-              RadixPopover.Content,
-              {
-                align,
-                asChild: true,
-                collisionPadding: 16,
-                "data-state": presence ? "open" : "closed",
-                forceMount: true,
-                onCloseAutoFocus: (event) => {
-                  onCloseAutoFocus?.(event);
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-                  if (document.activeElement !== document.body) {
-                    event.preventDefault();
-                  }
-                },
-                ref,
-                sideOffset,
-                ...usePopoverScope(void 0),
-                children: /* @__PURE__ */ jsx(PopoverContentImpl, { asChild, children })
-              }
-            )
-          }
-        ) })
-      }
-    );
-  }
-);
+import { onReactSelectInputBlur } from "../utils/onReactSelectInputBlur.js";
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { Portal } from "../portal/Portal.js";
+import { usePopoverContext } from "./PopoverContext.js";
+import { usePopoverScope } from "./usePopoverScope.js";
+import { ModalListbox } from "../modal/ModalListbox.js";
+import { PopoverContentImpl } from "./PopoverContentImpl.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixPopover from "@radix-ui/react-popover";
+//#region src/popover/PopoverContent.tsx
+/**
+* @group Popover
+*/
+const PopoverContent = forwardRef(({ align = "start", asChild, children, onCloseAutoFocus, sideOffset = 4, ...props }, ref) => {
+	const { open, presence, setPresence } = usePopoverContext("@optiaxiom/react/PopoverContent");
+	return /* @__PURE__ */ jsx(TransitionGroup, {
+		onPresenceChange: setPresence,
+		open,
+		presence,
+		children: /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ModalListbox, {
+				asChild: true,
+				onBlur: onReactSelectInputBlur,
+				p: "16",
+				...props,
+				children: /* @__PURE__ */ jsx(RadixPopover.Content, {
+					align,
+					asChild: true,
+					collisionPadding: 16,
+					"data-state": presence ? "open" : "closed",
+					forceMount: true,
+					onCloseAutoFocus: (event) => {
+						onCloseAutoFocus?.(event);
+						if (event.defaultPrevented) return;
+						if (document.activeElement !== document.body)
+ /**
+						* In case we open a dialog from a popover that has an <input
+						* autoFocus /> - or we shift the focus away programmatically
+						* in some other way we need to handle that case and prevent
+						* shifting focus back to the trigger.
+						*/
+						event.preventDefault();
+					},
+					ref,
+					sideOffset,
+					...usePopoverScope(void 0),
+					children: /* @__PURE__ */ jsx(PopoverContentImpl, {
+						asChild,
+						children
+					})
+				})
+			})
+		})
+	});
+});
 PopoverContent.displayName = "@optiaxiom/react/PopoverContent";
-
+//#endregion
 export { PopoverContent };

package/dist/esm/packages/react/src/popover/PopoverContentContext.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/popover/PopoverContentContext.ts
 const [PopoverContentProvider, usePopoverContentContext] = createContext("@optiaxiom/react/PopoverContent", { side: void 0 });
-
+//#endregion
 export { PopoverContentProvider, usePopoverContentContext };

package/dist/esm/packages/react/src/popover/PopoverContentImpl.js

@@ -1,26 +1,30 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { ModalProvider } from '@optiaxiom/globals';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
-import '../focus-bookmark/FocusBookmarkRestore.js';
-import { PopoverContentProvider } from './PopoverContentContext.js';
-
+import { Box } from "../box/Box.js";
+import { FocusBookmarkProvider } from "../focus-bookmark/FocusBookmarkProvider.js";
+import { PopoverContentProvider } from "./PopoverContentContext.js";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ModalProvider } from "@optiaxiom/globals";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/popover/PopoverContentImpl.tsx
 const PopoverContentImpl = forwardRef(({ children, ...props }, outerRef) => {
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  return /* @__PURE__ */ jsx(
-    PopoverContentProvider,
-    {
-      side: "data-side" in props && (props["data-side"] === "bottom" || props["data-side"] === "left" || props["data-side"] === "right" || props["data-side"] === "top") ? props["data-side"] : void 0,
-      children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children: /* @__PURE__ */ jsx(Box, { ref, ...props, children }) }) })
-    }
-  );
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	return /* @__PURE__ */ jsx(PopoverContentProvider, {
+		side: "data-side" in props && (props["data-side"] === "bottom" || props["data-side"] === "left" || props["data-side"] === "right" || props["data-side"] === "top") ? props["data-side"] : void 0,
+		children: /* @__PURE__ */ jsx(ModalProvider, {
+			shardRef: innerRef,
+			children: /* @__PURE__ */ jsx(FocusBookmarkProvider, {
+				containerRef: innerRef,
+				children: /* @__PURE__ */ jsx(Box, {
+					ref,
+					...props,
+					children
+				})
+			})
+		})
+	});
 });
 PopoverContentImpl.displayName = "@optiaxiom/react/PopoverContentImpl";
-
+//#endregion
 export { PopoverContentImpl };

package/dist/esm/packages/react/src/popover/PopoverContext.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/popover/PopoverContext.ts
 const [PopoverProvider, usePopoverContext] = createContext("@optiaxiom/react/Popover");
-
+//#endregion
 export { PopoverProvider, usePopoverContext };

package/dist/esm/packages/react/src/popover/PopoverTrigger.js

@@ -1,29 +1,27 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPopover from '@radix-ui/react-popover';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { usePopoverContext } from './PopoverContext.js';
-import { usePopoverScope } from './usePopoverScope.js';
-
+import { Button } from "../button/Button.js";
+import { usePopoverContext } from "./PopoverContext.js";
+import { usePopoverScope } from "./usePopoverScope.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixPopover from "@radix-ui/react-popover";
+//#region src/popover/PopoverTrigger.tsx
+/**
+* @extends Button
+* @group Popover
+*/
 const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { open, presence } = usePopoverContext(
-    "@optiaxiom/react/PopoverTrigger"
-  );
-  return /* @__PURE__ */ jsx(
-    RadixPopover.Trigger,
-    {
-      "aria-expanded": open || presence,
-      asChild: true,
-      "data-state": open || presence ? "open" : "closed",
-      ref,
-      ...props,
-      ...usePopoverScope(void 0),
-      children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
-    }
-  );
+	const { open, presence } = usePopoverContext("@optiaxiom/react/PopoverTrigger");
+	return /* @__PURE__ */ jsx(RadixPopover.Trigger, {
+		"aria-expanded": open || presence,
+		asChild: true,
+		"data-state": open || presence ? "open" : "closed",
+		ref,
+		...props,
+		...usePopoverScope(void 0),
+		children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
+	});
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
-
+//#endregion
 export { PopoverTrigger };

package/dist/esm/packages/react/src/popover/usePopoverScope.js

@@ -1,5 +1,5 @@
-import * as RadixPopover from '@radix-ui/react-popover';
-
+import * as RadixPopover from "@radix-ui/react-popover";
+//#region src/popover/usePopoverScope.ts
 const usePopoverScope = RadixPopover.createPopoverScope();
-
+//#endregion
 export { usePopoverScope };

package/dist/esm/packages/react/src/portal/Portal.js

@@ -1,15 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPortal from '@radix-ui/react-portal';
-import { forwardRef } from 'react';
-import { usePortalContext } from './PortalContext.js';
-
-const Portal = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { container } = usePortalContext("@optiaxiom/react/Portal");
-    return /* @__PURE__ */ jsx(RadixPortal.Root, { container, ref, ...props, children });
-  }
-);
+import { usePortalContext } from "./PortalContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixPortal from "@radix-ui/react-portal";
+//#region src/portal/Portal.tsx
+const Portal = forwardRef(({ children, ...props }, ref) => {
+	const { container } = usePortalContext("@optiaxiom/react/Portal");
+	return /* @__PURE__ */ jsx(RadixPortal.Root, {
+		container,
+		ref,
+		...props,
+		children
+	});
+});
 Portal.displayName = "@optiaxiom/react/Portal";
-
+//#endregion
 export { Portal };

package/dist/esm/packages/react/src/portal/PortalContext.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/portal/PortalContext.ts
 const [PortalProvider, usePortalContext] = createContext("@optiaxiom/react/Portal", { container: void 0 });
-
+//#endregion
 export { PortalProvider, usePortalContext };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,24 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-p_d0xfiV.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var indicator$1 = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1aqqypo',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1l7r2v3']});
-
-export { indicator$1 as indicator, progress };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/progress/Progress.css.ts.vanilla-BnHMsRK3.css";
+//#region src/progress/Progress.css.ts
+var indicator = recipeRuntime({
+	base: [{
+		h: "full",
+		rounded: "full",
+		transition: "all"
+	}],
+	variants: { intent: {
+		danger: { bg: "bg.error" },
+		opal: "nij6xz",
+		primary: { bg: "bg.accent" },
+		success: { bg: "bg.success" }
+	} }
+});
+var progress = recipeRuntime({ base: [{
+	bg: "bg.tertiary",
+	overflow: "hidden",
+	rounded: "full"
+}, "_1v9rndk"] });
+//#endregion
+export { indicator, progress };

package/dist/esm/packages/react/src/progress/Progress.js

@@ -1,33 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { indicator, progress } from './Progress-css.js';
-
-const Progress = forwardRef(
-  ({ className, intent = "primary", ...props }, ref) => {
-    const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
-    const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...progress({}, className), ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        style: {
-          backgroundSize: `${100 * 100 / widthPercentage}%`,
-          width: `${widthPercentage}%`
-        },
-        ...indicator({
-          intent
-        }),
-        children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
-      }
-    ) }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { indicator, progress } from "./Progress-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+//#region src/progress/Progress.tsx
+/**
+* Display feedback on status of task or length of a process.
+*
+* @since 0.1.0
+* @category feedback
+* @category data-display
+*/
+const Progress = forwardRef(({ className, intent = "primary", ...props }, ref) => {
+	const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
+	const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...progress({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+			ref,
+			children: isValidValue && /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				style: {
+					backgroundSize: `${1e4 / widthPercentage}%`,
+					width: `${widthPercentage}%`
+				},
+				...indicator({ intent }),
+				children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
+			})
+		})
+	});
+});
 const DEFAULT_MAX = 100;
 Progress.displayName = "@optiaxiom/react/Progress";
-
+//#endregion
 export { Progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,26 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C7ifMcvG.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-C1G7cv0z.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var control = recipeRuntime({base:[{bg:'bg.default',display:'grid',rounded:'full',size:'sm'},'_57d88u'],variants:{shift:{false:{},true:'_1o48jot'}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',transition:'transform'},'_1k0hkxs']});
-var input$1 = recipeRuntime({base:'_1lt76ko'});
-var radio = recipeRuntime({base:'yimgqv'});
-
-export { control, indicator, input$1 as input, radio };
+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/toggle-input/ToggleInput.css.ts.vanilla-DnCTyP9D.css";
+import "./../../../../assets/src/radio/Radio.css.ts.vanilla-CvVWc07Z.css";
+//#region src/radio/Radio.css.ts
+var control = recipeRuntime({
+	base: [{
+		bg: "bg.default",
+		display: "grid",
+		rounded: "full",
+		size: "sm"
+	}, "h666w6"],
+	variants: { shift: {
+		false: {},
+		true: "dlmvdj"
+	} }
+});
+var indicator = recipeRuntime({ base: [{
+	rounded: "inherit",
+	transition: "transform"
+}, "_17sxoio"] });
+var input = recipeRuntime({ base: "_1nt7oes" });
+var radio = recipeRuntime({ base: "_1f4wdjh" });
+//#endregion
+export { control, indicator, input, radio };