@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/range/Range.js

@@ -1,157 +1,108 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import clsx from 'clsx';
-import { forwardRef, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { useFieldContext } from '../field/FieldContext.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-import { range, thumb, control, track, fillValue, mark, markValue, root } from './Range-css.js';
-import { useTooltipState } from './useTooltipState.js';
-
-const Range = forwardRef(
-  ({
-    className,
-    defaultValue = 0,
-    disabled,
-    getLabel = (value) => value,
-    marks,
-    max = 100,
-    min = 0,
-    onChange,
-    onValueChange,
-    showTooltip = false,
-    size = "md",
-    step = 1,
-    value: valueProp,
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    const { descriptionId, error, errorId, inputId } = useFieldContext(
-      "@optiaxiom/react/Range"
-    );
-    const [value, setValue] = useControllableState({
-      caller: "@optiaxiom/react/Range",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const fillValue$1 = `${(value - min) / (max - min)}`;
-    const [tooltipOpen, setTooltipOpen] = useTooltipState();
-    const isPointerInsideRef = useRef(false);
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        "data-disabled": disabled ? "" : void 0,
-        ...root({ marks: !!marks, size }, className),
-        ...boxProps,
-        children: [
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              style: assignInlineVars({
-                [fillValue]: fillValue$1
-              }),
-              ...track(),
-              children: [
-                /* @__PURE__ */ jsx(Box, { ...range() }),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    content: getLabel(value),
-                    disabled: disabled || !showTooltip,
-                    disableHoverableContent: true,
-                    open: tooltipOpen,
-                    children: /* @__PURE__ */ jsx(Box, { ...thumb() })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
-                    "aria-disabled": disabled,
-                    "aria-invalid": error ? true : void 0,
-                    asChild: true,
-                    id: inputId,
-                    ref,
-                    ...control(),
-                    children: /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        disabled,
-                        max,
-                        min,
-                        onBlur: () => {
-                          if (isPointerInsideRef.current) {
-                            return;
-                          }
-                          setTooltipOpen(false);
-                        },
-                        onChange: (event) => {
-                          setValue(Number(event.currentTarget.value));
-                          onChange?.(event);
-                        },
-                        onFocus: (event) => {
-                          if (event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(true);
-                          }
-                        },
-                        onKeyDown: () => {
-                          setTooltipOpen(true);
-                        },
-                        onPointerLeave: (event) => {
-                          isPointerInsideRef.current = false;
-                          if (!event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(false);
-                          }
-                        },
-                        onPointerMove: () => {
-                          isPointerInsideRef.current = true;
-                          setTooltipOpen(true, true);
-                        },
-                        step,
-                        type: "range",
-                        value,
-                        ...restProps
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          marks?.map(
-            (mark) => typeof mark === "number" ? {
-              label: getLabel(mark),
-              value: mark
-            } : mark
-          ).map((mark$1) => /* @__PURE__ */ jsx(
-            Box,
-            {
-              onClick: () => {
-                if (!disabled) {
-                  setValue(mark$1.value);
-                }
-              },
-              style: assignInlineVars({
-                [markValue]: `${(mark$1.value - min) / (max - min)}`
-              }),
-              ...mark({ active: value >= mark$1.value }),
-              children: mark$1.label
-            },
-            mark$1.value
-          ))
-        ]
-      }
-    );
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { control, fillValue, mark, markValue, range, root, thumb, track } from "./Range-css.js";
+import { useTooltipState } from "./useTooltipState.js";
+import { forwardRef, useRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+//#region src/range/Range.tsx
+/**
+* Allow users to select a numeric value within a range.
+*
+* @category form
+* @since 1.7.12
+* @experimental
+*/
+const Range = forwardRef(({ className, defaultValue = 0, disabled, getLabel = (value) => value, marks, max = 100, min = 0, onChange, onValueChange, showTooltip = false, size = "md", step = 1, value: valueProp, ...props }, ref) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	const { descriptionId, error, errorId, inputId } = useFieldContext("@optiaxiom/react/Range");
+	const [value, setValue] = useControllableState({
+		caller: "@optiaxiom/react/Range",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const fillValue$1 = `${(value - min) / (max - min)}`;
+	const [tooltipOpen, setTooltipOpen] = useTooltipState();
+	const isPointerInsideRef = useRef(false);
+	return /* @__PURE__ */ jsxs(Box, {
+		"data-disabled": disabled ? "" : void 0,
+		...root({
+			marks: !!marks,
+			size
+		}, className),
+		...boxProps,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			style: assignInlineVars({ [fillValue]: fillValue$1 }),
+			...track(),
+			children: [
+				/* @__PURE__ */ jsx(Box, { ...range() }),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: getLabel(value),
+					disabled: disabled || !showTooltip,
+					disableHoverableContent: true,
+					open: tooltipOpen,
+					children: /* @__PURE__ */ jsx(Box, { ...thumb() })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					"aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+					"aria-disabled": disabled,
+					"aria-invalid": error ? true : void 0,
+					asChild: true,
+					id: inputId,
+					ref,
+					...control(),
+					children: /* @__PURE__ */ jsx("input", {
+						disabled,
+						max,
+						min,
+						onBlur: () => {
+							if (isPointerInsideRef.current) return;
+							setTooltipOpen(false);
+						},
+						onChange: (event) => {
+							setValue(Number(event.currentTarget.value));
+							onChange?.(event);
+						},
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible")) setTooltipOpen(true);
+						},
+						onKeyDown: () => {
+							setTooltipOpen(true);
+						},
+						onPointerLeave: (event) => {
+							isPointerInsideRef.current = false;
+							if (!event.currentTarget.matches(":focus-visible")) setTooltipOpen(false);
+						},
+						onPointerMove: () => {
+							isPointerInsideRef.current = true;
+							setTooltipOpen(true, true);
+						},
+						step,
+						type: "range",
+						value,
+						...restProps
+					})
+				})
+			]
+		}), marks?.map((mark) => typeof mark === "number" ? {
+			label: getLabel(mark),
+			value: mark
+		} : mark).map((mark$1) => /* @__PURE__ */ jsx(Box, {
+			onClick: () => {
+				if (!disabled) setValue(mark$1.value);
+			},
+			style: assignInlineVars({ [markValue]: `${(mark$1.value - min) / (max - min)}` }),
+			...mark({ active: value >= mark$1.value }),
+			children: mark$1.label
+		}, mark$1.value))]
+	});
+});
 Range.displayName = "@optiaxiom/react/Range";
-
+//#endregion
 export { Range };

package/dist/esm/packages/react/src/range/useTooltipState.js

@@ -1,23 +1,20 @@
 "use client";
-import { useState, useRef } from 'react';
-
+import { useRef, useState } from "react";
+//#region src/range/useTooltipState.tsx
 const useTooltipState = () => {
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-  const timerRef = useRef();
-  return [
-    tooltipOpen,
-    (flag, delayed = false) => {
-      if (delayed) {
-        window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => {
-          setTooltipOpen(flag);
-        }, 50);
-      } else {
-        window.clearTimeout(timerRef.current);
-        setTooltipOpen(flag);
-      }
-    }
-  ];
+	const [tooltipOpen, setTooltipOpen] = useState(false);
+	const timerRef = useRef();
+	return [tooltipOpen, (flag, delayed = false) => {
+		if (delayed) {
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				setTooltipOpen(flag);
+			}, 50);
+		} else {
+			window.clearTimeout(timerRef.current);
+			setTooltipOpen(flag);
+		}
+	}];
 };
-
+//#endregion
 export { useTooltipState };

package/dist/esm/packages/react/src/resizable/Resizable.js

@@ -1,10 +1,13 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/resizable/Resizable.tsx
 const Resizable = ({ ...props }) => {
-  return /* @__PURE__ */ jsx(ResizablePrimitive.PanelGroup, { direction: "horizontal", ...props });
+	return /* @__PURE__ */ jsx(ResizablePrimitive.PanelGroup, {
+		direction: "horizontal",
+		...props
+	});
 };
 Resizable.displayName = "@optiaxiom/react/Resizable";
-
+//#endregion
 export { Resizable };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,8 +1,19 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-Dgy_hzRs.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var handle$1 = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_2f0bei']});
-var root$2 = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'ad5gv3']});
-
-export { handle$1 as handle, root$2 as root };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-BSMn5mzL.css";
+//#region src/resizable/ResizableHandle.css.ts
+var handle = recipeRuntime({ base: [{
+	border: "1",
+	h: "56",
+	rounded: "sm",
+	w: "12"
+}, "uur1y5"] });
+var root = recipeRuntime({ base: [{
+	flexDirection: "column",
+	gap: "16",
+	justifyContent: "center",
+	rounded: "sm",
+	z: "10"
+}, "_1lckjgw"] });
+//#endregion
+export { handle, root };

package/dist/esm/packages/react/src/resizable/ResizableHandle.js

@@ -1,15 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ResizablePrimitive from 'react-resizable-panels';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Group } from '../group/Group.js';
-import { handle, root } from './ResizableHandle-css.js';
-
+import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
+import { handle, root } from "./ResizableHandle-css.js";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/resizable/ResizableHandle.tsx
 const ResizableHandle = (props) => {
-  return /* @__PURE__ */ jsx(Group, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsx(Box, { ...handle() }) }) });
+	return /* @__PURE__ */ jsx(Group, {
+		asChild: true,
+		...root(),
+		children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, {
+			...props,
+			children: /* @__PURE__ */ jsx(Box, { ...handle() })
+		})
+	});
 };
 ResizableHandle.displayName = "@optiaxiom/react/ResizableHandle";
-
+//#endregion
 export { ResizableHandle };

package/dist/esm/packages/react/src/resizable/ResizablePanel.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/resizable/ResizablePanel.tsx
 const ResizablePanel = ({ ...props }) => {
-  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { ...props });
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { ...props });
 };
 ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
-
+//#endregion
 export { ResizablePanel };

package/dist/esm/packages/react/src/roving-focus/RovingFocus.js

@@ -1,21 +1,32 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { RovingFocusProvider } from './RovingFocusContext.js';
-
-const Slot$1 = createSlot("@optiaxiom/react/RovingFocus");
-const RovingFocus = forwardRef(
-  ({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
-    const FocusComp = disabled ? Box : RadixRovingFocus.Root;
-    const Comp = asChild ? Slot$1 : "div";
-    return /* @__PURE__ */ jsx(RovingFocusProvider, { disabled, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, ...!disabled && { loop, orientation }, children: /* @__PURE__ */ jsx(Comp, { children }) }) }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { RovingFocusProvider } from "./RovingFocusContext.js";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+import * as RadixRovingFocus from "@radix-ui/react-roving-focus";
+//#region src/roving-focus/RovingFocus.tsx
+const Slot = createSlot("@optiaxiom/react/RovingFocus");
+const RovingFocus = forwardRef(({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
+	const FocusComp = disabled ? Box : RadixRovingFocus.Root;
+	const Comp = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(RovingFocusProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx(Box, {
+			asChild: true,
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx(FocusComp, {
+				asChild: true,
+				...!disabled && {
+					loop,
+					orientation
+				},
+				children: /* @__PURE__ */ jsx(Comp, { children })
+			})
+		})
+	});
+});
 RovingFocus.displayName = "@optiaxiom/react/RovingFocus";
-
+//#endregion
 export { RovingFocus };

package/dist/esm/packages/react/src/roving-focus/RovingFocusContext.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/roving-focus/RovingFocusContext.ts
 const [RovingFocusProvider, useRovingFocusContext] = createContext("@optiaxiom/react/RovingFocus");
-
+//#endregion
 export { RovingFocusProvider, useRovingFocusContext };

package/dist/esm/packages/react/src/roving-focus/RovingFocusItem.js

@@ -1,24 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useRovingFocusContext } from './RovingFocusContext.js';
-
+import { Box } from "../box/Box.js";
+import { useRovingFocusContext } from "./RovingFocusContext.js";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+import * as RadixRovingFocus from "@radix-ui/react-roving-focus";
+//#region src/roving-focus/RovingFocusItem.tsx
 const Slot = createSlot("@optiaxiom/react/RovingFocusItem");
-const RovingFocusItem = forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    const { disabled } = useRovingFocusContext(
-      "@optiaxiom/react/RovingFocusItem"
-    );
-    const FocusComp = disabled ? Box : RadixRovingFocus.Item;
-    const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, children: /* @__PURE__ */ jsx(Comp, { children }) }) });
-  }
-);
+const RovingFocusItem = forwardRef(({ asChild, children, ...props }, ref) => {
+	const { disabled } = useRovingFocusContext("@optiaxiom/react/RovingFocusItem");
+	const FocusComp = disabled ? Box : RadixRovingFocus.Item;
+	const Comp = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(FocusComp, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Comp, { children })
+		})
+	});
+});
 RovingFocusItem.displayName = "@optiaxiom/react/RovingFocusItem";
-
+//#endregion
 export { RovingFocusItem };

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CdGBIM3G.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var clear = recipeRuntime({base:[{size:'sm'},'slhe45']});
-var input = recipeRuntime({base:'_7z69ua'});
-var search = recipeRuntime({base:'_1p0srgd'});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/search-input/SearchInput.css.ts.vanilla-xK0JoetK.css";
+//#region src/search-input/SearchInput.css.ts
+var clear = recipeRuntime({ base: [{ size: "sm" }, "bsshrb"] });
+var input = recipeRuntime({ base: "_1tmcyvk" });
+var search = recipeRuntime({ base: "k9ap99" });
+//#endregion
 export { clear, input, search };