twenty-ui 2.47.0 → 2.49.0

package/dist/TabsTabContent-DVcObDp6.js

@@ -0,0 +1,39 @@
+import { t } from "./isRenderableSlot-DT_depzM.js";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+var v = "_root_1trvr_1", o = "_list_1trvr_10", i = "_tab_1trvr_37", c = "_content_1trvr_89", d = "_label_1trvr_108", b = "_startIcon_1trvr_114", m = "_badge_1trvr_115", p = "_panel_1trvr_130", h = "_indicator_1trvr_140", a = {
+  root: v,
+  list: o,
+  tab: i,
+  content: c,
+  label: d,
+  startIcon: b,
+  badge: m,
+  panel: p,
+  indicator: h
+}, f = ({ children: n, startIcon: e, endIcon: _, badge: s }) => /* @__PURE__ */ l("span", {
+  className: a.content,
+  children: [
+    t(e) && /* @__PURE__ */ r("span", {
+      className: a.startIcon,
+      "aria-hidden": !0,
+      children: e
+    }),
+    /* @__PURE__ */ r("span", {
+      className: a.label,
+      children: n
+    }),
+    t(_) && /* @__PURE__ */ r("span", {
+      className: a.startIcon,
+      "aria-hidden": !0,
+      children: _
+    }),
+    t(s) && /* @__PURE__ */ r("span", {
+      className: a.badge,
+      children: s
+    })
+  ]
+});
+export {
+  a as n,
+  f as t
+};

package/dist/{TintedIconTile-4BGa8g8n.js → TintedIconTile-B1XDtGrF.js}

@@ -1,5 +1,5 @@
 import { a as n, h as m } from "./theme-B2EaXhye.js";
-import { s as C } from "./utilities-CEi9I09B.js";
+import { s as C } from "./utilities-BKCMZyqZ.js";
 import { useRender as u } from "@base-ui/react/use-render";
 import { clsx as T } from "clsx";
 import { jsx as _ } from "react/jsx-runtime";

package/dist/{TintedIconTile-CU2hCerq.cjs → TintedIconTile-DO1XJXCQ.cjs}

@@ -1 +1 @@
-const n=require("./theme-1XkFz8Qu.cjs"),_=require("./utilities-BeLfNQ0Q.cjs");let C=require("@base-ui/react/use-render"),b=require("clsx"),T=require("react/jsx-runtime");var o={background:4,border:6,icon:10},t=(r,e)=>n.themeCssVariables.color[`${r}${e}`]??n.themeCssVariables.tag.text[r],l=r=>{const e=_.parseThemeColor(r);return{backgroundColor:t(e,o.background),iconColor:t(e,o.icon),borderColor:t(e,o.border)}},g="_root_9ntdy_1",h={root:g},m=({icon:r,color:e=n.DEFAULT_THEME_COLOR_FALLBACK,className:c,style:a,render:u,ref:s,...d})=>{const i=l(e);return(0,C.useRender)({render:u,ref:s,props:{...d,className:(0,b.clsx)(h.root,c),style:{backgroundColor:i.backgroundColor,color:i.iconColor,...a},children:(0,T.jsx)("span",{"aria-hidden":"true",children:r})}})};Object.defineProperty(exports,"TintedIconTile",{enumerable:!0,get:function(){return m}});Object.defineProperty(exports,"getIconTileColorShades",{enumerable:!0,get:function(){return l}});
+const n=require("./theme-1XkFz8Qu.cjs"),_=require("./utilities-xZh8D2gd.cjs");let C=require("@base-ui/react/use-render"),b=require("clsx"),T=require("react/jsx-runtime");var o={background:4,border:6,icon:10},t=(r,e)=>n.themeCssVariables.color[`${r}${e}`]??n.themeCssVariables.tag.text[r],l=r=>{const e=_.parseThemeColor(r);return{backgroundColor:t(e,o.background),iconColor:t(e,o.icon),borderColor:t(e,o.border)}},g="_root_9ntdy_1",h={root:g},m=({icon:r,color:e=n.DEFAULT_THEME_COLOR_FALLBACK,className:c,style:a,render:u,ref:s,...d})=>{const i=l(e);return(0,C.useRender)({render:u,ref:s,props:{...d,className:(0,b.clsx)(h.root,c),style:{backgroundColor:i.backgroundColor,color:i.iconColor,...a},children:(0,T.jsx)("span",{"aria-hidden":"true",children:r})}})};Object.defineProperty(exports,"TintedIconTile",{enumerable:!0,get:function(){return m}});Object.defineProperty(exports,"getIconTileColorShades",{enumerable:!0,get:function(){return l}});

package/dist/Tooltip-Bg9Uk01p.cjs

@@ -0,0 +1 @@
+const re=require("./theme-1XkFz8Qu.cjs"),ie=require("./isDefined-DS2Q42p5.cjs"),T=require("./mergeClassNames-D4lshrT6.cjs"),a=require("./isRenderableSlot-Guryb6Nf.cjs"),oe=require("./useProvidedTextDirection-PVaoQCLH.cjs");let p=require("@sniptt/guards"),e=require("react/jsx-runtime"),t=require("@base-ui/react/tooltip");var te="_positioner_16x57_1",se="_popup_16x57_8",ae="_content_16x57_50",ne="_title_16x57_56",le="_icon_16x57_68",pe="_description_16x57_78",de="_arrow_16x57_84",n={positioner:te,popup:se,content:ae,title:ne,icon:le,description:pe,arrow:de},v=({className:r,...o})=>(0,e.jsx)(t.Tooltip.Arrow,{...o,className:T.mergeClassNames(n.arrow,r)}),j=({children:r,description:o,startIcon:i})=>(0,e.jsxs)("div",{className:n.content,children:[a.isRenderableSlot(r)&&(0,e.jsxs)("div",{className:n.title,children:[a.isRenderableSlot(i)&&(0,e.jsx)("span",{className:n.icon,"aria-hidden":!0,children:i}),(0,e.jsx)("span",{children:r})]}),a.isRenderableSlot(o)&&(0,e.jsx)("div",{className:n.description,children:o})]}),g=({className:r,withExitAnimation:o=!1,maxWidth:i,style:l,...d})=>(0,e.jsx)(t.Tooltip.Popup,{role:"tooltip","data-with-exit-animation":o||void 0,...d,className:T.mergeClassNames(n.popup,r),style:c=>({"--tw-tooltip-max-width":(0,p.isNumber)(i)?`${i}px`:i,...(0,p.isFunction)(l)?l(c):l})}),b=({container:r,...o})=>{const i=re.useThemeContainer();return(0,e.jsx)(t.Tooltip.Portal,{...o,container:r??i??void 0})},h=({className:r,...o})=>{const i=oe.useProvidedTextDirection();return(0,e.jsx)(t.Tooltip.Positioner,{dir:i,...o,className:T.mergeClassNames(n.positioner,r)})},ce=10,ue="300px",_e=({content:r,children:o,description:i,startIcon:l,open:d,defaultOpen:c,onOpenChange:P,onOpenChangeComplete:q,disabled:N=!1,disableHoverablePopup:f,trackCursorAxis:w,actionsRef:R,handle:S,triggerId:D,defaultTriggerId:F,delay:A,closeDelay:H,closeOnClick:O,side:y="top",align:C="center",sideOffset:E=ce,alignOffset:L,anchor:B,positionMethod:U,collisionBoundary:V,collisionPadding:M,collisionAvoidance:X,sticky:$,arrowPadding:k,disableAnchorTracking:z,arrow:G=!1,maxWidth:I=ue,container:J,keepMounted:K,triggerProps:Q,positionerProps:Y,portalProps:Z,...W})=>{const u=a.isRenderableSlot(i),_=N||!(0,p.isFunction)(r)&&!a.isRenderableSlot(r)&&!u,x=(0,e.jsx)(t.Tooltip.Trigger,{render:o,delay:A,closeDelay:H,closeOnClick:O,...Q}),m=s=>{if(!(a.isRenderableSlot(s)||u))return(0,e.jsx)(e.Fragment,{children:x});const ee=(0,p.isString)(s)||(0,p.isNumber)(s)||u||a.isRenderableSlot(l);return(0,e.jsxs)(e.Fragment,{children:[x,(0,e.jsx)(b,{container:J,keepMounted:K,...Z,children:(0,e.jsx)(h,{side:y,align:C,sideOffset:E,alignOffset:L,anchor:B,positionMethod:U,collisionBoundary:V,collisionPadding:M,collisionAvoidance:X,sticky:$,arrowPadding:k,disableAnchorTracking:z,...Y,children:(0,e.jsxs)(g,{maxWidth:I,...W,children:[ee?(0,e.jsx)(j,{description:i,startIcon:l,children:s}):s,G&&(0,e.jsx)(v,{})]})})})]})};return(0,e.jsx)(t.Tooltip.Root,{open:ie.isDefined(d)?d&&!_:void 0,defaultOpen:c&&!_,onOpenChange:P,onOpenChangeComplete:q,disabled:_,disableHoverablePopup:f,trackCursorAxis:w,actionsRef:R,handle:S,triggerId:D,defaultTriggerId:F,children:(0,p.isFunction)(r)?s=>m(r(s)):m(r)})},Te=Object.assign(_e,{Root:t.Tooltip.Root,Trigger:t.Tooltip.Trigger,Portal:b,Positioner:h,Popup:g,Arrow:v,Viewport:t.Tooltip.Viewport,Provider:t.Tooltip.Provider,Handle:t.Tooltip.Handle,createHandle:t.Tooltip.createHandle});Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:function(){return Te}});Object.defineProperty(exports,"TooltipBody",{enumerable:!0,get:function(){return j}});

package/dist/Tooltip-cLCgtFBF.js

@@ -0,0 +1,124 @@
+import { t as er } from "./isDefined-fMi6eQ4r.js";
+import { t as tr } from "./theme-B2EaXhye.js";
+import { t as u } from "./mergeClassNames-ClFMR1v0.js";
+import { t as n } from "./isRenderableSlot-DT_depzM.js";
+import { t as ar } from "./useProvidedTextDirection-Dk8LBQeF.js";
+import { isFunction as v, isNumber as x, isString as nr } from "@sniptt/guards";
+import { Fragment as h, jsx as o, jsxs as d } from "react/jsx-runtime";
+import { Tooltip as t } from "@base-ui/react/tooltip";
+var sr = "_positioner_16x57_1", pr = "_popup_16x57_8", lr = "_content_16x57_50", dr = "_title_16x57_56", cr = "_icon_16x57_68", mr = "_description_16x57_78", _r = "_arrow_16x57_84", s = {
+  positioner: sr,
+  popup: pr,
+  content: lr,
+  title: dr,
+  icon: cr,
+  description: mr,
+  arrow: _r
+}, g = ({ className: r, ...e }) => /* @__PURE__ */ o(t.Arrow, {
+  ...e,
+  className: u(s.arrow, r)
+}), vr = ({ children: r, description: e, startIcon: i }) => /* @__PURE__ */ d("div", {
+  className: s.content,
+  children: [n(r) && /* @__PURE__ */ d("div", {
+    className: s.title,
+    children: [n(i) && /* @__PURE__ */ o("span", {
+      className: s.icon,
+      "aria-hidden": !0,
+      children: i
+    }), /* @__PURE__ */ o("span", { children: r })]
+  }), n(e) && /* @__PURE__ */ o("div", {
+    className: s.description,
+    children: e
+  })]
+}), P = ({ className: r, withExitAnimation: e = !1, maxWidth: i, style: p, ...l }) => /* @__PURE__ */ o(t.Popup, {
+  role: "tooltip",
+  "data-with-exit-animation": e || void 0,
+  ...l,
+  className: u(s.popup, r),
+  style: (c) => ({
+    "--tw-tooltip-max-width": x(i) ? `${i}px` : i,
+    ...v(p) ? p(c) : p
+  })
+}), w = ({ container: r, ...e }) => {
+  const i = tr();
+  return /* @__PURE__ */ o(t.Portal, {
+    ...e,
+    container: r ?? i ?? void 0
+  });
+}, N = ({ className: r, ...e }) => {
+  const i = ar();
+  return /* @__PURE__ */ o(t.Positioner, {
+    dir: i,
+    ...e,
+    className: u(s.positioner, r)
+  });
+}, ur = 10, Tr = "300px", fr = ({ content: r, children: e, description: i, startIcon: p, open: l, defaultOpen: c, onOpenChange: D, onOpenChangeComplete: A, disabled: F = !1, disableHoverablePopup: b, trackCursorAxis: H, actionsRef: E, handle: R, triggerId: S, defaultTriggerId: j, delay: L, closeDelay: O, closeOnClick: U, side: V = "top", align: $ = "center", sideOffset: y = ur, alignOffset: B, anchor: C, positionMethod: M, collisionBoundary: X, collisionPadding: k, collisionAvoidance: q, sticky: z, arrowPadding: G, disableAnchorTracking: I, arrow: J = !1, maxWidth: K = Tr, container: Q, keepMounted: Y, triggerProps: Z, positionerProps: W, portalProps: rr, ...or }) => {
+  const m = n(i), _ = F || !v(r) && !n(r) && !m, T = /* @__PURE__ */ o(t.Trigger, {
+    render: e,
+    delay: L,
+    closeDelay: O,
+    closeOnClick: U,
+    ...Z
+  }), f = (a) => {
+    if (!(n(a) || m)) return /* @__PURE__ */ o(h, { children: T });
+    const ir = nr(a) || x(a) || m || n(p);
+    return /* @__PURE__ */ d(h, { children: [T, /* @__PURE__ */ o(w, {
+      container: Q,
+      keepMounted: Y,
+      ...rr,
+      children: /* @__PURE__ */ o(N, {
+        side: V,
+        align: $,
+        sideOffset: y,
+        alignOffset: B,
+        anchor: C,
+        positionMethod: M,
+        collisionBoundary: X,
+        collisionPadding: k,
+        collisionAvoidance: q,
+        sticky: z,
+        arrowPadding: G,
+        disableAnchorTracking: I,
+        ...W,
+        children: /* @__PURE__ */ d(P, {
+          maxWidth: K,
+          ...or,
+          children: [ir ? /* @__PURE__ */ o(vr, {
+            description: i,
+            startIcon: p,
+            children: a
+          }) : a, J && /* @__PURE__ */ o(g, {})]
+        })
+      })
+    })] });
+  };
+  return /* @__PURE__ */ o(t.Root, {
+    open: er(l) ? l && !_ : void 0,
+    defaultOpen: c && !_,
+    onOpenChange: D,
+    onOpenChangeComplete: A,
+    disabled: _,
+    disableHoverablePopup: b,
+    trackCursorAxis: H,
+    actionsRef: E,
+    handle: R,
+    triggerId: S,
+    defaultTriggerId: j,
+    children: v(r) ? (a) => f(r(a)) : f(r)
+  });
+}, Fr = Object.assign(fr, {
+  Root: t.Root,
+  Trigger: t.Trigger,
+  Portal: w,
+  Positioner: N,
+  Popup: P,
+  Arrow: g,
+  Viewport: t.Viewport,
+  Provider: t.Provider,
+  Handle: t.Handle,
+  createHandle: t.createHandle
+});
+export {
+  vr as n,
+  Fr as t
+};

package/dist/components/__stories__/reading-direction/DirectionalLayoutExample.d.ts

@@ -1,3 +1,5 @@
-export declare const DirectionalLayoutExample: ({ direction, }: {
+import { CSSProperties } from 'react';
+export declare const DirectionalLayoutExample: ({ direction, style, }: {
     direction: "ltr" | "rtl";
+    style?: CSSProperties;
 }) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/CodeEditor.d.ts

@@ -1,2 +1,2 @@
 import { CodeEditorProps } from './types/CodeEditorProps';
-export declare const CodeEditor: ({ value, language, onMount, onChange, setMarkers, onValidate, height, variant, transparentBackground, isLoading, options, resizable, resizeLabel, contentPadding, autoHeight, }: CodeEditorProps) => import("react").JSX.Element;
+export declare const CodeEditor: ({ onMount, beforeMount, setMarkers, height, width, theme: requestedTheme, loading, variant, transparentBackground, isLoading, options, resizable, resizeLabel, contentPadding, autoHeight, containerProps, ref, ...editorProps }: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/ControlledCodeEditor.d.ts

@@ -0,0 +1,2 @@
+import { CodeEditorProps } from '../types/CodeEditorProps';
+export declare const ControlledCodeEditor: (props: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/ModelCodeEditor.d.ts

@@ -0,0 +1,2 @@
+import { CodeEditorProps } from '../types/CodeEditorProps';
+export declare const ModelCodeEditor: (props: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/ResizableCodeEditor.d.ts

@@ -0,0 +1,2 @@
+import { CodeEditorProps } from '../types/CodeEditorProps';
+export declare const ResizableCodeEditor: (props: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/ThemedCodeEditor.d.ts

@@ -0,0 +1,2 @@
+import { CodeEditorProps } from '../types/CodeEditorProps';
+export declare const ThemedCodeEditor: (props: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/UnmountingCodeEditor.d.ts

@@ -0,0 +1,2 @@
+import { CodeEditorProps } from '../types/CodeEditorProps';
+export declare const UnmountingCodeEditor: (props: CodeEditorProps) => import("react").JSX.Element;

package/dist/components/code-editor/CodeEditor/__stories__/waitForCodeEditorContent.d.ts

@@ -1 +1,4 @@
-export declare const waitForCodeEditorContent: (canvasElement: HTMLElement, expectedContent: string) => Promise<void>;
+export declare const waitForCodeEditorContent: ({ canvasElement, expectedContent, }: {
+    canvasElement: HTMLElement;
+    expectedContent: string;
+}) => Promise<void>;

package/dist/components/code-editor/CodeEditor/internal/CodeEditorAutoHeightEffect.d.ts

@@ -0,0 +1,9 @@
+import { editor } from 'monaco-editor';
+import { Dispatch, SetStateAction } from 'react';
+type CodeEditorAutoHeightEffectProps = {
+    shouldAutoHeight: boolean;
+    editor: editor.IStandaloneCodeEditor | undefined;
+    setContentHeight: Dispatch<SetStateAction<number | undefined>>;
+};
+export declare const CodeEditorAutoHeightEffect: ({ shouldAutoHeight, editor, setContentHeight, }: CodeEditorAutoHeightEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/CodeEditorLifecycleEffect.d.ts

@@ -0,0 +1,11 @@
+import { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { Dispatch, SetStateAction } from 'react';
+type CodeEditorLifecycleEffectProps = {
+    editor: editor.IStandaloneCodeEditor | undefined;
+    setEditor: Dispatch<SetStateAction<editor.IStandaloneCodeEditor | undefined>>;
+    setMonaco: Dispatch<SetStateAction<Monaco | undefined>>;
+    setIsEditorFocused: Dispatch<SetStateAction<boolean>>;
+};
+export declare const CodeEditorLifecycleEffect: ({ editor, setEditor, setMonaco, setIsEditorFocused, }: CodeEditorLifecycleEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/CodeEditorLoaderConfigurationEffect.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+type CodeEditorLoaderConfigurationEffectProps = {
+    configureMonacoLoader: () => Promise<void>;
+    setIsMonacoLoaderConfigured: Dispatch<SetStateAction<boolean>>;
+};
+export declare const CodeEditorLoaderConfigurationEffect: ({ configureMonacoLoader, setIsMonacoLoaderConfigured, }: CodeEditorLoaderConfigurationEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/CodeEditorMarkersEffect.d.ts

@@ -0,0 +1,10 @@
+import { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { CodeEditorProps } from '../types/CodeEditorProps';
+type CodeEditorMarkersEffectProps = {
+    editor: editor.IStandaloneCodeEditor | undefined;
+    monaco: Monaco | undefined;
+    setMarkers: CodeEditorProps['setMarkers'];
+};
+export declare const CodeEditorMarkersEffect: ({ editor, monaco, setMarkers, }: CodeEditorMarkersEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/CodeEditorResizableHeightEffect.d.ts

@@ -0,0 +1,11 @@
+import { editor } from 'monaco-editor';
+import { Dispatch, SetStateAction } from 'react';
+import { ResizedCodeEditorHeight } from './types/ResizedCodeEditorHeight';
+type CodeEditorResizableHeightEffectProps = {
+    height: number | string;
+    resizable: boolean;
+    editor: editor.IStandaloneCodeEditor | undefined;
+    setResizedHeight: Dispatch<SetStateAction<ResizedCodeEditorHeight | undefined>>;
+};
+export declare const CodeEditorResizableHeightEffect: ({ height, resizable, editor, setResizedHeight, }: CodeEditorResizableHeightEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/CodeEditorThemeEffect.d.ts

@@ -0,0 +1,10 @@
+import { Monaco } from '@monaco-editor/react';
+import { ThemeType } from '../../../../theme';
+type CodeEditorThemeEffectProps = {
+    monaco: Monaco | undefined;
+    theme: ThemeType;
+    colorScheme: 'light' | 'dark';
+    editorTheme: string;
+};
+export declare const CodeEditorThemeEffect: ({ monaco, theme, colorScheme, editorTheme, }: CodeEditorThemeEffectProps) => null;
+export {};

package/dist/components/code-editor/CodeEditor/internal/constants/CodeEditorDefaultHeight.d.ts

@@ -0,0 +1 @@
+export declare const CODE_EDITOR_DEFAULT_HEIGHT = 450;

package/dist/components/code-editor/CodeEditor/internal/types/ResizedCodeEditorHeight.d.ts

@@ -0,0 +1,4 @@
+export type ResizedCodeEditorHeight = {
+    sourceHeight: number | string;
+    value: number;
+};

package/dist/components/code-editor/CodeEditor/internal/useCodeEditorHeight.d.ts

@@ -0,0 +1,13 @@
+import { ResizedCodeEditorHeight } from './types/ResizedCodeEditorHeight';
+export declare const useCodeEditorHeight: ({ height, resizable, autoHeight, }: {
+    height: number | string;
+    resizable: boolean;
+    autoHeight: boolean;
+}) => {
+    currentHeight: string | number;
+    resizableHeight: number;
+    setResizableHeight: (value: number) => void;
+    setResizedHeight: import('react').Dispatch<import('react').SetStateAction<ResizedCodeEditorHeight | undefined>>;
+    setContentHeight: import('react').Dispatch<import('react').SetStateAction<number | undefined>>;
+    shouldAutoHeight: boolean;
+};

package/dist/components/code-editor/CodeEditor/internal/utils/defineCodeEditorDefaultTheme.d.ts

@@ -0,0 +1,7 @@
+import { Monaco } from '@monaco-editor/react';
+import { ThemeType } from '../../../../../theme';
+export declare const defineCodeEditorDefaultTheme: ({ monaco, theme, colorScheme, }: {
+    monaco: Monaco;
+    theme: ThemeType;
+    colorScheme: "light" | "dark";
+}) => void;

package/dist/components/code-editor/CodeEditor/internal/utils/getBaseCodeEditorTheme.d.ts

@@ -1,3 +1,6 @@
 import { ThemeType } from '../../../../../theme';
 import { editor } from 'monaco-editor';
-export declare const getBaseCodeEditorTheme: (theme: ThemeType, colorScheme: "light" | "dark") => editor.IStandaloneThemeData;
+export declare const getBaseCodeEditorTheme: ({ theme, colorScheme, }: {
+    theme: ThemeType;
+    colorScheme: "light" | "dark";
+}) => editor.IStandaloneThemeData;

package/dist/components/code-editor/CodeEditor/internal/utils/getBoundedCodeEditorHeight.d.ts

@@ -0,0 +1 @@
+export declare const getBoundedCodeEditorHeight: (height: number) => number;

package/dist/components/code-editor/CodeEditor/internal/utils/getCurrentCodeEditorHeight.d.ts

@@ -0,0 +1,7 @@
+export declare const getCurrentCodeEditorHeight: ({ height, resizableHeight, contentHeight, shouldUseResizableHeight, shouldAutoHeight, }: {
+    height: number | string;
+    resizableHeight: number;
+    contentHeight: number | undefined;
+    shouldUseResizableHeight: boolean;
+    shouldAutoHeight: boolean;
+}) => string | number;

package/dist/components/code-editor/CodeEditor/internal/utils/getResizableCodeEditorHeight.d.ts

@@ -0,0 +1,5 @@
+import { ResizedCodeEditorHeight } from '../types/ResizedCodeEditorHeight';
+export declare const getResizableCodeEditorHeight: ({ height, resizedHeight, }: {
+    height: number | string;
+    resizedHeight: ResizedCodeEditorHeight | undefined;
+}) => number;

package/dist/components/code-editor/CodeEditor/types/CodeEditorProps.d.ts

@@ -1,9 +1,11 @@
 import { EditorProps } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
+import { ComponentPropsWithoutRef, Ref } from 'react';
 type CodeEditorVariant = 'default' | 'with-header' | 'borderless';
 type CodeEditorContentPadding = 'default' | 'comfortable';
-export type CodeEditorProps = Pick<EditorProps, 'value' | 'language' | 'onMount' | 'onValidate' | 'height' | 'options'> & {
-    onChange?: (value: string) => void;
+export type CodeEditorProps = EditorProps & {
+    containerProps?: Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+    ref?: Ref<HTMLDivElement>;
     setMarkers?: (value: string) => editor.IMarkerData[];
     variant?: CodeEditorVariant;
     isLoading?: boolean;

package/dist/components/code-editor.cjs

@@ -1 +1 @@
-var Z=Object.create;var B=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var ne=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of oe(t))!te.call(e,i)&&i!==n&&B(e,i,{get:()=>t[i],enumerable:!(l=ee(t,i))||l.enumerable});return e};var ie=(e,t,n)=>(n=e!=null?Z(re(e)):{},ne(t||!e||!e.__esModule?B(n,"default",{value:e,enumerable:!0}):n,e));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("../theme-1XkFz8Qu.cjs"),s=require("../isDefined-DS2Q42p5.cjs"),de=require("../Loader-Bb72CUQ9.cjs"),ae=require("../ResizeHandle-CNlQ4TEE.cjs");let se=require("@base-ui/react/use-render"),le=require("clsx"),a=require("react"),d=require("react/jsx-runtime"),C=require("@monaco-editor/react");C=D.__toESM(C,1);var z="baseCodeEditorTheme",o=e=>{if(e.trim()==="transparent")return"#00000000";const t=e.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);if(s.isDefined(t)){const[,n,l,i,f]=t;if(!s.isDefined(n)||!s.isDefined(l)||!s.isDefined(i))return e;const u=Math.round(parseFloat(n)*255).toString(16).padStart(2,"0"),k=Math.round(parseFloat(l)*255).toString(16).padStart(2,"0"),v=Math.round(parseFloat(i)*255).toString(16).padStart(2,"0");return s.isDefined(f)?`#${u}${k}${v}${Math.round(parseFloat(f)*255).toString(16).padStart(2,"0")}`:`#${u}${k}${v}`}return e},ue=(e,t)=>({base:t==="dark"?"vs-dark":"vs",inherit:!0,rules:[{token:"",foreground:o(e.font.color.secondary)},{token:"keyword",foreground:o(e.color.pink11)},{token:"keyword.control",foreground:o(e.color.pink11)},{token:"keyword.json",foreground:o(e.color.orange11)},{token:"number",foreground:o(e.color.orange11)},{token:"number.json",foreground:o(e.color.orange11)},{token:"regexp",foreground:o(e.color.orange11)},{token:"type",foreground:o(e.color.green11)},{token:"attribute.name",foreground:o(e.color.blue11)},{token:"tag",foreground:o(e.color.pink11)},{token:"string",foreground:o(e.color.green11)},{token:"string.key.json",foreground:o(e.color.blue11)},{token:"delimiter",foreground:o(e.font.color.light)},{token:"delimiter.bracket.json",foreground:o(e.font.color.light)},{token:"string.value.json",foreground:o(e.color.green11)},{token:"comment",foreground:o(e.font.color.light),fontStyle:"italic"}],colors:{"editor.background":o("transparent"),"editor.foreground":o(e.font.color.secondary),"editorCursor.foreground":o(e.font.color.primary),"editorLineNumber.foreground":o(e.font.color.extraLight),"editorLineNumber.activeForeground":o(e.font.color.light),"editor.lineHighlightBackground":o(e.background.tertiary),"editor.selectionBackground":o(e.background.transparent.blue),"editor.inactiveSelectionBackground":o(e.background.transparent.light),"editorIndentGuide.background1":o(e.border.color.light),"editorIndentGuide.activeBackground1":o(e.border.color.medium),"editorBracketMatch.background":o(e.background.transparent.light),"editorBracketMatch.border":o(e.border.color.medium)}}),ce="_editorWrapper_zilk9_24",ge="_editorLoader_zilk9_1",fe="_container_zilk9_20",S={editorWrapper:ce,editorLoader:ge,container:fe},N,pe=()=>(N??=import("monaco-editor").then(e=>{C.loader.config({monaco:e})}),N),I=(e,t,n)=>{e.editor.defineTheme(z,ue(t,n)),e.editor.setTheme(z)},ke=({value:e,language:t,onMount:n,onChange:l,setMarkers:i,onValidate:f,height:u=450,variant:k="default",transparentBackground:v,isLoading:O=!1,options:P,resizable:M=!1,resizeLabel:$="Resize editor",contentPadding:R="default",autoHeight:w=!1})=>{const p=D.useTheme(),y=D.useThemeColorScheme(),[h,W]=(0,a.useState)(void 0),[_,A]=(0,a.useState)(void 0),[V,j]=(0,a.useState)(!1),[G,K]=(0,a.useState)(!1),[J,q]=(0,a.useState)(void 0),[L,Q]=(0,a.useState)(typeof u=="number"?u:450),T=(0,a.useId)(),E=w&&!M,H=typeof p.spacingMultiplicator=="number"?p.spacingMultiplicator*4:void 0,m=E?J??u:M?L:u,U={...R==="comfortable"?{lineDecorationsWidth:H}:{},padding:{bottom:H,top:H}},{padding:he,...X}=P??{},F=(r,c)=>{const g=r?.getModel();if(!s.isDefined(g))return;const b=i?.(g.getValue());s.isDefined(b)&&c?.editor.setModelMarkers(g,"customMarker",b)},Y=r=>{V&&r.stopPropagation()};return(0,a.useEffect)(()=>{let r=!0;return pe().then(()=>{r&&K(!0)}),()=>{r=!1}},[]),(0,a.useEffect)(()=>{s.isDefined(h)&&I(h,p,y)},[y,h,p]),(0,a.useEffect)(()=>{if(!E||!s.isDefined(_)){q(void 0);return}const r=()=>{const g=_.getContentHeight();!Number.isFinite(g)||g<=0||q(b=>b===g?b:g)};r();const c=_.onDidContentSizeChange(r);return()=>{c.dispose()}},[_,E]),O||!G?(0,d.jsx)("div",{className:S.editorLoader,"data-variant":k,style:{"--code-editor-height":typeof m=="number"?`${m}px`:m},children:(0,d.jsx)(de.Loader,{})}):(0,d.jsxs)("div",{className:S.container,onKeyDown:Y,children:[(0,d.jsx)("input",{type:"hidden","data-testid":"code-editor-value",value:e??"",readOnly:!0}),(0,d.jsx)("div",{id:T,className:S.editorWrapper,"data-variant":k,"data-transparent-background":v||void 0,children:(0,d.jsx)(C.default,{height:m,value:e,language:t,loading:"",onMount:(r,c)=>{W(c),A(r),I(c,p,y),r.onDidFocusEditorWidget(()=>{j(!0)}),r.onDidBlurEditorWidget(()=>{j(!1)}),n?.(r,c),F(r,c)},onChange:r=>{s.isDefined(r)&&(l?.(r),F(_,h))},onValidate:r=>{f?.(r)},options:{formatOnPaste:!0,formatOnType:!0,fontFamily:p.code.font.family,bracketPairColorization:{enabled:!1},overviewRulerLanes:0,scrollBeyondLastLine:!1,scrollbar:{vertical:"hidden",horizontal:"hidden"},minimap:{enabled:!1},...X,...U}})}),M&&(0,d.jsx)(ae.ResizeHandle,{"aria-label":$,"aria-controls":T,value:L,onValueChange:Q})]})},_e="_editorHeader_19qlo_1",be="_elementContainer_19qlo_15",x={editorHeader:_e,elementContainer:be},ve=({title:e,startElement:t,endElement:n,className:l,render:i,ref:f,...u})=>(0,se.useRender)({render:i,ref:f,props:{...u,className:(0,le.clsx)(x.editorHeader,l),children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:x.elementContainer,children:[t,e]}),(0,d.jsx)("div",{className:x.elementContainer,children:n})]})}});exports.CodeEditor=ke;exports.CodeEditorHeader=ve;
+var re=Object.create;var z=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var ae=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of te(r))!ie.call(e,n)&&n!==o&&z(e,n,{get:()=>r[n],enumerable:!(t=oe(r,n))||t.enumerable});return e};var de=(e,r,o)=>(o=e!=null?re(ne(e)):{},ae(r||!e||!e.__esModule?z(o,"default",{value:e,enumerable:!0}):o,e));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("../theme-1XkFz8Qu.cjs"),s=require("../isDefined-DS2Q42p5.cjs"),se=require("../doNotTranslate-CHE7WmRS.cjs"),ue=require("../Loader-Bb72CUQ9.cjs"),j=require("../ResizeHandle-B1MuHTNA.cjs");let le=require("@base-ui/react/use-render"),C=require("@sniptt/guards"),F=require("clsx"),u=require("react"),d=require("react/jsx-runtime"),ce=require("@base-ui/utils/clamp"),h=require("@monaco-editor/react");h=M.__toESM(h,1);var fe="baseCodeEditorTheme",ge=({shouldAutoHeight:e,editor:r,setContentHeight:o})=>((0,u.useEffect)(()=>{if(!e||!s.isDefined(r)){o(void 0);return}const t=()=>{const a=r.getContentHeight();!Number.isFinite(a)||a<=0||o(a)};t();const n=r.onDidContentSizeChange(t);return()=>n.dispose()},[r,e,o]),null),pe=({editor:e,setEditor:r,setMonaco:o,setIsEditorFocused:t})=>((0,u.useEffect)(()=>{if(!s.isDefined(e)){t(!1);return}t(e.hasWidgetFocus());const n=[e.onDidFocusEditorWidget(()=>t(!0)),e.onDidBlurEditorWidget(()=>t(!1)),e.onDidDispose(()=>{r(void 0),o(void 0)})];return()=>{for(const a of n)a.dispose()}},[e,r,o,t]),null),_e=({configureMonacoLoader:e,setIsMonacoLoaderConfigured:r})=>((0,u.useEffect)(()=>{let o=!0;return e().then(()=>{o&&r(!0)}),()=>{o=!1}},[e,r]),null),be=({editor:e,monaco:r,setMarkers:o})=>((0,u.useEffect)(()=>{if(!s.isDefined(e)||!s.isDefined(r)||!s.isDefined(o))return;const t=()=>{const a=e.getModel();s.isDefined(a)&&r.editor.setModelMarkers(a,"customMarker",o(a.getValue()))};t();const n=[e.onDidChangeModel(t),e.onDidChangeModelContent(t)];return()=>{for(const a of n)a.dispose()}},[e,r,o]),null),$=e=>(0,ce.clamp)(e,j.RESIZE_HANDLE_DEFAULTS.min,j.RESIZE_HANDLE_DEFAULTS.max),ve=({height:e,resizable:r,editor:o,setResizedHeight:t})=>((0,u.useEffect)(()=>{if(!r||!s.isDefined(o))return;const n=o.getContainerDomNode().parentElement?.getBoundingClientRect().height;!s.isDefined(n)||n<=0||t({sourceHeight:e,value:$(n)})},[o,e,r,t]),null),i=e=>{if(e.trim()==="transparent")return"#00000000";const r=e.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);if(s.isDefined(r)){const[,o,t,n,a]=r;if(!s.isDefined(o)||!s.isDefined(t)||!s.isDefined(n))return e;const l=Math.round(parseFloat(o)*255).toString(16).padStart(2,"0"),c=Math.round(parseFloat(t)*255).toString(16).padStart(2,"0"),g=Math.round(parseFloat(n)*255).toString(16).padStart(2,"0");return s.isDefined(a)?`#${l}${c}${g}${Math.round(parseFloat(a)*255).toString(16).padStart(2,"0")}`:`#${l}${c}${g}`}return e},Ee=({theme:e,colorScheme:r})=>({base:r==="dark"?"vs-dark":"vs",inherit:!0,rules:[{token:"",foreground:i(e.font.color.secondary)},{token:"keyword",foreground:i(e.color.pink11)},{token:"keyword.control",foreground:i(e.color.pink11)},{token:"keyword.json",foreground:i(e.color.orange11)},{token:"number",foreground:i(e.color.orange11)},{token:"number.json",foreground:i(e.color.orange11)},{token:"regexp",foreground:i(e.color.orange11)},{token:"type",foreground:i(e.color.green11)},{token:"attribute.name",foreground:i(e.color.blue11)},{token:"tag",foreground:i(e.color.pink11)},{token:"string",foreground:i(e.color.green11)},{token:"string.key.json",foreground:i(e.color.blue11)},{token:"delimiter",foreground:i(e.font.color.light)},{token:"delimiter.bracket.json",foreground:i(e.font.color.light)},{token:"string.value.json",foreground:i(e.color.green11)},{token:"comment",foreground:i(e.font.color.light),fontStyle:"italic"}],colors:{"editor.background":i("transparent"),"editor.foreground":i(e.font.color.secondary),"editorCursor.foreground":i(e.font.color.primary),"editorLineNumber.foreground":i(e.font.color.extraLight),"editorLineNumber.activeForeground":i(e.font.color.light),"editor.lineHighlightBackground":i(e.background.tertiary),"editor.selectionBackground":i(e.background.transparent.blue),"editor.inactiveSelectionBackground":i(e.background.transparent.light),"editorIndentGuide.background1":i(e.border.color.light),"editorIndentGuide.activeBackground1":i(e.border.color.medium),"editorBracketMatch.background":i(e.background.transparent.light),"editorBracketMatch.border":i(e.border.color.medium)}}),A=({monaco:e,theme:r,colorScheme:o})=>{e.editor.defineTheme(fe,Ee({theme:r,colorScheme:o}))},ke=({monaco:e,theme:r,colorScheme:o,editorTheme:t})=>((0,u.useEffect)(()=>{s.isDefined(e)&&(A({monaco:e,theme:r,colorScheme:o}),e.editor.setTheme(t))},[o,t,e,r]),null),Ce=({height:e,resizableHeight:r,contentHeight:o,shouldUseResizableHeight:t,shouldAutoHeight:n})=>t?r:n?o??e:e,he=({height:e,resizedHeight:r})=>r?.sourceHeight===e?r.value:(0,C.isNumber)(e)?$(e):450,He=({height:e,resizable:r,autoHeight:o})=>{const[t,n]=(0,u.useState)(),[a,l]=(0,u.useState)(),c=o&&!r,g=t?.sourceHeight===e,E=r&&(g||(0,C.isNumber)(e)),p=he({height:e,resizedHeight:t});return{currentHeight:Ce({height:e,resizableHeight:p,contentHeight:a,shouldUseResizableHeight:E,shouldAutoHeight:c}),resizableHeight:p,setResizableHeight:_=>{n({sourceHeight:e,value:_})},setResizedHeight:n,setContentHeight:l,shouldAutoHeight:c}},me="_editorWrapper_zilk9_24",De="_editorLoader_zilk9_1",xe="_container_zilk9_20",x={editorWrapper:me,editorLoader:De,container:xe},B,Se=()=>(B??=import("monaco-editor").then(e=>{h.loader.config({monaco:e})}),B),Me=({onMount:e,beforeMount:r,setMarkers:o,height:t=450,width:n="100%",theme:a,loading:l=(0,d.jsx)(ue.Loader,{}),variant:c="default",transparentBackground:g,isLoading:E=!1,options:p,resizable:_=!1,resizeLabel:W=se.doNotTranslate("Resize editor"),contentPadding:w="default",autoHeight:I=!1,containerProps:H,ref:O,...P})=>{const b=M.useTheme(),y=M.useThemeColorScheme(),[q,N]=(0,u.useState)(),[v,L]=(0,u.useState)(),[K,U]=(0,u.useState)(!1),[G,V]=(0,u.useState)(!1),T=(0,u.useId)(),m=a??p?.theme??"baseCodeEditorTheme",{currentHeight:k,resizableHeight:Z,setResizableHeight:J,setResizedHeight:Q,setContentHeight:X,shouldAutoHeight:Y}=He({height:t,resizable:_,autoHeight:I}),D=(0,C.isNumber)(b.spacingMultiplicator)?b.spacingMultiplicator*4:void 0,ee=f=>{H?.onKeyDown?.(f),G&&f.stopPropagation()};return(0,d.jsxs)("div",{role:"group",...H,ref:O,className:(0,F.clsx)(x.container,H?.className),onKeyDown:ee,children:[(0,d.jsx)(_e,{configureMonacoLoader:Se,setIsMonacoLoaderConfigured:U}),(0,d.jsx)(ve,{height:t,resizable:_,editor:v,setResizedHeight:Q}),(0,d.jsx)(ge,{shouldAutoHeight:Y,editor:v,setContentHeight:X}),(0,d.jsx)(pe,{editor:v,setEditor:L,setMonaco:N,setIsEditorFocused:V}),(0,d.jsx)(be,{editor:v,monaco:q,setMarkers:o}),(0,d.jsx)(ke,{monaco:q,theme:b,colorScheme:y,editorTheme:m}),E||!K?(0,d.jsx)("div",{className:x.editorLoader,"data-variant":c,style:{width:n,"--code-editor-height":(0,C.isNumber)(k)?`${k}px`:k},children:l}):(0,d.jsx)("div",{id:T,className:x.editorWrapper,"data-variant":c,"data-transparent-background":g||void 0,children:(0,d.jsx)(h.default,{...P,height:k,width:n,theme:m,loading:l,beforeMount:f=>{A({monaco:f,theme:b,colorScheme:y}),r?.(f)},onMount:(f,R)=>{N(R),L(f),e?.(f,R)},options:{formatOnPaste:!0,formatOnType:!0,fontFamily:b.code.font.family,bracketPairColorization:{enabled:!1},overviewRulerLanes:0,scrollBeyondLastLine:!1,scrollbar:{vertical:"hidden",horizontal:"hidden"},minimap:{enabled:!1},...w==="comfortable"?{lineDecorationsWidth:D}:{},padding:{bottom:D,top:D},...p,theme:m}})}),_&&!E&&s.isDefined(v)&&(0,d.jsx)(j.ResizeHandle,{"aria-label":W,"aria-controls":T,value:Z,onValueChange:J})]})},je="_editorHeader_19qlo_1",ye="_elementContainer_19qlo_15",S={editorHeader:je,elementContainer:ye},qe=({title:e,startElement:r,endElement:o,className:t,render:n,ref:a,...l})=>(0,le.useRender)({render:n,ref:a,props:{...l,className:(0,F.clsx)(S.editorHeader,t),children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:S.elementContainer,children:[r,e]}),(0,d.jsx)("div",{className:S.elementContainer,children:o})]})}});exports.CodeEditor=Me;exports.CodeEditorHeader=qe;