@optiaxiom/react 1.9.36 → 1.9.38

package/dist/esm/packages/react/src/toggle-button/ToggleButton.js

@@ -1,15 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixToggle from '@radix-ui/react-toggle';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-
-const ToggleButton = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Button, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixToggle.Root, { ref, children }) });
-  }
-);
+import { Button } from "../button/Button.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixToggle from "@radix-ui/react-toggle";
+//#region src/toggle-button/ToggleButton.tsx
+/**
+* `ToggleButton` component represents a button that can be toggled on or off.
+*
+* @category actions
+* @since 0.1.0
+* @extends Button
+*/
+const ToggleButton = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(RadixToggle.Root, {
+			ref,
+			children
+		})
+	});
+});
 ToggleButton.displayName = "@optiaxiom/react/ToggleButton";
-
+//#endregion
 export { ToggleButton };

package/dist/esm/packages/react/src/toggle-input/ToggleInput-css.js

@@ -1,8 +1,16 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DPDtpEdO.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CiM5gZJz.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var toggleInput = recipeRuntime({base:['bhslh2',{alignItems:'start',display:'inline-flex',gap:'8'},'_7vr12k']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CdFjsC3-.css";
+import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Bo7OdqI0.css";
+//#region src/toggle-input/ToggleInput.css.ts
+var toggleInput = recipeRuntime({ base: [
+	"_1optlxt",
+	{
+		alignItems: "start",
+		display: "inline-flex",
+		gap: "8"
+	},
+	"_8vdvuh"
+] });
+//#endregion
 export { toggleInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInput.js

@@ -1,37 +1,36 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Group } from '../group/Group.js';
-import { toggleInput } from './ToggleInput-css.js';
-import { ToggleInputProvider } from './ToggleInputContext.js';
-
-const Slot$7 = createSlot("@optiaxiom/react/ToggleInput");
-const ToggleInput = forwardRef(
-  ({ asChild, children, className, onMouseDown, ...props }, ref) => {
-    const Comp = asChild ? Slot$7 : "label";
-    const { boxProps, restProps } = extractBoxProps(props);
-    const descriptionId = useId();
-    const labelId = useId();
-    return /* @__PURE__ */ jsx(ToggleInputProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(Group, { asChild: true, ...toggleInput({}, className), ...boxProps, children: /* @__PURE__ */ jsx(
-      Comp,
-      {
-        onMouseDown: (event) => {
-          onMouseDown?.(event);
-          if (!event.defaultPrevented && event.detail > 1) {
-            event.preventDefault();
-          }
-        },
-        ref,
-        ...restProps,
-        children
-      }
-    ) }) });
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Group } from "../group/Group.js";
+import { toggleInput } from "./ToggleInput-css.js";
+import { ToggleInputProvider } from "./ToggleInputContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInput.tsx
+const Slot = createSlot("@optiaxiom/react/ToggleInput");
+const ToggleInput = forwardRef(({ asChild, children, className, onMouseDown, ...props }, ref) => {
+	const Comp = asChild ? Slot : "label";
+	const { boxProps, restProps } = extractBoxProps(props);
+	return /* @__PURE__ */ jsx(ToggleInputProvider, {
+		descriptionId: useId(),
+		labelId: useId(),
+		children: /* @__PURE__ */ jsx(Group, {
+			asChild: true,
+			...toggleInput({}, className),
+			...boxProps,
+			children: /* @__PURE__ */ jsx(Comp, {
+				onMouseDown: (event) => {
+					onMouseDown?.(event);
+					if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+				},
+				ref,
+				...restProps,
+				children
+			})
+		})
+	});
+});
 ToggleInput.displayName = "@optiaxiom/react/ToggleInput";
-
+//#endregion
 export { ToggleInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInputContent.js

@@ -1,13 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInputContent.tsx
 const ToggleInputContent = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Box, { flex: "1", fontSize: "md", overflow: "hidden", ref, ...props, children });
+	return /* @__PURE__ */ jsx(Box, {
+		flex: "1",
+		fontSize: "md",
+		overflow: "hidden",
+		ref,
+		...props,
+		children
+	});
 });
 ToggleInputContent.displayName = "@optiaxiom/react/ToggleInputContent";
-
+//#endregion
 export { ToggleInputContent };

package/dist/esm/packages/react/src/toggle-input/ToggleInputContext.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/toggle-input/ToggleInputContext.ts
 const [ToggleInputProvider, useToggleInputContext] = createContext("@optiaxiom/react/ToggleInput");
-
+//#endregion
 export { ToggleInputProvider, useToggleInputContext };

package/dist/esm/packages/react/src/toggle-input/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DPDtpEdO.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CiM5gZJz.css';
-import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BHdsYTMc.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var control$3 = recipeRuntime({base:['wfawn6']});
-
-export { control$3 as control };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CdFjsC3-.css";
+import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Bo7OdqI0.css";
+import "./../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BLPpfzH3.css";
+//#region src/toggle-input/ToggleInputControl.css.ts
+var control = recipeRuntime({ base: ["_1qh00b1"] });
+//#endregion
+export { control };

package/dist/esm/packages/react/src/toggle-input/ToggleInputControl.js

@@ -1,14 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { control } from './ToggleInputControl-css.js';
-
+import { Box } from "../box/Box.js";
+import { control } from "./ToggleInputControl-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInputControl.tsx
 const ToggleInputControl = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Box, { "aria-hidden": true, ref, ...control({}, className), ...props, children });
+	return /* @__PURE__ */ jsx(Box, {
+		"aria-hidden": true,
+		ref,
+		...control({}, className),
+		...props,
+		children
+	});
 });
 ToggleInputControl.displayName = "@optiaxiom/react/ToggleInputControl";
-
+//#endregion
 export { ToggleInputControl };

package/dist/esm/packages/react/src/toggle-input/ToggleInputDescription.js

@@ -1,27 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useToggleInputContext } from './ToggleInputContext.js';
-
+import { Box } from "../box/Box.js";
+import { useToggleInputContext } from "./ToggleInputContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInputDescription.tsx
 const ToggleInputDescription = forwardRef(({ children, ...props }, ref) => {
-  const { descriptionId } = useToggleInputContext(
-    "@optiaxiom/react/ToggleInputDescription"
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      color: "fg.secondary",
-      fontSize: "sm",
-      id: descriptionId,
-      ref,
-      ...props,
-      children
-    }
-  );
+	const { descriptionId } = useToggleInputContext("@optiaxiom/react/ToggleInputDescription");
+	return /* @__PURE__ */ jsx(Box, {
+		color: "fg.secondary",
+		fontSize: "sm",
+		id: descriptionId,
+		ref,
+		...props,
+		children
+	});
 });
 ToggleInputDescription.displayName = "@optiaxiom/react/ToggleInputDescription";
-
+//#endregion
 export { ToggleInputDescription };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DPDtpEdO.css';
-
-var className = 'es3lps';
-
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CdFjsC3-.css";
+//#region src/toggle-input/ToggleInputHiddenInput.css.ts
+var className = "_12hziuf";
+//#endregion
 export { className };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput.js

@@ -1,40 +1,33 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useToggleInputContext } from './ToggleInputContext.js';
-import { className } from './ToggleInputHiddenInput-css.js';
-
+import { useSurface } from "../surface/useSurface.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useToggleInputContext } from "./ToggleInputContext.js";
+import { className } from "./ToggleInputHiddenInput-css.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInputHiddenInput.tsx
 const ToggleInputHiddenInput = forwardRef(({ className: className$1, onChange, onCheckedChange, ...props }, ref) => {
-  const { descriptionId, labelId } = useToggleInputContext(
-    "@optiaxiom/react/ToggleInputHiddenInput"
-  );
-  const surface = useSurface("property");
-  const { track } = surface ?? {};
-  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
-    "input",
-    {
-      "aria-describedby": descriptionId,
-      "aria-labelledby": labelId,
-      className: clsx(className$1, className),
-      onChange: (event) => {
-        const checked = event.target.checked;
-        onChange?.(event);
-        onCheckedChange?.(checked);
-        track?.({
-          checked,
-          name: "toggled"
-        });
-      },
-      ref,
-      type: "checkbox",
-      ...props
-    }
-  ) });
+	const { descriptionId, labelId } = useToggleInputContext("@optiaxiom/react/ToggleInputHiddenInput");
+	const { track } = useSurface("property") ?? {};
+	return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+		"aria-describedby": descriptionId,
+		"aria-labelledby": labelId,
+		className: clsx(className$1, className),
+		onChange: (event) => {
+			const checked = event.target.checked;
+			onChange?.(event);
+			onCheckedChange?.(checked);
+			track?.({
+				checked,
+				name: "toggled"
+			});
+		},
+		ref,
+		type: "checkbox",
+		...props
+	}) });
 });
 ToggleInputHiddenInput.displayName = "@optiaxiom/react/ToggleInputHiddenInput";
-
+//#endregion
 export { ToggleInputHiddenInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInputLabel.js

@@ -1,17 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useToggleInputContext } from './ToggleInputContext.js';
-
+import { Box } from "../box/Box.js";
+import { useToggleInputContext } from "./ToggleInputContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-input/ToggleInputLabel.tsx
 const ToggleInputLabel = forwardRef(({ children, ...props }, ref) => {
-  const { labelId } = useToggleInputContext(
-    "@optiaxiom/react/ToggleInputLabel"
-  );
-  return /* @__PURE__ */ jsx(Box, { id: labelId, ref, ...props, children });
+	const { labelId } = useToggleInputContext("@optiaxiom/react/ToggleInputLabel");
+	return /* @__PURE__ */ jsx(Box, {
+		id: labelId,
+		ref,
+		...props,
+		children
+	});
 });
 ToggleInputLabel.displayName = "@optiaxiom/react/ToggleInputLabel";
-
+//#endregion
 export { ToggleInputLabel };

package/dist/esm/packages/react/src/tooltip/Tooltip.js

@@ -1,45 +1,35 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { TooltipContent } from './TooltipContent.js';
-import { TooltipRoot } from './TooltipRoot.js';
-import { TooltipTrigger } from './TooltipTrigger.js';
-
-function Tooltip({
-  auto,
-  children,
-  content,
-  defaultOpen,
-  delayDuration,
-  disabled,
-  disableHoverableContent,
-  onOpenChange,
-  open,
-  ...props
-}) {
-  const empty = !content && typeof content !== "number";
-  return /* @__PURE__ */ jsxs(
-    TooltipRoot,
-    {
-      auto,
-      defaultOpen,
-      delayDuration,
-      disableHoverableContent,
-      onOpenChange,
-      open,
-      children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
-        !disabled && !empty && /* @__PURE__ */ jsx(
-          TooltipContent,
-          {
-            disableHoverableContent,
-            ...props,
-            children: content
-          }
-        )
-      ]
-    }
-  );
+import { TooltipContent } from "./TooltipContent.js";
+import { TooltipRoot } from "./TooltipRoot.js";
+import { TooltipTrigger } from "./TooltipTrigger.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tooltip/Tooltip.tsx
+/**
+* Popup with brief information shown when user interacts with an element using
+* keyboard focus or mouse hover.
+*
+* @category overlay
+* @since 0.1.0
+*/
+function Tooltip({ auto, children, content, defaultOpen, delayDuration, disabled, disableHoverableContent, onOpenChange, open, ...props }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		auto,
+		defaultOpen,
+		delayDuration,
+		disableHoverableContent,
+		onOpenChange,
+		open,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children
+		}), !disabled && !(!content && typeof content !== "number") && /* @__PURE__ */ jsx(TooltipContent, {
+			disableHoverableContent,
+			...props,
+			children: content
+		})]
+	});
 }
 Tooltip.displayName = "@optiaxiom/react/Tooltip";
-
+//#endregion
 export { Tooltip };

package/dist/esm/packages/react/src/tooltip/TooltipContent-css.js

@@ -1,6 +1,20 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var content$3 = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',maxW:'xs',px:'12',py:'8',rounded:'md',z:'tooltip'}],variants:{disableHoverableContent:{false:{},true:{pointerEvents:'none'}}}});
-
-export { content$3 as content };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+//#region src/tooltip/TooltipContent.css.ts
+var content = recipeRuntime({
+	base: [{
+		bg: "bg.default.inverse",
+		color: "fg.default.inverse",
+		maxW: "xs",
+		px: "12",
+		py: "8",
+		rounded: "md",
+		z: "tooltip"
+	}],
+	variants: { disableHoverableContent: {
+		false: {},
+		true: { pointerEvents: "none" }
+	} }
+});
+//#endregion
+export { content };

package/dist/esm/packages/react/src/tooltip/TooltipContent.js

@@ -1,60 +1,54 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { theme } from '@optiaxiom/globals';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Portal } from '../portal/Portal.js';
-import { Text } from '../text/Text.js';
-import { Transition } from '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import { content } from './TooltipContent-css.js';
-import { useTooltipContext } from './TooltipContext.js';
-
-const TooltipContent = forwardRef(
-  ({
-    align = "center",
-    children,
-    className,
-    disableHoverableContent,
-    side = "top",
-    ...props
-  }, ref) => {
-    const { open } = useTooltipContext("@optiaxiom/react/TooltipContent");
-    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ...content({ disableHoverableContent }, className),
-        ...props,
-        children: /* @__PURE__ */ jsxs(
-          RadixTooltip.Content,
-          {
-            align,
-            arrowPadding: 6,
-            forceMount: true,
-            ref,
-            side,
-            sideOffset: 4,
-            children: [
-              /* @__PURE__ */ jsx(Text, { asChild: true, fontSize: "sm", children: /* @__PURE__ */ jsx("div", { children }) }),
-              /* @__PURE__ */ jsx(
-                RadixTooltip.Arrow,
-                {
-                  fill: theme.colors["bg.default.inverse"],
-                  height: 4,
-                  width: 8
-                }
-              )
-            ]
-          }
-        )
-      }
-    ) }) }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { Text } from "../text/Text.js";
+import { Transition } from "../transition/Transition.js";
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { Portal } from "../portal/Portal.js";
+import { content } from "./TooltipContent-css.js";
+import { useTooltipContext } from "./TooltipContext.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { theme } from "@optiaxiom/globals";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+//#region src/tooltip/TooltipContent.tsx
+/**
+* @group TooltipRoot
+*/
+const TooltipContent = forwardRef(({ align = "center", children, className, disableHoverableContent, side = "top", ...props }, ref) => {
+	const { open } = useTooltipContext("@optiaxiom/react/TooltipContent");
+	return /* @__PURE__ */ jsx(TransitionGroup, {
+		open,
+		children: /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Transition, {
+				duration: "sm",
+				type: "pop",
+				children: /* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					...content({ disableHoverableContent }, className),
+					...props,
+					children: /* @__PURE__ */ jsxs(RadixTooltip.Content, {
+						align,
+						arrowPadding: 6,
+						forceMount: true,
+						ref,
+						side,
+						sideOffset: 4,
+						children: [/* @__PURE__ */ jsx(Text, {
+							asChild: true,
+							fontSize: "sm",
+							children: /* @__PURE__ */ jsx("div", { children })
+						}), /* @__PURE__ */ jsx(RadixTooltip.Arrow, {
+							fill: theme.colors["bg.default.inverse"],
+							height: 4,
+							width: 8
+						})]
+					})
+				})
+			})
+		})
+	});
+});
 TooltipContent.displayName = "@optiaxiom/react/TooltipContent";
-
+//#endregion
 export { TooltipContent };

package/dist/esm/packages/react/src/tooltip/TooltipContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
-const [TooltipProvider$1, useTooltipContext] = createContext("@optiaxiom/react/Tooltip");
-
-export { TooltipProvider$1 as TooltipProvider, useTooltipContext };
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/tooltip/TooltipContext.ts
+const [TooltipProvider, useTooltipContext] = createContext("@optiaxiom/react/Tooltip");
+//#endregion
+export { TooltipProvider, useTooltipContext };