@eyesee/ui-components 0.1.3 → 0.3.0

package/README.md

@@ -14,12 +14,14 @@ npm install @eyesee/ui-components
 
 ### Peer dependencies
 
-Install these in your consuming application if not already present:
+npm 7+ installs these automatically when you add the package. Install manually only if your setup does not resolve peers:
 
 ```bash
-npm install react react-dom clsx react-hook-form react-toastify
+npm install react react-dom clsx react-hook-form react-toastify sass
 ```
 
+`sass` is required when you use the SCSS mixins entry point (`@eyesee/ui-components/mixins`) in your own stylesheets.
+
 ---
 
 ## Setup

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

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createIcon as e } from "./createIcon.js";
+const c = e(({ strokeColor: C, strokeWidth: o }) => /* @__PURE__ */ r(
+  "path",
+  {
+    d: "M3.34333 6.05143C3.08779 6.19712 2.87523 6.40768 2.72715 6.66185C2.57906 6.91602 2.50071 7.20477 2.5 7.49893V15.8323C2.5 16.7489 3.25 17.4989 4.16667 17.4989H12.5C13.125 17.4989 13.465 17.1781 13.75 16.6656M9.16667 8.33333H14.1667M11.6667 5.83333V10.8333M5.83333 4.7225C5.83333 4.13306 6.06749 3.56775 6.48429 3.15096C6.90109 2.73416 7.46639 2.5 8.05583 2.5H15.2775C15.5694 2.5 15.8584 2.55749 16.128 2.66918C16.3977 2.78087 16.6427 2.94458 16.849 3.15096C17.0554 3.35733 17.2191 3.60234 17.3308 3.87199C17.4425 4.14163 17.5 4.43064 17.5 4.7225V11.9442C17.5 12.236 17.4425 12.525 17.3308 12.7947C17.2191 13.0643 17.0554 13.3093 16.849 13.5157C16.6427 13.7221 16.3977 13.8858 16.128 13.9975C15.8584 14.1092 15.5694 14.1667 15.2775 14.1667H8.05583C7.46639 14.1667 6.90109 13.9325 6.48429 13.5157C6.06749 13.0989 5.83333 12.5336 5.83333 11.9442V4.7225Z",
+    stroke: C,
+    strokeWidth: o,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+export {
+  c as RectanglesAddIcon
+};

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

@@ -0,0 +1,107 @@
+import { jsxs as r, Fragment as n, jsx as i } from "react/jsx-runtime";
+import { createIcon as p } from "./createIcon.js";
+const s = p(({ strokeColor: e, strokeWidth: t }) => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M3.2002 25.6V9C3.2002 8.44772 3.64791 8 4.2002 8H27.8002C28.3525 8 28.8002 8.44772 28.8002 9V16",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 24H18",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 16H25.3866",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 24V20.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 24V20.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M18.5605 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M23.6807 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M22 24H30M26 20V28",
+      stroke: e,
+      strokeWidth: t,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] }));
+export {
+  s as ShelfAddIcon
+};

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

@@ -0,0 +1,117 @@
+import { jsxs as r, Fragment as n, jsx as i } from "react/jsx-runtime";
+import { createIcon as p } from "./createIcon.js";
+const s = p(({ strokeColor: t, strokeWidth: e }) => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M3.2002 25.6V9C3.2002 8.44772 3.64791 8 4.2002 8H27.8002C28.3525 8 28.8002 8.44772 28.8002 9V25.6",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 24H25.3866",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 16H25.3866",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 24V20.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 16V12.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 24V20.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 16V12.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M18.5605 24V20.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M18.5605 16V12.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M23.6807 24V20.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M23.6807 16V12.8",
+      stroke: t,
+      strokeWidth: e,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  )
+] }));
+export {
+  s as ShelfIcon
+};

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

@@ -0,0 +1,107 @@
+import { jsxs as r, Fragment as n, jsx as i } from "react/jsx-runtime";
+import { createIcon as p } from "./createIcon.js";
+const s = p(({ strokeColor: e, strokeWidth: t }) => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M3.2002 25.6V9C3.2002 8.44772 3.64791 8 4.2002 8H27.8002C28.3525 8 28.8002 8.44772 28.8002 9V16",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 24H18",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M6.61328 16H25.3866",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 24V20.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.32031 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 24V20.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M13.4404 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M18.5605 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M23.6807 16V12.8",
+      stroke: e,
+      strokeWidth: t,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M25.5 27.9998V28.0098M25.5 24.9998C25.9483 24.9983 26.3832 24.8466 26.735 24.5687C27.0868 24.2909 27.3352 23.903 27.4406 23.4673C27.5459 23.0315 27.5019 22.5731 27.3158 22.1652C27.1297 21.7574 26.8122 21.4238 26.414 21.2178C26.0162 21.014 25.5611 20.9508 25.1228 21.0385C24.6845 21.1262 24.2888 21.3596 24 21.7008",
+      stroke: e,
+      strokeWidth: t,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] }));
+export {
+  s as ShelfInfoIcon
+};

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

@@ -0,0 +1,15 @@
+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: o,
+    strokeWidth: r,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+export {
+  c as SquareAddIcon
+};

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

@@ -1,49 +1,50 @@
-import { jsx as m } from "react/jsx-runtime";
-import h from "clsx";
+import { jsx as h } from "react/jsx-runtime";
+import p from "clsx";
 import { getIconDimensions as x } from "./constants.js";
-import r from "./createIcon.module.scss.js";
-const N = (p, u = {}) => {
-  const { animatedByDefault: f = !1 } = u;
+import n from "./createIcon.module.scss.js";
+const j = (u, f = {}) => {
+  const { animatedByDefault: d = !1 } = f;
   return ({
-    iconSize: d = "m",
-    onClick: e = null,
-    fill: n = "none",
-    strokeColor: c = "currentColor",
-    strokeColorOnHover: s,
-    fillOnHover: t,
+    iconSize: y = "m",
+    onClick: r = null,
+    fill: t = "none",
+    strokeColor: s = "currentColor",
+    strokeColorOnHover: l,
+    fillOnHover: e,
     disabled: o,
-    animated: v = f
+    animated: g = d,
+    viewBoxSize: c
   }) => {
-    const { size: l, strokeWidth: y } = x(d), a = o && n !== "none" && n !== "transparent" ? "var(--color--icon--disabled--default)" : n, g = o && c !== "currentColor" ? "var(--color--icon--disabled--default)" : c, k = () => {
-      e && !o && e();
-    }, i = { width: l, height: l };
-    return /* @__PURE__ */ m(
+    const { size: a, strokeWidth: k } = x(y), i = o && t !== "none" && t !== "transparent" ? "var(--color--icon--disabled--default)" : t, v = o && s !== "currentColor" ? "var(--color--icon--disabled--default)" : s, C = () => {
+      r && !o && r();
+    }, m = { width: a, height: a }, I = c ? `0 0 ${c} ${c}` : "0 0 32 32";
+    return /* @__PURE__ */ h(
       "span",
       {
-        className: h(
-          r.iconWrapper,
-          o && r.disabled,
-          e && !o && r.clickable
+        className: p(
+          n.iconWrapper,
+          o && n.disabled,
+          r && !o && n.clickable
         ),
-        style: i,
-        onClick: k,
-        children: /* @__PURE__ */ m(
+        style: m,
+        onClick: C,
+        children: /* @__PURE__ */ h(
           "svg",
           {
-            className: h(r.svg, v && r.spinner),
-            viewBox: "0 0 32 32",
-            fill: a,
-            "data-stroke-on-hover": !!s,
-            "data-fill-on-hover": !!t,
+            className: p(n.svg, g && n.spinner),
+            viewBox: I,
+            fill: i,
+            "data-stroke-on-hover": !!l,
+            "data-fill-on-hover": !!e,
             style: {
-              ...i,
-              "--icon-stroke-hover": t ? "currentColor" : s,
-              "--icon-fill-hover": t || "transparent"
+              ...m,
+              "--icon-stroke-hover": e ? "currentColor" : l,
+              "--icon-fill-hover": e || "transparent"
             },
-            children: p({
-              strokeColor: g,
-              strokeWidth: y,
-              fill: a
+            children: u({
+              strokeColor: v,
+              strokeWidth: k,
+              fill: i
             })
           }
         )
@@ -52,5 +53,5 @@ const N = (p, u = {}) => {
   };
 };
 export {
-  N as createIcon
+  j as createIcon
 };