@eyesee/ui-components 0.5.0 → 0.7.0

package/dist/components/Button/Button.js

@@ -1,97 +1,101 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useState as W, useRef as j } from "react";
-import c from "clsx";
-import { ChevronDownIcon as B } from "../icons-v2/ChevronDownIcon.js";
-import { ChevronUpIcon as L } from "../icons-v2/ChevronUpIcon.js";
-import R from "../../hooks/useClickOutside.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as L, useRef as R } from "react";
+import m from "clsx";
+import { ChevronDownIcon as S } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as A } from "../icons-v2/ChevronUpIcon.js";
+import E from "../../hooks/useClickOutside.js";
+import { ListItem as U } from "../ListItem/ListItem.js";
+import { DropdownList as q } from "../DropdownList/DropdownList.js";
+import { Tooltip as z } from "../Tooltip/Tooltip.js";
 import e from "./Button.module.scss.js";
-import { ListItem as S } from "../ListItem/ListItem.js";
-import { DropdownList as A } from "../DropdownList/DropdownList.js";
-import { Tooltip as E } from "../Tooltip/Tooltip.js";
-const Q = ({
+const Y = ({
   text: l,
-  options: r = [],
-  onClick: i = () => {
+  options: p = [],
+  onClick: u = () => {
   },
-  className: d,
-  iconSize: p = "m",
-  size: b = "md",
-  variant: g = "primary",
-  type: w = "fill",
+  className: w,
+  iconSize: f = "m",
+  size: v = "md",
+  variant: N = "primary",
+  type: O = "fill",
+  pressed: h = !1,
   icon: a = null,
-  tooltipContent: u = null,
-  tooltipTitle: I,
-  disabled: v = !1,
-  fullWidth: C = !1,
-  dropdownAlign: N = "start",
-  tooltipProps: O = { position: "bottom", variant: "light" },
-  ...y
+  tooltipContent: d = null,
+  tooltipTitle: g,
+  disabled: y = !1,
+  fullWidth: D = !1,
+  dropdownAlign: x = "start",
+  tooltipProps: k = { position: "bottom", variant: "light" },
+  dropdownCustomContent: s = null,
+  ...B
 }) => {
-  const [s, o] = W(!1), h = j(null);
-  R(h, () => o(!1));
-  const x = (t) => {
-    i(t), o(!1);
-  }, D = a && !l && r.length === 0, k = a && !l, T = !!u, f = /* @__PURE__ */ m(
+  const [o, i] = L(!1), b = R(null);
+  E(b, () => i(!1));
+  const T = (n) => {
+    u(n), i(!1);
+  }, t = p.length > 0 || !!s, W = a && !l && !t, j = a && !l, C = !!d, I = /* @__PURE__ */ c(
     "div",
     {
-      ref: h,
+      ref: b,
       "data-button-wrapper": !0,
-      className: c(e.wrapper, d, C && e.fullWidth),
-      ...y,
+      className: m(e.wrapper, w, D && e.fullWidth),
+      ...B,
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ c(
           "button",
           {
             type: "button",
-            className: c(
+            className: m(
               e.button,
-              e[b],
-              e[g],
-              e[w],
-              r.length > 0 && e.hasDropdown,
-              D && e.iconOnly,
-              k && e.isIcon
+              e[v],
+              e[N],
+              e[O],
+              t && e.hasDropdown,
+              W && e.iconOnly,
+              j && e.isIcon,
+              h && e.pressed
             ),
-            onClick: () => r.length > 0 ? o((t) => !t) : i(),
-            "aria-expanded": s,
+            onClick: () => t ? i((n) => !n) : u(),
+            "aria-expanded": o,
+            "aria-pressed": h,
             "aria-haspopup": "menu",
-            disabled: v,
+            disabled: y,
             children: [
-              /* @__PURE__ */ m(
+              /* @__PURE__ */ c(
                 "span",
                 {
-                  className: c(
+                  className: m(
                     e.buttonContent,
-                    r.length > 0 && e.buttonContentDropdown
+                    t && e.buttonContentDropdown
                   ),
                   children: [
-                    a && /* @__PURE__ */ n("span", { className: e.icon, children: a }),
-                    l && /* @__PURE__ */ n("span", { className: e.buttonText, children: l })
+                    a && /* @__PURE__ */ r("span", { className: e.icon, children: a }),
+                    l && /* @__PURE__ */ r("span", { className: e.buttonText, children: l })
                   ]
                 }
               ),
-              r.length > 0 && /* @__PURE__ */ n("span", { className: e.buttonArrow, children: s ? /* @__PURE__ */ n(L, { iconSize: p }) : /* @__PURE__ */ n(B, { iconSize: p }) })
+              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: o ? /* @__PURE__ */ r(A, { iconSize: f }) : /* @__PURE__ */ r(S, { iconSize: f }) })
             ]
           }
         ),
-        s && r.length > 0 && /* @__PURE__ */ n(A, { align: N, children: r.map((t) => /* @__PURE__ */ n(
-          S,
+        o && t && /* @__PURE__ */ r(q, { align: x, children: s || p.map((n) => /* @__PURE__ */ r(
+          U,
           {
             role: "menuitem",
-            title: t.label,
-            controlItem: t == null ? void 0 : t.icon,
+            title: n.label,
+            controlItem: n == null ? void 0 : n.icon,
             horizontalSpacing: "xs",
             verticalSpacing: "none",
-            ...t,
-            onClick: () => x(t)
+            ...n,
+            onClick: () => T(n)
           },
-          t.value
+          n.value
         )) })
       ]
     }
   );
-  return T ? /* @__PURE__ */ n(E, { title: I, content: u, ...O, children: f }) : f;
+  return C ? /* @__PURE__ */ r(z, { title: g, content: d, ...k, children: I }) : I;
 };
 export {
-  Q as Button
+  Y as Button
 };

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

@@ -1,53 +1,55 @@
-const t = "_fullWidth_167fk_3", n = "_button_167fk_6", o = "_wrapper_167fk_10", _ = "_buttonContent_167fk_27", s = "_icon_167fk_27", c = "_buttonArrow_167fk_28", r = "_buttonText_167fk_36", f = "_iconOnly_167fk_53", e = "_buttonContentDropdown_167fk_56", l = "_hasDropdown_167fk_62", u = "_lg_167fk_78", k = "_isIcon_167fk_81", i = "_md_167fk_85", x = "_sm_167fk_92", a = "_xs_167fk_99", d = "_xxs_167fk_106", b = "_xxxs_167fk_113", p = "_primary_167fk_123", w = "_fill_167fk_123", y = "_outline_167fk_154", m = "_blank_167fk_167", h = "_secondary_167fk_214", C = "_destructive_167fk_305", D = "_neutral_167fk_396", g = {
+const t = "_fullWidth_16rg3_3", n = "_button_16rg3_6", o = "_wrapper_16rg3_10", _ = "_buttonContent_16rg3_27", r = "_icon_16rg3_27", s = "_buttonArrow_16rg3_28", c = "_buttonText_16rg3_36", e = "_iconOnly_16rg3_53", l = "_buttonContentDropdown_16rg3_56", g = "_hasDropdown_16rg3_62", u = "_lg_16rg3_78", i = "_isIcon_16rg3_81", d = "_md_16rg3_85", x = "_sm_16rg3_92", a = "_xs_16rg3_99", p = "_xxs_16rg3_106", b = "_xxxs_16rg3_113", w = "_primary_16rg3_123", y = "_fill_16rg3_123", m = "_pressed_16rg3_127", f = "_outline_16rg3_154", h = "_blank_16rg3_167", C = "_secondary_16rg3_214", D = "_destructive_16rg3_305", k = "_neutral_16rg3_396", v = {
   fullWidth: t,
   button: n,
   wrapper: o,
   buttonContent: _,
-  icon: s,
-  buttonArrow: c,
-  buttonText: r,
-  iconOnly: f,
-  buttonContentDropdown: e,
-  hasDropdown: l,
+  icon: r,
+  buttonArrow: s,
+  buttonText: c,
+  iconOnly: e,
+  buttonContentDropdown: l,
+  hasDropdown: g,
   lg: u,
-  isIcon: k,
-  md: i,
+  isIcon: i,
+  md: d,
   sm: x,
   xs: a,
-  xxs: d,
+  xxs: p,
   xxxs: b,
-  primary: p,
-  fill: w,
-  outline: y,
-  blank: m,
-  secondary: h,
-  destructive: C,
-  neutral: D
+  primary: w,
+  fill: y,
+  pressed: m,
+  outline: f,
+  blank: h,
+  secondary: C,
+  destructive: D,
+  neutral: k
 };
 export {
-  m as blank,
+  h as blank,
   n as button,
-  c as buttonArrow,
+  s as buttonArrow,
   _ as buttonContent,
-  e as buttonContentDropdown,
-  r as buttonText,
-  g as default,
-  C as destructive,
-  w as fill,
+  l as buttonContentDropdown,
+  c as buttonText,
+  v as default,
+  D as destructive,
+  y as fill,
   t as fullWidth,
-  l as hasDropdown,
-  s as icon,
-  f as iconOnly,
-  k as isIcon,
+  g as hasDropdown,
+  r as icon,
+  e as iconOnly,
+  i as isIcon,
   u as lg,
-  i as md,
-  D as neutral,
-  y as outline,
-  p as primary,
-  h as secondary,
+  d as md,
+  k as neutral,
+  f as outline,
+  m as pressed,
+  w as primary,
+  C as secondary,
   x as sm,
   o as wrapper,
   a as xs,
-  d as xxs,
+  p as xxs,
   b as xxxs
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,10 +1,10 @@
 import { jsxs as z, jsx as r } from "react/jsx-runtime";
 import { useId as C } from "react";
 import n from "clsx";
-import o from "./Checkbox.module.scss.js";
 import { CheckmarkLargeIcon as I } from "../icons-v2/CheckmarkLargeIcon.js";
 import { MinusIcon as y } from "../icons-v2/MinusIcon.js";
 import { iconSizes as a } from "../icons-v2/constants.js";
+import o from "./Checkbox.module.scss.js";
 const N = (e) => e === "lg" ? "m" : "s", W = ({
   label: e,
   checked: c = !1,

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

@@ -1,17 +1,17 @@
-const c = "_checkboxWrapper_apc3k_3", e = "_disabled_apc3k_13", _ = "_input_apc3k_18", a = "_checkbox_apc3k_3", l = "_filled_apc3k_42", p = "_labelText_apc3k_46", t = {
-  checkboxWrapper: c,
-  disabled: e,
+const e = "_checkboxWrapper_1u1h6_3", c = "_disabled_1u1h6_13", _ = "_input_1u1h6_18", l = "_checkbox_1u1h6_3", t = "_filled_1u1h6_42", o = "_labelText_1u1h6_46", b = {
+  checkboxWrapper: e,
+  disabled: c,
   input: _,
-  checkbox: a,
-  filled: l,
-  labelText: p
+  checkbox: l,
+  filled: t,
+  labelText: o
 };
 export {
-  a as checkbox,
-  c as checkboxWrapper,
-  t as default,
-  e as disabled,
-  l as filled,
+  l as checkbox,
+  e as checkboxWrapper,
+  b as default,
+  c as disabled,
+  t as filled,
   _ as input,
-  p as labelText
+  o as labelText
 };

package/dist/components/DropdownList/DropdownList.js

@@ -1,4 +1,4 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as u } from "react/jsx-runtime";
 import w from "clsx";
 import r from "./DropdownList.module.scss.js";
 const a = ({
@@ -13,12 +13,12 @@ const a = ({
   onLoadMore: t,
   style: d
 }) => {
-  const f = (u) => {
-    const l = u.currentTarget;
+  const f = (g) => {
+    const l = g.currentTarget;
     l.scrollHeight - l.scrollTop - l.clientHeight < 48 && (t == null || t());
   };
-  return /* @__PURE__ */ g(
-    "ul",
+  return /* @__PURE__ */ u(
+    "div",
     {
       ref: p,
       id: c,

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js

@@ -0,0 +1,64 @@
+import { jsxs as f, Fragment as p, jsx as m } from "react/jsx-runtime";
+import { useRef as I, useState as E } from "react";
+import { createPortal as M } from "react-dom";
+import P from "../ImagePlaceholder.js";
+import d from "./ImageHoverPreview.module.scss.js";
+const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? document.body, g = (t, e, a) => Math.min(Math.max(t, e), a), j = ({ previewSize: t = w, ...e }) => {
+  const a = I(null), [s, c] = E(null);
+  return /* @__PURE__ */ f(p, { children: [
+    /* @__PURE__ */ m(
+      P,
+      {
+        ...e,
+        imageAreaRef: a,
+        onImageAreaMouseEnter: (l) => {
+          var i;
+          l.stopPropagation();
+          const o = (i = a.current) == null ? void 0 : i.getBoundingClientRect();
+          if (!o) return;
+          let n = o.right + u;
+          n + t > window.innerWidth - r && (n = o.left - t - u), n = g(
+            n,
+            r,
+            window.innerWidth - t - r
+          );
+          const h = g(
+            o.top + o.height / 2 - t / 2,
+            r,
+            window.innerHeight - t - r
+          );
+          c({ top: h, left: n });
+        },
+        onImageAreaMouseLeave: (l) => {
+          l.stopPropagation(), c(null);
+        }
+      }
+    ),
+    s && M(
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: d.preview,
+          style: {
+            top: s.top,
+            left: s.left,
+            width: t,
+            height: t
+          },
+          children: /* @__PURE__ */ m(
+            "img",
+            {
+              src: e.url,
+              alt: e.text ?? "",
+              className: d.previewImage
+            }
+          )
+        }
+      ),
+      x()
+    )
+  ] });
+};
+export {
+  j as ImageHoverPreview
+};

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.module.scss.js

@@ -0,0 +1,9 @@
+const e = "_preview_18mb5_3", p = "_previewImage_18mb5_12", r = {
+  preview: e,
+  previewImage: p
+};
+export {
+  r as default,
+  e as preview,
+  p as previewImage
+};