@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/input/InputControl.js

@@ -1,94 +1,66 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { createSlot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { useFieldContext } from '../field/FieldContext.js';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { useDebouncedTrack } from '../surface/useDebouncedTrack.js';
-import { useInputContext } from './InputContext.js';
-import { control } from './InputControl-css.js';
-
-const Slot$4 = createSlot("@optiaxiom/react/InputControl");
-const InputControl = forwardRef(
-  ({
-    asChild,
-    children,
-    className,
-    error: errorProp,
-    onChange,
-    onValueChange,
-    size = "md",
-    ...props
-  }, outerRef) => {
-    const Comp = asChild ? Slot$4 : "input";
-    const disabled = props.disabled;
-    const readOnly = props.readOnly;
-    const { descriptionId, error, errorId, inputId } = useFieldContext(
-      "@optiaxiom/react/InputControl"
-    );
-    const { boxProps, restProps } = extractBoxProps(props);
-    const { inputRef } = useInputContext("@optiaxiom/react/InputControl");
-    const ref = useComposedRefs(inputRef, outerRef);
-    const surface = useSurface("property");
-    const { track } = surface ?? {};
-    const debouncedTrack = useDebouncedTrack(
-      "property",
-      typeof props.value === "string" ? props.value : props.defaultValue
-    );
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
-        "aria-disabled": disabled,
-        "aria-invalid": error || errorProp ? true : void 0,
-        asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        "data-invalid": error || errorProp ? "" : void 0,
-        "data-readonly": readOnly ? "" : void 0,
-        ...control({ size }, className),
-        ...boxProps,
-        children: /* @__PURE__ */ jsx(
-          Comp,
-          {
-            id: inputId,
-            onBlur: (event) => {
-              restProps.onBlur?.(
-                event
-              );
-              track?.({ name: "blurred" });
-            },
-            onChange: (event) => {
-              onChange?.(
-                event
-              );
-              if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-                const newValue = event.target.value;
-                onValueChange?.(newValue);
-                if (!surface?.manualSuggestion) {
-                  debouncedTrack?.(newValue);
-                }
-              }
-            },
-            onFocus: (event) => {
-              restProps.onFocus?.(
-                event
-              );
-              track?.({ name: "focused" });
-            },
-            ref,
-            ...restProps,
-            children
-          }
-        )
-      }
-    );
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { useSurface } from "../surface/useSurface.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { useDebouncedTrack } from "../surface/useDebouncedTrack.js";
+import { useInputContext } from "./InputContext.js";
+import { control } from "./InputControl-css.js";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/input/InputControl.tsx
+const Slot = createSlot("@optiaxiom/react/InputControl");
+/**
+* @group InputRoot
+*/
+const InputControl = forwardRef(({ asChild, children, className, error: errorProp, onChange, onValueChange, size = "md", ...props }, outerRef) => {
+	const Comp = asChild ? Slot : "input";
+	const disabled = props.disabled;
+	const readOnly = props.readOnly;
+	const { descriptionId, error, errorId, inputId } = useFieldContext("@optiaxiom/react/InputControl");
+	const { boxProps, restProps } = extractBoxProps(props);
+	const { inputRef } = useInputContext("@optiaxiom/react/InputControl");
+	const ref = useComposedRefs(inputRef, outerRef);
+	const surface = useSurface("property");
+	const { track } = surface ?? {};
+	const debouncedTrack = useDebouncedTrack("property", typeof props.value === "string" ? props.value : props.defaultValue);
+	return /* @__PURE__ */ jsx(Box, {
+		"aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+		"aria-disabled": disabled,
+		"aria-invalid": error || errorProp ? true : void 0,
+		asChild: true,
+		"data-disabled": disabled ? "" : void 0,
+		"data-invalid": error || errorProp ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
+		...control({ size }, className),
+		...boxProps,
+		children: /* @__PURE__ */ jsx(Comp, {
+			id: inputId,
+			onBlur: (event) => {
+				restProps.onBlur?.(event);
+				track?.({ name: "blurred" });
+			},
+			onChange: (event) => {
+				onChange?.(event);
+				if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+					const newValue = event.target.value;
+					onValueChange?.(newValue);
+					if (!surface?.manualSuggestion) debouncedTrack?.(newValue);
+				}
+			},
+			onFocus: (event) => {
+				restProps.onFocus?.(event);
+				track?.({ name: "focused" });
+			},
+			ref,
+			...restProps,
+			children
+		})
+	});
+});
 InputControl.displayName = "@optiaxiom/react/InputControl";
-
+//#endregion
 export { InputControl };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BKEDBT5_.css';
-import './../../../../assets/src/input/InputRoot.css.ts.vanilla-DGM8vVZq.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var root$1 = recipeRuntime({base:[{gap:'0'},'_1osbbrw']});
-
-export { root$1 as root };
+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/input/InputControl.css.ts.vanilla-BetdQshF.css";
+import "./../../../../assets/src/input/InputRoot.css.ts.vanilla-C9ekSGqR.css";
+//#region src/input/InputRoot.css.ts
+var root = recipeRuntime({ base: [{ gap: "0" }, "se6n9o"] });
+//#endregion
+export { root };

package/dist/esm/packages/react/src/input/InputRoot.js

@@ -1,49 +1,31 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { Group } from '../group/Group.js';
-import { InputProvider } from './InputContext.js';
-import { root } from './InputRoot-css.js';
-
-const InputRoot = forwardRef(
-  ({
-    addonPointerEvents = "auto",
-    children,
-    className,
-    onPointerDown,
-    ...props
-  }, ref) => {
-    const inputRef = useRef(null);
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        onPointerDown: (event) => {
-          onPointerDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target !== event.currentTarget) {
-            return;
-          }
-          event.preventDefault();
-          event.stopPropagation();
-          inputRef.current?.focus();
-        },
-        ref,
-        ...root({}, className),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          InputProvider,
-          {
-            addonPointerEvents,
-            inputRef,
-            children
-          }
-        )
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { InputProvider } from "./InputContext.js";
+import { root } from "./InputRoot-css.js";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/input/InputRoot.tsx
+const InputRoot = forwardRef(({ addonPointerEvents = "auto", children, className, onPointerDown, ...props }, ref) => {
+	const inputRef = useRef(null);
+	return /* @__PURE__ */ jsx(Group, {
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.target !== event.currentTarget) return;
+			event.preventDefault();
+			event.stopPropagation();
+			inputRef.current?.focus();
+		},
+		ref,
+		...root({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(InputProvider, {
+			addonPointerEvents,
+			inputRef,
+			children
+		})
+	});
+});
 InputRoot.displayName = "@optiaxiom/react/InputRoot";
-
+//#endregion
 export { InputRoot };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,31 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-Dz124wqa.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var kbd = recipeRuntime({base:{display:'inline-flex',gap:'2',whiteSpace:'nowrap'}});
-var key = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',fontFamily:'sans',gap:'2',justifyContent:'center'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',rounded:'sm'},'enykly'],subtle:{}}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/kbd/Kbd.css.ts.vanilla-G3zByGbI.css";
+//#region src/kbd/Kbd.css.ts
+var kbd = recipeRuntime({ base: {
+	display: "inline-flex",
+	gap: "2",
+	whiteSpace: "nowrap"
+} });
+var key = recipeRuntime({
+	base: {
+		alignItems: "center",
+		color: "fg.secondary",
+		display: "inline-flex",
+		fontFamily: "sans",
+		gap: "2",
+		justifyContent: "center"
+	},
+	variants: { variant: {
+		outline: [{
+			bg: "bg.secondary",
+			border: "1",
+			borderB: "2",
+			borderColor: "border.secondary",
+			rounded: "sm"
+		}, "_163x3o"],
+		subtle: {}
+	} }
+});
+//#endregion
 export { kbd, key };

package/dist/esm/packages/react/src/kbd/Kbd.js

@@ -1,48 +1,54 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { key, kbd } from './Kbd-css.js';
-
+import { Box } from "../box/Box.js";
+import { kbd, key } from "./Kbd-css.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kbd/Kbd.tsx
 const platform = typeof navigator !== "undefined" && (navigator.platform.startsWith("Mac") || navigator.platform === "iPhone") ? "mac" : "win";
 const mapModifierToCode = {
-  mac: {
-    alt: "\u2325",
-    ctrl: "\u2303",
-    meta: "\u2318",
-    mod: "\u2318",
-    shift: "\u21E7"
-  },
-  win: {
-    alt: "Alt",
-    ctrl: "Ctrl",
-    meta: "Win",
-    mod: "Ctrl",
-    shift: "Shift"
-  }
+	mac: {
+		alt: "⌥",
+		ctrl: "⌃",
+		meta: "⌘",
+		mod: "⌘",
+		shift: "⇧"
+	},
+	win: {
+		alt: "Alt",
+		ctrl: "Ctrl",
+		meta: "Win",
+		mod: "Ctrl",
+		shift: "Shift"
+	}
 };
-const Kbd = forwardRef(
-  ({ children, className, modifiers, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...kbd({}, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
-      modifiers && (Array.isArray(modifiers) ? modifiers : [modifiers]).map(
-        (key$1) => key$1 in mapModifierToCode[platform] && /* @__PURE__ */ jsx(
-          Box,
-          {
-            "aria-label": key$1,
-            asChild: true,
-            title: key$1,
-            ...key({ variant }),
-            children: /* @__PURE__ */ jsx("kbd", { children: mapModifierToCode[platform][key$1] })
-          },
-          key$1
-        )
-      ),
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...key({ variant }), children: /* @__PURE__ */ jsx("kbd", { children }) })
-    ] }) });
-  }
-);
+/**
+* Inline text representing keyboard input.
+*
+* @category data-display
+* @since 0.1.0
+* @extends Code
+*/
+const Kbd = forwardRef(({ children, className, modifiers, variant = "outline", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...kbd({}, className),
+		...props,
+		children: /* @__PURE__ */ jsxs("kbd", {
+			ref,
+			children: [modifiers && (Array.isArray(modifiers) ? modifiers : [modifiers]).map((key$1) => key$1 in mapModifierToCode[platform] && /* @__PURE__ */ jsx(Box, {
+				"aria-label": key$1,
+				asChild: true,
+				title: key$1,
+				...key({ variant }),
+				children: /* @__PURE__ */ jsx("kbd", { children: mapModifierToCode[platform][key$1] })
+			}, key$1)), /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				...key({ variant }),
+				children: /* @__PURE__ */ jsx("kbd", { children })
+			})]
+		})
+	});
+});
 Kbd.displayName = "@optiaxiom/react/Kbd";
-
+//#endregion
 export { Kbd };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,11 +1,34 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B02H1riu.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-TPO8WdTk.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'uavqjo']});
-var content$1 = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
-var label$1 = recipeRuntime({base:[{color:'fg.tertiary',cursor:'pointer',fontFamily:'mono',fontWeight:'400',maxW:'full',textTransform:'uppercase',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
-
-export { button, content$1 as content, label$1 as label };
+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/button/ButtonRoot.css.ts.vanilla-DmFP5Ibu.css";
+import "./../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-Bwf6MFUh.css";
+//#region src/label-menu-button/LabelMenuButton.css.ts
+var button = recipeRuntime({ base: [{ justifyContent: "space-between" }, "_1gqh99p"] });
+var content = recipeRuntime({
+	base: [{
+		fontSize: "sm",
+		transition: "all"
+	}],
+	variants: { filled: {
+		false: { h: "0" },
+		true: { h: "16" }
+	} }
+});
+var label = recipeRuntime({
+	base: [{
+		color: "fg.tertiary",
+		cursor: "pointer",
+		fontFamily: "mono",
+		fontWeight: "400",
+		maxW: "full",
+		textTransform: "uppercase",
+		transition: "all"
+	}],
+	variants: { filled: {
+		false: { fontSize: "md" },
+		true: { fontSize: "xs" }
+	} }
+});
+//#endregion
+export { button, content, label };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton.js

@@ -1,50 +1,56 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconAngleDown } from '@optiaxiom/icons';
-import { useId } from '@radix-ui/react-id';
-import { Label } from '@radix-ui/react-label';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { ButtonAddon } from '../button/ButtonAddon.js';
-import { ButtonRoot } from '../button/ButtonRoot.js';
-import { Group } from '../group/Group.js';
-import { Text } from '../text/Text.js';
-import { label, content, button } from './LabelMenuButton-css.js';
-
-const LabelMenuButton = forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, children, className, label: label$1, ...props }, ref) => {
-    const filled = String(props["aria-expanded"]) === "true" || Boolean(children);
-    const labelId = useId();
-    const valueId = useId();
-    return /* @__PURE__ */ jsxs(
-      ButtonRoot,
-      {
-        "aria-labelledby": ariaLabelledBy ? clsx(labelId, ariaLabelledBy) : clsx(labelId, children && valueId),
-        "data-filled": filled ? "" : void 0,
-        ref,
-        size: "lg",
-        ...button({}, className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(
-            Group,
-            {
-              flexDirection: "column",
-              gap: "0",
-              overflow: "hidden",
-              textAlign: "start",
-              children: [
-                /* @__PURE__ */ jsx(Text, { asChild: true, id: labelId, truncate: true, ...label({ filled }), children: /* @__PURE__ */ jsx(Label, { children: label$1 }) }),
-                /* @__PURE__ */ jsx(Text, { id: valueId, truncate: true, ...content({ filled }), children: children ?? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, {}) })
-        ]
-      }
-    );
-  }
-);
+import { ButtonAddon } from "../button/ButtonAddon.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { ButtonRoot } from "../button/ButtonRoot.js";
+import { button, content, label } from "./LabelMenuButton-css.js";
+import { IconAngleDown } from "@optiaxiom/icons";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@radix-ui/react-label";
+//#region src/label-menu-button/LabelMenuButton.tsx
+/**
+* Button displaying both a label and value, used as the trigger for Select
+* components.
+*
+* @group Button
+*/
+const LabelMenuButton = forwardRef(({ "aria-labelledby": ariaLabelledBy, children, className, label: label$1, ...props }, ref) => {
+	const filled = String(props["aria-expanded"]) === "true" || Boolean(children);
+	const labelId = useId();
+	const valueId = useId();
+	return /* @__PURE__ */ jsxs(ButtonRoot, {
+		"aria-labelledby": ariaLabelledBy ? clsx(labelId, ariaLabelledBy) : clsx(labelId, children && valueId),
+		"data-filled": filled ? "" : void 0,
+		ref,
+		size: "lg",
+		...button({}, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(Group, {
+			flexDirection: "column",
+			gap: "0",
+			overflow: "hidden",
+			textAlign: "start",
+			children: [/* @__PURE__ */ jsx(Text, {
+				asChild: true,
+				id: labelId,
+				truncate: true,
+				...label({ filled }),
+				children: /* @__PURE__ */ jsx(Label, { children: label$1 })
+			}), /* @__PURE__ */ jsx(Text, {
+				id: valueId,
+				truncate: true,
+				...content({ filled }),
+				children: children ?? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" })
+			})]
+		}), /* @__PURE__ */ jsx(ButtonAddon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(IconAngleDown, {})
+		})]
+	});
+});
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
-
+//#endregion
 export { LabelMenuButton };

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,17 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-
-var axiom = 'optiaxiom';
-var base = 'optiaxiom.base';
-var components = 'optiaxiom._1bbhnib';
-var reset = 'optiaxiom.vsxl93';
-var theme = 'optiaxiom.theme';
-
-export { axiom, base, components, reset, theme };
+import { __exportAll } from "../../../../_virtual/_rolldown/runtime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+//#region src/layers/layers.css.ts
+var layers_css_exports = /* @__PURE__ */ __exportAll({
+	axiom: () => axiom,
+	base: () => base,
+	components: () => components,
+	reset: () => reset,
+	theme: () => theme
+});
+var axiom = "optiaxiom";
+var base = "optiaxiom.base";
+var components = "optiaxiom.rp4ht0";
+var reset = "optiaxiom.r1vt29";
+var theme = "optiaxiom.theme";
+//#endregion
+export { layers_css_exports, theme };

package/dist/esm/packages/react/src/layout/Layout-css.js

@@ -1,7 +1,18 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/layout/Layout.css.ts.vanilla-BbUGJBGE.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var layout = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',fontSize:'md'},'lkmqrv'],variants:{size:{full:'_14qq9ii',screen:'bbrubw'}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/layout/Layout.css.ts.vanilla-CnIHwm0l.css";
+//#region src/layout/Layout.css.ts
+var layout = recipeRuntime({
+	base: [{
+		bg: "bg.default",
+		display: "flex",
+		flexDirection: "column",
+		fontSize: "md"
+	}, "u2j7eb"],
+	variants: { size: {
+		full: "_3jvf04",
+		screen: "uz6i7r"
+	} }
+});
+//#endregion
 export { layout };