@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,197 @@
+"use client";
+import { withClass } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/toggle/Toggle.tsx
+/** Two-state button (bold, pin, favourite…). Inside a ToggleGroup it acts as a segment. */
+function Toggle$1(t0) {
+	const $ = c(12);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = withClass("oui-toggle", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== ref || $[9] !== size || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Toggle, {
+			ref,
+			className: t2,
+			"data-size": size,
+			...props
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = size;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function ToggleGroup$1(t0) {
+	const $ = c(16);
+	let className;
+	let fullWidth;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({size: t1, variant: t2, fullWidth, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = fullWidth;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		className = $[1];
+		fullWidth = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const variant = t2 === void 0 ? "segmented" : t2;
+	let t3;
+	if ($[7] !== className) {
+		t3 = withClass("oui-toggle-group", className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = fullWidth || void 0;
+	let t5;
+	if ($[9] !== props || $[10] !== ref || $[11] !== size || $[12] !== t3 || $[13] !== t4 || $[14] !== variant) {
+		t5 = /* @__PURE__ */ jsx(ToggleGroup, {
+			ref,
+			className: t3,
+			"data-size": size,
+			"data-variant": variant,
+			"data-full-width": t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = ref;
+		$[11] = size;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = variant;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+/** Single-choice switcher (e.g. Day / Week / Month). Always keeps one value selected. */
+function SegmentedControl(t0) {
+	const $ = c(24);
+	let defaultValue;
+	let onValueChange;
+	let options;
+	let props;
+	let ref;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({options, value, defaultValue, onValueChange, size: t1, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultValue;
+		$[2] = onValueChange;
+		$[3] = options;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = value;
+	} else {
+		defaultValue = $[1];
+		onValueChange = $[2];
+		options = $[3];
+		props = $[4];
+		ref = $[5];
+		t1 = $[6];
+		value = $[7];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);
+	const current = value ?? internal;
+	let t2;
+	if ($[8] !== current) {
+		t2 = current != null ? [current] : [];
+		$[8] = current;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== onValueChange) {
+		t3 = (next) => {
+			const picked = next[0];
+			if (picked == null) return;
+			setInternal(picked);
+			onValueChange?.(picked);
+		};
+		$[10] = onValueChange;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== options || $[13] !== size) {
+		let t5;
+		if ($[15] !== size) {
+			t5 = (option) => /* @__PURE__ */ jsx(Toggle$1, {
+				value: option.value,
+				size,
+				disabled: option.disabled,
+				"aria-label": option["aria-label"],
+				children: option.label
+			}, option.value);
+			$[15] = size;
+			$[16] = t5;
+		} else t5 = $[16];
+		t4 = options.map(t5);
+		$[12] = options;
+		$[13] = size;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[17] !== props || $[18] !== ref || $[19] !== size || $[20] !== t2 || $[21] !== t3 || $[22] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ToggleGroup$1, {
+			ref,
+			size,
+			value: t2,
+			onValueChange: t3,
+			...props,
+			children: t4
+		});
+		$[17] = props;
+		$[18] = ref;
+		$[19] = size;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
+}
+//#endregion
+export { SegmentedControl, Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup };
+
+//# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["React","Toggle","BaseToggle","ToggleGroup","BaseToggleGroup","withClass","ToggleSize","ToggleProps","Props","size","t0","$","_c","className","props","ref","t1","undefined","t2","t3","ToggleGroupProps","variant","fullWidth","t4","t5","SegmentedControlOption","value","label","ReactNode","disabled","SegmentedControlProps","Omit","options","defaultValue","onValueChange","SegmentedControl","internal","setInternal","useState","current","next","picked","option","map","Toggle","_c","BaseToggle","ToggleGroup","BaseToggleGroup"],"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { withClass } from '../../utils/cx';\n\nexport type ToggleSize = 'sm' | 'md';\n\nexport interface ToggleProps extends BaseToggle.Props {\n  size?: ToggleSize;\n}\n\n/** Two-state button (bold, pin, favourite…). Inside a ToggleGroup it acts as a segment. */\nexport function Toggle({ size = 'md', className, ref, ...props }: ToggleProps) {\n  return <BaseToggle ref={ref} className={withClass('oui-toggle', className)} data-size={size} {...props} />;\n}\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n  size?: ToggleSize;\n  /** `segmented` renders a pill track like a tab switcher; `outline` separate buttons. */\n  variant?: 'segmented' | 'outline';\n  /** Stretch segments to fill the width. */\n  fullWidth?: boolean;\n}\n\nexport function ToggleGroup({\n  size = 'md',\n  variant = 'segmented',\n  fullWidth,\n  className,\n  ref,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <BaseToggleGroup\n      ref={ref}\n      className={withClass('oui-toggle-group', className)}\n      data-size={size}\n      data-variant={variant}\n      data-full-width={fullWidth || undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  'aria-label'?: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<ToggleGroupProps, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'children'> {\n  options: SegmentedControlOption[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** Single-choice switcher (e.g. Day / Week / Month). Always keeps one value selected. */\nexport function SegmentedControl({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  ref,\n  ...props\n}: SegmentedControlProps) {\n  const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);\n  const current = value ?? internal;\n  return (\n    <ToggleGroup\n      ref={ref}\n      size={size}\n      value={current != null ? [current] : []}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked == null) return; // keep one segment selected\n        setInternal(picked);\n        onValueChange?.(picked);\n      }}\n      {...props}\n    >\n      {options.map((option) => (\n        <Toggle\n          key={option.value}\n          value={option.value}\n          size={size}\n          disabled={option.disabled}\n          aria-label={option['aria-label']}\n        >\n          {option.label}\n        </Toggle>\n      ))}\n    </ToggleGroup>\n  );\n}\n"],"mappings":"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"}

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,21 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+declare function ToolbarRoot({ className, ref, ...props }: BaseToolbar.Root.Props): import("react").JSX.Element;
+declare function ToolbarButton({ className, ref, ...props }: BaseToolbar.Button.Props): import("react").JSX.Element;
+declare function ToolbarLink({ className, ref, ...props }: BaseToolbar.Link.Props): import("react").JSX.Element;
+declare function ToolbarGroup({ className, ref, ...props }: BaseToolbar.Group.Props): import("react").JSX.Element;
+declare function ToolbarSeparator({ className, ref, ...props }: BaseToolbar.Separator.Props): import("react").JSX.Element;
+declare function ToolbarInput({ className, ref, ...props }: BaseToolbar.Input.Props): import("react").JSX.Element;
+/**
+ * Row of controls that is a single tab stop; arrow keys move between them.
+ * Other controls join through `render`: `<Toolbar.Button render={<Toggle />} />`,
+ * `<Toolbar.Button render={<Menu.Trigger />} />`.
+ */
+export declare const Toolbar: {
+    Root: typeof ToolbarRoot;
+    Button: typeof ToolbarButton;
+    Link: typeof ToolbarLink;
+    Group: typeof ToolbarGroup;
+    Separator: typeof ToolbarSeparator;
+    Input: typeof ToolbarInput;
+};
+export {};

package/dist/components/toolbar/Toolbar.js

@@ -0,0 +1,239 @@
+"use client";
+import { withClass } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/toolbar/Toolbar.tsx
+function ToolbarRoot(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-toolbar", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ToolbarButton(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-toolbar__button", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Button, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ToolbarLink(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-toolbar__link", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Link, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ToolbarGroup(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-toolbar__group", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Group, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ToolbarSeparator(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-toolbar__separator", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Separator, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ToolbarInput(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-input oui-toolbar__input", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toolbar.Input, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+/**
+* Row of controls that is a single tab stop; arrow keys move between them.
+* Other controls join through `render`: `<Toolbar.Button render={<Toggle />} />`,
+* `<Toolbar.Button render={<Menu.Trigger />} />`.
+*/
+var Toolbar$1 = {
+	Root: ToolbarRoot,
+	Button: ToolbarButton,
+	Link: ToolbarLink,
+	Group: ToolbarGroup,
+	Separator: ToolbarSeparator,
+	Input: ToolbarInput
+};
+//#endregion
+export { Toolbar$1 as Toolbar };
+
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["Toolbar","BaseToolbar","withClass","ToolbarRoot","t0","$","_c","className","props","ref","t1","t2","ToolbarButton","ToolbarLink","ToolbarGroup","ToolbarSeparator","ToolbarInput","Root","Button","Link","Group","Separator","Input","_c","BaseToolbar","Toolbar"],"sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';\nimport { withClass } from '../../utils/cx';\n\nfunction ToolbarRoot({ className, ref, ...props }: BaseToolbar.Root.Props) {\n  return <BaseToolbar.Root ref={ref} className={withClass('oui-toolbar', className)} {...props} />;\n}\n\nfunction ToolbarButton({ className, ref, ...props }: BaseToolbar.Button.Props) {\n  return <BaseToolbar.Button ref={ref} className={withClass('oui-toolbar__button', className)} {...props} />;\n}\n\nfunction ToolbarLink({ className, ref, ...props }: BaseToolbar.Link.Props) {\n  return <BaseToolbar.Link ref={ref} className={withClass('oui-toolbar__link', className)} {...props} />;\n}\n\nfunction ToolbarGroup({ className, ref, ...props }: BaseToolbar.Group.Props) {\n  return <BaseToolbar.Group ref={ref} className={withClass('oui-toolbar__group', className)} {...props} />;\n}\n\nfunction ToolbarSeparator({ className, ref, ...props }: BaseToolbar.Separator.Props) {\n  return <BaseToolbar.Separator ref={ref} className={withClass('oui-toolbar__separator', className)} {...props} />;\n}\n\nfunction ToolbarInput({ className, ref, ...props }: BaseToolbar.Input.Props) {\n  return <BaseToolbar.Input ref={ref} className={withClass('oui-input oui-toolbar__input', className)} {...props} />;\n}\n\n/**\n * Row of controls that is a single tab stop; arrow keys move between them.\n * Other controls join through `render`: `<Toolbar.Button render={<Toggle />} />`,\n * `<Toolbar.Button render={<Menu.Trigger />} />`.\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Button: ToolbarButton,\n  Link: ToolbarLink,\n  Group: ToolbarGroup,\n  Separator: ToolbarSeparator,\n  Input: ToolbarInput,\n};\n"],"mappings":"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"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+export interface TooltipContentProps extends BaseTooltip.Popup.Props {
+    side?: BaseTooltip.Positioner.Props['side'];
+    align?: BaseTooltip.Positioner.Props['align'];
+    sideOffset?: BaseTooltip.Positioner.Props['sideOffset'];
+    arrow?: boolean;
+    positionerProps?: BaseTooltip.Positioner.Props;
+}
+declare function TooltipContent({ side, align, sideOffset, arrow, positionerProps, className, children, ref, ...props }: TooltipContentProps): React.JSX.Element;
+export interface TooltipProps extends Omit<BaseTooltip.Root.Props, 'children'> {
+    /** Tooltip text. */
+    content: React.ReactNode;
+    /** The trigger. Must be a single element that accepts a ref (e.g. a Button). */
+    children: React.ReactElement;
+    side?: TooltipContentProps['side'];
+    align?: TooltipContentProps['align'];
+    /** Hover delay in ms. */
+    delay?: number;
+    contentProps?: Omit<TooltipContentProps, 'children'>;
+}
+declare function TooltipComponent({ content, children, side, align, delay, contentProps, ...rootProps }: TooltipProps): React.JSX.Element;
+/**
+ * `<Tooltip content="Export"><IconButton … /></Tooltip>`.
+ * Wrap the app in `Tooltip.Provider` so adjacent tooltips open instantly.
+ */
+export declare const Tooltip: typeof TooltipComponent & {
+    Provider: React.FC<import("@base-ui/react").TooltipProviderProps>;
+    Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => React.JSX.Element;
+    Trigger: BaseTooltip.Trigger;
+    Content: typeof TooltipContent;
+};
+export {};

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,182 @@
+"use client";
+import { usePortalContainer } from "../../utils/portal.js";
+import { withClass } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/Tooltip.tsx
+function TooltipContent(t0) {
+	const $ = c(29);
+	let children;
+	let className;
+	let positionerProps;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({side: t1, align: t2, sideOffset: t3, arrow: t4, positionerProps, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = positionerProps;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		children = $[1];
+		className = $[2];
+		positionerProps = $[3];
+		props = $[4];
+		ref = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
+	}
+	const side = t1 === void 0 ? "top" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const sideOffset = t3 === void 0 ? 8 : t3;
+	const arrow = t4 === void 0 ? true : t4;
+	const container = usePortalContainer();
+	let t5;
+	if ($[10] !== className) {
+		t5 = withClass("oui-tooltip", className);
+		$[10] = className;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== arrow) {
+		t6 = arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "oui-tooltip__arrow" });
+		$[12] = arrow;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== children || $[15] !== props || $[16] !== ref || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			ref,
+			className: t5,
+			...props,
+			children: [t6, children]
+		});
+		$[14] = children;
+		$[15] = props;
+		$[16] = ref;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== align || $[21] !== positionerProps || $[22] !== side || $[23] !== sideOffset || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			className: "oui-tooltip__positioner",
+			side,
+			align,
+			sideOffset,
+			...positionerProps,
+			children: t7
+		});
+		$[20] = align;
+		$[21] = positionerProps;
+		$[22] = side;
+		$[23] = sideOffset;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== container || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Tooltip.Portal, {
+			container,
+			children: t8
+		});
+		$[26] = container;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+}
+function TooltipComponent(t0) {
+	const $ = c(20);
+	let align;
+	let children;
+	let content;
+	let contentProps;
+	let delay;
+	let rootProps;
+	let side;
+	if ($[0] !== t0) {
+		({content, children, side, align, delay, contentProps, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = children;
+		$[3] = content;
+		$[4] = contentProps;
+		$[5] = delay;
+		$[6] = rootProps;
+		$[7] = side;
+	} else {
+		align = $[1];
+		children = $[2];
+		content = $[3];
+		contentProps = $[4];
+		delay = $[5];
+		rootProps = $[6];
+		side = $[7];
+	}
+	let t1;
+	if ($[8] !== children || $[9] !== delay) {
+		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			delay,
+			render: children
+		});
+		$[8] = children;
+		$[9] = delay;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== align || $[12] !== content || $[13] !== contentProps || $[14] !== side) {
+		t2 = /* @__PURE__ */ jsx(TooltipContent, {
+			side,
+			align,
+			...contentProps,
+			children: content
+		});
+		$[11] = align;
+		$[12] = content;
+		$[13] = contentProps;
+		$[14] = side;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== rootProps || $[17] !== t1 || $[18] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Tooltip.Root, {
+			...rootProps,
+			children: [t1, t2]
+		});
+		$[16] = rootProps;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	return t3;
+}
+/**
+* `<Tooltip content="Export"><IconButton … /></Tooltip>`.
+* Wrap the app in `Tooltip.Provider` so adjacent tooltips open instantly.
+*/
+var Tooltip$1 = Object.assign(TooltipComponent, {
+	Provider: Tooltip.Provider,
+	Root: Tooltip.Root,
+	Trigger: Tooltip.Trigger,
+	Content: TooltipContent
+});
+//#endregion
+export { Tooltip$1 as Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map