@eyesee/ui-components 0.2.0 → 0.4.0

package/dist/components/Modal/Modal.js

@@ -1,70 +1,84 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useRef as N, Suspense as k } from "react";
-import C from "react-dom";
-import D from "../../hooks/useClickOutside.js";
-import { useEscapeKey as v } from "../../hooks/useEscapeKey.js";
-import { LoadingIcon as I } from "../icons-v2/LoadingIcon.js";
-import { XIcon as M } from "../icons-v2/XIcon.js";
-import { Button as b } from "../Button/Button.js";
-import l from "./Modal.module.scss.js";
-const r = {
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useRef as E, Suspense as L } from "react";
+import O from "react-dom";
+import Q from "../../hooks/useClickOutside.js";
+import { useEscapeKey as _ } from "../../hooks/useEscapeKey.js";
+import { LoadingIcon as b } from "../icons-v2/LoadingIcon.js";
+import { XIcon as A } from "../icons-v2/XIcon.js";
+import { Button as H } from "../Button/Button.js";
+import e from "./Modal.module.scss.js";
+const n = {
   default: "960px",
   mediaQuery: "880px"
-}, A = ({
-  children: n = null,
-  onClose: s = () => {
+}, r = {
+  default: "480px",
+  mediaQuery: "360px"
+}, I = {
+  scroll: e.content,
+  fixed: `${e.content} ${e.contentFixed}`
+}, j = ({
+  children: d = null,
+  onClose: c = () => {
   },
-  visible: d = !1,
-  title: c = "",
-  icon: t = null,
-  description: m = null,
+  visible: s = !1,
+  title: m = "",
+  icon: a = null,
+  description: u = null,
   footer: i = null,
-  maxWidth: u = r,
-  loadingFallback: p = /* @__PURE__ */ e(I, { iconSize: "xl" }),
-  portalContainer: f
+  maxWidth: f = n,
+  bodyLayout: h = "scroll",
+  // 'scroll' or 'fixed'
+  bodyHeight: p = r,
+  loadingFallback: y = /* @__PURE__ */ t(b, { iconSize: "xl" }),
+  portalContainer: x
 }) => {
-  const { default: h, mediaQuery: x } = {
+  const { default: D, mediaQuery: N } = {
+    ...n,
+    ...f
+  }, { default: g, mediaQuery: C } = {
     ...r,
-    ...u
-  }, y = N(), o = () => s();
-  return D(y, o), v(o), d ? C.createPortal(
-    /* @__PURE__ */ a("div", { className: l.transition, children: [
-      /* @__PURE__ */ e("div", { className: l.backdrop, onClick: o }),
-      /* @__PURE__ */ e(
+    ...p
+  }, k = E(), o = () => c();
+  return Q(k, o), _(o), s ? O.createPortal(
+    /* @__PURE__ */ l("div", { className: e.transition, children: [
+      /* @__PURE__ */ t("div", { className: e.backdrop, onClick: o }),
+      /* @__PURE__ */ t(
         "dialog",
         {
-          className: l.modal,
+          className: e.modal,
           open: !0,
           style: {
-            "--modal-width": h,
-            "--modal-width-media-query": x
+            "--modal-width": D,
+            "--modal-width-media-query": N,
+            "--modal-content-height": g,
+            "--modal-content-height-media-query": C
           },
-          children: /* @__PURE__ */ a(k, { fallback: p, children: [
-            /* @__PURE__ */ a("header", { className: l.header, children: [
-              t && t,
-              /* @__PURE__ */ a("div", { className: l.textContainer, children: [
-                /* @__PURE__ */ e("span", { className: l.title, children: c }),
-                /* @__PURE__ */ e("span", { className: l.description, children: m })
+          children: /* @__PURE__ */ l(L, { fallback: y, children: [
+            /* @__PURE__ */ l("header", { className: e.header, children: [
+              a && a,
+              /* @__PURE__ */ l("div", { className: e.textContainer, children: [
+                /* @__PURE__ */ t("span", { className: e.title, children: m }),
+                /* @__PURE__ */ t("span", { className: e.description, children: u })
               ] }),
-              /* @__PURE__ */ e(
-                b,
+              /* @__PURE__ */ t(
+                H,
                 {
                   variant: "neutral",
-                  icon: /* @__PURE__ */ e(M, {}),
+                  icon: /* @__PURE__ */ t(A, {}),
                   size: "xxxs",
                   onClick: o
                 }
               )
             ] }),
-            /* @__PURE__ */ e("section", { className: l.content, children: n }),
-            i && /* @__PURE__ */ e("footer", { children: i })
+            /* @__PURE__ */ t("section", { className: I[h], children: d }),
+            i && /* @__PURE__ */ t("footer", { children: i })
           ] })
         }
       )
     ] }),
-    f ?? document.getElementById("modal") ?? document.body
+    x ?? document.getElementById("modal") ?? document.body
   ) : null;
 };
 export {
-  A as Modal
+  j as Modal
 };

package/dist/components/Modal/Modal.module.scss.js

@@ -1,21 +1,23 @@
-const t = "_transition_11g3r_3", n = "_backdrop_11g3r_7", o = "_modal_11g3r_18", e = "_header_11g3r_37", r = "_textContainer_11g3r_45", _ = "_title_11g3r_53", c = "_description_11g3r_62", i = "_content_11g3r_70", a = {
+const t = "_transition_m2to3_3", o = "_backdrop_m2to3_7", n = "_modal_m2to3_18", e = "_header_m2to3_37", _ = "_textContainer_m2to3_45", c = "_title_m2to3_53", i = "_description_m2to3_62", s = "_content_m2to3_70", a = "_contentFixed_m2to3_76", d = {
   transition: t,
-  backdrop: n,
-  modal: o,
+  backdrop: o,
+  modal: n,
   header: e,
-  textContainer: r,
-  title: _,
-  description: c,
-  content: i
+  textContainer: _,
+  title: c,
+  description: i,
+  content: s,
+  contentFixed: a
 };
 export {
-  n as backdrop,
-  i as content,
-  a as default,
-  c as description,
+  o as backdrop,
+  s as content,
+  a as contentFixed,
+  d as default,
+  i as description,
   e as header,
-  o as modal,
-  r as textContainer,
-  _ as title,
+  n as modal,
+  _ as textContainer,
+  c as title,
   t as transition
 };

package/dist/components/Tag/Tag.js

@@ -18,31 +18,21 @@ const f = {
 }) => {
   if (s == null || s === "") return null;
   const c = (u.includes(l) ? l : "rectangle") === "pill" ? e.shapePill : e.shapeRectangle;
-  return /* @__PURE__ */ o(
-    "span",
-    {
-      className: d(
-        e.tag,
-        c,
-        f[t] ?? e.stateDefault
-      ),
-      children: [
-        i && /* @__PURE__ */ a("span", { className: e.icon, "aria-hidden": !0, children: /* @__PURE__ */ a(m, { iconSize: "m" }) }),
-        /* @__PURE__ */ a("span", { className: e.label, children: s }),
-        r && n ? /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            className: e.dismiss,
-            onClick: n,
-            disabled: t === "disabled",
-            "aria-label": `Remove ${s}`,
-            children: /* @__PURE__ */ a("span", { className: e.dismissIcon, "aria-hidden": !0, children: /* @__PURE__ */ a(p, { iconSize: "m" }) })
-          }
-        ) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ o("span", { className: d(e.tag, c, f[t] ?? e.stateDefault), children: [
+    i && /* @__PURE__ */ a("span", { className: e.icon, "aria-hidden": !0, children: /* @__PURE__ */ a(m, { iconSize: "m" }) }),
+    /* @__PURE__ */ a("span", { className: e.label, children: s }),
+    r && n ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: e.dismiss,
+        onClick: n,
+        disabled: t === "disabled",
+        "aria-label": `Remove ${s}`,
+        children: /* @__PURE__ */ a("span", { className: e.dismissIcon, "aria-hidden": !0, children: /* @__PURE__ */ a(p, { iconSize: "m" }) })
+      }
+    ) : null
+  ] });
 };
 export {
   A as Tag

package/dist/components/TextHoverable/TextHoverable.js

@@ -1,14 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import a from "clsx";
 import t from "./TextHoverable.module.scss.js";
-const x = ({ children: o, className: r, ...s }) => /* @__PURE__ */ e(
-  "span",
-  {
-    className: a(t.textHoverable, r),
-    ...s,
-    children: /* @__PURE__ */ e("span", { className: t.text, children: o })
-  }
-);
+const x = ({ children: o, className: r, ...s }) => /* @__PURE__ */ e("span", { className: a(t.textHoverable, r), ...s, children: /* @__PURE__ */ e("span", { className: t.text, children: o }) });
 export {
   x as TextHoverable
 };

package/dist/components/icons-v2/ColumnIcon.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createIcon as t } from "./createIcon.js";
+const c = t(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ n(
+  "path",
+  {
+    d: "M16 4H5.33333C4.97971 4 4.64057 4.14048 4.39052 4.39052C4.14048 4.64057 4 4.97971 4 5.33333V26.6667C4 27.0203 4.14048 27.3594 4.39052 27.6095C4.64057 27.8595 4.97971 28 5.33333 28H16M16 4H26.6667C27.0203 4 27.3594 4.14048 27.6095 4.39052C27.8595 4.64057 28 4.97971 28 5.33333V26.6667C28 27.0203 27.8595 27.3594 27.6095 27.6095C27.3594 27.8595 27.0203 28 26.6667 28H16M16 4V28",
+    stroke: o,
+    strokeWidth: r,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+export {
+  c as ColumnIcon
+};

package/dist/components/icons-v2/SquareAddIcon.js

@@ -1,15 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createIcon as r } from "./createIcon.js";
-const d = r(({ strokeColor: t, strokeWidth: e }) => /* @__PURE__ */ o(
+import { jsx as e } from "react/jsx-runtime";
+import { createIcon as t } from "./createIcon.js";
+const c = t(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ e(
   "path",
   {
     d: "M16.6667 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V6.66667C4 5.95942 4.28095 5.28115 4.78105 4.78105C5.28115 4.28095 5.95942 4 6.66667 4H25.3333C26.0406 4 26.7189 4.28095 27.219 4.78105C27.719 5.28115 28 5.95942 28 6.66667V16.6667M21.3333 25.3333H29.3333M25.3333 21.3333V29.3333",
-    stroke: "#737388",
-    strokeWidth: "2",
+    stroke: o,
+    strokeWidth: r,
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
 ));
 export {
-  d as SquareAddIcon
+  c as SquareAddIcon
 };

package/dist/components/icons-v2/index.js

@@ -7,7 +7,7 @@ import { ExternalLinkIcon as l } from "./ExternalLinkIcon.js";
 import { PlusIcon as s } from "./PlusIcon.js";
 import { ImageIcon as h } from "./ImageIcon.js";
 import { DeleteIcon as C } from "./DeleteIcon.js";
-import { EditIcon as u } from "./EditIcon.js";
+import { EditIcon as S } from "./EditIcon.js";
 import { AlphabetIcon as A } from "./AlphabetIcon.js";
 import { AdIcon as w } from "./AdIcon.js";
 import { AddMessageIcon as v } from "./AddMessageIcon.js";
@@ -33,7 +33,7 @@ import { BoxIcon as xo } from "./BoxIcon.js";
 import { BooksIcon as lo } from "./BooksIcon.js";
 import { BookIcon as so } from "./BookIcon.js";
 import { BookmarkIcon as go } from "./BookmarkIcon.js";
-import { BoltIcon as So } from "./BoltIcon.js";
+import { BoltIcon as uo } from "./BoltIcon.js";
 import { BoldIcon as ko } from "./BoldIcon.js";
 import { BellIcon as bo } from "./BellIcon.js";
 import { AttributesEvaluationIcon as Lo } from "./AttributesEvaluationIcon.js";
@@ -60,7 +60,7 @@ import { ClickIcon as ar } from "./ClickIcon.js";
 import { ClipboardIcon as ir } from "./ClipboardIcon.js";
 import { ClockIcon as dr } from "./ClockIcon.js";
 import { ClockShareIcon as gr } from "./ClockShareIcon.js";
-import { CloseIcon as Sr } from "./CloseIcon.js";
+import { CloseIcon as ur } from "./CloseIcon.js";
 import { CopyIcon as kr } from "./CopyIcon.js";
 import { CreditCardIcon as br } from "./CreditCardIcon.js";
 import { CropIcon as Lr } from "./CropIcon.js";
@@ -87,7 +87,7 @@ import { FileIcon as ae } from "./FileIcon.js";
 import { FileExportIcon as ie } from "./FileExportIcon.js";
 import { FileImportIcon as de } from "./FileImportIcon.js";
 import { FileNewIcon as ge } from "./FileNewIcon.js";
-import { FileRemoveIcon as Se } from "./FileRemoveIcon.js";
+import { FileRemoveIcon as ue } from "./FileRemoveIcon.js";
 import { FilesIcon as ke } from "./FilesIcon.js";
 import { FileTemplateIcon as be } from "./FileTemplateIcon.js";
 import { FileUploadIcon as Le } from "./FileUploadIcon.js";
@@ -114,7 +114,7 @@ import { LikeIcon as at } from "./LikeIcon.js";
 import { LinkIcon as it } from "./LinkIcon.js";
 import { ListViewIcon as dt } from "./ListViewIcon.js";
 import { LoaderIcon as gt } from "./LoaderIcon.js";
-import { LoadingIcon as St } from "./LoadingIcon.js";
+import { LoadingIcon as ut } from "./LoadingIcon.js";
 import { LockIcon as kt } from "./LockIcon.js";
 import { LockOffIcon as bt } from "./LockOffIcon.js";
 import { LoginIcon as Lt } from "./LoginIcon.js";
@@ -141,7 +141,7 @@ import { NotifyIcon as an } from "./NotifyIcon.js";
 import { NoteOffIcon as sn } from "./NoteOffIcon.js";
 import { NoteIcon as hn } from "./NoteIcon.js";
 import { Multiplier05Icon as Cn } from "./Multiplier05Icon.js";
-import { Multiplier10Icon as un } from "./Multiplier10Icon.js";
+import { Multiplier10Icon as Sn } from "./Multiplier10Icon.js";
 import { Multiplier15Icon as An } from "./Multiplier15Icon.js";
 import { Multiplier20Icon as wn } from "./Multiplier20Icon.js";
 import { PlayIcon as vn } from "./PlayIcon.js";
@@ -168,7 +168,7 @@ import { SocialTiktok2Icon as lc } from "./SocialTiktok2Icon.js";
 import { SocialTiktokIcon as sc } from "./SocialTiktokIcon.js";
 import { SocialXIcon as hc } from "./SocialXIcon.js";
 import { SocialYoutubeIcon as Cc } from "./SocialYoutubeIcon.js";
-import { SortHorizontalIcon as uc } from "./SortHorizontalIcon.js";
+import { SortHorizontalIcon as Sc } from "./SortHorizontalIcon.js";
 import { StopIcon as Ac } from "./StopIcon.js";
 import { SurveyIcon as wc } from "./SurveyIcon.js";
 import { TableIcon as vc } from "./TableIcon.js";
@@ -195,7 +195,7 @@ import { VolumeOnIcon as lp } from "./VolumeOnIcon.js";
 import { VolumeOffIcon as sp } from "./VolumeOffIcon.js";
 import { WebIcon as hp } from "./WebIcon.js";
 import { XIcon as Cp } from "./XIcon.js";
-import { ZipFileIcon as up } from "./ZipFileIcon.js";
+import { ZipFileIcon as Sp } from "./ZipFileIcon.js";
 import { ZoomInIcon as Ap } from "./ZoomInIcon.js";
 import { ZoomOutIcon as wp } from "./ZoomOutIcon.js";
 import { ZonePercentageIcon as vp } from "./ZonePercentageIcon.js";
@@ -203,6 +203,7 @@ import { PinskewedIcon as Mp } from "./PinskewedIcon.js";
 import { MinusIcon as Fp } from "./MinusIcon.js";
 import { SquareAddIcon as yp } from "./SquareAddIcon.js";
 import { RectanglesAddIcon as Tp } from "./RectanglesAddIcon.js";
+import { ColumnIcon as Op } from "./ColumnIcon.js";
 export {
   w as AdIcon,
   v as AddMessageIcon,
@@ -226,7 +227,7 @@ export {
   Lo as AttributesEvaluationIcon,
   bo as BellIcon,
   ko as BoldIcon,
-  So as BoltIcon,
+  uo as BoltIcon,
   so as BookIcon,
   go as BookmarkIcon,
   lo as BooksIcon,
@@ -258,7 +259,8 @@ export {
   ir as ClipboardIcon,
   dr as ClockIcon,
   gr as ClockShareIcon,
-  Sr as CloseIcon,
+  ur as CloseIcon,
+  Op as ColumnIcon,
   kr as CopyIcon,
   br as CreditCardIcon,
   Lr as CropIcon,
@@ -273,7 +275,7 @@ export {
   Hr as DownloadIcon,
   Zr as DragToolIcon,
   Xr as DrawRectangleIcon,
-  u as EditIcon,
+  S as EditIcon,
   Jr as EmailIcon,
   Yr as EmojiNeutralIcon,
   Qr as EmojiSadIcon,
@@ -288,7 +290,7 @@ export {
   ae as FileIcon,
   de as FileImportIcon,
   ge as FileNewIcon,
-  Se as FileRemoveIcon,
+  ue as FileRemoveIcon,
   be as FileTemplateIcon,
   Le as FileUploadIcon,
   ke as FilesIcon,
@@ -317,7 +319,7 @@ export {
   it as LinkIcon,
   dt as ListViewIcon,
   gt as LoaderIcon,
-  St as LoadingIcon,
+  ut as LoadingIcon,
   kt as LockIcon,
   bt as LockOffIcon,
   Lt as LoginIcon,
@@ -334,7 +336,7 @@ export {
   Jt as MouseIcon,
   Xt as MoveIcon,
   Cn as Multiplier05Icon,
-  un as Multiplier10Icon,
+  Sn as Multiplier10Icon,
   An as Multiplier15Icon,
   wn as Multiplier20Icon,
   hn as NoteIcon,
@@ -376,7 +378,7 @@ export {
   sc as SocialTiktokIcon,
   hc as SocialXIcon,
   Cc as SocialYoutubeIcon,
-  uc as SortHorizontalIcon,
+  Sc as SortHorizontalIcon,
   yp as SquareAddIcon,
   x as StarIcon,
   Ac as StopIcon,
@@ -405,7 +407,7 @@ export {
   lp as VolumeOnIcon,
   hp as WebIcon,
   Cp as XIcon,
-  up as ZipFileIcon,
+  Sp as ZipFileIcon,
   vp as ZonePercentageIcon,
   Ap as ZoomInIcon,
   wp as ZoomOutIcon