moduix 0.11.0 → 0.11.1

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,41 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { Toggle } from "../Toggle/Toggle.js";
+import ToggleGroup_module_default from "./ToggleGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/ToggleGroup/ToggleGroup.tsx
+const ToggleGroupContext = createContext({
+	variant: "default",
+	size: "md"
+});
+const ToggleGroup$1 = forwardRef(function ToggleGroup$2({ className, variant = "default", size = "md", ...props }, ref) {
+	const contextValue = useMemo(() => ({
+		variant,
+		size
+	}), [size, variant]);
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(ToggleGroup, {
+			ref,
+			"data-slot": "toggle-group-root",
+			"data-variant": variant,
+			"data-size": size,
+			className: mergeClassName(className, ToggleGroup_module_default.root),
+			...props
+		})
+	});
+});
+const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
+	const inherited = useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(Toggle, {
+		ref,
+		"data-slot": "toggle-group-item",
+		variant: variant ?? inherited.variant,
+		size: size ?? inherited.size,
+		className: mergeClassName(className, ToggleGroup_module_default.item),
+		...props
+	});
+});
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem };

package/dist/components/ToggleGroup/ToggleGroup.module.cjs

@@ -0,0 +1,8 @@
+import './ToggleGroup.css';
+//#region src/components/ToggleGroup/ToggleGroup.module.css
+var ToggleGroup_module_default = {
+	"item": "Y8wHdq_item",
+	"root": "Y8wHdq_root"
+};
+//#endregion
+exports.default = ToggleGroup_module_default;

package/dist/components/ToggleGroup/ToggleGroup.module.js

@@ -0,0 +1,8 @@
+import './ToggleGroup.css';
+//#region src/components/ToggleGroup/ToggleGroup.module.css
+var ToggleGroup_module_default = {
+	"item": "Y8wHdq_item",
+	"root": "Y8wHdq_root"
+};
+//#endregion
+export { ToggleGroup_module_default as default };

package/dist/components/ToggleGroup/index.d.ts

@@ -1 +1 @@
-export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";

package/dist/components/Toolbar/Toolbar.cjs

@@ -0,0 +1,61 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Toolbar_module = require("./Toolbar.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_toolbar = require("@base-ui/react/toolbar");
+//#region src/components/Toolbar/Toolbar.tsx
+const Toolbar = (0, react.forwardRef)(function Toolbar({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Root, {
+		ref,
+		"data-slot": "toolbar-root",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.root),
+		...props
+	});
+});
+const ToolbarGroup = (0, react.forwardRef)(function ToolbarGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Group, {
+		ref,
+		"data-slot": "toolbar-group",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.group),
+		...props
+	});
+});
+const ToolbarButton = (0, react.forwardRef)(function ToolbarButton({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Button, {
+		ref,
+		"data-slot": "toolbar-button",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.button),
+		...props
+	});
+});
+const ToolbarLink = (0, react.forwardRef)(function ToolbarLink({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Link, {
+		ref,
+		"data-slot": "toolbar-link",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.link),
+		...props
+	});
+});
+const ToolbarInput = (0, react.forwardRef)(function ToolbarInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Input, {
+		ref,
+		"data-slot": "toolbar-input",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.input),
+		...props
+	});
+});
+const ToolbarSeparator = (0, react.forwardRef)(function ToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Separator, {
+		ref,
+		"data-slot": "toolbar-separator",
+		className: require_mergeClassName.mergeClassName(className, require_Toolbar_module.default.separator),
+		...props
+	});
+});
+//#endregion
+exports.Toolbar = Toolbar;
+exports.ToolbarButton = ToolbarButton;
+exports.ToolbarGroup = ToolbarGroup;
+exports.ToolbarInput = ToolbarInput;
+exports.ToolbarLink = ToolbarLink;
+exports.ToolbarSeparator = ToolbarSeparator;

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1,203 @@
+@layer ui.components {
+  .ON21Hq_root {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--toolbar-gap, var(--border-width-sm));
+    padding: var(--toolbar-padding, .125rem);
+    border: var(--toolbar-border-width, var(--border-width-sm)) solid
+      var(--toolbar-border-color, var(--color-border));
+    border-radius: var(--toolbar-radius, var(--radius-lg));
+    background-color: var(--toolbar-bg, var(--color-muted));
+    color: var(--toolbar-color, var(--color-foreground));
+    display: inline-flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  .ON21Hq_group {
+    align-items: center;
+    gap: var(--toolbar-group-gap, var(--spacing-1));
+    display: inline-flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  .ON21Hq_button {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--toolbar-control-gap, var(--spacing-2));
+    min-width: var(--toolbar-control-height, var(--size-lg));
+    min-height: var(--toolbar-control-height, var(--size-lg));
+    border: var(--toolbar-control-border-width, var(--border-width-sm)) solid transparent;
+    border-radius: var(--toolbar-control-radius, var(--radius-md));
+    padding-block: 0;
+    padding-inline: var(--toolbar-control-padding-x, .75rem);
+    color: var(--toolbar-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--toolbar-font-size, var(--text-sm));
+    font-weight: var(--toolbar-font-weight, var(--weight-medium));
+    line-height: var(--toolbar-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--toolbar-transition, var(--transition-default)),
+      border-color var(--toolbar-transition, var(--transition-default)),
+      color var(--toolbar-transition, var(--transition-default)),
+      opacity var(--toolbar-transition, var(--transition-default));
+    background-color: #0000;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toolbar-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active {
+      background-color: var(--toolbar-control-bg-active, var(--color-accent));
+    }
+
+    &:focus-visible {
+      outline: var(--toolbar-focus-ring-width, var(--border-width-md)) solid
+        var(--toolbar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toolbar-focus-ring-offset, -1px);
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--toolbar-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &[data-pressed], &[data-popup-open] {
+      border-color: var(--toolbar-control-border-color-active, transparent);
+      background-color: var(--toolbar-control-bg-pressed, var(--color-background));
+      color: var(--toolbar-control-color-pressed, var(--color-foreground));
+    }
+
+    & :where(svg) {
+      width: var(--toolbar-icon-size, 1rem);
+      height: var(--toolbar-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+
+    &:empty, &:has( > svg:only-child) {
+      width: var(--toolbar-control-height, var(--size-lg));
+      padding-inline: 0;
+    }
+
+    .ON21Hq_root[data-orientation="vertical"] & {
+      width: 100%;
+    }
+  }
+
+  .ON21Hq_link {
+    box-sizing: border-box;
+    min-height: var(--toolbar-control-height, var(--size-lg));
+    border-radius: var(--toolbar-control-radius, var(--radius-md));
+    padding-inline: var(--toolbar-control-padding-x, .75rem);
+    color: var(--toolbar-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--toolbar-font-size, var(--text-sm));
+    font-weight: var(--toolbar-font-weight, var(--weight-medium));
+    line-height: var(--toolbar-line-height, var(--line-height-text-sm));
+    white-space: nowrap;
+    transition: background-color var(--toolbar-transition, var(--transition-default)),
+      color var(--toolbar-transition, var(--transition-default)),
+      opacity var(--toolbar-transition, var(--transition-default));
+    flex: none;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toolbar-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active {
+      background-color: var(--toolbar-control-bg-active, var(--color-accent));
+    }
+
+    &:focus-visible {
+      outline: var(--toolbar-focus-ring-width, var(--border-width-md)) solid
+        var(--toolbar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toolbar-focus-ring-offset, -1px);
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--toolbar-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  .ON21Hq_input {
+    box-sizing: border-box;
+    width: var(--toolbar-input-width, 10rem);
+    min-width: 0;
+    height: var(--toolbar-control-height, var(--size-lg));
+    border: var(--toolbar-input-border-width, var(--border-width-sm)) solid
+      var(--toolbar-input-border-color, var(--color-border));
+    border-radius: var(--toolbar-control-radius, var(--radius-md));
+    padding-block: 0;
+    padding-inline: var(--toolbar-input-padding-x, .75rem);
+    background-color: var(--toolbar-input-bg, var(--color-background));
+    color: var(--toolbar-input-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--toolbar-font-size, var(--text-sm));
+    line-height: var(--toolbar-line-height, var(--line-height-text-sm));
+    outline: var(--toolbar-focus-ring-width, var(--border-width-md)) solid transparent;
+    outline-offset: var(--toolbar-focus-ring-offset, -1px);
+    transition: border-color var(--toolbar-transition, var(--transition-default)),
+      outline-color var(--toolbar-transition, var(--transition-default)),
+      opacity var(--toolbar-transition, var(--transition-default));
+    margin: 0;
+
+    &::placeholder {
+      color: var(--toolbar-input-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:focus-visible {
+      outline-color: var(--toolbar-focus-ring-color, var(--color-ring));
+    }
+
+    .ON21Hq_root[data-orientation="vertical"] & {
+      width: 100%;
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--toolbar-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .ON21Hq_separator {
+    background-color: var(--toolbar-separator-color, var(--color-border));
+    flex-shrink: 0;
+    align-self: center;
+    margin: 0;
+
+    &[data-orientation="horizontal"] {
+      width: var(--toolbar-separator-length-horizontal, 100%);
+      height: var(--toolbar-separator-thickness, 1px);
+      margin-block: var(--toolbar-separator-margin-y-horizontal, var(--spacing-1));
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--toolbar-separator-thickness, 1px);
+      height: var(--toolbar-separator-length-vertical, 1rem);
+      margin-inline: var(--toolbar-separator-margin-x-vertical, var(--spacing-1));
+    }
+  }
+}

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

@@ -1,7 +1,9 @@
-declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarRootProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const ToolbarGroup: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const ToolbarButton: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-declare const ToolbarLink: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarLinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
-declare const ToolbarInput: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
-declare const ToolbarSeparator: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ToolbarSeparatorProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Toolbar, ToolbarGroup, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarSeparator };
+//#region src/components/Toolbar/Toolbar.d.ts
+declare const Toolbar: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const ToolbarGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const ToolbarButton: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const ToolbarLink: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const ToolbarInput: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const ToolbarSeparator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,56 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Toolbar_module_default from "./Toolbar.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/Toolbar/Toolbar.tsx
+const Toolbar$1 = forwardRef(function Toolbar$2({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		ref,
+		"data-slot": "toolbar-root",
+		className: mergeClassName(className, Toolbar_module_default.root),
+		...props
+	});
+});
+const ToolbarGroup = forwardRef(function ToolbarGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		ref,
+		"data-slot": "toolbar-group",
+		className: mergeClassName(className, Toolbar_module_default.group),
+		...props
+	});
+});
+const ToolbarButton = forwardRef(function ToolbarButton({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		ref,
+		"data-slot": "toolbar-button",
+		className: mergeClassName(className, Toolbar_module_default.button),
+		...props
+	});
+});
+const ToolbarLink = forwardRef(function ToolbarLink({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Link, {
+		ref,
+		"data-slot": "toolbar-link",
+		className: mergeClassName(className, Toolbar_module_default.link),
+		...props
+	});
+});
+const ToolbarInput = forwardRef(function ToolbarInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Input, {
+		ref,
+		"data-slot": "toolbar-input",
+		className: mergeClassName(className, Toolbar_module_default.input),
+		...props
+	});
+});
+const ToolbarSeparator = forwardRef(function ToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		ref,
+		"data-slot": "toolbar-separator",
+		className: mergeClassName(className, Toolbar_module_default.separator),
+		...props
+	});
+});
+//#endregion
+export { Toolbar$1 as Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };

package/dist/components/Toolbar/Toolbar.module.cjs

@@ -0,0 +1,12 @@
+import './Toolbar.css';
+//#region src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"button": "ON21Hq_button",
+	"group": "ON21Hq_group",
+	"input": "ON21Hq_input",
+	"link": "ON21Hq_link",
+	"root": "ON21Hq_root",
+	"separator": "ON21Hq_separator"
+};
+//#endregion
+exports.default = Toolbar_module_default;

package/dist/components/Toolbar/Toolbar.module.js

@@ -0,0 +1,12 @@
+import './Toolbar.css';
+//#region src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"button": "ON21Hq_button",
+	"group": "ON21Hq_group",
+	"input": "ON21Hq_input",
+	"link": "ON21Hq_link",
+	"root": "ON21Hq_root",
+	"separator": "ON21Hq_separator"
+};
+//#endregion
+export { Toolbar_module_default as default };

package/dist/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,91 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Tooltip_module = require("./Tooltip.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
+//#region src/components/Tooltip/Tooltip.tsx
+const TOOLTIP_CONTENT_SIDE_OFFSET = 8;
+const Tooltip = _base_ui_react_tooltip.Tooltip.Root;
+const TooltipProvider = _base_ui_react_tooltip.Tooltip.Provider;
+const createTooltipHandle = _base_ui_react_tooltip.Tooltip.createHandle;
+function TooltipTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : require_mergeClassName.mergeClassName(className, require_Tooltip_module.default.trigger);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		render,
+		className: triggerClassName,
+		...props
+	});
+}
+function TooltipPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Portal, {
+		"data-slot": "tooltip-portal",
+		className,
+		...props
+	});
+}
+function TooltipPositioner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
+		"data-slot": "tooltip-positioner",
+		className: require_mergeClassName.mergeClassName(className, require_Tooltip_module.default.positioner),
+		...props
+	});
+}
+function TooltipPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Popup, {
+		"data-slot": "tooltip-popup",
+		className: require_mergeClassName.mergeClassName(className, require_Tooltip_module.default.popup),
+		...props
+	});
+}
+function TooltipArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Arrow, {
+		"data-slot": "tooltip-arrow",
+		className: require_mergeClassName.mergeClassName(className, require_Tooltip_module.default.arrow),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowSvg, { className: require_Tooltip_module.default.arrowSvg })
+	});
+}
+function TooltipViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Viewport, {
+		"data-slot": "tooltip-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_Tooltip_module.default.viewport),
+		...props
+	});
+}
+function TooltipContent({ className, showArrow = false, side, sideOffset = TOOLTIP_CONTENT_SIDE_OFFSET, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, children, ...popupProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipPopup, {
+			className,
+			...popupProps,
+			children: [showArrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipViewport, { children })]
+		})
+	}) });
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PopupArrowIcon, {
+		fillClassName: require_Tooltip_module.default.arrowFill,
+		outerStrokeClassName: require_Tooltip_module.default.arrowOuterStroke,
+		innerStrokeClassName: require_Tooltip_module.default.arrowInnerStroke,
+		...props
+	});
+}
+//#endregion
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContent = TooltipContent;
+exports.TooltipPopup = TooltipPopup;
+exports.TooltipPortal = TooltipPortal;
+exports.TooltipPositioner = TooltipPositioner;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+exports.TooltipViewport = TooltipViewport;
+exports.createTooltipHandle = createTooltipHandle;

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1,155 @@
+@layer ui.components {
+  .UrkF4a_trigger {
+    box-sizing: border-box;
+    min-height: var(--tooltip-trigger-height, var(--size-lg));
+    padding: var(--tooltip-trigger-padding-y, .5rem) var(--tooltip-trigger-padding-x, .875rem);
+    border: var(--tooltip-trigger-border-width, var(--border-width-sm)) solid
+      var(--tooltip-trigger-border-color, var(--color-border));
+    border-radius: var(--tooltip-trigger-radius, var(--radius-md));
+    background-color: var(--tooltip-trigger-bg, var(--color-background));
+    color: var(--tooltip-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--tooltip-trigger-font-size, var(--text-sm));
+    line-height: var(--tooltip-trigger-line-height, var(--line-height-text-sm));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--tooltip-transition, var(--transition-default)),
+      border-color var(--tooltip-transition, var(--transition-default)),
+      color var(--tooltip-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--tooltip-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-popup-open] {
+      background-color: var(--tooltip-trigger-bg-active, var(--tooltip-trigger-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--tooltip-focus-ring-width, var(--border-width-sm)) solid
+        var(--tooltip-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tooltip-focus-ring-offset, -1px);
+    }
+
+    &[data-trigger-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--tooltip-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .UrkF4a_positioner {
+    z-index: var(--z-popup);
+    width: var(--positioner-width);
+    height: var(--positioner-height);
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .UrkF4a_popup {
+    box-sizing: border-box;
+    width: var(--popup-width, var(--tooltip-width, max-content));
+    height: var(--popup-height, auto);
+    max-width: min(var(--tooltip-max-width, 20rem), var(--available-width));
+    max-height: min(var(--tooltip-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--tooltip-padding-y, .25rem) var(--tooltip-padding-x, .5rem);
+    border-radius: var(--tooltip-radius, var(--radius-md));
+    background-color: var(--tooltip-bg, var(--color-popover));
+    color: var(--tooltip-color, var(--color-popover-foreground));
+    outline: var(--tooltip-border-width, var(--border-width-sm)) solid
+      var(--tooltip-border-color, var(--color-border));
+    box-shadow: var(--tooltip-shadow, var(--shadow-lg));
+    font-size: var(--tooltip-font-size, var(--text-sm));
+    line-height: var(--tooltip-line-height, var(--line-height-text-sm));
+    text-align: center;
+    transform-origin: var(--transform-origin);
+    transition: transform var(--tooltip-transition, .15s),
+      opacity var(--tooltip-transition, .15s);
+    border: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: visible;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--tooltip-scale, var(--scale-popup)));
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+  }
+
+  .UrkF4a_arrow {
+    color: var(--tooltip-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--tooltip-arrow-size, 8px) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--tooltip-arrow-size, 8px) * -1);
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--tooltip-arrow-inline-offset, 13px) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--tooltip-arrow-inline-offset, 13px) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  .UrkF4a_arrowSvg {
+    width: var(--tooltip-arrow-width, 1.25rem);
+    height: var(--tooltip-arrow-height, .625rem);
+    display: block;
+    overflow: visible;
+  }
+
+  .UrkF4a_arrowFill {
+    fill: currentColor;
+  }
+
+  .UrkF4a_arrowOuterStroke {
+    fill: var(--tooltip-arrow-stroke-color, var(--tooltip-border-color, var(--color-border)));
+  }
+
+  .UrkF4a_arrowInnerStroke {
+    fill: var(--tooltip-bg, var(--color-popover));
+  }
+
+  .UrkF4a_viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    &[data-transitioning] {
+      min-width: var(--popup-width);
+      min-height: var(--popup-height);
+    }
+
+    & > [data-current], & > [data-previous] {
+      transition: transform var(--tooltip-content-transition, .15s),
+        opacity var(--tooltip-content-transition, .15s);
+    }
+
+    & > [data-previous] {
+      width: var(--popup-width);
+      opacity: 0;
+      position: absolute;
+      inset: 0;
+    }
+  }
+}