@mastra/playground-ui 53.0.0-alpha.8 → 53.0.0

package/dist/components/Dialog.cjs.js

@@ -2,12 +2,190 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dialog = require('../dialog-K0q0KOOW.cjs');
-
+const dialog = require('../dialog-D-7Hkb3j.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Button = require('../Button-D10WB4vc.cjs');
+const utils_cn = require('../cn-DCPcv4xv.cjs');
 
+const ARM_WINDOW_MS = 4e3;
+const HoldAction = React.forwardRef(
+  ({ onConfirm, children, disabled, holdSeconds = 1.5, ...props }, ref) => {
+    const { intent, pending } = dialog.useDialogContext();
+    const [holding, setHolding] = React.useState(false);
+    const [completed, setCompleted] = React.useState(false);
+    const [armed, setArmed] = React.useState(false);
+    const timer = React.useRef(void 0);
+    const armTimer = React.useRef(void 0);
+    const active = React.useRef(false);
+    const hintId = React.useId();
+    function cancel() {
+      clearTimeout(timer.current);
+      active.current = false;
+      setHolding(false);
+    }
+    function disarm() {
+      clearTimeout(armTimer.current);
+      setArmed(false);
+    }
+    function complete() {
+      setHolding(false);
+      setCompleted(true);
+      disarm();
+      onConfirm();
+    }
+    function start() {
+      if (disabled || active.current) return;
+      active.current = true;
+      setHolding(true);
+      timer.current = setTimeout(complete, holdSeconds * 1e3);
+    }
+    function onClick(event) {
+      event.preventDefault();
+      if (event.detail !== 0 || disabled) return;
+      if (armed) {
+        complete();
+        return;
+      }
+      setArmed(true);
+      armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);
+    }
+    React.useEffect(() => {
+      function onVisibilityChange() {
+        if (document.hidden) cancel();
+      }
+      window.addEventListener("blur", cancel);
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      return () => {
+        clearTimeout(timer.current);
+        clearTimeout(armTimer.current);
+        window.removeEventListener("blur", cancel);
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+      };
+    }, []);
+    function onPointerDown(event) {
+      props.onPointerDown?.(event);
+      if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;
+      start();
+    }
+    function onKeyDown(event) {
+      props.onKeyDown?.(event);
+      if (event.defaultPrevented || event.key !== " " && event.key !== "Enter") return;
+      event.preventDefault();
+      if (!event.repeat) start();
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          size: "md",
+          ...props,
+          className: utils_cn.cn(
+            "group/hold relative isolate touch-none overflow-hidden select-none",
+            dialog.dialogActionLayoutClasses,
+            dialog.dialogActionSizeClasses[props.size ?? "md"],
+            props.className
+          ),
+          ref,
+          type: "button",
+          variant: intent === "destructive" ? "destructive-ghost" : "ghost",
+          disabled,
+          "aria-describedby": [props["aria-describedby"], hintId].filter(Boolean).join(" "),
+          "data-holding": holding || void 0,
+          "data-completed": completed || pending || void 0,
+          onClick,
+          onPointerDown,
+          onPointerUp: (event) => {
+            cancel();
+            props.onPointerUp?.(event);
+          },
+          onPointerLeave: (event) => {
+            cancel();
+            props.onPointerLeave?.(event);
+          },
+          onPointerCancel: (event) => {
+            cancel();
+            props.onPointerCancel?.(event);
+          },
+          onKeyDown,
+          onKeyUp: (event) => {
+            if (event.key === " " || event.key === "Enter") {
+              event.preventDefault();
+              cancel();
+            }
+            props.onKeyUp?.(event);
+          },
+          onBlur: (event) => {
+            cancel();
+            props.onBlur?.(event);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: utils_cn.cn(
+                  "pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]",
+                  "transition-[clip-path] ease-linear motion-reduce:transition-none",
+                  "group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]",
+                  "group-data-[completed]/hold:[clip-path:inset(0)]",
+                  intent === "destructive" ? "bg-accent2 text-white" : "bg-neutral6 text-surface1"
+                ),
+                style: { transitionDuration: holding ? `${holdSeconds}s` : "0s" },
+                children
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { id: hintId, className: "sr-only", children: [
+        "Hold Space or Enter for ",
+        holdSeconds,
+        " seconds to confirm. Release to cancel. Screen reader users can activate twice."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: "sr-only", children: armed ? "Activate again to confirm." : "" })
+    ] });
+  }
+);
+HoldAction.displayName = "DialogHoldAction";
+const DialogAction = React.forwardRef(
+  ({ confirmation = "click", holdSeconds = 1.5, onConfirm, disabled, ...props }, ref) => {
+    const { intent, pending } = dialog.useDialogContext();
+    const isDisabled = disabled || pending;
+    if (confirmation === "hold") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        HoldAction,
+        {
+          holdSeconds,
+          ...props,
+          ref,
+          disabled: isDisabled,
+          onConfirm
+        },
+        `${isDisabled}-${holdSeconds}`
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "md",
+        ...props,
+        className: utils_cn.cn(dialog.dialogActionLayoutClasses, dialog.dialogActionSizeClasses[props.size ?? "md"], props.className),
+        ref,
+        type: "button",
+        variant: intent === "destructive" ? "destructive" : "primary",
+        disabled: isDisabled,
+        onClick: onConfirm
+      }
+    );
+  }
+);
+DialogAction.displayName = "DialogAction";
 
 exports.Dialog = dialog.Dialog;
 exports.DialogBody = dialog.DialogBody;
+exports.DialogCancel = dialog.DialogCancel;
 exports.DialogClose = dialog.DialogClose;
 exports.DialogContent = dialog.DialogContent;
 exports.DialogDescription = dialog.DialogDescription;
@@ -17,4 +195,5 @@ exports.DialogOverlay = dialog.DialogOverlay;
 exports.DialogPortal = dialog.DialogPortal;
 exports.DialogTitle = dialog.DialogTitle;
 exports.DialogTrigger = dialog.DialogTrigger;
+exports.DialogAction = DialogAction;
 //# sourceMappingURL=Dialog.cjs.js.map

package/dist/components/Dialog.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.cjs.js","sources":["../../src/ds/components/Dialog/dialog-action.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { dialogActionLayoutClasses, dialogActionSizeClasses, useDialogContext } from './dialog-context';\nimport { Button } from '@/ds/components/Button';\nimport type { TextButtonSize } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport type DialogActionProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {\n  size?: TextButtonSize;\n  onConfirm: () => void;\n  confirmation?: 'click' | 'hold';\n  holdSeconds?: number;\n};\n\nconst ARM_WINDOW_MS = 4000;\n\nconst HoldAction = forwardRef<HTMLButtonElement, Omit<DialogActionProps, 'confirmation'>>(\n  ({ onConfirm, children, disabled, holdSeconds = 1.5, ...props }, ref) => {\n    const { intent, pending } = useDialogContext();\n    const [holding, setHolding] = useState(false);\n    const [completed, setCompleted] = useState(false);\n    const [armed, setArmed] = useState(false);\n    const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const armTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const active = useRef(false);\n    const hintId = useId();\n\n    function cancel() {\n      clearTimeout(timer.current);\n      active.current = false;\n      setHolding(false);\n    }\n\n    function disarm() {\n      clearTimeout(armTimer.current);\n      setArmed(false);\n    }\n\n    function complete() {\n      setHolding(false);\n      setCompleted(true);\n      disarm();\n      onConfirm();\n    }\n\n    function start() {\n      if (disabled || active.current) return;\n      active.current = true;\n      setHolding(true);\n      timer.current = setTimeout(complete, holdSeconds * 1000);\n    }\n\n    function onClick(event: MouseEvent<HTMLButtonElement>) {\n      event.preventDefault();\n      if (event.detail !== 0 || disabled) return;\n      if (armed) {\n        complete();\n        return;\n      }\n      setArmed(true);\n      armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);\n    }\n\n    useEffect(() => {\n      function onVisibilityChange() {\n        if (document.hidden) cancel();\n      }\n      window.addEventListener('blur', cancel);\n      document.addEventListener('visibilitychange', onVisibilityChange);\n      return () => {\n        clearTimeout(timer.current);\n        clearTimeout(armTimer.current);\n        window.removeEventListener('blur', cancel);\n        document.removeEventListener('visibilitychange', onVisibilityChange);\n      };\n    }, []);\n\n    function onPointerDown(event: PointerEvent<HTMLButtonElement>) {\n      props.onPointerDown?.(event);\n      if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;\n      start();\n    }\n\n    function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n      props.onKeyDown?.(event);\n      if (event.defaultPrevented || (event.key !== ' ' && event.key !== 'Enter')) return;\n      event.preventDefault();\n      if (!event.repeat) start();\n    }\n\n    return (\n      <>\n        <Button\n          size=\"md\"\n          {...props}\n          className={cn(\n            'group/hold relative isolate touch-none overflow-hidden select-none',\n            dialogActionLayoutClasses,\n            dialogActionSizeClasses[props.size ?? 'md'],\n            props.className,\n          )}\n          ref={ref}\n          type=\"button\"\n          variant={intent === 'destructive' ? 'destructive-ghost' : 'ghost'}\n          disabled={disabled}\n          aria-describedby={[props['aria-describedby'], hintId].filter(Boolean).join(' ')}\n          data-holding={holding || undefined}\n          data-completed={completed || pending || undefined}\n          onClick={onClick}\n          onPointerDown={onPointerDown}\n          onPointerUp={event => {\n            cancel();\n            props.onPointerUp?.(event);\n          }}\n          onPointerLeave={event => {\n            cancel();\n            props.onPointerLeave?.(event);\n          }}\n          onPointerCancel={event => {\n            cancel();\n            props.onPointerCancel?.(event);\n          }}\n          onKeyDown={onKeyDown}\n          onKeyUp={event => {\n            if (event.key === ' ' || event.key === 'Enter') {\n              event.preventDefault();\n              cancel();\n            }\n            props.onKeyUp?.(event);\n          }}\n          onBlur={event => {\n            cancel();\n            props.onBlur?.(event);\n          }}\n        >\n          <span>{children}</span>\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]',\n              'transition-[clip-path] ease-linear motion-reduce:transition-none',\n              'group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]',\n              'group-data-[completed]/hold:[clip-path:inset(0)]',\n              intent === 'destructive' ? 'bg-accent2 text-white' : 'bg-neutral6 text-surface1',\n            )}\n            style={{ transitionDuration: holding ? `${holdSeconds}s` : '0s' }}\n          >\n            {children}\n          </span>\n        </Button>\n        <span id={hintId} className=\"sr-only\">\n          Hold Space or Enter for {holdSeconds} seconds to confirm. Release to cancel. Screen reader users can activate\n          twice.\n        </span>\n        <span role=\"status\" className=\"sr-only\">\n          {armed ? 'Activate again to confirm.' : ''}\n        </span>\n      </>\n    );\n  },\n);\nHoldAction.displayName = 'DialogHoldAction';\n\nexport const DialogAction = forwardRef<HTMLButtonElement, DialogActionProps>(\n  ({ confirmation = 'click', holdSeconds = 1.5, onConfirm, disabled, ...props }, ref) => {\n    const { intent, pending } = useDialogContext();\n    const isDisabled = disabled || pending;\n    if (confirmation === 'hold') {\n      return (\n        <HoldAction\n          key={`${isDisabled}-${holdSeconds}`}\n          holdSeconds={holdSeconds}\n          {...props}\n          ref={ref}\n          disabled={isDisabled}\n          onConfirm={onConfirm}\n        />\n      );\n    }\n    return (\n      <Button\n        size=\"md\"\n        {...props}\n        className={cn(dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? 'md'], props.className)}\n        ref={ref}\n        type=\"button\"\n        variant={intent === 'destructive' ? 'destructive' : 'primary'}\n        disabled={isDisabled}\n        onClick={onConfirm}\n      />\n    );\n  },\n);\nDialogAction.displayName = 'DialogAction';\n"],"names":["forwardRef","useDialogContext","useState","useRef","useId","useEffect","jsxs","Fragment","Button","cn","dialogActionLayoutClasses","dialogActionSizeClasses","jsx"],"mappings":"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"}

package/dist/components/Dialog.es.js

@@ -1,2 +1,184 @@
-export { D as Dialog, a as DialogBody, b as DialogClose, c as DialogContent, d as DialogDescription, e as DialogFooter, f as DialogHeader, g as DialogOverlay, h as DialogPortal, i as DialogTitle, j as DialogTrigger } from '../dialog-CESxLg8S.js';
+import { u as useDialogContext, g as dialogActionSizeClasses, h as dialogActionLayoutClasses } from '../dialog-CZMPDVUj.js';
+export { D as Dialog, e as DialogBody, i as DialogCancel, j as DialogClose, a as DialogContent, d as DialogDescription, f as DialogFooter, b as DialogHeader, k as DialogOverlay, l as DialogPortal, c as DialogTitle, m as DialogTrigger } from '../dialog-CZMPDVUj.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useId, useEffect } from 'react';
+import { B as Button } from '../Button-BsfLQEC6.js';
+import { c as cn } from '../cn-B4oPhFx9.js';
+
+const ARM_WINDOW_MS = 4e3;
+const HoldAction = forwardRef(
+  ({ onConfirm, children, disabled, holdSeconds = 1.5, ...props }, ref) => {
+    const { intent, pending } = useDialogContext();
+    const [holding, setHolding] = useState(false);
+    const [completed, setCompleted] = useState(false);
+    const [armed, setArmed] = useState(false);
+    const timer = useRef(void 0);
+    const armTimer = useRef(void 0);
+    const active = useRef(false);
+    const hintId = useId();
+    function cancel() {
+      clearTimeout(timer.current);
+      active.current = false;
+      setHolding(false);
+    }
+    function disarm() {
+      clearTimeout(armTimer.current);
+      setArmed(false);
+    }
+    function complete() {
+      setHolding(false);
+      setCompleted(true);
+      disarm();
+      onConfirm();
+    }
+    function start() {
+      if (disabled || active.current) return;
+      active.current = true;
+      setHolding(true);
+      timer.current = setTimeout(complete, holdSeconds * 1e3);
+    }
+    function onClick(event) {
+      event.preventDefault();
+      if (event.detail !== 0 || disabled) return;
+      if (armed) {
+        complete();
+        return;
+      }
+      setArmed(true);
+      armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);
+    }
+    useEffect(() => {
+      function onVisibilityChange() {
+        if (document.hidden) cancel();
+      }
+      window.addEventListener("blur", cancel);
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      return () => {
+        clearTimeout(timer.current);
+        clearTimeout(armTimer.current);
+        window.removeEventListener("blur", cancel);
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+      };
+    }, []);
+    function onPointerDown(event) {
+      props.onPointerDown?.(event);
+      if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;
+      start();
+    }
+    function onKeyDown(event) {
+      props.onKeyDown?.(event);
+      if (event.defaultPrevented || event.key !== " " && event.key !== "Enter") return;
+      event.preventDefault();
+      if (!event.repeat) start();
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "md",
+          ...props,
+          className: cn(
+            "group/hold relative isolate touch-none overflow-hidden select-none",
+            dialogActionLayoutClasses,
+            dialogActionSizeClasses[props.size ?? "md"],
+            props.className
+          ),
+          ref,
+          type: "button",
+          variant: intent === "destructive" ? "destructive-ghost" : "ghost",
+          disabled,
+          "aria-describedby": [props["aria-describedby"], hintId].filter(Boolean).join(" "),
+          "data-holding": holding || void 0,
+          "data-completed": completed || pending || void 0,
+          onClick,
+          onPointerDown,
+          onPointerUp: (event) => {
+            cancel();
+            props.onPointerUp?.(event);
+          },
+          onPointerLeave: (event) => {
+            cancel();
+            props.onPointerLeave?.(event);
+          },
+          onPointerCancel: (event) => {
+            cancel();
+            props.onPointerCancel?.(event);
+          },
+          onKeyDown,
+          onKeyUp: (event) => {
+            if (event.key === " " || event.key === "Enter") {
+              event.preventDefault();
+              cancel();
+            }
+            props.onKeyUp?.(event);
+          },
+          onBlur: (event) => {
+            cancel();
+            props.onBlur?.(event);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]",
+                  "transition-[clip-path] ease-linear motion-reduce:transition-none",
+                  "group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]",
+                  "group-data-[completed]/hold:[clip-path:inset(0)]",
+                  intent === "destructive" ? "bg-accent2 text-white" : "bg-neutral6 text-surface1"
+                ),
+                style: { transitionDuration: holding ? `${holdSeconds}s` : "0s" },
+                children
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { id: hintId, className: "sr-only", children: [
+        "Hold Space or Enter for ",
+        holdSeconds,
+        " seconds to confirm. Release to cancel. Screen reader users can activate twice."
+      ] }),
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: armed ? "Activate again to confirm." : "" })
+    ] });
+  }
+);
+HoldAction.displayName = "DialogHoldAction";
+const DialogAction = forwardRef(
+  ({ confirmation = "click", holdSeconds = 1.5, onConfirm, disabled, ...props }, ref) => {
+    const { intent, pending } = useDialogContext();
+    const isDisabled = disabled || pending;
+    if (confirmation === "hold") {
+      return /* @__PURE__ */ jsx(
+        HoldAction,
+        {
+          holdSeconds,
+          ...props,
+          ref,
+          disabled: isDisabled,
+          onConfirm
+        },
+        `${isDisabled}-${holdSeconds}`
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "md",
+        ...props,
+        className: cn(dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? "md"], props.className),
+        ref,
+        type: "button",
+        variant: intent === "destructive" ? "destructive" : "primary",
+        disabled: isDisabled,
+        onClick: onConfirm
+      }
+    );
+  }
+);
+DialogAction.displayName = "DialogAction";
+
+export { DialogAction };
 //# sourceMappingURL=Dialog.es.js.map

package/dist/components/Dialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Dialog.es.js","sources":["../../src/ds/components/Dialog/dialog-action.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { dialogActionLayoutClasses, dialogActionSizeClasses, useDialogContext } from './dialog-context';\nimport { Button } from '@/ds/components/Button';\nimport type { TextButtonSize } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport type DialogActionProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {\n  size?: TextButtonSize;\n  onConfirm: () => void;\n  confirmation?: 'click' | 'hold';\n  holdSeconds?: number;\n};\n\nconst ARM_WINDOW_MS = 4000;\n\nconst HoldAction = forwardRef<HTMLButtonElement, Omit<DialogActionProps, 'confirmation'>>(\n  ({ onConfirm, children, disabled, holdSeconds = 1.5, ...props }, ref) => {\n    const { intent, pending } = useDialogContext();\n    const [holding, setHolding] = useState(false);\n    const [completed, setCompleted] = useState(false);\n    const [armed, setArmed] = useState(false);\n    const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const armTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const active = useRef(false);\n    const hintId = useId();\n\n    function cancel() {\n      clearTimeout(timer.current);\n      active.current = false;\n      setHolding(false);\n    }\n\n    function disarm() {\n      clearTimeout(armTimer.current);\n      setArmed(false);\n    }\n\n    function complete() {\n      setHolding(false);\n      setCompleted(true);\n      disarm();\n      onConfirm();\n    }\n\n    function start() {\n      if (disabled || active.current) return;\n      active.current = true;\n      setHolding(true);\n      timer.current = setTimeout(complete, holdSeconds * 1000);\n    }\n\n    function onClick(event: MouseEvent<HTMLButtonElement>) {\n      event.preventDefault();\n      if (event.detail !== 0 || disabled) return;\n      if (armed) {\n        complete();\n        return;\n      }\n      setArmed(true);\n      armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);\n    }\n\n    useEffect(() => {\n      function onVisibilityChange() {\n        if (document.hidden) cancel();\n      }\n      window.addEventListener('blur', cancel);\n      document.addEventListener('visibilitychange', onVisibilityChange);\n      return () => {\n        clearTimeout(timer.current);\n        clearTimeout(armTimer.current);\n        window.removeEventListener('blur', cancel);\n        document.removeEventListener('visibilitychange', onVisibilityChange);\n      };\n    }, []);\n\n    function onPointerDown(event: PointerEvent<HTMLButtonElement>) {\n      props.onPointerDown?.(event);\n      if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;\n      start();\n    }\n\n    function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n      props.onKeyDown?.(event);\n      if (event.defaultPrevented || (event.key !== ' ' && event.key !== 'Enter')) return;\n      event.preventDefault();\n      if (!event.repeat) start();\n    }\n\n    return (\n      <>\n        <Button\n          size=\"md\"\n          {...props}\n          className={cn(\n            'group/hold relative isolate touch-none overflow-hidden select-none',\n            dialogActionLayoutClasses,\n            dialogActionSizeClasses[props.size ?? 'md'],\n            props.className,\n          )}\n          ref={ref}\n          type=\"button\"\n          variant={intent === 'destructive' ? 'destructive-ghost' : 'ghost'}\n          disabled={disabled}\n          aria-describedby={[props['aria-describedby'], hintId].filter(Boolean).join(' ')}\n          data-holding={holding || undefined}\n          data-completed={completed || pending || undefined}\n          onClick={onClick}\n          onPointerDown={onPointerDown}\n          onPointerUp={event => {\n            cancel();\n            props.onPointerUp?.(event);\n          }}\n          onPointerLeave={event => {\n            cancel();\n            props.onPointerLeave?.(event);\n          }}\n          onPointerCancel={event => {\n            cancel();\n            props.onPointerCancel?.(event);\n          }}\n          onKeyDown={onKeyDown}\n          onKeyUp={event => {\n            if (event.key === ' ' || event.key === 'Enter') {\n              event.preventDefault();\n              cancel();\n            }\n            props.onKeyUp?.(event);\n          }}\n          onBlur={event => {\n            cancel();\n            props.onBlur?.(event);\n          }}\n        >\n          <span>{children}</span>\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]',\n              'transition-[clip-path] ease-linear motion-reduce:transition-none',\n              'group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]',\n              'group-data-[completed]/hold:[clip-path:inset(0)]',\n              intent === 'destructive' ? 'bg-accent2 text-white' : 'bg-neutral6 text-surface1',\n            )}\n            style={{ transitionDuration: holding ? `${holdSeconds}s` : '0s' }}\n          >\n            {children}\n          </span>\n        </Button>\n        <span id={hintId} className=\"sr-only\">\n          Hold Space or Enter for {holdSeconds} seconds to confirm. Release to cancel. Screen reader users can activate\n          twice.\n        </span>\n        <span role=\"status\" className=\"sr-only\">\n          {armed ? 'Activate again to confirm.' : ''}\n        </span>\n      </>\n    );\n  },\n);\nHoldAction.displayName = 'DialogHoldAction';\n\nexport const DialogAction = forwardRef<HTMLButtonElement, DialogActionProps>(\n  ({ confirmation = 'click', holdSeconds = 1.5, onConfirm, disabled, ...props }, ref) => {\n    const { intent, pending } = useDialogContext();\n    const isDisabled = disabled || pending;\n    if (confirmation === 'hold') {\n      return (\n        <HoldAction\n          key={`${isDisabled}-${holdSeconds}`}\n          holdSeconds={holdSeconds}\n          {...props}\n          ref={ref}\n          disabled={isDisabled}\n          onConfirm={onConfirm}\n        />\n      );\n    }\n    return (\n      <Button\n        size=\"md\"\n        {...props}\n        className={cn(dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? 'md'], props.className)}\n        ref={ref}\n        type=\"button\"\n        variant={intent === 'destructive' ? 'destructive' : 'primary'}\n        disabled={isDisabled}\n        onClick={onConfirm}\n      />\n    );\n  },\n);\nDialogAction.displayName = 'DialogAction';\n"],"names":[],"mappings":"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"}

package/dist/components/HorizontalBars.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const horizontalBars = require('../horizontal-bars-CE1O-Y6G.cjs');
+const horizontalBars = require('../horizontal-bars-Dgq3PYsg.cjs');
 
 
 

package/dist/components/HorizontalBars.es.js

@@ -1,2 +1,2 @@
-export { H as HorizontalBars } from '../horizontal-bars-DZ5J4TKv.js';
+export { H as HorizontalBars } from '../horizontal-bars-CyP-B-BX.js';
 //# sourceMappingURL=HorizontalBars.es.js.map

package/dist/components/IntegrationDialog.cjs.js

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Badge = require('../Badge-uc0ydYdy.cjs');
+const dialog = require('../dialog-D-7Hkb3j.cjs');
+const searchFieldBlock = require('../search-field-block-CiinIsub.cjs');
+const primitives_formElement = require('../primitives/form-element.cjs.js');
+const utils_cn = require('../cn-DCPcv4xv.cjs');
+
+function matches(item, query) {
+  return `${item.name} ${item.id} ${item.badge ?? ""}`.toLowerCase().includes(query);
+}
+function IntegrationDialog({
+  title,
+  description,
+  items,
+  onSelect,
+  searchPlaceholder = "Search integrations",
+  searchLabel = "Search integrations",
+  emptyMessage,
+  children,
+  className,
+  ...props
+}) {
+  const searchRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { variant: "new", ...props, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { className: utils_cn.cn("max-w-lg", className), initialFocus: searchRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IntegrationDialogContent,
+      {
+        searchRef,
+        title,
+        description,
+        items,
+        onSelect,
+        searchPlaceholder,
+        searchLabel,
+        emptyMessage
+      }
+    ) })
+  ] });
+}
+function IntegrationDialogContent({
+  title,
+  description,
+  items,
+  onSelect,
+  searchPlaceholder,
+  searchLabel,
+  emptyMessage,
+  searchRef
+}) {
+  const [query, setQuery] = React.useState("");
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleItems = normalizedQuery ? items.filter((item) => matches(item, normalizedQuery)) : items;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-5 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      searchFieldBlock.SearchFieldBlock,
+      {
+        inputRef: searchRef,
+        name: "integration-search",
+        label: searchLabel,
+        labelIsHidden: true,
+        placeholder: searchPlaceholder,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        onReset: () => setQuery(""),
+        variant: "outline",
+        size: "md"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { className: "pt-2 pb-5", children: visibleItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: item.disabled,
+          onClick: () => onSelect(item),
+          className: utils_cn.cn(
+            "flex w-full cursor-pointer items-center gap-3 rounded-2xl border border-border1 px-4 py-3 text-left transition-colors duration-normal ease-out-custom hover:bg-surface3 disabled:pointer-events-none disabled:opacity-50",
+            primitives_formElement.controlFocusBorderVisible
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4 grid size-8 shrink-0 place-items-center [&>img]:size-full [&>img]:object-contain [&>svg]:size-4", children: item.logo ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BlocksIcon, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md leading-ui-md text-neutral6 min-w-0 truncate font-medium", children: item.name }),
+            item.badge ? /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "sm", children: item.badge }) : null,
+            item.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm leading-ui-sm text-neutral3 ml-auto shrink-0", children: item.meta }) : null
+          ]
+        }
+      ) }, item.id);
+    }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: "text-ui-sm text-neutral3 py-8 text-center", children: emptyMessage ?? (normalizedQuery ? `No integrations match “${query}”.` : "No integrations are available.") }) })
+  ] });
+}
+IntegrationDialog.Trigger = dialog.DialogTrigger;
+
+exports.IntegrationDialog = IntegrationDialog;
+//# sourceMappingURL=IntegrationDialog.cjs.js.map

package/dist/components/IntegrationDialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationDialog.cjs.js","sources":["../../src/ds/components/IntegrationDialog/integration-dialog.tsx"],"sourcesContent":["import { BlocksIcon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/ds/components/Dialog';\nimport type { DialogProps } from '@/ds/components/Dialog';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks/fields/search-field-block';\nimport { controlFocusBorderVisible } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\nexport type IntegrationDialogItem = {\n  id: string;\n  name: string;\n  logo?: ReactNode;\n  badge?: string;\n  meta?: string;\n  disabled?: boolean;\n};\n\nexport type IntegrationDialogProps = Omit<DialogProps, 'variant' | 'intent' | 'children'> & {\n  title: ReactNode;\n  description?: ReactNode;\n  items: IntegrationDialogItem[];\n  onSelect: (item: IntegrationDialogItem) => void;\n  searchPlaceholder?: string;\n  searchLabel?: string;\n  emptyMessage?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n};\n\nfunction matches(item: IntegrationDialogItem, query: string) {\n  return `${item.name} ${item.id} ${item.badge ?? ''}`.toLowerCase().includes(query);\n}\n\nfunction IntegrationDialog({\n  title,\n  description,\n  items,\n  onSelect,\n  searchPlaceholder = 'Search integrations',\n  searchLabel = 'Search integrations',\n  emptyMessage,\n  children,\n  className,\n  ...props\n}: IntegrationDialogProps) {\n  const searchRef = useRef<HTMLInputElement>(null);\n  return (\n    <Dialog variant=\"new\" {...props}>\n      {children}\n      <DialogContent className={cn('max-w-lg', className)} initialFocus={searchRef}>\n        <IntegrationDialogContent\n          searchRef={searchRef}\n          title={title}\n          description={description}\n          items={items}\n          onSelect={onSelect}\n          searchPlaceholder={searchPlaceholder}\n          searchLabel={searchLabel}\n          emptyMessage={emptyMessage}\n        />\n      </DialogContent>\n    </Dialog>\n  );\n}\n\ntype IntegrationDialogContentProps = Pick<\n  IntegrationDialogProps,\n  'title' | 'description' | 'items' | 'onSelect' | 'emptyMessage'\n> &\n  Required<Pick<IntegrationDialogProps, 'searchPlaceholder' | 'searchLabel'>> & {\n    searchRef: RefObject<HTMLInputElement | null>;\n  };\n\nfunction IntegrationDialogContent({\n  title,\n  description,\n  items,\n  onSelect,\n  searchPlaceholder,\n  searchLabel,\n  emptyMessage,\n  searchRef,\n}: IntegrationDialogContentProps) {\n  const [query, setQuery] = useState('');\n  const normalizedQuery = query.trim().toLowerCase();\n  const visibleItems = normalizedQuery ? items.filter(item => matches(item, normalizedQuery)) : items;\n\n  return (\n    <>\n      <DialogHeader>\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </DialogHeader>\n      <div className=\"shrink-0 px-5 py-2\">\n        <SearchFieldBlock\n          inputRef={searchRef}\n          name=\"integration-search\"\n          label={searchLabel}\n          labelIsHidden\n          placeholder={searchPlaceholder}\n          value={query}\n          onChange={event => setQuery(event.target.value)}\n          onReset={() => setQuery('')}\n          variant=\"outline\"\n          size=\"md\"\n        />\n      </div>\n      <DialogBody className=\"pt-2 pb-5\">\n        {visibleItems.length > 0 ? (\n          <ul className=\"flex flex-col gap-2\">\n            {visibleItems.map(item => {\n              return (\n                <li key={item.id}>\n                  <button\n                    type=\"button\"\n                    disabled={item.disabled}\n                    onClick={() => onSelect(item)}\n                    className={cn(\n                      'flex w-full cursor-pointer items-center gap-3 rounded-2xl border border-border1 px-4 py-3 text-left transition-colors duration-normal ease-out-custom hover:bg-surface3 disabled:pointer-events-none disabled:opacity-50',\n                      controlFocusBorderVisible,\n                    )}\n                  >\n                    <span className=\"text-neutral4 grid size-8 shrink-0 place-items-center [&>img]:size-full [&>img]:object-contain [&>svg]:size-4\">\n                      {item.logo ?? <BlocksIcon />}\n                    </span>\n                    <span className=\"text-ui-md leading-ui-md text-neutral6 min-w-0 truncate font-medium\">\n                      {item.name}\n                    </span>\n                    {item.badge ? <Badge size=\"sm\">{item.badge}</Badge> : null}\n                    {item.meta ? (\n                      <span className=\"text-ui-sm leading-ui-sm text-neutral3 ml-auto shrink-0\">{item.meta}</span>\n                    ) : null}\n                  </button>\n                </li>\n              );\n            })}\n          </ul>\n        ) : (\n          <p role=\"status\" className=\"text-ui-sm text-neutral3 py-8 text-center\">\n            {emptyMessage ?? (normalizedQuery ? `No integrations match “${query}”.` : 'No integrations are available.')}\n          </p>\n        )}\n      </DialogBody>\n    </>\n  );\n}\n\nIntegrationDialog.Trigger = DialogTrigger;\n\nexport { IntegrationDialog };\n"],"names":["useRef","jsxs","Dialog","jsx","DialogContent","cn","useState","Fragment","DialogHeader","DialogTitle","DialogDescription","SearchFieldBlock","DialogBody","controlFocusBorderVisible","BlocksIcon","Badge","DialogTrigger"],"mappings":"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"}

package/dist/components/IntegrationDialog.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/IntegrationDialog/index'
+export {}