@layers-app/shared 0.2.5 → 0.2.6

package/dist/components/FilePicker/FilePickerUnsplash.js

@@ -1,94 +1,111 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useState as l, useMemo as x, useEffect as f, useCallback as S } from "react";
-import { useTranslation as P } from "react-i18next";
-import { Search01Icon as z } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as L } from "@hugeicons/react";
-import { Stack as b, TextInput as T, Loader as j, Box as C, SimpleGrid as D, AspectRatio as M, Button as q } from "@mantine/core";
-import { useDebouncedValue as w, useDebouncedCallback as B } from "@mantine/hooks";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useState as m, useMemo as z, useEffect as k, useCallback as T } from "react";
+import { useTranslation as L } from "react-i18next";
+import { Search01Icon as j } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as B } from "@hugeicons/react";
+import { Stack as C, TextInput as D, Loader as M, Box as c, SimpleGrid as N, AspectRatio as _, Text as b, Button as q } from "@mantine/core";
+import { useDebouncedValue as w, useDebouncedCallback as A } from "@mantine/hooks";
 import { NoData as F } from "../NoData/NoData.js";
-import { FilePickerSkeletonLoader as N } from "./FilePickerSkeletonLoader.js";
-import { useUnsplashPhotos as Q } from "./api/unsplashApi.js";
-import R from "./FilePicker.module.css.js";
-const k = (n) => (n || []).reduce((s, t) => (s[t.id] = t, s), {}), K = ({
-  onChange: n,
+import { FilePickerSkeletonLoader as Q } from "./FilePickerSkeletonLoader.js";
+import { useUnsplashPhotos as R } from "./api/unsplashApi.js";
+import y from "./FilePicker.module.css.js";
+const x = (l) => (l || []).reduce((s, o) => (s[o.id] = o, s), {}), X = ({
+  onChange: l,
   clientId: s
 }) => {
-  const { t } = P("ui"), [m, y] = l(""), [u] = w(m, 800), [I, p] = l(1), [d, h] = l({}), { data: r, isLoading: a } = Q(
+  const { t: o } = L("ui"), [u, v] = m(""), [h] = w(u, 800), [I, p] = m(1), [d, g] = m({}), { data: r, isLoading: n } = R(
     {
-      query: u,
+      query: h,
       page: I,
       per_page: 24,
       order_by: "popular"
     },
     s
-  ), i = x(
-    () => Object.values({ ...d, ...k(r?.items) }),
+  ), i = z(
+    () => Object.values({ ...d, ...x(r?.items) }),
     [d, r?.items]
-  ), g = B(() => {
+  ), f = A(() => {
     setTimeout(() => {
-      h((e) => ({ ...e, ...k(r?.items) }));
+      g((e) => ({ ...e, ...x(r?.items) }));
     }, 0);
   }, 100);
-  f(() => {
-    g();
-  }, [r?.items, g]), f(() => {
-    h({});
-  }, [u]);
-  const v = S(
+  k(() => {
+    f();
+  }, [r?.items, f]), k(() => {
+    g({});
+  }, [h]);
+  const S = T(
     (e) => {
-      y(e.currentTarget.value), p(1);
+      v(e.currentTarget.value), p(1);
     },
     []
   );
-  return /* @__PURE__ */ c(b, { gap: "sm", children: [
-    /* @__PURE__ */ o(
-      T,
+  return /* @__PURE__ */ a(C, { gap: "sm", children: [
+    /* @__PURE__ */ t(
+      D,
       {
-        leftSection: a ? /* @__PURE__ */ o(j, { size: 16 }) : /* @__PURE__ */ o(L, { size: 16, icon: z }),
+        leftSection: n ? /* @__PURE__ */ t(M, { size: 16 }) : /* @__PURE__ */ t(B, { size: 16, icon: j }),
         maxLength: 50,
-        placeholder: t("changeCover.searchImage"),
+        placeholder: o("changeCover.searchImage"),
         "data-autofocus": !0,
-        value: m,
-        onChange: v
+        value: u,
+        onChange: S
       }
     ),
-    /* @__PURE__ */ c(C, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
-      !!i.length && /* @__PURE__ */ c(b, { gap: 8, children: [
-        /* @__PURE__ */ o(D, { cols: 4, spacing: 10, children: i.map((e) => /* @__PURE__ */ o(
-          M,
-          {
-            onClick: () => n?.(e.urls.regular),
-            ratio: 120 / 65,
-            className: R.itemImage,
-            style: {
-              backgroundImage: `url(${e.urls.small})`
+    /* @__PURE__ */ a(c, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!i.length && /* @__PURE__ */ a(C, { gap: 8, children: [
+        /* @__PURE__ */ t(N, { cols: 4, spacing: 10, children: i.map((e) => /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(
+            _,
+            {
+              onClick: () => l?.(e.urls.regular),
+              ratio: 120 / 65,
+              className: y.itemImage,
+              style: {
+                backgroundImage: `url(${e.urls.small})`
+              }
             }
-          },
-          e.id
-        )) }),
-        r?.hasMore && /* @__PURE__ */ o(
+          ),
+          /* @__PURE__ */ t(c, { className: y.imageAuthor, children: /* @__PURE__ */ a(b, { truncate: !0, c: "gray", size: "xs", children: [
+            o("changeCover.photoBy"),
+            " ",
+            /* @__PURE__ */ t(
+              b,
+              {
+                component: "a",
+                inherit: !0,
+                href: e.user.links.html,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                onClick: (P) => P.stopPropagation(),
+                children: e.user.name
+              }
+            )
+          ] }) })
+        ] }, e.id)) }),
+        r?.hasMore && /* @__PURE__ */ t(
           q,
           {
             variant: "subtle",
-            loading: a,
+            loading: n,
             onClick: () => p((e) => e + 1),
-            children: t("loadMore")
+            children: o("loadMore")
           }
         )
       ] }),
-      !i.length && !a && /* @__PURE__ */ o(C, { pb: 16, children: /* @__PURE__ */ o(
+      !i.length && !n && /* @__PURE__ */ t(c, { pb: 16, children: /* @__PURE__ */ t(
         F,
         {
           size: 120,
           illustration: "noImage",
-          description: t("changeCover.noResult"),
+          description: o("changeCover.noResult"),
           titleProps: { size: "xs", c: "dimmed" }
         }
       ) }),
-      !i.length && a && /* @__PURE__ */ o(N, {})
+      !i.length && n && /* @__PURE__ */ t(Q, {})
     ] })
   ] });
 };
 export {
-  K as FilePickerUnsplash
+  X as FilePickerUnsplash
 };

package/dist/components/FormViewer/hooks/useFormGlobalTheme.js

@@ -1,6 +1,6 @@
 import { useMemo as r } from "react";
 import { generateColors as a } from "@mantine/colors-generator";
-import { createTheme as d, Flex as u, ActionIcon as l, ThemeIcon as m, Card as f, InputError as c, Progress as p, Select as x, NumberInput as z, Textarea as b, TextInput as P, Button as h, Text as R, Title as T, DEFAULT_THEME as g } from "@mantine/core";
+import { createTheme as d, DEFAULT_THEME as u, Flex as l, ActionIcon as m, ThemeIcon as f, Card as c, InputError as p, Progress as x, Select as z, NumberInput as b, Textarea as P, TextInput as h, Button as R, Text as T, Title as g } from "@mantine/core";
 import { DateInput as y } from "@mantine/dates";
 import { scopeCustomCss as F } from "../helpers/cssScoping.js";
 import { useFormViewerStore as I } from "../store/formStore.js";
@@ -9,7 +9,7 @@ const B = ({ innerId: t }) => {
   const { useStore: s } = I(), e = s(S), i = r(() => {
     const n = a(e?.primaryColor || ""), o = "custom";
     return d({
-      ...g,
+      ...u,
       fontFamily: `"${e.font?.fontFamily || "Roboto"}", sans-serif`,
       // fontWeight: theme.font?.fontWeight,
       headings: {
@@ -22,7 +22,7 @@ const B = ({ innerId: t }) => {
       },
       defaultRadius: e.borderRadius,
       components: {
-        Title: T.extend({
+        Title: g.extend({
           defaultProps: {
             style: {
               fontFamily: e.title?.fontFamily,
@@ -30,7 +30,7 @@ const B = ({ innerId: t }) => {
             }
           }
         }),
-        Text: R.extend({
+        Text: T.extend({
           defaultProps: {
             style: {
               fontFamily: e.font?.fontFamily,
@@ -38,7 +38,7 @@ const B = ({ innerId: t }) => {
             }
           }
         }),
-        Button: h.extend({
+        Button: R.extend({
           defaultProps: {
             color: o,
             size: e.size,
@@ -46,7 +46,7 @@ const B = ({ innerId: t }) => {
             radius: e.borderRadius
           }
         }),
-        TextInput: P.extend({
+        TextInput: h.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
@@ -60,60 +60,60 @@ const B = ({ innerId: t }) => {
             size: e.size
           }
         }),
-        Textarea: b.extend({
+        Textarea: P.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        NumberInput: z.extend({
+        NumberInput: b.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        Select: x.extend({
+        Select: z.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        Progress: p.extend({
+        Progress: x.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        InputError: c.extend({
+        InputError: p.extend({
           defaultProps: {
             color: o,
             size: e.size
           }
         }),
-        Card: f.extend({
+        Card: c.extend({
           defaultProps: {
             radius: e.borderRadius
           }
         }),
-        ThemeIcon: m.extend({
+        ThemeIcon: f.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        ActionIcon: l.extend({
+        ActionIcon: m.extend({
           defaultProps: {
             radius: e.borderRadius,
             color: o,
             size: e.size
           }
         }),
-        Flex: u.extend({
+        Flex: l.extend({
           defaultProps: {
             align: "center",
             gap: 8

package/dist/components/FormViewer/hooks/useInterpolateText.js

@@ -1,14 +1,14 @@
-import { useMemo as m, useCallback as d } from "react";
+import { useCallback as m, useMemo as d } from "react";
 import { isValid as f } from "date-fns";
 import { useFormViewerStore as v } from "../store/formStore.js";
 import { controlsReselect as h } from "../store/selectors.js";
 import { useSteps as g } from "./useCreateFormContext.js";
 const N = (i, o = !1) => {
   const a = b();
-  return m(() => o ? i || "" : a(i), [o, a, i]);
+  return d(() => o ? i || "" : a(i), [o, a, i]);
 }, b = () => {
   const { form: i } = g(), { useStore: o } = v(), a = o(h);
-  return d(
+  return m(
     (u) => {
       const p = a.reduce(
         (t, e) => {

package/dist/components/FormViewer/store/formStore.js

@@ -1,5 +1,5 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useState as a, useLayoutEffect as d, createContext as S, useContext as v } from "react";
+import { useState as a, useLayoutEffect as d, useContext as S, createContext as v } from "react";
 import { create as w } from "zustand";
 import { createFormStoreApi as x } from "./formStoreApi.js";
 const b = () => {
@@ -40,7 +40,7 @@ const b = () => {
     useStore: e,
     api: x(e)
   };
-}, u = S(null), P = ({
+}, u = v(null), P = ({
   children: e,
   editing: t = !1,
   preview: o = !1,
@@ -70,7 +70,7 @@ const b = () => {
     r.api
   ]), /* @__PURE__ */ p(u.Provider, { value: r, children: m ? e : null });
 }, A = () => {
-  const t = v(u) || window.globalFormStore;
+  const t = S(u) || window.globalFormStore;
   if (!t)
     throw new Error(
       "useFormViewerStore must be used within a FormStoreProvider"

package/dist/components/FormViewer/store/selectors.js

@@ -1,7 +1,7 @@
 import { createSelector as s } from "@reduxjs/toolkit";
 import { isEqual as y } from "lodash-es";
 import { DEFAULT_THEME as v } from "../constants/defaultTheme.js";
-import { mergeTheme as d, sortSteps as g } from "../helpers/helpers.js";
+import { sortSteps as g, mergeTheme as d } from "../helpers/helpers.js";
 import { getFirstStep as B } from "../helpers/steps.js";
 const D = v, M = s(
   [(t) => t.config.theme],

package/dist/components/GroupAvatar/index.d.ts

@@ -4,6 +4,7 @@ export interface GroupAvatarProps extends Omit<AvatarProps, 'src'>, Omit<React.C
     groupId?: string;
     groupName?: string;
     size?: number | string;
+    textSize?: number | string;
 }
 export declare const GroupAvatar: import("react").ForwardRefExoticComponent<GroupAvatarProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/GroupAvatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GroupAvatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAC9B,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,WAAW,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6GAgBvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GroupAvatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAC9B,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,WAAW,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,6GAiBvB,CAAC"}

package/dist/components/GroupAvatar/index.js

@@ -1,14 +1,15 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import i from "../../assets/svg/group_default_icon.svg.js";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import f from "../../assets/svg/group_default_icon.svg.js";
 import { UserAvatar as u } from "../UserAvatar/index.js";
-const s = f(
-  ({ groupIcon: r, groupId: a, groupName: o, size: t = 24, ...m }, e) => /* @__PURE__ */ p(
+const n = p(
+  ({ groupIcon: r, groupId: a, groupName: o, size: t = 24, ...m }, e) => /* @__PURE__ */ i(
     u,
     {
       ref: e,
+      variant: "light",
       user: {
-        avatar: r || i,
+        avatar: r || f,
         id: a || "",
         name: o,
         email: ""
@@ -18,7 +19,7 @@ const s = f(
     }
   )
 );
-s.displayName = "GroupAvatar";
+n.displayName = "GroupAvatar";
 export {
-  s as GroupAvatar
+  n as GroupAvatar
 };

package/dist/components/ImageCropper/ImageCropper.d.ts

@@ -0,0 +1,19 @@
+export interface ImageCropperProps {
+    src: string;
+    variant?: 'square' | 'rounded';
+    aspectRatio?: number;
+    minSize?: number;
+    maxSize?: number;
+    onCropComplete?: (croppedImage: Blob) => void;
+    onCropDataChange?: (data: CropData) => void;
+}
+export interface CropData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+}
+export declare const ImageCropper: ({ src, variant, aspectRatio, minSize, maxSize, onCropComplete, onCropDataChange, }: ImageCropperProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageCropper;
+//# sourceMappingURL=ImageCropper.d.ts.map

package/dist/components/ImageCropper/ImageCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AASD,eAAO,MAAM,YAAY,GAAI,oFAQ1B,iBAAiB,4CAuiBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}