@definable/ui 0.1.0 → 0.1.8

package/dist/components/mention.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { SuggestionDataItem } from 'react-mentions';
+export interface MentionUserData extends SuggestionDataItem {
+    avatar?: string;
+    subtitle?: string;
+}
+export interface MentionProps {
+    value: string;
+    onChange: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    placeholder?: string;
+    data: MentionUserData[];
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    suggestionItemClassName?: string;
+    trigger?: string;
+    displayTransform?: (id: string, display: string) => string;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+declare const MentionComponent: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLDivElement>>;
+export { MentionComponent as Mention };

package/dist/components/mention.esm.js

@@ -0,0 +1,154 @@
+import { j as o } from "../jsx-runtime-DGlMoOmv.js";
+import x, { forwardRef as f } from "react";
+import { MentionsInput as b, Mention as v } from "react-mentions";
+import { c as n } from "../utils-qaFjX9_3.js";
+const y = (e, t, i, a, r) => /* @__PURE__ */ o.jsxs(
+  "div",
+  {
+    className: n(
+      "flex items-center gap-2 p-2 text-sm",
+      r ? "bg-primary/10 text-primary" : "bg-transparent"
+    ),
+    children: [
+      e.avatar && /* @__PURE__ */ o.jsx("div", { className: "flex-shrink-0 h-6 w-6 rounded-full overflow-hidden", children: /* @__PURE__ */ o.jsx(
+        "img",
+        {
+          src: e.avatar,
+          alt: e.display,
+          className: "h-full w-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ o.jsx("span", { className: "font-medium", children: e.display }),
+        e.subtitle && /* @__PURE__ */ o.jsx("span", { className: "text-xs text-muted-foreground", children: e.subtitle })
+      ] })
+    ]
+  }
+), w = (e, t) => `@${t}`, _ = f(
+  ({
+    value: e,
+    onChange: t,
+    placeholder: i = "Type @ to mention someone",
+    data: a,
+    disabled: r = !1,
+    className: s,
+    inputClassName: d,
+    suggestionItemClassName: l,
+    trigger: m = "@",
+    displayTransform: p = w,
+    onKeyDown: u
+  }, c) => {
+    const g = {
+      control: {
+        fontSize: 14,
+        fontWeight: "normal",
+        lineHeight: "1.5",
+        minHeight: "60px"
+      },
+      highlighter: {
+        border: "0",
+        boxSizing: "border-box",
+        overflow: "hidden",
+        minHeight: "60px"
+      },
+      input: {
+        padding: "12px 12px",
+        border: "0",
+        overflow: "auto",
+        fontSize: "14px",
+        outline: "none",
+        backgroundColor: "transparent",
+        fontFamily: "inherit",
+        lineHeight: "1.5",
+        minHeight: "60px",
+        margin: 0
+      },
+      suggestions: {
+        marginTop: "0px",
+        list: {
+          backgroundColor: "var(--suggestion-background, hsl(var(--background)))",
+          border: "1px solid hsl(var(--border))",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+          overflow: "hidden",
+          zIndex: 100,
+          maxHeight: "250px",
+          overflowY: "auto",
+          color: "hsl(var(--foreground))",
+          minWidth: "280px",
+          width: "auto"
+        },
+        item: {
+          padding: "0",
+          borderBottom: "1px solid hsl(var(--border))"
+        }
+      }
+    }, h = {
+      mentions: {
+        normal: {
+          color: "inherit",
+          fontWeight: "normal"
+        },
+        highlight: {
+          color: "hsl(var(--primary))",
+          fontWeight: "500",
+          backgroundColor: "transparent",
+          padding: "0",
+          margin: "0",
+          boxShadow: "none",
+          borderRadius: "0",
+          textDecoration: "none"
+        }
+      }
+    };
+    return x.useEffect(() => {
+      typeof window < "u" && document.documentElement.style.setProperty(
+        "--suggestion-background",
+        "hsl(var(--background))"
+      );
+    }, []), /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: c,
+        className: n("relative w-full", s),
+        children: /* @__PURE__ */ o.jsx(
+          b,
+          {
+            value: e,
+            onChange: t,
+            style: { ...g, ...h },
+            placeholder: i,
+            disabled: r,
+            a11ySuggestionsListLabel: "Suggested mentions",
+            className: n(
+              "w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground resize-none font-normal",
+              d
+            ),
+            suggestionsPortalHost: typeof document < "u" ? document.body : void 0,
+            allowSuggestionsAboveCursor: !0,
+            onKeyDown: u,
+            children: /* @__PURE__ */ o.jsx(
+              v,
+              {
+                trigger: m,
+                data: a,
+                renderSuggestion: y,
+                displayTransform: p,
+                appendSpaceOnAdd: !0,
+                className: n(
+                  "text-primary font-medium",
+                  l
+                ),
+                markup: "@[__display__](__id__)"
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+_.displayName = "Mention";
+export {
+  _ as Mention
+};
+//# sourceMappingURL=mention.esm.js.map

package/dist/components/mention.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention.esm.js","sources":["../../src/components/mention.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { MentionsInput, MentionsInputStyle, Mention as ReactMention, SuggestionDataItem } from \"react-mentions\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MentionUserData extends SuggestionDataItem {\n  avatar?: string;\n  subtitle?: string;\n}\n\nexport interface MentionProps {\n  value: string;\n  onChange: (event: { target: { value: string } }) => void;\n  placeholder?: string;\n  data: MentionUserData[];\n  disabled?: boolean;\n  className?: string;\n  inputClassName?: string;\n  suggestionItemClassName?: string;\n  trigger?: string;\n  displayTransform?: (id: string, display: string) => string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst defaultRenderSuggestion = (\n  suggestion: MentionUserData,\n  _search: string,\n  _highlightedDisplay: React.ReactNode,\n  _index: number,\n  focused: boolean\n) => (\n  <div\n    className={cn(\n      \"flex items-center gap-2 p-2 text-sm\",\n      focused ? \"bg-primary/10 text-primary\" : \"bg-transparent\"\n    )}\n  >\n    {suggestion.avatar && (\n      <div className=\"flex-shrink-0 h-6 w-6 rounded-full overflow-hidden\">\n        <img\n          src={suggestion.avatar}\n          alt={suggestion.display}\n          className=\"h-full w-full object-cover\"\n        />\n      </div>\n    )}\n    <div className=\"flex flex-col\">\n      <span className=\"font-medium\">{suggestion.display}</span>\n      {suggestion.subtitle && (\n        <span className=\"text-xs text-muted-foreground\">{suggestion.subtitle}</span>\n      )}\n    </div>\n  </div>\n);\n\nconst defaultDisplayTransform = (_id: string, display: string) => `@${display}`;\n\nconst MentionComponent = forwardRef<HTMLDivElement, MentionProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type @ to mention someone\",\n      data,\n      disabled = false,\n      className,\n      inputClassName,\n      suggestionItemClassName,\n      trigger = \"@\",\n      displayTransform = defaultDisplayTransform,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    // Custom styles to match your UI\n    const mentionInputStyle: MentionsInputStyle = {\n      control: {\n        fontSize: 14,\n        fontWeight: 'normal',\n        lineHeight: '1.5',\n        minHeight: '60px',\n      },\n      highlighter: {\n        border: '0',\n        boxSizing: 'border-box',\n        overflow: 'hidden',\n        minHeight: '60px',\n      },\n      input: {\n        padding: '12px 12px',\n        border: '0',\n        overflow: 'auto',\n        fontSize: '14px',\n        outline: 'none',\n        backgroundColor: 'transparent',\n        fontFamily: 'inherit',\n        lineHeight: '1.5',\n        minHeight: '60px',\n        margin: 0,\n      },\n      suggestions: {\n        marginTop: \"0px\",\n        list: {\n          backgroundColor: \"var(--suggestion-background, hsl(var(--background)))\",\n          border: \"1px solid hsl(var(--border))\",\n          boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.1)\",\n          overflow: \"hidden\",\n          zIndex: 100,\n          maxHeight: \"250px\",\n          overflowY: \"auto\",\n          color: \"hsl(var(--foreground))\",\n          minWidth: \"280px\",\n          width: \"auto\"\n        },\n        item: {\n          padding: \"0\",\n          borderBottom: \"1px solid hsl(var(--border))\"\n        },\n      },\n    };\n\n    // Custom styles for the mention component (the highlight)\n    const customStyle = {\n      mentions: {\n        normal: {\n          color: \"inherit\", \n          fontWeight: \"normal\"\n        },\n        highlight: {\n          color: \"hsl(var(--primary))\",\n          fontWeight: \"500\",\n          backgroundColor: \"transparent\",\n          padding: \"0\",\n          margin: \"0\",\n          boxShadow: \"none\",\n          borderRadius: \"0\",\n          textDecoration: \"none\"\n        }\n      }\n    };\n\n    // Add theme CSS variables to document when component mounts\n    React.useEffect(() => {\n      if (typeof window !== 'undefined') {\n        document.documentElement.style.setProperty(\n          '--suggestion-background', \n          'hsl(var(--background))'\n        );\n      }\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative w-full\", className)}\n      >\n        <MentionsInput\n          value={value}\n          onChange={onChange}\n          style={{...mentionInputStyle, ...customStyle}}\n          placeholder={placeholder}\n          disabled={disabled}\n          a11ySuggestionsListLabel=\"Suggested mentions\"\n          className={cn(\n            \"w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground resize-none font-normal\",\n            inputClassName\n          )}\n          suggestionsPortalHost={typeof document !== \"undefined\" ? document.body : undefined}\n          allowSuggestionsAboveCursor={true}\n          onKeyDown={onKeyDown}\n        >\n          <ReactMention\n            trigger={trigger}\n            data={data}\n            renderSuggestion={defaultRenderSuggestion}\n            displayTransform={displayTransform}\n            appendSpaceOnAdd\n            className={cn(\n              \"text-primary font-medium\",\n              suggestionItemClassName\n            )}\n            markup=\"@[__display__](__id__)\"\n          />\n        </MentionsInput>\n      </div>\n    );\n  }\n);\n\nMentionComponent.displayName = \"Mention\";\n\nexport { MentionComponent as Mention }; "],"names":["defaultRenderSuggestion","suggestion","_search","_highlightedDisplay","_index","focused","jsxs","cn","jsx","defaultDisplayTransform","_id","display","MentionComponent","forwardRef","value","onChange","placeholder","data","disabled","className","inputClassName","suggestionItemClassName","trigger","displayTransform","onKeyDown","ref","mentionInputStyle","customStyle","React","MentionsInput","ReactMention"],"mappings":"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"}

package/dist/components/mention.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-BYECrxsp.cjs"),a=require("react"),l=require("react-mentions"),o=require("../utils-DSKoFOjv.cjs"),v=(e,n,i,s,r)=>t.jsxRuntimeExports.jsxs("div",{className:o.cn("flex items-center gap-2 p-2 text-sm",r?"bg-primary/10 text-primary":"bg-transparent"),children:[e.avatar&&t.jsxRuntimeExports.jsx("div",{className:"flex-shrink-0 h-6 w-6 rounded-full overflow-hidden",children:t.jsxRuntimeExports.jsx("img",{src:e.avatar,alt:e.display,className:"h-full w-full object-cover"})}),t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col",children:[t.jsxRuntimeExports.jsx("span",{className:"font-medium",children:e.display}),e.subtitle&&t.jsxRuntimeExports.jsx("span",{className:"text-xs text-muted-foreground",children:e.subtitle})]})]}),y=(e,n)=>`@${n}`,d=a.forwardRef(({value:e,onChange:n,placeholder:i="Type @ to mention someone",data:s,disabled:r=!1,className:u,inputClassName:m,suggestionItemClassName:x,trigger:c="@",displayTransform:p=y,onKeyDown:g},h)=>{const f={control:{fontSize:14,fontWeight:"normal",lineHeight:"1.5",minHeight:"60px"},highlighter:{border:"0",boxSizing:"border-box",overflow:"hidden",minHeight:"60px"},input:{padding:"12px 12px",border:"0",overflow:"auto",fontSize:"14px",outline:"none",backgroundColor:"transparent",fontFamily:"inherit",lineHeight:"1.5",minHeight:"60px",margin:0},suggestions:{marginTop:"0px",list:{backgroundColor:"var(--suggestion-background, hsl(var(--background)))",border:"1px solid hsl(var(--border))",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",overflow:"hidden",zIndex:100,maxHeight:"250px",overflowY:"auto",color:"hsl(var(--foreground))",minWidth:"280px",width:"auto"},item:{padding:"0",borderBottom:"1px solid hsl(var(--border))"}}},b={mentions:{normal:{color:"inherit",fontWeight:"normal"},highlight:{color:"hsl(var(--primary))",fontWeight:"500",backgroundColor:"transparent",padding:"0",margin:"0",boxShadow:"none",borderRadius:"0",textDecoration:"none"}}};return a.useEffect(()=>{typeof window<"u"&&document.documentElement.style.setProperty("--suggestion-background","hsl(var(--background))")},[]),t.jsxRuntimeExports.jsx("div",{ref:h,className:o.cn("relative w-full",u),children:t.jsxRuntimeExports.jsx(l.MentionsInput,{value:e,onChange:n,style:{...f,...b},placeholder:i,disabled:r,a11ySuggestionsListLabel:"Suggested mentions",className:o.cn("w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground resize-none font-normal",m),suggestionsPortalHost:typeof document<"u"?document.body:void 0,allowSuggestionsAboveCursor:!0,onKeyDown:g,children:t.jsxRuntimeExports.jsx(l.Mention,{trigger:c,data:s,renderSuggestion:v,displayTransform:p,appendSpaceOnAdd:!0,className:o.cn("text-primary font-medium",x),markup:"@[__display__](__id__)"})})})});d.displayName="Mention";exports.Mention=d;
+//# sourceMappingURL=mention.js.map

package/dist/components/mention.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention.js","sources":["../../src/components/mention.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { MentionsInput, MentionsInputStyle, Mention as ReactMention, SuggestionDataItem } from \"react-mentions\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MentionUserData extends SuggestionDataItem {\n  avatar?: string;\n  subtitle?: string;\n}\n\nexport interface MentionProps {\n  value: string;\n  onChange: (event: { target: { value: string } }) => void;\n  placeholder?: string;\n  data: MentionUserData[];\n  disabled?: boolean;\n  className?: string;\n  inputClassName?: string;\n  suggestionItemClassName?: string;\n  trigger?: string;\n  displayTransform?: (id: string, display: string) => string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst defaultRenderSuggestion = (\n  suggestion: MentionUserData,\n  _search: string,\n  _highlightedDisplay: React.ReactNode,\n  _index: number,\n  focused: boolean\n) => (\n  <div\n    className={cn(\n      \"flex items-center gap-2 p-2 text-sm\",\n      focused ? \"bg-primary/10 text-primary\" : \"bg-transparent\"\n    )}\n  >\n    {suggestion.avatar && (\n      <div className=\"flex-shrink-0 h-6 w-6 rounded-full overflow-hidden\">\n        <img\n          src={suggestion.avatar}\n          alt={suggestion.display}\n          className=\"h-full w-full object-cover\"\n        />\n      </div>\n    )}\n    <div className=\"flex flex-col\">\n      <span className=\"font-medium\">{suggestion.display}</span>\n      {suggestion.subtitle && (\n        <span className=\"text-xs text-muted-foreground\">{suggestion.subtitle}</span>\n      )}\n    </div>\n  </div>\n);\n\nconst defaultDisplayTransform = (_id: string, display: string) => `@${display}`;\n\nconst MentionComponent = forwardRef<HTMLDivElement, MentionProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type @ to mention someone\",\n      data,\n      disabled = false,\n      className,\n      inputClassName,\n      suggestionItemClassName,\n      trigger = \"@\",\n      displayTransform = defaultDisplayTransform,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    // Custom styles to match your UI\n    const mentionInputStyle: MentionsInputStyle = {\n      control: {\n        fontSize: 14,\n        fontWeight: 'normal',\n        lineHeight: '1.5',\n        minHeight: '60px',\n      },\n      highlighter: {\n        border: '0',\n        boxSizing: 'border-box',\n        overflow: 'hidden',\n        minHeight: '60px',\n      },\n      input: {\n        padding: '12px 12px',\n        border: '0',\n        overflow: 'auto',\n        fontSize: '14px',\n        outline: 'none',\n        backgroundColor: 'transparent',\n        fontFamily: 'inherit',\n        lineHeight: '1.5',\n        minHeight: '60px',\n        margin: 0,\n      },\n      suggestions: {\n        marginTop: \"0px\",\n        list: {\n          backgroundColor: \"var(--suggestion-background, hsl(var(--background)))\",\n          border: \"1px solid hsl(var(--border))\",\n          boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.1)\",\n          overflow: \"hidden\",\n          zIndex: 100,\n          maxHeight: \"250px\",\n          overflowY: \"auto\",\n          color: \"hsl(var(--foreground))\",\n          minWidth: \"280px\",\n          width: \"auto\"\n        },\n        item: {\n          padding: \"0\",\n          borderBottom: \"1px solid hsl(var(--border))\"\n        },\n      },\n    };\n\n    // Custom styles for the mention component (the highlight)\n    const customStyle = {\n      mentions: {\n        normal: {\n          color: \"inherit\", \n          fontWeight: \"normal\"\n        },\n        highlight: {\n          color: \"hsl(var(--primary))\",\n          fontWeight: \"500\",\n          backgroundColor: \"transparent\",\n          padding: \"0\",\n          margin: \"0\",\n          boxShadow: \"none\",\n          borderRadius: \"0\",\n          textDecoration: \"none\"\n        }\n      }\n    };\n\n    // Add theme CSS variables to document when component mounts\n    React.useEffect(() => {\n      if (typeof window !== 'undefined') {\n        document.documentElement.style.setProperty(\n          '--suggestion-background', \n          'hsl(var(--background))'\n        );\n      }\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative w-full\", className)}\n      >\n        <MentionsInput\n          value={value}\n          onChange={onChange}\n          style={{...mentionInputStyle, ...customStyle}}\n          placeholder={placeholder}\n          disabled={disabled}\n          a11ySuggestionsListLabel=\"Suggested mentions\"\n          className={cn(\n            \"w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground resize-none font-normal\",\n            inputClassName\n          )}\n          suggestionsPortalHost={typeof document !== \"undefined\" ? document.body : undefined}\n          allowSuggestionsAboveCursor={true}\n          onKeyDown={onKeyDown}\n        >\n          <ReactMention\n            trigger={trigger}\n            data={data}\n            renderSuggestion={defaultRenderSuggestion}\n            displayTransform={displayTransform}\n            appendSpaceOnAdd\n            className={cn(\n              \"text-primary font-medium\",\n              suggestionItemClassName\n            )}\n            markup=\"@[__display__](__id__)\"\n          />\n        </MentionsInput>\n      </div>\n    );\n  }\n);\n\nMentionComponent.displayName = \"Mention\";\n\nexport { MentionComponent as Mention }; "],"names":["defaultRenderSuggestion","suggestion","_search","_highlightedDisplay","_index","focused","jsxs","cn","jsx","defaultDisplayTransform","_id","display","MentionComponent","forwardRef","value","onChange","placeholder","data","disabled","className","inputClassName","suggestionItemClassName","trigger","displayTransform","onKeyDown","ref","mentionInputStyle","customStyle","React","MentionsInput","ReactMention"],"mappings":"iNAuBMA,EAA0B,CAC9BC,EACAC,EACAC,EACAC,EACAC,IAEAC,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,sCACAF,EAAU,6BAA+B,gBAAA,EAG1C,SAAA,CAAAJ,EAAW,QACVO,wBAAC,MAAA,CAAI,UAAU,qDACb,SAAAA,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAKP,EAAW,OAChB,IAAKA,EAAW,QAChB,UAAU,4BAAA,CAAA,EAEd,EAEFK,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAAE,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,cAAe,SAAAP,EAAW,QAAQ,EACjDA,EAAW,UACVO,EAAAA,kBAAAA,IAAC,QAAK,UAAU,gCAAiC,WAAW,QAAA,CAAS,CAAA,CAAA,CAEzE,CAAA,CAAA,CACF,EAGIC,EAA0B,CAACC,EAAaC,IAAoB,IAAIA,CAAO,GAEvEC,EAAmBC,EAAAA,WACvB,CACE,CACE,MAAAC,EACA,SAAAC,EACA,YAAAC,EAAc,4BACd,KAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,QAAAC,EAAU,IACV,iBAAAC,EAAmBd,EACnB,UAAAe,CAAA,EAEFC,IACG,CAEH,MAAMC,EAAwC,CAC5C,QAAS,CACP,SAAU,GACV,WAAY,SACZ,WAAY,MACZ,UAAW,MAAA,EAEb,YAAa,CACX,OAAQ,IACR,UAAW,aACX,SAAU,SACV,UAAW,MAAA,EAEb,MAAO,CACL,QAAS,YACT,OAAQ,IACR,SAAU,OACV,SAAU,OACV,QAAS,OACT,gBAAiB,cACjB,WAAY,UACZ,WAAY,MACZ,UAAW,OACX,OAAQ,CAAA,EAEV,YAAa,CACX,UAAW,MACX,KAAM,CACJ,gBAAiB,uDACjB,OAAQ,+BACR,UAAW,gCACX,SAAU,SACV,OAAQ,IACR,UAAW,QACX,UAAW,OACX,MAAO,yBACP,SAAU,QACV,MAAO,MAAA,EAET,KAAM,CACJ,QAAS,IACT,aAAc,8BAAA,CAChB,CACF,EAIIC,EAAc,CAClB,SAAU,CACR,OAAQ,CACN,MAAO,UACP,WAAY,QAAA,EAEd,UAAW,CACT,MAAO,sBACP,WAAY,MACZ,gBAAiB,cACjB,QAAS,IACT,OAAQ,IACR,UAAW,OACX,aAAc,IACd,eAAgB,MAAA,CAClB,CACF,EAIF,OAAAC,EAAM,UAAU,IAAM,CAChB,OAAO,OAAW,KACpB,SAAS,gBAAgB,MAAM,YAC7B,0BACA,wBAAA,CAGN,EAAG,CAAA,CAAE,EAGHpB,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAAiB,EACA,UAAWlB,EAAAA,GAAG,kBAAmBY,CAAS,EAE1C,SAAAX,EAAAA,kBAAAA,IAACqB,EAAAA,cAAA,CACC,MAAAf,EACA,SAAAC,EACA,MAAO,CAAC,GAAGW,EAAmB,GAAGC,CAAA,EACjC,YAAAX,EACA,SAAAE,EACA,yBAAyB,qBACzB,UAAWX,EAAAA,GACT,qGACAa,CAAA,EAEF,sBAAuB,OAAO,SAAa,IAAc,SAAS,KAAO,OACzE,4BAA6B,GAC7B,UAAAI,EAEA,SAAAhB,EAAAA,kBAAAA,IAACsB,EAAAA,QAAA,CACC,QAAAR,EACA,KAAAL,EACA,iBAAkBjB,EAClB,iBAAAuB,EACA,iBAAgB,GAChB,UAAWhB,EAAAA,GACT,2BACAc,CAAA,EAEF,OAAO,wBAAA,CAAA,CACT,CAAA,CACF,CAAA,CAGN,CACF,EAEAT,EAAiB,YAAc"}

package/dist/components/modal.d.ts

@@ -0,0 +1,19 @@
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string | React.ReactNode;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';
+    showClose?: boolean;
+    className?: string;
+    mainClassName?: string;
+    isContentScrollable?: boolean;
+    header?: React.ReactNode;
+    headerClassName?: string;
+    contentClassName?: string;
+    zIndexClassName?: string;
+}
+export declare function Modal({ isOpen, onClose, title, description, icon, children, footer, size, showClose, className, isContentScrollable, mainClassName, contentClassName, header, zIndexClassName }: ModalProps): import('react').ReactPortal;

package/dist/components/modal.esm.js

@@ -0,0 +1,92 @@
+import { j as e } from "../jsx-runtime-DGlMoOmv.js";
+import { createPortal as y } from "react-dom";
+import { AnimatePresence as g, motion as c } from "framer-motion";
+import { X as N } from "lucide-react";
+import { c as r } from "../utils-qaFjX9_3.js";
+import { useCallback as k, useEffect as E } from "react";
+const z = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-[1200px] w-[90vw]",
+  "3xl": "max-w-[1600px] w-[90vw]",
+  full: "w-[100vw]"
+};
+function M({
+  isOpen: t,
+  onClose: s,
+  title: a,
+  description: d,
+  icon: i,
+  children: o,
+  footer: n,
+  size: x = "md",
+  showClose: u = !0,
+  className: f,
+  isContentScrollable: p = !0,
+  mainClassName: b,
+  contentClassName: h,
+  header: m,
+  zIndexClassName: j = "z-[50]"
+}) {
+  const l = k((w) => {
+    w.key === "Escape" && t && s();
+  }, [t, s]);
+  E(() => (document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l)), [l]);
+  const v = /* @__PURE__ */ e.jsx(g, { children: t && /* @__PURE__ */ e.jsx("div", { className: r("fixed inset-0 z-50 overflow-hidden", j), children: /* @__PURE__ */ e.jsxs("div", { className: r("min-h-full flex items-center justify-center p-4", b), children: [
+    /* @__PURE__ */ e.jsx(
+      c.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
+        onClick: s
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      c.div,
+      {
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        transition: { duration: 0.1, ease: "easeOut" },
+        className: r(
+          "relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]",
+          z[x],
+          f
+        ),
+        children: [
+          (a || d || i || m) && /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0 flex items-center justify-between p-2 border-b border-border", children: [
+            m || /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
+              i && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg bg-primary flex items-center justify-center", children: i }),
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                a && /* @__PURE__ */ e.jsx("h2", { className: "text-sm font-small", children: a }),
+                d && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: d })
+              ] })
+            ] }),
+            u && /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: s,
+                className: "p-1.5 rounded-md hover:bg-muted text-muted-foreground",
+                children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-center items-center", children: [
+                  /* @__PURE__ */ e.jsx(N, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e.jsx("kbd", { className: "ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: "ESC" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: r("flex-1 min-h-0", p ? "overflow-y-auto" : "", h), children: o }),
+          n && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50", children: n })
+        ]
+      }
+    )
+  ] }) }) });
+  return y(v, document.body);
+}
+export {
+  M as Modal
+};
+//# sourceMappingURL=modal.esm.js.map

package/dist/components/modal.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.esm.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n}\n\nconst sizeClasses = {\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-[1200px] w-[90vw]',\n  '3xl': 'max-w-[1600px] w-[90vw]',\n  full: 'w-[100vw]'\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  zIndexClassName = 'z-[50]'\n}: ModalProps) {\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]\",\n                sizeClasses[size],\n                className\n              )}\n            >\n              {/* Header - Fixed */}\n              {(title || description || icon || header) && (\n                <div className=\"flex-shrink-0 flex items-center justify-between p-2 border-b border-border\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg bg-primary flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\"flex-1 min-h-0\", isContentScrollable ? 'overflow-y-auto' : '', contentClassName )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["sizeClasses","Modal","isOpen","onClose","title","description","icon","children","footer","size","showClose","className","isContentScrollable","mainClassName","contentClassName","header","zIndexClassName","handleKeyDown","useCallback","e","useEffect","content","jsx","AnimatePresence","cn","jsxs","motion","X","createPortal"],"mappings":"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"}

package/dist/components/modal.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),w=require("react-dom"),m=require("framer-motion"),R=require("lucide-react"),t=require("../utils-DSKoFOjv.cjs"),d=require("react"),g={sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-[1200px] w-[90vw]","3xl":"max-w-[1600px] w-[90vw]",full:"w-[100vw]"};function N({isOpen:r,onClose:s,title:n,description:i,icon:x,children:l,footer:c,size:u="md",showClose:j=!0,className:p,isContentScrollable:f=!0,mainClassName:b,contentClassName:h,header:a,zIndexClassName:v="z-[50]"}){const o=d.useCallback(E=>{E.key==="Escape"&&r&&s()},[r,s]);d.useEffect(()=>(document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)),[o]);const y=e.jsxRuntimeExports.jsx(m.AnimatePresence,{children:r&&e.jsxRuntimeExports.jsx("div",{className:t.cn("fixed inset-0 z-50 overflow-hidden",v),children:e.jsxRuntimeExports.jsxs("div",{className:t.cn("min-h-full flex items-center justify-center p-4",b),children:[e.jsxRuntimeExports.jsx(m.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 bg-background/80 backdrop-blur-sm",onClick:s}),e.jsxRuntimeExports.jsxs(m.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.1,ease:"easeOut"},className:t.cn("relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]",g[u],p),children:[(n||i||x||a)&&e.jsxRuntimeExports.jsxs("div",{className:"flex-shrink-0 flex items-center justify-between p-2 border-b border-border",children:[a||e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-3",children:[x&&e.jsxRuntimeExports.jsx("div",{className:"h-8 w-8 rounded-lg bg-primary flex items-center justify-center",children:x}),e.jsxRuntimeExports.jsxs("div",{children:[n&&e.jsxRuntimeExports.jsx("h2",{className:"text-sm font-small",children:n}),i&&e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:i})]})]}),j&&e.jsxRuntimeExports.jsx("button",{onClick:s,className:"p-1.5 rounded-md hover:bg-muted text-muted-foreground",children:e.jsxRuntimeExports.jsxs("div",{className:"flex justify-center items-center",children:[e.jsxRuntimeExports.jsx(R.X,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx("kbd",{className:"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded",children:"ESC"})]})})]}),e.jsxRuntimeExports.jsx("div",{className:t.cn("flex-1 min-h-0",f?"overflow-y-auto":"",h),children:l}),c&&e.jsxRuntimeExports.jsx("div",{className:"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50",children:c})]})]})})});return w.createPortal(y,document.body)}exports.Modal=N;
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n}\n\nconst sizeClasses = {\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-[1200px] w-[90vw]',\n  '3xl': 'max-w-[1600px] w-[90vw]',\n  full: 'w-[100vw]'\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  zIndexClassName = 'z-[50]'\n}: ModalProps) {\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]\",\n                sizeClasses[size],\n                className\n              )}\n            >\n              {/* Header - Fixed */}\n              {(title || description || icon || header) && (\n                <div className=\"flex-shrink-0 flex items-center justify-between p-2 border-b border-border\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg bg-primary flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\"flex-1 min-h-0\", isContentScrollable ? 'overflow-y-auto' : '', contentClassName )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["sizeClasses","Modal","isOpen","onClose","title","description","icon","children","footer","size","showClose","className","isContentScrollable","mainClassName","contentClassName","header","zIndexClassName","handleKeyDown","useCallback","e","useEffect","content","jsx","AnimatePresence","cn","jsxs","motion","X","createPortal"],"mappings":"iQAyBMA,EAAc,CAClB,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,MAAO,0BACP,MAAO,0BACP,KAAM,WACR,EAEO,SAASC,EAAM,CACpB,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,cAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,gBAAAC,EAAkB,QACpB,EAAe,CACb,MAAMC,EAAgBC,cAAaC,GAAqB,CAClDA,EAAE,MAAQ,UAAYjB,GACxBC,EAAA,CAEJ,EAAG,CAACD,EAAQC,CAAO,CAAC,EAEpBiB,EAAAA,UAAU,KACR,SAAS,iBAAiB,UAAWH,CAAa,EAC3C,IAAM,SAAS,oBAAoB,UAAWA,CAAa,GACjE,CAACA,CAAa,CAAC,EAElB,MAAMI,EACJC,wBAACC,EAAAA,gBAAA,CACE,SAAArB,GACCoB,wBAAC,OAAI,UAAWE,EAAAA,GAAG,qCAAsCR,CAAe,EACtE,SAAAS,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,GAAG,kDAAmDX,CAAa,EACjF,SAAA,CAAAS,EAAAA,kBAAAA,IAACI,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EACpB,KAAM,CAAE,QAAS,CAAA,EACjB,UAAU,kDACV,QAASvB,CAAA,CAAA,EAGXsB,EAAAA,kBAAAA,KAACC,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,EAAG,MAAO,GAAA,EAC9B,QAAS,CAAE,QAAS,EAAG,MAAO,CAAA,EAC9B,KAAM,CAAE,QAAS,EAAG,MAAO,GAAA,EAC3B,WAAY,CAAE,SAAU,GAAK,KAAM,SAAA,EACnC,UAAWF,EAAAA,GACT,wGACAxB,EAAYS,CAAI,EAChBE,CAAA,EAIA,SAAA,EAAAP,GAASC,GAAeC,GAAQS,IAChCU,yBAAC,MAAA,CAAI,UAAU,6EAEZ,SAAA,CAAAV,GACCU,yBAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAnB,GACCgB,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,iEACZ,SAAAhB,EACH,2BAED,MAAA,CACE,SAAA,CAAAF,GAASkB,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,qBAAsB,SAAAlB,EAAM,EACnDC,GAAeiB,EAAAA,kBAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAjB,CAAA,CAAY,CAAA,CAAA,CAC5E,CAAA,EACF,EAEDK,GACCY,EAAAA,kBAAAA,IAAC,SAAA,CACC,QAASnB,EACT,UAAU,wDAEV,SAAAsB,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAH,EAAAA,kBAAAA,IAACK,EAAAA,EAAA,CAAE,UAAU,SAAA,CAAU,EACvBL,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wEAAwE,SAAA,KAAA,CAEvF,CAAA,CAAA,CACF,CAAA,CAAA,CACF,EAEJ,EAIFA,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,GAAG,iBAAkBZ,EAAsB,kBAAoB,GAAIE,CAAiB,EACjG,SAAAP,CAAA,CACH,EAGCC,GACCc,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,iGACZ,SAAAd,CAAA,CACH,CAAA,CAAA,CAAA,CAEJ,CAAA,CACF,EACF,EAEJ,EAGF,OAAOoB,eAAaP,EAAS,SAAS,IAAI,CAC5C"}

package/dist/components/monaco-editor.d.ts

@@ -0,0 +1,2 @@
+export * from './monaco-editor/index'
+export {}