@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/listbox/ListboxItem.js

@@ -1,60 +1,68 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-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 { Group } from '../group/Group.js';
-import { Icon } from '../icon/Icon.js';
-import { Text } from '../text/Text.js';
-import '../utils/conditions.js';
-import { decorateChildren } from '../utils/decorateChildren.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { isHoverSupported } from '../utils/isHoverSupported.js';
-import { addon, title, description, item } from './ListboxItem-css.js';
-
-const Slot$6 = createSlot("@optiaxiom/react/ListboxItem");
-const ListboxItem = forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    asChild,
-    children,
-    className,
-    description: description$1,
-    icon,
-    intent = "neutral",
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot$6 : "div";
-    const labelId = useId();
-    const descriptionId = useId();
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        "aria-describedby": description$1 ? descriptionId : void 0,
-        "aria-labelledby": labelId,
-        asChild: true,
-        ref,
-        ...item({ intent }, className),
-        ...props,
-        ...!isHoverSupported && {
-          "data-highlighted": void 0
-        },
-        children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          (addonBefore || icon) && /* @__PURE__ */ jsx(Box, { ...addon({ slot: "before" }), children: addonBefore ?? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }),
-          /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "0", maxW: "full", children: [
-            /* @__PURE__ */ jsx(Group, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children2) }),
-            description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
-          ] }),
-          addonAfter && /* @__PURE__ */ jsx(Box, { ...addon({ slot: "after" }), children: addonAfter })
-        ] })) })
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { decorateChildren } from "../utils/decorateChildren.js";
+import { fallbackSpan } from "../utils/fallbackSpan.js";
+import { isHoverSupported } from "../utils/isHoverSupported.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { addon, description, item, title } from "./ListboxItem-css.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/listbox/ListboxItem.tsx
+const Slot = createSlot("@optiaxiom/react/ListboxItem");
+/**
+* @group Listbox
+*/
+const ListboxItem = forwardRef(({ addonAfter, addonBefore, asChild, children, className, description: description$1, icon, intent = "neutral", ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+	const labelId = useId();
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsx(Group, {
+		"aria-describedby": description$1 ? descriptionId : void 0,
+		"aria-labelledby": labelId,
+		asChild: true,
+		ref,
+		...item({ intent }, className),
+		...props,
+		...!isHoverSupported && { "data-highlighted": void 0 },
+		children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({
+			asChild,
+			children
+		}, (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			(addonBefore || icon) && /* @__PURE__ */ jsx(Box, {
+				...addon({ slot: "before" }),
+				children: addonBefore ?? /* @__PURE__ */ jsx(Icon, {
+					asChild: true,
+					children: icon
+				})
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				flex: "1",
+				flexDirection: "column",
+				gap: "0",
+				maxW: "full",
+				children: [/* @__PURE__ */ jsx(Group, {
+					asChild: true,
+					...title(),
+					id: labelId,
+					children: fallbackSpan(children)
+				}), description$1 && /* @__PURE__ */ jsx(Text, {
+					asChild: true,
+					...description(),
+					id: descriptionId,
+					children: fallbackSpan(description$1)
+				})]
+			}),
+			addonAfter && /* @__PURE__ */ jsx(Box, {
+				...addon({ slot: "after" }),
+				children: addonAfter
+			})
+		] })) })
+	});
+});
 ListboxItem.displayName = "@optiaxiom/react/ListboxItem";
-
+//#endregion
 export { ListboxItem };

package/dist/esm/packages/react/src/listbox/ListboxItemIndicator-css.js

@@ -1,7 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DR1qWK86.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var indicator = recipeRuntime({base:['_18s8uf5'],variants:{active:{false:{},true:'_10vdjbe'}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DxOXQYiF.css";
+//#region src/listbox/ListboxItemIndicator.css.ts
+var indicator = recipeRuntime({
+	base: ["_1yrk53d"],
+	variants: { active: {
+		false: {},
+		true: "zuhr6c"
+	} }
+});
+//#endregion
 export { indicator };

package/dist/esm/packages/react/src/listbox/ListboxItemIndicator.js

@@ -1,24 +1,22 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { IconCheck } from '@optiaxiom/icons';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { indicator } from './ListboxItemIndicator-css.js';
-
+import { Box } from "../box/Box.js";
+import { indicator } from "./ListboxItemIndicator-css.js";
+import { IconCheck } from "@optiaxiom/icons";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxItemIndicator.tsx
+/**
+* @group Listbox
+*/
 const ListboxItemIndicator = forwardRef(({ active, children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      ref,
-      ...indicator({ active }, className),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(IconCheck, {})
-    }
-  );
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		ref,
+		...indicator({ active }, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(IconCheck, {})
+	});
 });
 ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";
-
+//#endregion
 export { ListboxItemIndicator };

package/dist/esm/packages/react/src/listbox/ListboxItemized.js

@@ -1,64 +1,52 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useEffect, Fragment as Fragment$1 } from 'react';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { Skeleton } from '../skeleton/Skeleton.js';
-import { Listbox } from './Listbox.js';
-import { ListboxEmpty } from './ListboxEmpty.js';
-import { ListboxItem } from './ListboxItem.js';
-import { ListboxVirtualized } from './ListboxVirtualized.js';
-
+import { useEffectEvent } from "../hooks/useEffectEvent.js";
+import { Listbox } from "./Listbox.js";
+import { ListboxItem } from "./ListboxItem.js";
+import { ListboxEmpty } from "./ListboxEmpty.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { ListboxVirtualized } from "./ListboxVirtualized.js";
+import { Fragment, forwardRef, useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxItemized.tsx
 const VIRTUALIZE_THRESHOLD = 50;
-const ListboxItemized = forwardRef(
-  ({
-    children,
-    empty = "No results found.",
-    highlightedItem,
-    items,
-    itemToKey,
-    loading,
-    onPlacedChange,
-    ...props
-  }, ref) => {
-    const onPlacedChangeStable = useEffectEvent(onPlacedChange ?? (() => {
-    }));
-    useEffect(() => {
-      requestAnimationFrame(
-        () => requestAnimationFrame(() => onPlacedChangeStable(true))
-      );
-      return () => onPlacedChangeStable(false);
-    }, []);
-    return /* @__PURE__ */ jsx(
-      Listbox,
-      {
-        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD,
-        ref,
-        tabIndex: -1,
-        ...props,
-        children: loading === "both" || loading === "skeleton" ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx(
-          ListboxItem,
-          {
-            addonBefore: /* @__PURE__ */ jsx(Skeleton, { circle: true, size: "xs" }),
-            "aria-hidden": true,
-            children: /* @__PURE__ */ jsx(Skeleton, {})
-          },
-          item
-        )) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? /* @__PURE__ */ jsx(
-          ListboxVirtualized,
-          {
-            highlightedItem,
-            items,
-            itemToKey,
-            children
-          }
-        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: children(item, index, items[index - 1]) }, itemToKey(item))) : loading !== "spinner" && /* @__PURE__ */ jsx(ListboxEmpty, { children: empty }) : items.length > 0 ? children : loading !== "spinner" && /* @__PURE__ */ jsx(ListboxEmpty, { children: empty })
-      }
-    );
-  }
-);
+/**
+* @group Listbox
+*/
+const ListboxItemized = forwardRef(({ children, empty = "No results found.", highlightedItem, items, itemToKey, loading, onPlacedChange, ...props }, ref) => {
+	const onPlacedChangeStable = useEffectEvent(onPlacedChange ?? (() => {}));
+	useEffect(() => {
+		/**
+		* We wait for first paint to render the menu and then another paint for
+		* radix popper to place the menu and set the max-height. Otherwise we
+		* cannot scroll to the item because it isn't scrollable yet.
+		*/
+		requestAnimationFrame(() => requestAnimationFrame(() => onPlacedChangeStable(true)));
+		return () => onPlacedChangeStable(false);
+	}, []);
+	return /* @__PURE__ */ jsx(Listbox, {
+		asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD,
+		ref,
+		tabIndex: -1,
+		...props,
+		children: loading === "both" || loading === "skeleton" ? /* @__PURE__ */ jsx(Fragment$1, { children: [
+			1,
+			2,
+			3
+		].map((item) => /* @__PURE__ */ jsx(ListboxItem, {
+			addonBefore: /* @__PURE__ */ jsx(Skeleton, {
+				circle: true,
+				size: "xs"
+			}),
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(Skeleton, {})
+		}, item)) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? /* @__PURE__ */ jsx(ListboxVirtualized, {
+			highlightedItem,
+			items,
+			itemToKey,
+			children
+		}) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: children(item, index, items[index - 1]) }, itemToKey(item))) : loading !== "spinner" && /* @__PURE__ */ jsx(ListboxEmpty, { children: empty }) : items.length > 0 ? children : loading !== "spinner" && /* @__PURE__ */ jsx(ListboxEmpty, { children: empty })
+	});
+});
 ListboxItemized.displayName = "@optiaxiom/react/ListboxItemized";
-
+//#endregion
 export { ListboxItemized };

package/dist/esm/packages/react/src/listbox/ListboxLabel.js

@@ -1,30 +1,26 @@
 "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 { useListboxGroupContext } from './ListboxGroupContext.js';
-
-const ListboxLabel = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { id } = useListboxGroupContext("@optiaxiom/react/ListboxLabel");
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        color: "fg.tertiary",
-        fontFamily: "mono",
-        fontSize: "sm",
-        id,
-        p: "8",
-        ref,
-        textTransform: "uppercase",
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { useListboxGroupContext } from "./ListboxGroupContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxLabel.tsx
+/**
+* @group Listbox
+*/
+const ListboxLabel = forwardRef(({ children, ...props }, ref) => {
+	const { id } = useListboxGroupContext("@optiaxiom/react/ListboxLabel");
+	return /* @__PURE__ */ jsx(Box, {
+		color: "fg.tertiary",
+		fontFamily: "mono",
+		fontSize: "sm",
+		id,
+		p: "8",
+		ref,
+		textTransform: "uppercase",
+		...props,
+		children
+	});
+});
 ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";
-
+//#endregion
 export { ListboxLabel };

package/dist/esm/packages/react/src/listbox/ListboxRadioItem.js

@@ -1,30 +1,23 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { ListboxItem } from './ListboxItem.js';
-import { ListboxItemIndicator } from './ListboxItemIndicator.js';
-
+import { Group } from "../group/Group.js";
+import { ListboxItem } from "./ListboxItem.js";
+import { ListboxItemIndicator } from "./ListboxItemIndicator.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/listbox/ListboxRadioItem.tsx
+/**
+* @group Listbox
+*/
 const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    ListboxItem,
-    {
-      addonAfter: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-        addonAfter,
-        /* @__PURE__ */ jsx(
-          ListboxItemIndicator,
-          {
-            active: Boolean(
-              props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
-            )
-          }
-        )
-      ] }),
-      ref,
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(ListboxItem, {
+		addonAfter: /* @__PURE__ */ jsxs(Group, {
+			gap: "8",
+			children: [addonAfter, /* @__PURE__ */ jsx(ListboxItemIndicator, { active: Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]) })]
+		}),
+		ref,
+		...props
+	});
 });
 ListboxRadioItem.displayName = "@optiaxiom/react/ListboxRadioItem";
-
+//#endregion
 export { ListboxRadioItem };

package/dist/esm/packages/react/src/listbox/ListboxSeparator.js

@@ -1,9 +1,19 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Separator } from '../separator/Separator.js';
-
-const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { "aria-hidden": true, flex: "none", mx: "8", my: "4", ref, ...props }));
+import { Separator } from "../separator/Separator.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxSeparator.tsx
+/**
+* @group Listbox
+*/
+const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, {
+	"aria-hidden": true,
+	flex: "none",
+	mx: "8",
+	my: "4",
+	ref,
+	...props
+}));
 ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
-
+//#endregion
 export { ListboxSeparator };

package/dist/esm/packages/react/src/listbox/ListboxSwitchItem.js

@@ -1,48 +1,38 @@
 "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 { Group } from '../group/Group.js';
-import { Switch } from '../switch/Switch.js';
-import { checkbox } from './ListboxCheckboxItem-css.js';
-import { ListboxItem } from './ListboxItem.js';
-
+import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
+import { checkbox } from "./ListboxCheckboxItem-css.js";
+import { ListboxItem } from "./ListboxItem.js";
+import { Switch } from "../switch/Switch.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/listbox/ListboxSwitchItem.tsx
+/**
+* @group Listbox
+*/
 const ListboxSwitchItem = forwardRef(({ addonAfter, onCheckedChange, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    ListboxItem,
-    {
-      addonAfter: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-        addonAfter,
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            onClick: onCheckedChange ? (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              onCheckedChange(true);
-            } : void 0,
-            ...checkbox(),
-            children: /* @__PURE__ */ jsx(
-              Switch,
-              {
-                checked: Boolean(
-                  props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
-                ),
-                hidden: true,
-                pointerEvents: "none",
-                tabIndex: -1
-              }
-            )
-          }
-        )
-      ] }),
-      ref,
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(ListboxItem, {
+		addonAfter: /* @__PURE__ */ jsxs(Group, {
+			gap: "8",
+			children: [addonAfter, /* @__PURE__ */ jsx(Box, {
+				onClick: onCheckedChange ? (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onCheckedChange(true);
+				} : void 0,
+				...checkbox(),
+				children: /* @__PURE__ */ jsx(Switch, {
+					checked: Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]),
+					hidden: true,
+					pointerEvents: "none",
+					tabIndex: -1
+				})
+			})]
+		}),
+		ref,
+		...props
+	});
 });
 ListboxSwitchItem.displayName = "@optiaxiom/react/ListboxSwitchItem";
-
+//#endregion
 export { ListboxSwitchItem };