datocms-react-ui 2.1.0-alpha.1 → 2.1.0

package/dist/cjs/HotKey/index.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HotKey = void 0;
+var React = __importStar(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+var isMac = navigator.platform.indexOf('Mac') > -1;
+var modifierKey = isMac ? '⌘' : 'Ctrl';
+/**
+ * HotKey component displays keyboard shortcuts in a platform-aware format.
+ *
+ * The component automatically detects the user's platform and renders appropriate
+ * modifier key symbols (⌘ for Mac, Ctrl for Windows/Linux).
+ *
+ * @example Basic usage
+ *
+ * Display a simple keyboard shortcut without a label:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" />
+ * </Canvas>;
+ * ```
+ *
+ * @example With label
+ *
+ * Include a descriptive label to explain what the keyboard shortcut does:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" label="Save" />
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple hotkeys
+ *
+ * Display a list of keyboard shortcuts with labels for documenting available commands:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+c" label="Copy" />
+ *     <HotKey hotkey="mod+v" label="Paste" />
+ *     <HotKey hotkey="mod+shift+z" label="Redo" />
+ *     <HotKey hotkey="alt+enter" label="Submit" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Platform-specific rendering
+ *
+ * The component automatically adapts modifier keys based on the user's platform:
+ * - `mod` renders as `⌘` on Mac and `Ctrl` on Windows/Linux
+ * - `alt` renders as `⌥` on Mac and `Alt` on Windows/Linux
+ *
+ * This ensures the correct symbols are displayed for the user's operating system:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+k" label="Open command palette" />
+ *     <HotKey hotkey="alt+enter" label="Submit form" />
+ *     <HotKey hotkey="mod+alt+f" label="Find and replace" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+function HotKey(_a) {
+    var hotkey = _a.hotkey, label = _a.label;
+    var keys = hotkey
+        .replace('mod', modifierKey)
+        .replace('alt', isMac ? '⌥' : 'Alt')
+        .split(/\+/)
+        .map(function (e) { return e.charAt(0).toUpperCase() + e.slice(1); });
+    return (React.createElement("div", { className: styles_module_css_json_1.default.hotKey },
+        label && React.createElement("span", { className: styles_module_css_json_1.default.label }, label),
+        React.createElement("div", { className: styles_module_css_json_1.default.keys }, keys.map(function (key) { return (React.createElement("span", { key: key, className: styles_module_css_json_1.default.hotKeyKey }, key)); }))));
+}
+exports.HotKey = HotKey;
+//# sourceMappingURL=index.js.map

package/dist/cjs/HotKey/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/HotKey/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,oFAA8C;AAE9C,IAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AACrD,IAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,SAAgB,MAAM,CAAC,EAA8B;QAA5B,MAAM,YAAA,EAAE,KAAK,WAAA;IACpC,IAAM,IAAI,GAAG,MAAM;SAChB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC;SAC3B,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;SACnC,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAtC,CAAsC,CAAC,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAE,gCAAM,CAAC,MAAM;QAC1B,KAAK,IAAI,8BAAM,SAAS,EAAE,gCAAM,CAAC,KAAK,IAAG,KAAK,CAAQ;QACvD,6BAAK,SAAS,EAAE,gCAAM,CAAC,IAAI,IACxB,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,CACjB,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gCAAM,CAAC,SAAS,IACxC,GAAG,CACC,CACR,EAJkB,CAIlB,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC;AAnBD,wBAmBC"}

package/dist/cjs/HotKey/styles.module.css.json

@@ -0,0 +1 @@
+{ "hotKey": "_hotKey_1eko8_1", "label": "_label_1eko8_7", "keys": "_keys_1eko8_12", "hotKeyKey": "_hotKeyKey_1eko8_18" }

package/dist/cjs/Tooltip/Tooltip/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var React = __importStar(require("react"));
+var utils_1 = require("../utils");
+/**
+ * Tooltip wrapper component that provides context for TooltipTrigger and TooltipContent.
+ *
+ * This is a compound component pattern. The Tooltip component itself doesn't render anything,
+ * but provides the necessary context for its children (TooltipTrigger and TooltipContent).
+ *
+ * @example Basic tooltip
+ *
+ * Create a simple tooltip that appears when hovering over a button:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Hover me</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This is helpful information!
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with custom placement
+ *
+ * Control where the tooltip appears relative to its trigger using the `placement` prop:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button>Right tooltip</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       Appears on the right side
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple tooltips
+ *
+ * Use multiple tooltips on the same page to provide contextual help for different actions:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', gap: 'var(--spacing-m)' }}>
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<SaveIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Save changes (⌘S)
+ *       </TooltipContent>
+ *     </Tooltip>
+ *
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<DeleteIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Delete item
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+function Tooltip(_a) {
+    var children = _a.children, options = __rest(_a, ["children"]);
+    // This can accept any props as options, e.g. `placement`,
+    // or other positioning options.
+    var tooltip = (0, utils_1.useTooltip)(options);
+    return (React.createElement(utils_1.TooltipContext.Provider, { value: tooltip }, children));
+}
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Tooltip/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/Tooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,kCAAsE;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,SAAgB,OAAO,CAAC,EAAsC;IAApC,IAAA,QAAQ,cAAA,EAAK,OAAO,cAAtB,YAAwB,CAAF;IAC5C,0DAA0D;IAC1D,gCAAgC;IAChC,IAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CACL,oBAAC,sBAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IACpC,QAAQ,CACe,CAC3B,CAAC;AACJ,CAAC;AATD,0BASC"}

package/dist/cjs/Tooltip/TooltipContent/index.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+var react_1 = require("@floating-ui/react");
+var React = __importStar(require("react"));
+var Canvas_1 = require("../../Canvas");
+var utils_1 = require("../utils");
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * TooltipContent contains the content displayed in the floating tooltip.
+ *
+ * The content is automatically wrapped in a Canvas component to inherit the DatoCMS
+ * theme and styling. The tooltip uses a portal to render outside the normal DOM
+ * hierarchy, ensuring proper positioning and z-index stacking.
+ *
+ * @example Simple text tooltip
+ *
+ * Display plain text in a tooltip to provide helpful information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Delete</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This action cannot be undone
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Rich content tooltip
+ *
+ * Include formatted content with custom styles for more detailed information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<HelpIcon />}>Help</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <div>
+ *         <strong>Need assistance?</strong>
+ *         <p style={{ margin: '5px 0 0 0', fontSize: 'var(--font-size-xs)' }}>
+ *           Contact support@example.com
+ *         </p>
+ *       </div>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with keyboard shortcut
+ *
+ * Combine tooltips with the HotKey component to show keyboard shortcuts:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<SaveIcon />}>Save</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <HotKey hotkey="mod+s" label="Save changes" />
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ */
+exports.TooltipContent = React.forwardRef(function TooltipContent(_a, propRef) {
+    var children = _a.children;
+    var ctx = (0, Canvas_1.useCtx)();
+    var state = (0, utils_1.useTooltipState)();
+    var _b = (0, react_1.useDelayGroupContext)(), isInstantPhase = _b.isInstantPhase, currentId = _b.currentId;
+    var ref = (0, react_1.useMergeRefs)([state.refs.setFloating, propRef]);
+    // Use the shared portal root
+    var portalRootRef = React.useRef(null);
+    React.useEffect(function () {
+        // Get the shared portal root and increment ref count
+        portalRootRef.current = (0, utils_1.getSharedPortalRoot)();
+        // Cleanup function to release the shared portal root
+        return function () {
+            (0, utils_1.releaseSharedPortalRoot)();
+        };
+    }, []);
+    (0, react_1.useDelayGroup)(state.context, { id: state.context.floatingId });
+    var instantDuration = 0;
+    var duration = 250;
+    var _c = (0, react_1.useTransitionStyles)(state.context, {
+        duration: isInstantPhase
+            ? {
+                open: instantDuration,
+                // `id` is this component's `id`
+                // `currentId` is the current group's `id`
+                close: currentId === state.context.floatingId ? duration : instantDuration,
+            }
+            : duration,
+        initial: {
+            opacity: 0,
+        },
+    }), isMounted = _c.isMounted, styles = _c.styles;
+    if (!isMounted)
+        return null;
+    return (React.createElement(react_1.FloatingPortal, { root: portalRootRef },
+        React.createElement(Canvas_1.Canvas, { ctx: ctx, noAutoResizer: true },
+            React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, state.floatingStyles), styles) }, state.getFloatingProps(), { className: styles_module_css_json_1.default.tooltip }), children))));
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/Tooltip/TooltipContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/TooltipContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAM4B;AAC5B,2CAA+B;AAC/B,uCAA8C;AAC9C,kCAIkB;AAClB,oFAAyC;AAMzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,EAAY,EAAE,OAAO;QAAnB,QAAQ,cAAA;IAClC,IAAM,GAAG,GAAG,IAAA,eAAM,GAAE,CAAC;IACrB,IAAM,KAAK,GAAG,IAAA,uBAAe,GAAE,CAAC;IAC1B,IAAA,KAAgC,IAAA,4BAAoB,GAAE,EAApD,cAAc,oBAAA,EAAE,SAAS,eAA2B,CAAC;IAC7D,IAAM,GAAG,GAAG,IAAA,oBAAY,EAAC,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5D,6BAA6B;IAC7B,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC;QACd,qDAAqD;QACrD,aAAa,CAAC,OAAO,GAAG,IAAA,2BAAmB,GAAE,CAAC;QAE9C,qDAAqD;QACrD,OAAO;YACL,IAAA,+BAAuB,GAAE,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,qBAAa,EAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAE/D,IAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,IAAM,QAAQ,GAAG,GAAG,CAAC;IAEf,IAAA,KAAwB,IAAA,2BAAmB,EAAC,KAAK,CAAC,OAAO,EAAE;QAC/D,QAAQ,EAAE,cAAc;YACtB,CAAC,CAAC;gBACE,IAAI,EAAE,eAAe;gBACrB,gCAAgC;gBAChC,0CAA0C;gBAC1C,KAAK,EACH,SAAS,KAAK,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe;aACtE;YACH,CAAC,CAAC,QAAQ;QACZ,OAAO,EAAE;YACP,OAAO,EAAE,CAAC;SACX;KACF,CAAC,EAbM,SAAS,eAAA,EAAE,MAAM,YAavB,CAAC;IAEH,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,oBAAC,sBAAc,IAAC,IAAI,EAAE,aAAa;QACjC,oBAAC,eAAM,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa;YAC7B,sCACE,GAAG,EAAE,GAAG,EACR,KAAK,wBACA,KAAK,CAAC,cAAc,GACpB,MAAM,KAEP,KAAK,CAAC,gBAAgB,EAAE,IAC5B,SAAS,EAAE,gCAAC,CAAC,OAAO,KAEnB,QAAQ,CACL,CACC,CACM,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/Tooltip/TooltipContent/styles.module.css.json

@@ -0,0 +1 @@
+{ "tooltip": "_tooltip_3z5rn_1" }

package/dist/cjs/Tooltip/TooltipDelayGroup/index.js

@@ -0,0 +1,140 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipDelayGroup = void 0;
+var react_1 = require("@floating-ui/react");
+var React = __importStar(require("react"));
+/**
+ * TooltipDelayGroup synchronizes hover delays across multiple tooltips.
+ *
+ * When tooltips are wrapped in a delay group, hovering over the first tooltip
+ * will use the configured delay, but subsequent tooltips in the group will
+ * open instantly. This creates a smoother UX when users explore multiple
+ * interactive elements with tooltips.
+ *
+ * @example Basic delay group
+ *
+ * Group multiple tooltips together so they open instantly after the first one:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <TooltipDelayGroup delay={500}>
+ *     <div style={{ display: 'flex', gap: 'var(--spacing-m)' }}>
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button leftIcon={<SaveIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Save changes</TooltipContent>
+ *       </Tooltip>
+ *
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button leftIcon={<UndoIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Undo</TooltipContent>
+ *       </Tooltip>
+ *
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button leftIcon={<RedoIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Redo</TooltipContent>
+ *       </Tooltip>
+ *     </div>
+ *   </TooltipDelayGroup>
+ * </Canvas>;
+ * ```
+ *
+ * @example Custom delay configuration
+ *
+ * Configure different delays for opening and closing tooltips in the group:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <TooltipDelayGroup delay={{ open: 800, close: 200 }} timeoutMs={500}>
+ *     <div style={{ display: 'flex', gap: 'var(--spacing-s)' }}>
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button>Action 1</Button>
+ *         </TooltipTrigger>
+ *         <TooltipContent>First action</TooltipContent>
+ *       </Tooltip>
+ *
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button>Action 2</Button>
+ *         </TooltipTrigger>
+ *         <TooltipContent>Second action</TooltipContent>
+ *       </Tooltip>
+ *     </div>
+ *   </TooltipDelayGroup>
+ * </Canvas>;
+ * ```
+ *
+ * @example Toolbar with grouped tooltips
+ *
+ * Create a toolbar where hovering between tools feels instant and responsive:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <TooltipDelayGroup delay={600}>
+ *     <div style={{
+ *       display: 'flex',
+ *       gap: 'var(--spacing-xs)',
+ *       padding: 'var(--spacing-s)',
+ *       borderRadius: 'var(--border-radius-m)',
+ *       backgroundColor: 'var(--light-bg-color)'
+ *     }}>
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button buttonSize="s" leftIcon={<BoldIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Bold</TooltipContent>
+ *       </Tooltip>
+ *
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button buttonSize="s" leftIcon={<ItalicIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Italic</TooltipContent>
+ *       </Tooltip>
+ *
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button buttonSize="s" leftIcon={<UnderlineIcon />} />
+ *         </TooltipTrigger>
+ *         <TooltipContent>Underline</TooltipContent>
+ *       </Tooltip>
+ *     </div>
+ *   </TooltipDelayGroup>
+ * </Canvas>;
+ * ```
+ */
+function TooltipDelayGroup(_a) {
+    var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 1000 : _b, _c = _a.timeoutMs, timeoutMs = _c === void 0 ? 0 : _c;
+    return (React.createElement(react_1.FloatingDelayGroup, { delay: delay, timeoutMs: timeoutMs }, children));
+}
+exports.TooltipDelayGroup = TooltipDelayGroup;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Tooltip/TooltipDelayGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/TooltipDelayGroup/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAwD;AACxD,2CAA+B;AAU/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGG;AACH,SAAgB,iBAAiB,CAAC,EAIT;QAHvB,QAAQ,cAAA,EACR,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EACZ,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA;IAEb,OAAO,CACL,oBAAC,0BAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IACnD,QAAQ,CACU,CACtB,CAAC;AACJ,CAAC;AAVD,8CAUC"}

package/dist/cjs/Tooltip/TooltipTrigger/index.js

@@ -0,0 +1,102 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTrigger = void 0;
+var react_1 = require("@floating-ui/react");
+var React = __importStar(require("react"));
+var utils_1 = require("../utils");
+/**
+ * TooltipTrigger wraps the element that triggers the tooltip on hover/focus.
+ *
+ * The child must be a single React element that accepts ref and event handler props.
+ * Common triggers include buttons, icons, or other interactive elements.
+ *
+ * @example With Button component
+ *
+ * Wrap a button to show a tooltip when the user hovers over it:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Hover for info</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       Additional information appears here
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example With icon button
+ *
+ * Use tooltips with icon-only buttons to explain their purpose:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="bottom">
+ *     <TooltipTrigger>
+ *       <Button buttonSize="s" leftIcon={<InfoIcon />} />
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       Click for more details
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ */
+exports.TooltipTrigger = React.forwardRef(function TooltipTrigger(_a, propRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var state = (0, utils_1.useTooltipState)();
+    var childrenRef = children.ref;
+    var ref = (0, react_1.useMergeRefs)([state.refs.setReference, propRef, childrenRef]);
+    if (!React.isValidElement(children)) {
+        throw new Error('TooltipTrigger children must be a valid React element');
+    }
+    return React.cloneElement(children, state.getReferenceProps(__assign(__assign(__assign({ ref: ref }, props), children.props), { 'data-state': state.open ? 'open' : 'closed' })));
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/Tooltip/TooltipTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/TooltipTrigger/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAkD;AAClD,2CAA+B;AAC/B,kCAA2C;AAM3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,EAAsB,EAAE,OAAO;IAA7B,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC5C,IAAM,KAAK,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEhC,IAAM,WAAW,GAAI,QAAgB,CAAC,GAAG,CAAC;IAC1C,IAAM,GAAG,GAAG,IAAA,oBAAY,EAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1E,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACnC,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;KAC1E;IAED,OAAO,KAAK,CAAC,YAAY,CACvB,QAAQ,EACR,KAAK,CAAC,iBAAiB,8BACrB,GAAG,KAAA,IACA,KAAK,GACL,QAAQ,CAAC,KAAK,KACjB,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAC5C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTrigger = exports.TooltipDelayGroup = exports.TooltipContent = exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var TooltipContent_1 = require("./TooltipContent");
+Object.defineProperty(exports, "TooltipContent", { enumerable: true, get: function () { return TooltipContent_1.TooltipContent; } });
+var TooltipDelayGroup_1 = require("./TooltipDelayGroup");
+Object.defineProperty(exports, "TooltipDelayGroup", { enumerable: true, get: function () { return TooltipDelayGroup_1.TooltipDelayGroup; } });
+var TooltipTrigger_1 = require("./TooltipTrigger");
+Object.defineProperty(exports, "TooltipTrigger", { enumerable: true, get: function () { return TooltipTrigger_1.TooltipTrigger; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAEhB,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AAEvB,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA;AAE1B,mDAAkD;AAAzC,gHAAA,cAAc,OAAA"}