datocms-react-ui 2.0.16 → 2.0.18

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

@@ -0,0 +1,76 @@
+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 __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;
+};
+import * as React from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { useTooltipState } from '../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>;
+ * ```
+ */
+export var TooltipTrigger = React.forwardRef(function TooltipTrigger(_a, propRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var state = useTooltipState();
+    var childrenRef = children.ref;
+    var ref = 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/esm/Tooltip/TooltipTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/TooltipTrigger/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,cAAc,CAAC,EAAsB,EAAE,OAAO;IAA7B,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC5C,IAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAEhC,IAAM,WAAW,GAAI,QAAgB,CAAC,GAAG,CAAC;IAC1C,IAAM,GAAG,GAAG,YAAY,CAAC,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;AACF,CAAC,CACF,CAAC"}

package/dist/esm/Tooltip/index.d.ts

@@ -0,0 +1,6 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { TooltipContent } from './TooltipContent';
+export type { TooltipContentProps } from './TooltipContent';
+export { TooltipTrigger } from './TooltipTrigger';
+export type { TooltipTriggerProps } from './TooltipTrigger';

package/dist/esm/Tooltip/index.js

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { TooltipContent } from './TooltipContent';
+export { TooltipTrigger } from './TooltipTrigger';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/esm/Tooltip/utils.d.ts

@@ -0,0 +1,166 @@
+import type { Placement } from '@floating-ui/react';
+import * as React from 'react';
+export declare function getSharedPortalRoot(): HTMLDivElement;
+export declare function releaseSharedPortalRoot(): void;
+export interface TooltipOptions {
+    /** Whether the tooltip is initially open (uncontrolled mode) */
+    initialOpen?: boolean;
+    /** Placement of the tooltip relative to its trigger */
+    placement?: Placement;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes (controlled mode) */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Hook that manages tooltip state and positioning logic.
+ *
+ * This hook provides the core tooltip behavior including hover/focus detection,
+ * positioning, and accessibility features. Use this when you need full control
+ * over the tooltip structure.
+ *
+ * @example Basic tooltip hook usage
+ *
+ * Build a custom tooltip implementation using the hook directly for maximum flexibility:
+ *
+ * ```js
+ * function MyComponent() {
+ *   const tooltip = useTooltip({ placement: 'top' });
+ *
+ *   return (
+ *     <>
+ *       <button
+ *         ref={tooltip.refs.setReference}
+ *         {...tooltip.getReferenceProps()}
+ *       >
+ *         Hover me
+ *       </button>
+ *
+ *       {tooltip.open && (
+ *         <div
+ *           ref={tooltip.refs.setFloating}
+ *           style={tooltip.floatingStyles}
+ *           {...tooltip.getFloatingProps()}
+ *         >
+ *           Tooltip content
+ *         </div>
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example Controlled tooltip
+ *
+ * Control the tooltip's open state programmatically for click-to-toggle behavior:
+ *
+ * ```js
+ * function ControlledTooltip() {
+ *   const [open, setOpen] = React.useState(false);
+ *   const tooltip = useTooltip({ open, onOpenChange: setOpen });
+ *
+ *   return (
+ *     <Canvas ctx={ctx}>
+ *       <button onClick={() => setOpen(!open)}>
+ *         Toggle tooltip
+ *       </button>
+ *     </Canvas>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, }?: TooltipOptions): {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+declare type ContextType = ReturnType<typeof useTooltip> | null;
+export declare const TooltipContext: React.Context<ContextType>;
+export declare const useTooltipState: () => {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+export {};

package/dist/esm/Tooltip/utils.js

@@ -0,0 +1,135 @@
+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);
+};
+import { autoUpdate, flip, offset, shift, useDelayGroupContext, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
+import * as React from 'react';
+// Create a single shared portal root for all tooltips
+var sharedPortalRoot = null;
+var portalRefCount = 0;
+export function getSharedPortalRoot() {
+    if (!sharedPortalRoot) {
+        sharedPortalRoot = document.createElement('div');
+        sharedPortalRoot.style.position = 'relative';
+        sharedPortalRoot.style.zIndex = '100000';
+        sharedPortalRoot.style.height = '0px';
+        // Insert as the first child of body
+        if (document.body.firstChild) {
+            document.body.insertBefore(sharedPortalRoot, document.body.firstChild);
+        }
+        else {
+            document.body.appendChild(sharedPortalRoot);
+        }
+    }
+    portalRefCount++;
+    return sharedPortalRoot;
+}
+export function releaseSharedPortalRoot() {
+    portalRefCount--;
+    if (portalRefCount === 0 && sharedPortalRoot) {
+        if (sharedPortalRoot.parentNode) {
+            sharedPortalRoot.parentNode.removeChild(sharedPortalRoot);
+        }
+        sharedPortalRoot = null;
+    }
+}
+/**
+ * Hook that manages tooltip state and positioning logic.
+ *
+ * This hook provides the core tooltip behavior including hover/focus detection,
+ * positioning, and accessibility features. Use this when you need full control
+ * over the tooltip structure.
+ *
+ * @example Basic tooltip hook usage
+ *
+ * Build a custom tooltip implementation using the hook directly for maximum flexibility:
+ *
+ * ```js
+ * function MyComponent() {
+ *   const tooltip = useTooltip({ placement: 'top' });
+ *
+ *   return (
+ *     <>
+ *       <button
+ *         ref={tooltip.refs.setReference}
+ *         {...tooltip.getReferenceProps()}
+ *       >
+ *         Hover me
+ *       </button>
+ *
+ *       {tooltip.open && (
+ *         <div
+ *           ref={tooltip.refs.setFloating}
+ *           style={tooltip.floatingStyles}
+ *           {...tooltip.getFloatingProps()}
+ *         >
+ *           Tooltip content
+ *         </div>
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example Controlled tooltip
+ *
+ * Control the tooltip's open state programmatically for click-to-toggle behavior:
+ *
+ * ```js
+ * function ControlledTooltip() {
+ *   const [open, setOpen] = React.useState(false);
+ *   const tooltip = useTooltip({ open, onOpenChange: setOpen });
+ *
+ *   return (
+ *     <Canvas ctx={ctx}>
+ *       <button onClick={() => setOpen(!open)}>
+ *         Toggle tooltip
+ *       </button>
+ *     </Canvas>
+ *   );
+ * }
+ * ```
+ */
+export function useTooltip(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.initialOpen, initialOpen = _c === void 0 ? false : _c, _d = _b.placement, placement = _d === void 0 ? 'top' : _d, controlledOpen = _b.open, setControlledOpen = _b.onOpenChange;
+    var _e = React.useState(initialOpen), uncontrolledOpen = _e[0], setUncontrolledOpen = _e[1];
+    var open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
+    var setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
+    var delay = useDelayGroupContext().delay;
+    var data = useFloating({
+        placement: placement,
+        open: open,
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(5), flip(), shift()],
+    });
+    var context = data.context;
+    var hover = useHover(context, {
+        move: false,
+        enabled: controlledOpen == null,
+        delay: delay,
+    });
+    var focus = useFocus(context, {
+        enabled: controlledOpen == null,
+    });
+    var dismiss = useDismiss(context);
+    var role = useRole(context, { role: 'tooltip' });
+    var interactions = useInteractions([hover, focus, dismiss, role]);
+    return React.useMemo(function () { return (__assign(__assign({ open: open, setOpen: setOpen }, interactions), data)); }, [open, setOpen, interactions, data]);
+}
+export var TooltipContext = React.createContext(null);
+export var useTooltipState = function () {
+    var context = React.useContext(TooltipContext);
+    if (context == null) {
+        throw new Error('Tooltip components must be wrapped in <Tooltip />');
+    }
+    return context;
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/Tooltip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/Tooltip/utils.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -9,6 +9,7 @@ export * from './FieldHint';
 export * from './FieldWrapper';
 export * from './Form';
 export * from './FormLabel';
+export * from './HotKey';
 export * from './icons';
 export * from './Section';
 export * from './SelectField';
@@ -23,6 +24,7 @@ export * from './TextareaInput';
 export * from './TextField';
 export * from './TextInput';
 export * from './Toolbar';
+export * from './Tooltip';
 export * from './useClickOutside';
 export * from './useMediaQuery';
 export * from './VerticalSplit';

package/dist/esm/index.js

@@ -9,6 +9,7 @@ export * from './FieldHint';
 export * from './FieldWrapper';
 export * from './Form';
 export * from './FormLabel';
+export * from './HotKey';
 export * from './icons';
 export * from './Section';
 export * from './SelectField';
@@ -23,6 +24,7 @@ export * from './TextareaInput';
 export * from './TextField';
 export * from './TextInput';
 export * from './Toolbar';
+export * from './Tooltip';
 export * from './useClickOutside';
 export * from './useMediaQuery';
 export * from './VerticalSplit';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/types/HotKey/index.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+export declare type HotKeyProps = {
+    /**
+     * Keyboard shortcut string. Use "mod" for platform-specific modifier (Cmd on Mac, Ctrl elsewhere).
+     * Separate keys with "+". Examples: "mod+s", "mod+shift+p", "alt+enter"
+     */
+    hotkey: string;
+    /** Optional label to display before the key combination */
+    label?: string;
+};
+/**
+ * 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>;
+ * ```
+ */
+export declare function HotKey({ hotkey, label }: HotKeyProps): JSX.Element;

package/dist/types/Tooltip/Tooltip/index.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { TooltipOptions } from '../utils';
+export declare type TooltipProps = {
+    children?: React.ReactNode;
+} & TooltipOptions;
+/**
+ * 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>;
+ * ```
+ */
+export declare function Tooltip({ children, ...options }: TooltipProps): JSX.Element;

package/dist/types/Tooltip/TooltipContent/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+export declare type TooltipContentProps = {
+    children?: React.ReactNode;
+};
+/**
+ * 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>;
+ * ```
+ */
+export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;