@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/breadcrumb-DX6527Eu.js

@@ -0,0 +1,140 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+const require_link = require("./link-C25QZzRv.js");
+const require_menu = require("./menu-BpIoYUbA.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_icons_IconEllipsisStroke = require("@optiaxiom/icons/IconEllipsisStroke");
+require("./assets/Breadcrumb.css.ts.vanilla-CSycprfG.css");
+require("./assets/BreadcrumbNode.css.ts.vanilla-BXi4LgxK.css");
+//#region src/breadcrumb/Breadcrumb.css.ts
+var link = require_recipeRuntime.recipeRuntime({ base: "hor8eb" });
+var list = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	color: "fg.default",
+	display: "flex",
+	fontSize: "md",
+	gap: "8"
+}, "aco3lm"] });
+//#endregion
+//#region src/breadcrumb/BreadcrumbNode.css.ts
+var item = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	display: "inline-flex",
+	gap: "4",
+	whiteSpace: "nowrap"
+}, "j6cwru"] });
+//#endregion
+//#region src/breadcrumb/BreadcrumbNode.tsx
+const BreadcrumbNode = (0, react.forwardRef)(({ addonAfter, children, className, ...props }, ref) => {
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...item({}, className),
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+			ref,
+			...restProps,
+			children: [children, addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+				asChild: true,
+				flex: "none",
+				gap: "4",
+				children: require_button.fallbackSpan(addonAfter)
+			})]
+		})
+	});
+});
+BreadcrumbNode.displayName = "@optiaxiom/react/BreadcrumbNode";
+//#endregion
+//#region src/breadcrumb/Breadcrumb.tsx
+/**
+* Display a list of links showing the location of the current page in the navigational hierarchy.
+*
+* @category navigation
+* @since 1.6.0
+*/
+const Breadcrumb = (0, react.forwardRef)(({ className, items, maxItems = 3, ...props }, ref) => {
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		className,
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			"aria-label": "Breadcrumb",
+			ref,
+			...restProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				...list(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", { children: renderItems(items, maxItems, (item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbNode, {
+					addonAfter: item.addonAfter,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+						auto: true,
+						content: item.label,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+							asChild: true,
+							truncate: true,
+							children: index === items.length - 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+								"aria-current": index === items.length - 1 ? "page" : void 0,
+								children: item.label
+							}) : item.href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link.Link, {
+								appearance: "subtle",
+								href: item.href,
+								...link(),
+								children: item.label
+							}) : item.execute ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link.Link, {
+								appearance: "subtle",
+								asChild: true,
+								...link(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: () => item.execute?.(),
+									children: item.label
+								})
+							}) : null
+						})
+					})
+				})) })
+			})
+		})
+	});
+});
+Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
+const renderItems = (items, limit = items.length, renderItem) => {
+	if (limit < 0) limit = 0;
+	if (limit > items.length || typeof limit !== "number") limit = items.length;
+	const boundaries = [
+		0,
+		Math.floor(limit / 2),
+		items.length - Math.ceil(limit / 2),
+		items.length
+	];
+	return [
+		...items.slice(boundaries[0], boundaries[1]).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderItem(item, index) }, "left" + index)),
+		boundaries[2] > boundaries[1] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbNode, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_menu.Menu, {
+			options: items.slice(boundaries[1], boundaries[2]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_menu.MenuTrigger, {
+				appearance: "subtle",
+				"aria-label": "More items",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+					asChild: true,
+					color: "fg.tertiary",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconEllipsisStroke.IconEllipsisStroke, {})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_menu.MenuContent, {})]
+		}) }, "ellipsis"),
+		...items.slice(boundaries[2], boundaries[3]).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderItem(item, boundaries[2] + index) }, "right" + index))
+	];
+};
+//#endregion
+Object.defineProperty(exports, "Breadcrumb", {
+	enumerable: true,
+	get: function() {
+		return Breadcrumb;
+	}
+});

package/dist/cjs/breadcrumb.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_breadcrumb = require("./breadcrumb-DX6527Eu.js");
+exports.Breadcrumb = require_breadcrumb.Breadcrumb;

package/dist/cjs/button-BO_WcwyT.js

@@ -0,0 +1,265 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_ButtonRoot = require("./ButtonRoot-MlsRzbPN.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/ButtonGroup.css.ts.vanilla-Big2-ymt.css");
+require("./assets/ButtonRoot.css.ts.vanilla-BkvixQWK.css");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+require("./assets/Icon.css.ts.vanilla-BlwfGaoI.css");
+require("./assets/ButtonIcon.css.ts.vanilla-aDTSurCV.css");
+//#region src/utils/fallbackSpan.tsx
+const fallbackSpan = (content) => (0, react.isValidElement)(content) && content.type !== react.Fragment ? content : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: content });
+//#endregion
+//#region src/button/ButtonContext.ts
+const [ButtonProvider, useButtonContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Button", { size: void 0 });
+//#endregion
+//#region src/icon/Icon.css.ts
+var icon$1 = require_recipeRuntime.recipeRuntime({ base: [{ flex: "none" }, "_171izfn"] });
+//#endregion
+//#region src/icon/Icon.tsx
+const Icon = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		...icon$1({}, className),
+		...props,
+		children
+	});
+});
+Icon.displayName = "@optiaxiom/react/Icon";
+//#endregion
+//#region src/button/ButtonIcon.css.ts
+var icon = require_recipeRuntime.recipeRuntime({
+	variants: {
+		addon: {
+			false: "tvzi62",
+			true: {}
+		},
+		inverse: {
+			false: {},
+			true: {}
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		}
+	},
+	variantsCompounded: [
+		{
+			style: "_1cmi5pm",
+			variants: {
+				addon: true,
+				size: "sm"
+			}
+		},
+		{
+			style: "_4jvl4r",
+			variants: {
+				addon: true,
+				size: "md"
+			}
+		},
+		{
+			style: "_10mg33o",
+			variants: {
+				addon: true,
+				size: "lg"
+			}
+		},
+		{
+			style: [{ rounded: "sm" }, "sr21tj"],
+			variants: {
+				inverse: true,
+				size: "lg"
+			}
+		}
+	]
+});
+//#endregion
+//#region src/button/ButtonIcon.tsx
+const ButtonIcon = (0, react.forwardRef)(({ addon, children, className, inverse = false, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		asChild: true,
+		ref,
+		...icon({
+			addon,
+			inverse,
+			size
+		}, className),
+		...props,
+		children
+	});
+});
+ButtonIcon.displayName = "@optiaxiom/react/ButtonIcon";
+//#endregion
+//#region src/button/ButtonLabel.tsx
+const mapSizeToMargin = {
+	sm: "4",
+	md: "6",
+	lg: "6"
+};
+const ButtonLabel = (0, react.forwardRef)(({ children, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonLoadable, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+			asChild: true,
+			mx: mapSizeToMargin[size],
+			truncate: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref,
+				...props,
+				children
+			})
+		})
+	});
+});
+ButtonLabel.displayName = "@optiaxiom/react/ButtonLabel";
+//#endregion
+//#region src/button/Button.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/Button");
+/**
+* Button component for triggering actions, with support for icons, addons, and
+* loading states.
+*
+* Use this for standard action buttons. The component supports icon-only
+* buttons, buttons with leading/trailing icons, and custom addon content before
+* or after the main label.
+*
+* When not to use:
+* - For menu and select buttons with a chevron use AngleMenuButton instead.
+* - For ellipsis menus use EllipsisMenuButton instead.
+* - For buttons that include label use LabelMenuButton instead.
+* - For expand/collapse triggers use Disclosure instead of Button with chevron
+*   icon and manual state.
+* - Don't use Button to build tab navigation - use Tabs instead.
+*
+* @category actions
+* @since 0.1.0
+*/
+const Button = (0, react.forwardRef)(({ addonAfter, addonBefore, asChild, children, icon, iconPosition = "start", onClick, size: sizeProp, square, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const context = useButtonContext("@optiaxiom/react/Button");
+	const surface = require_useSurface.useSurface("action");
+	const size = sizeProp || context.size || "md";
+	let isIconOnly = false;
+	children = require_decorateChildren.decorateChildren({
+		asChild,
+		children
+	}, (children) => {
+		isIconOnly = Boolean(!children && icon);
+		if (isIconOnly) square = true;
+		if (icon && !isIconOnly) {
+			if (iconPosition === "start") addonBefore = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIcon, {
+				addon: true,
+				"data-disabled": props.disabled ? "" : void 0,
+				inverse: props.appearance === "primary" || props.appearance === "primary-opal",
+				size,
+				children: icon
+			});
+			else if (iconPosition === "end") addonAfter = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIcon, {
+				addon: true,
+				"data-disabled": props.disabled ? "" : void 0,
+				size,
+				children: icon
+			});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			addonBefore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonAddon, {
+				asChild: true,
+				children: fallbackSpan(addonBefore)
+			}),
+			square ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonLoadable, {
+				asChild: true,
+				children: children ? fallbackSpan(children) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIcon, {
+					size,
+					children: icon
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonLabel, {
+				size,
+				children
+			}),
+			addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonAddon, {
+				asChild: true,
+				children: fallbackSpan(addonAfter)
+			})
+		] });
+	});
+	const addon = square ? "only" : addonBefore && addonAfter ? "both" : addonBefore ? "start" : addonAfter ? "end" : "none";
+	const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
+	(0, react.useEffect)(() => {
+		if (isIconMissingAriaLabel) console.error(`Icon only \`Button\` requires an \`aria-label\` for the component to be accessible for screen reader users.`);
+	}, [isIconMissingAriaLabel]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonRoot, {
+		addon,
+		asChild: true,
+		justifyContent: square ? "center" : iconPosition === "end" ? "space-between" : "center",
+		onClick: (event) => {
+			onClick?.(event);
+			if (surface) surface.track({ name: "invoked" });
+		},
+		ref,
+		size,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children })
+	});
+});
+Button.displayName = "@optiaxiom/react/Button";
+//#endregion
+//#region src/button/ButtonGroup.css.ts
+var buttonGroup = require_recipeRuntime.recipeRuntime({ base: "ga2mxn" });
+//#endregion
+//#region src/button/ButtonGroup.tsx
+/**
+* @group Button
+*/
+const ButtonGroup = (0, react.forwardRef)(({ children, className, gap = "0", orientation = "horizontal", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		"data-orientation": gap === "0" ? orientation : void 0,
+		flexDirection: orientation === "vertical" ? "column" : "row",
+		gap,
+		ref,
+		...buttonGroup({}, className),
+		...props,
+		children
+	});
+});
+ButtonGroup.displayName = "@optiaxiom/react/ButtonGroup";
+//#endregion
+Object.defineProperty(exports, "Button", {
+	enumerable: true,
+	get: function() {
+		return Button;
+	}
+});
+Object.defineProperty(exports, "ButtonGroup", {
+	enumerable: true,
+	get: function() {
+		return ButtonGroup;
+	}
+});
+Object.defineProperty(exports, "ButtonProvider", {
+	enumerable: true,
+	get: function() {
+		return ButtonProvider;
+	}
+});
+Object.defineProperty(exports, "Icon", {
+	enumerable: true,
+	get: function() {
+		return Icon;
+	}
+});
+Object.defineProperty(exports, "fallbackSpan", {
+	enumerable: true,
+	get: function() {
+		return fallbackSpan;
+	}
+});

package/dist/cjs/button.js

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_button = require("./button-BO_WcwyT.js");
+exports.Button = require_button.Button;
+exports.ButtonGroup = require_button.ButtonGroup;