@marimo-team/frontend 0.23.1-dev2 → 0.23.1-dev20

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -297,13 +297,7 @@ export class MatplotlibRenderer {
     // Create canvas
     const canvas = document.createElement("canvas");
     canvas.className = "block cursor-crosshair";
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    canvas.width = this.#state.width * dpr;
-    canvas.height = this.#state.height * dpr;
-    canvas.style.width = `${this.#state.width}px`;
-    canvas.style.maxWidth = "100%";
-    canvas.style.height = "auto";
-    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
+    this.#syncCanvasSize(canvas);
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -322,6 +316,10 @@ export class MatplotlibRenderer {
       signal: options.signal,
     });
 
+    // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
+    // displays). matchMedia fires exactly once per DPR transition.
+    this.#watchDevicePixelRatio(options.signal);
+
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
       cancelAnimationFrame(this.#rafId);
@@ -333,6 +331,38 @@ export class MatplotlibRenderer {
     this.#restoreSelection(this.#state.value);
   }
 
+  /** Set the canvas buffer + CSS size to match current logical size and DPR. */
+  #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    const { width, height } = this.#state;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${width} / ${height}`;
+  }
+
+  /**
+   * Observe devicePixelRatio changes via matchMedia. Each listener fires once
+   * per transition, so we re-register after every change.
+   */
+  #watchDevicePixelRatio(signal: AbortSignal): void {
+    if (signal.aborted) {
+      return;
+    }
+    const mq = matchMedia(
+      `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
+    );
+    const onChange = () => {
+      this.#syncCanvasSize();
+      this.#drawCanvas();
+      // Re-register for the next DPR transition
+      this.#watchDevicePixelRatio(signal);
+    };
+    mq.addEventListener("change", onChange, { once: true, signal });
+  }
+
   update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
@@ -341,13 +371,7 @@ export class MatplotlibRenderer {
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      this.#canvas.width = state.width * dpr;
-      this.#canvas.height = state.height * dpr;
-      this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.maxWidth = "100%";
-      this.#canvas.style.height = "auto";
-      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
+      this.#syncCanvasSize();
       needsRedraw = true;
     }
 

package/src/plugins/impl/vega/VegaPlugin.tsx

@@ -8,7 +8,6 @@ import type { Data, VegaComponentState } from "./vega-component";
 
 import "./vega.css";
 import React, { type JSX } from "react";
-import { TooltipProvider } from "@/components/ui/tooltip";
 
 const LazyVegaComponent = React.lazy(() => import("./vega-component"));
 
@@ -29,13 +28,11 @@ export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
 
   render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {
     return (
-      <TooltipProvider>
-        <LazyVegaComponent
-          value={props.value}
-          setValue={props.setValue}
-          {...props.data}
-        />
-      </TooltipProvider>
+      <LazyVegaComponent
+        value={props.value}
+        setValue={props.setValue}
+        {...props.data}
+      />
     );
   }
 }

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -11,7 +11,7 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
 import { appendQueryParams } from "@/utils/urls";
@@ -67,11 +67,7 @@ export class NavigationMenuPlugin implements IStatelessPlugin<Data> {
   });
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
-    return (
-      <TooltipProvider>
-        <NavMenuComponent {...props.data} />
-      </TooltipProvider>
-    );
+    return <NavMenuComponent {...props.data} />;
   }
 }
 

package/src/utils/__tests__/events.test.ts

@@ -0,0 +1,223 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { Events } from "../events";
+
+/**
+ * Create a minimal fake event with just a target (no composedPath).
+ * Simulates synthetic events from libraries like React Aria.
+ */
+function fakeEvent(target: EventTarget): Pick<Event, "target"> {
+  return { target };
+}
+
+/**
+ * Create a fake native-like KeyboardEvent with composedPath() returning
+ * a different element than target — the key scenario for shadow DOM
+ * retargeting where target is the shadow host but composedPath()[0]
+ * is the real focused element inside the shadow root.
+ */
+function fakeNativeEvent(
+  retargetedHost: EventTarget,
+  realTarget: EventTarget,
+): KeyboardEvent {
+  const event = new KeyboardEvent("keydown");
+  Object.defineProperty(event, "target", { value: retargetedHost });
+  Object.defineProperty(event, "composedPath", {
+    value: () => [realTarget, retargetedHost, document.body, document],
+  });
+  return event;
+}
+
+describe("Events.composedTarget", () => {
+  test("returns composedPath()[0] for native events", () => {
+    const input = document.createElement("input");
+    const host = document.createElement("div");
+    const event = fakeNativeEvent(host, input);
+
+    expect(Events.composedTarget(event)).toBe(input);
+  });
+
+  test("falls back to e.target when composedPath is absent", () => {
+    const div = document.createElement("div");
+    const event = fakeEvent(div);
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+
+  test("falls back to e.target when composedPath returns empty array", () => {
+    const div = document.createElement("div");
+    const event = new KeyboardEvent("keydown");
+    Object.defineProperty(event, "target", { value: div });
+    Object.defineProperty(event, "composedPath", { value: () => [] });
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+});
+
+describe("Events.shouldIgnoreKeyboardEvent", () => {
+  test("ignores events from <input>", () => {
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(input, input);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    const event = fakeNativeEvent(textarea, textarea);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <select>", () => {
+    const select = document.createElement("select");
+    const event = fakeNativeEvent(select, select);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <button>", () => {
+    const button = document.createElement("button");
+    const event = fakeNativeEvent(button, button);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from contentEditable elements", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    div.remove();
+  });
+
+  test("ignores events from elements with role='textbox'", () => {
+    const container = document.createElement("div");
+    container.setAttribute("role", "textbox");
+    const child = document.createElement("span");
+    container.append(child);
+    document.body.append(container);
+
+    const event = fakeNativeEvent(child, child);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    container.remove();
+  });
+
+  test("ignores events from inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    const event = fakeNativeEvent(line, line);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    editor.remove();
+  });
+
+  test("does NOT ignore events from a plain <div>", () => {
+    const div = document.createElement("div");
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+
+  describe("shadow DOM retargeting (#4230)", () => {
+    test("ignores keydown when real target inside shadow root is <input>", () => {
+      const host = document.createElement("marimo-text");
+      const input = document.createElement("input");
+      // event.target is the shadow host, composedPath()[0] is the real input
+      const event = fakeNativeEvent(host, input);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <textarea>", () => {
+      const host = document.createElement("marimo-text-area");
+      const textarea = document.createElement("textarea");
+      const event = fakeNativeEvent(host, textarea);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <select>", () => {
+      const host = document.createElement("marimo-dropdown");
+      const select = document.createElement("select");
+      const event = fakeNativeEvent(host, select);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("does NOT ignore when shadow DOM real target is a plain <div>", () => {
+      const host = document.createElement("marimo-output");
+      const div = document.createElement("div");
+      const event = fakeNativeEvent(host, div);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+    });
+  });
+
+  test("does NOT ignore events from non-marimo custom elements", () => {
+    const el = document.createElement("sl-input");
+    const event = fakeNativeEvent(el, el);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+});
+
+describe("Events.fromInput", () => {
+  test("returns true for <input>", () => {
+    const input = document.createElement("input");
+    expect(Events.fromInput(fakeEvent(input))).toBe(true);
+  });
+
+  test("returns true for <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    expect(Events.fromInput(fakeEvent(textarea))).toBe(true);
+  });
+
+  test("returns true for marimo custom elements", () => {
+    const el = document.createElement("marimo-slider");
+    expect(Events.fromInput(fakeEvent(el))).toBe(true);
+  });
+
+  // jsdom does not implement isContentEditable, so this is tested
+  // via shouldIgnoreKeyboardEvent which has a closest() fallback.
+  test.skip("returns true for contentEditable", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    expect(Events.fromInput(fakeEvent(div))).toBe(true);
+
+    div.remove();
+  });
+
+  test("returns false for plain <div>", () => {
+    const div = document.createElement("div");
+    expect(Events.fromInput(fakeEvent(div))).toBe(false);
+  });
+
+  test("uses composedPath when available (shadow DOM)", () => {
+    const host = document.createElement("div");
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(host, input);
+    expect(Events.fromInput(event)).toBe(true);
+  });
+});
+
+describe("Events.fromCodeMirror", () => {
+  test("returns true when target is inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    expect(Events.fromCodeMirror(line)).toBe(true);
+    editor.remove();
+  });
+
+  test("returns false when target is not inside .cm-editor", () => {
+    const div = document.createElement("div");
+    document.body.append(div);
+    expect(Events.fromCodeMirror(div)).toBe(false);
+    div.remove();
+  });
+});

package/src/utils/events.ts

@@ -37,21 +37,20 @@ export const Events = {
    * Returns true if the event is coming from a text input
    */
   fromInput: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+    const target = Events.composedTarget(e);
     return (
       target.tagName === "INPUT" ||
       target.tagName === "TEXTAREA" ||
       target.tagName.startsWith("MARIMO") ||
       target.isContentEditable ||
-      Events.fromCodeMirror(e)
+      Events.fromCodeMirror(target)
     );
   },
 
   /**
    * Returns true if the event is coming from a code editor.
    */
-  fromCodeMirror: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+  fromCodeMirror: (target: HTMLElement) => {
     return target.closest(".cm-editor") !== null;
   },
 
@@ -60,20 +59,35 @@ export const Events = {
    * form element or code editor.
    */
   shouldIgnoreKeyboardEvent(e: KeyboardEvent) {
-    // Check for common form elements where keyboard shortcuts should be ignored
+    const target = Events.composedTarget(e);
     return (
-      e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement ||
-      (e.target instanceof HTMLElement &&
-        (e.target.isContentEditable ||
-          e.target.tagName === "BUTTON" ||
-          e.target.closest("[role='textbox']") !== null ||
-          e.target.closest("[contenteditable='true']") !== null ||
-          e.target.closest(".cm-editor") !== null)) // Add check for CodeMirror editor
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLSelectElement ||
+      (target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.tagName === "BUTTON" ||
+          target.closest("[role='textbox']") !== null ||
+          target.closest("[contenteditable='true']") !== null ||
+          Events.fromCodeMirror(target)))
     );
   },
 
+  /**
+   * Resolve the real event target, piercing shadow DOM retargeting.
+   * Falls back to e.target for synthetic events (e.g. React Aria)
+   * that don't expose composedPath.
+   *
+   * Without this, e.target is the shadow host (e.g. <marimo-text>) rather than the
+   * real <input> inside it, so instanceof checks fail. (#4230)
+   */
+  composedTarget(e: Pick<Event, "target">): HTMLElement {
+    if ("composedPath" in e && typeof e.composedPath === "function") {
+      return (e.composedPath()[0] ?? e.target) as HTMLElement;
+    }
+    return e.target as HTMLElement;
+  },
+
   hasModifier: (
     e: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey" | "shiftKey">,
   ) => {

package/dist/assets/RenderHTML-0dk6-mYI.js

@@ -1 +0,0 @@
-import{s as v}from"./chunk-LvLJmgfZ.js";import{i as j,p as y,u as w}from"./useEvent-D91BmmQi.js";import{t as R}from"./react-Bj1aDYRI.js";import{bn as S,gn as _,ii as c,it as H,m as I,ri as M,vt as N}from"./cells-EJo3u4za.js";import{t as E}from"./compiler-runtime-B3qBwwSJ.js";import{_ as T}from"./useEventListener-DGjKht0c.js";import{o as z}from"./utils-8btzWeZg.js";import{t as C}from"./jsx-runtime-Blw4afVn.js";import{t as F}from"./tooltip-DmqhBBs6.js";import{t as L}from"./copy-icon-BGs1Pbai.js";import{t as V}from"./usePress-BXMIcLWP.js";import{n as k}from"./useDebounce-LVL1r3-M.js";import{t as q}from"./useRunCells-d2edY6Tu.js";var W=E(),m=v(R(),1),o=v(C(),1);const A=r=>{let t=(0,W.c)(16),e,n,i;t[0]===r?(e=t[1],n=t[2],i=t[3]):({href:n,children:e,...i}=r,t[0]=r,t[1]=e,t[2]=n,t[3]=i);let a=(0,m.useRef)(null),s;t[4]===n?s=t[5]:(s=()=>{let u=new URL(globalThis.location.href);u.hash=n,globalThis.history.pushState({},"",u.toString()),globalThis.dispatchEvent(new HashChangeEvent("hashchange"));let x=n.slice(1),g=document.getElementById(x);g&&g.scrollIntoView({behavior:"smooth",block:"start"})},t[4]=n,t[5]=s);let l=s,f;t[6]===l?f=t[7]:(f={onPress:()=>{l()}},t[6]=l,t[7]=f);let{pressProps:h}=V(f),d;t[8]===l?d=t[9]:(d=u=>{u.preventDefault(),l()},t[8]=l,t[9]=d);let b=d,p;return t[10]!==e||t[11]!==b||t[12]!==n||t[13]!==h||t[14]!==i?(p=(0,o.jsx)("a",{ref:a,href:n,...h,onClick:b,...i,children:e}),t[10]=e,t[11]=b,t[12]=n,t[13]=h,t[14]=i,t[15]=p):p=t[15],p};async function D(r){let t=I().inOrderIds.at(0);if(t)try{let e=await _.request({document:r,cellId:t});if(!e||e.options.length===0)return;let n=r.split(".").pop()??r,i=e.options[0],a=e.options.find(s=>s.name===n)??i;a!=null&&a.completion_info&&j.set(S,{documentation:a.completion_info})}catch(e){T.debug(`Doc lookup failed for "${r}"`,e)}}var O=E();const P=r=>{let t=(0,O.c)(8),{qualifiedName:e,children:n}=r,i;t[0]===e?i=t[1]:(i=()=>{D(e)},t[0]=e,t[1]=i);let a=k(i,100),s;t[2]===a?s=t[3]:(s=()=>a.cancel(),t[2]=a,t[3]=s);let l;return t[4]!==n||t[5]!==a||t[6]!==s?(l=(0,o.jsx)("span",{onMouseEnter:a,onMouseLeave:s,children:n}),t[4]=n,t[5]=a,t[6]=s,t[7]=l):l=t[7],l};var $=y(r=>{let t=r(q),e=r(z);if(t||e)return!1;let n=!0;try{n=H()==="read"}catch{return!0}return!n});function B(){return w($)}var U=E(),Z=r=>{if(r instanceof c.Element&&!/^[A-Za-z][\w-]*$/.test(r.name))return m.createElement(m.Fragment)},G=(r,t)=>{if(t instanceof c.Element&&t.name==="body"){if((0,m.isValidElement)(r)&&"props"in r){let e=r.props.children;return(0,o.jsx)(o.Fragment,{children:e})}return}},J=(r,t)=>{if(t instanceof c.Element&&t.name==="html"){if((0,m.isValidElement)(r)&&"props"in r){let e=r.props.children;return(0,o.jsx)(o.Fragment,{children:e})}return}},K=r=>{if(r instanceof c.Element&&r.attribs&&r.name==="iframe"){let t=document.createElement("iframe");return Object.entries(r.attribs).forEach(([e,n])=>{e.startsWith('"')&&e.endsWith('"')&&(e=e.slice(1,-1)),t.setAttribute(e,n)}),(0,o.jsx)("div",{dangerouslySetInnerHTML:{__html:t.outerHTML}})}},Q=r=>{if(r instanceof c.Element&&r.name==="script"){let t=r.attribs.src;if(!t)return;if(!document.querySelector(`script[src="${t}"]`)){let e=document.createElement("script");e.src=t,document.head.append(e)}return(0,o.jsx)(o.Fragment,{})}},X=(r,t)=>{if(t instanceof c.Element&&t.name==="a"){let e=t.attribs.href;if(e!=null&&e.startsWith("#")&&!e.startsWith("#code/")){let n=null;return(0,m.isValidElement)(r)&&"props"in r&&(n=r.props.children),(0,o.jsx)(A,{href:e,...t.attribs,children:n})}}},Y=(r,t,e)=>{var n,i;if(t instanceof c.Element&&t.name==="div"&&((i=(n=t.attribs)==null?void 0:n.class)!=null&&i.includes("codehilite")))return(0,o.jsx)(rt,{children:r},e)},tt=(r,t)=>{var e;if(t instanceof c.Element&&((e=t.attribs)!=null&&e["data-marimo-doc"])){let n=t.attribs["data-marimo-doc"];return(0,o.jsx)(P,{qualifiedName:n,children:r})}},et=(r,t)=>{var e;if(t instanceof c.Element&&((e=t.attribs)!=null&&e["data-tooltip"])){let n=t.attribs["data-tooltip"];return(0,o.jsx)(F,{content:n,children:r})}},rt=r=>{let t=(0,U.c)(3),{children:e}=r,n=(0,m.useRef)(null),i;t[0]===Symbol.for("react.memo_cache_sentinel")?(i=(0,o.jsx)("div",{className:"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",children:(0,o.jsx)(L,{tooltip:!1,className:"p-1",value:()=>{var l;let s=(l=n.current)==null?void 0:l.firstChild;return s&&s.textContent||""}})}),t[0]=i):i=t[0];let a;return t[1]===e?a=t[2]:(a=(0,o.jsxs)("div",{className:"relative group codehilite-wrapper",ref:n,children:[e,i]}),t[1]=e,t[2]=a),a};const nt=({html:r,additionalReplacements:t=[],alwaysSanitizeHtml:e=!0})=>(0,o.jsx)(it,{html:r,alwaysSanitizeHtml:e,additionalReplacements:t});var it=({html:r,additionalReplacements:t=[],alwaysSanitizeHtml:e})=>{let n=B();return at({html:(0,m.useMemo)(()=>e||n?N(r):r,[r,e,n]),additionalReplacements:t})};function at({html:r,additionalReplacements:t=[]}){let e=[Z,K,Q,...t],n=[Y,X,tt,et,G,J];return M(r,{replace:(i,a)=>{for(let s of e){let l=s(i,a);if(l)return l}return i},transform:(i,a,s)=>{for(let l of n){let f=l(i,a,s);if(f)return f}return i}})}export{nt as t};

package/dist/assets/button-BKVLeSTX.js

@@ -1 +0,0 @@
-import{s as p}from"./chunk-LvLJmgfZ.js";import{t as T}from"./react-Bj1aDYRI.js";import{t as M}from"./compiler-runtime-B3qBwwSJ.js";import{h as N,n as K,t as C}from"./useEventListener-DGjKht0c.js";import{n as I,t as o}from"./cn-DYvqRARy.js";import{t as H}from"./jsx-runtime-Blw4afVn.js";const m={stopPropagation:e=>t=>{t.stopPropagation(),e&&e(t)},onEnter:e=>t=>{t.key==="Enter"&&e&&e(t)},preventFocus:e=>{e.preventDefault()},fromInput:e=>{let t=e.target;return t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.tagName.startsWith("MARIMO")||t.isContentEditable||m.fromCodeMirror(e)},fromCodeMirror:e=>e.target.closest(".cm-editor")!==null,shouldIgnoreKeyboardEvent(e){return e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement||e.target instanceof HTMLElement&&(e.target.isContentEditable||e.target.tagName==="BUTTON"||e.target.closest("[role='textbox']")!==null||e.target.closest("[contenteditable='true']")!==null||e.target.closest(".cm-editor")!==null)},hasModifier:e=>e.ctrlKey||e.metaKey||e.altKey||e.shiftKey,isMetaOrCtrl:e=>e.metaKey||e.ctrlKey};var S=M(),v=p(T(),1),z=p(H(),1),a="active:shadow-none",x=I(o("disabled:opacity-50 disabled:pointer-events-none","inline-flex items-center justify-center rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background"),{variants:{variant:{default:o("bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs border border-primary",a),destructive:o("border shadow-xs","bg-(--red-9) hover:bg-(--red-10) dark:bg-(--red-6) dark:hover:bg-(--red-7)","text-(--red-1) dark:text-(--red-12)","border-(--red-11)",a),success:o("border shadow-xs","bg-(--grass-9) hover:bg-(--grass-10) dark:bg-(--grass-6) dark:hover:bg-(--grass-7)","text-(--grass-1) dark:text-(--grass-12)","border-(--grass-11)",a),warn:o("border shadow-xs","bg-(--yellow-9) hover:bg-(--yellow-10) dark:bg-(--yellow-6) dark:hover:bg-(--yellow-7)","text-(--yellow-12)","border-(--yellow-11)",a),action:o("bg-action text-action-foreground shadow-xs","hover:bg-action-hover border border-action",a),outline:o("border border-slate-300 shadow-xs","hover:bg-accent hover:text-accent-foreground","hover:border-primary","aria-selected:text-accent-foreground aria-selected:border-primary",a),secondary:o("bg-secondary text-secondary-foreground hover:bg-secondary/80","border border-input shadow-xs",a),text:o("opacity-80 hover:opacity-100","active:opacity-100"),ghost:o("border border-transparent","hover:bg-accent hover:text-accent-foreground hover:shadow-xs",a,"active:text-accent-foreground"),link:"underline-offset-4 hover:underline text-link",linkDestructive:"underline-offset-4 hover:underline text-destructive underline-destructive",outlineDestructive:"border border-destructive text-destructive hover:bg-destructive/10"},size:{default:"h-10 py-2 px-4",xs:"h-7 px-2 rounded-md text-xs",sm:"h-9 px-3 rounded-md",lg:"h-11 px-8 rounded-md",icon:"h-6 w-6 mb-0"},disabled:{true:"opacity-50 pointer-events-none"}},defaultVariants:{variant:"default",size:"sm"}}),y=v.forwardRef((e,t)=>{let r=(0,S.c)(7),{className:f,variant:w,size:k,asChild:h,keyboardShortcut:n,...d}=e,E=h===void 0?!1:h,s=v.useRef(null),i;r[0]===Symbol.for("react.memo_cache_sentinel")?(i=()=>s.current,r[0]=i):i=r[0],v.useImperativeHandle(t,i);let l;r[1]===n?l=r[2]:(l=u=>{n&&(m.shouldIgnoreKeyboardEvent(u)||N(n)(u)&&(u.preventDefault(),u.stopPropagation(),s!=null&&s.current&&!s.current.disabled&&s.current.click()))},r[1]=n,r[2]=l),C(document,"keydown",l);let g=E?K:"button",b=o(x({variant:w,size:k,className:f,disabled:d.disabled}),f),c;return r[3]!==g||r[4]!==d||r[5]!==b?(c=(0,z.jsx)(g,{className:b,ref:s,...d}),r[3]=g,r[4]=d,r[5]=b,r[6]=c):c=r[6],c});y.displayName="Button";export{x as n,m as r,y as t};