@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/avatar/Avatar.js

@@ -1,78 +1,86 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as d, useCallback as f } from "react";
-import { create as p } from "../../helpers/bem.js";
-import h from "./Avatar.module.scss.js";
-import { Image as I } from "../image/Image.js";
-import { Icon as u, getIconSize as N } from "../icon/Icon.js";
-import { Link as b } from "../link/Link.js";
-const t = p(h, "Avatar"), j = ({
-  className: n,
-  variant: o = "primary",
-  size: r = "sm",
-  image: e,
-  redirect: i,
-  ...a
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Avatar.module.scss.js";
+import { Image } from "../image/Image.js";
+import { Icon, getIconSize } from "../icon/Icon.js";
+import { Link } from "../link/Link.js";
+const bem = create(styles, "Avatar");
+const Avatar = /* @__PURE__ */ __name(({
+  className,
+  variant = "primary",
+  size = "sm",
+  image,
+  redirect,
+  ...props
 }) => {
-  const m = d(
+  const variantModifier = useMemo(
     () => ({
-      [o]: !!o
+      [variant]: !!variant
     }),
-    [o]
-  ), c = d(
+    [variant]
+  );
+  const sizeModifier = useMemo(
     () => ({
-      [`has-size-${r}`]: !!r
+      [`has-size-${size}`]: !!size
     }),
-    [r]
-  ), l = f(
-    () => /* @__PURE__ */ s(
+    [size]
+  );
+  const renderAvatar = useCallback(
+    () => /* @__PURE__ */ jsx(
       "div",
       {
-        ...a,
+        ...props,
         tabIndex: -1,
-        className: t(
+        className: bem(
           void 0,
           {
-            ...m,
-            ...c
+            ...variantModifier,
+            ...sizeModifier
           },
-          n
+          className
         ),
-        children: e ? /* @__PURE__ */ s(
-          I,
+        children: image ? /* @__PURE__ */ jsx(
+          Image,
           {
-            ...e,
-            className: t("image", void 0, e.className),
+            ...image,
+            className: bem("image", void 0, image.className),
             tabIndex: 0
           }
-        ) : /* @__PURE__ */ s(
-          u,
+        ) : /* @__PURE__ */ jsx(
+          Icon,
           {
-            className: t("icon", m),
+            className: bem("icon", variantModifier),
             name: "UserIcon",
-            size: N(r) * 2,
-            color: ["inherit", "white"].includes(o) ? void 0 : "white"
+            size: getIconSize(size) * 2,
+            color: !["inherit", "white"].includes(variant) ? "white" : void 0
           }
         )
       }
     ),
-    [c, m, n, e, o, r, a]
+    [sizeModifier, variantModifier, className, image, variant, size, props]
   );
-  return i ? /* @__PURE__ */ s(
-    b,
-    {
-      ...i,
-      className: t(
-        "link",
-        {
-          ...m,
-          ...c
-        },
-        i.className
-      ),
-      children: l()
-    }
-  ) : l();
-};
+  if (redirect) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...redirect,
+        className: bem(
+          "link",
+          {
+            ...variantModifier,
+            ...sizeModifier
+          },
+          redirect.className
+        ),
+        children: renderAvatar()
+      }
+    );
+  }
+  return renderAvatar();
+}, "Avatar");
 export {
-  j as Avatar
+  Avatar
 };

package/dist/components/avatar/Avatar.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", a = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Avatar": "prokodo-Avatar",
   "prokodo-Avatar--primary": "prokodo-Avatar--primary",
   "prokodo-Avatar--secondary": "prokodo-Avatar--secondary",
@@ -14,11 +16,11 @@ const o = "gradientMove", a = "fadeInKeyframe", r = {
   "prokodo-Avatar--has-size-xl": "prokodo-Avatar--has-size-xl",
   "prokodo-Avatar__image": "prokodo-Avatar__image",
   "prokodo-Avatar__link": "prokodo-Avatar__link",
-  gradientMove: o,
-  fadeInKeyframe: a
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  a as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/avatar/index.js

@@ -1,4 +1,4 @@
-import { Avatar as o } from "./Avatar.js";
+import { Avatar } from "./Avatar.js";
 export {
-  o as Avatar
+  Avatar
 };

package/dist/components/base-link/BaseLink.js

@@ -1,30 +1,42 @@
-import { jsx as c } from "react/jsx-runtime";
-import { isNull as r } from "../../helpers/validations.js";
-const x = ({
-  href: o,
-  children: s,
-  disabled: i,
-  linkComponent: e,
-  style: l,
-  target: d,
-  rel: m,
-  ...t
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isNull } from "../../helpers/validations.js";
+const BaseLink = /* @__PURE__ */ __name(({
+  href,
+  children,
+  disabled,
+  linkComponent: LinkComponent,
+  style,
+  target,
+  rel,
+  ...rest
 }) => {
-  const u = { pointerEvents: "none" }, n = o == null ? void 0 : o.startsWith("http"), v = t.download !== void 0, k = /^\w+:/.test(o), S = d ?? (n ? "_blank" : void 0), w = m ?? (n ? "noopener noreferrer" : void 0), a = r(i) ? void 0 : -1, p = r(i) ? l : { ...u, ...l };
-  return n || v || k || e === void 0 ? /* @__PURE__ */ c(
-    "a",
-    {
-      ...t,
-      href: o,
-      rel: w,
-      style: p,
-      tabIndex: a,
-      target: S,
-      children: s
-    }
-  ) : /* @__PURE__ */ c(e, { ...t, href: o, style: p, tabIndex: a, children: s });
-};
-x.displayName = "BaseLink";
+  const DISABLE_STYLES = { pointerEvents: "none" };
+  const isAbsolute = href == null ? void 0 : href.startsWith("http");
+  const isDownload = rest.download !== void 0;
+  const isAppUrl = /^\w+:/.test(href);
+  const computedTarget = target ?? (isAbsolute ? "_blank" : void 0);
+  const computedRel = rel ?? (isAbsolute ? "noopener noreferrer" : void 0);
+  const tabIndex = !isNull(disabled) ? -1 : void 0;
+  const linkStyle = !isNull(disabled) ? { ...DISABLE_STYLES, ...style } : style;
+  if (isAbsolute || isDownload || isAppUrl || LinkComponent === void 0) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        href,
+        rel: computedRel,
+        style: linkStyle,
+        tabIndex,
+        target: computedTarget,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LinkComponent, { ...rest, href, style: linkStyle, tabIndex, children });
+}, "BaseLink");
+BaseLink.displayName = "BaseLink";
 export {
-  x as BaseLink
+  BaseLink
 };

package/dist/components/base-link/index.js

@@ -1,4 +1,4 @@
-import { BaseLink as r } from "./BaseLink.js";
+import { BaseLink } from "./BaseLink.js";
 export {
-  r as BaseLink
+  BaseLink
 };

package/dist/components/button/Button.client.js

@@ -0,0 +1,100 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useMemo } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Button.module.scss.js";
+import { Link } from "../link/Link.js";
+import { Icon } from "../icon/Icon.js";
+import { Loading } from "../loading/Loading.js";
+const bem = create(styles, "Button");
+const mockEvent = {};
+const mockKeyDownEvent = {};
+function ButtonClient(props) {
+  const {
+    id,
+    fullWidth,
+    color = "primary",
+    iconProps = {},
+    loading,
+    variant = "contained",
+    className,
+    contentClassName,
+    disabled,
+    redirect,
+    onClick,
+    onKeyDown,
+    ...rest
+  } = props;
+  const uniqueId = useId();
+  const labelRef = useRef(null);
+  const ariaLabelId = `Button-${uniqueId}`;
+  const isOutlined = variant === "outlined";
+  const iconName = iconProps == null ? void 0 : iconProps.name;
+  const isIconOnly = iconName && !(props == null ? void 0 : props.title);
+  const iconModifier = useMemo(
+    () => ({
+      "icon-only": Boolean(isIconOnly)
+    }),
+    [isIconOnly]
+  );
+  const renderInnerContent = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs("span", { ref: labelRef, "aria-labelledby": ariaLabelId, className: bem("title"), children: [
+    iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconModifier), ...iconProps }),
+    props == null ? void 0 : props.title
+  ] }), "renderInnerContent");
+  const renderContent = /* @__PURE__ */ __name(() => Boolean(loading) ? /* @__PURE__ */ jsx(Loading, { size: "xs" }) : renderInnerContent(), "renderContent");
+  const renderVariant = /* @__PURE__ */ __name(() => isOutlined ? /* @__PURE__ */ jsx("div", { className: bem("content", iconModifier, contentClassName), children: renderContent() }) : renderContent(), "renderVariant");
+  if (redirect) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        disabled,
+        href: redirect.href,
+        className: bem(
+          void 0,
+          {
+            "has-fullWidth": Boolean(fullWidth),
+            [`has-variant-${variant}`]: true,
+            [`has-bg-${color}`]: variant === "contained",
+            [`has-text-${color}`]: variant === "text",
+            "is-disabled": Boolean(disabled),
+            ...iconModifier
+          },
+          className
+        ),
+        onClick: /* @__PURE__ */ __name(() => onClick == null ? void 0 : onClick(mockEvent), "onClick"),
+        onKeyDown: /* @__PURE__ */ __name(() => onKeyDown == null ? void 0 : onKeyDown(mockKeyDownEvent), "onKeyDown"),
+        children: renderVariant()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      color,
+      disabled: Boolean(disabled) || Boolean(loading),
+      id: `${ariaLabelId}${isString(id) ? ` ${id}` : ""}`,
+      tabIndex: redirect !== void 0 || Boolean(disabled) ? -1 : rest.tabIndex,
+      className: bem(
+        void 0,
+        {
+          "has-fullWidth": Boolean(fullWidth),
+          [`has-variant-${variant}`]: true,
+          [`has-bg-${color}`]: variant === "contained",
+          [`has-text-${color}`]: variant === "text",
+          "is-disabled": Boolean(disabled),
+          ...iconModifier
+        },
+        className
+      ),
+      children: renderVariant()
+    }
+  );
+}
+__name(ButtonClient, "ButtonClient");
+export {
+  ButtonClient as default
+};

package/dist/components/button/Button.js

@@ -1,84 +1,17 @@
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import { useId as v, useRef as w, useMemo as D } from "react";
-import { create as K } from "../../helpers/bem.js";
-import { isString as L } from "../../helpers/validations.js";
-import j from "./Button.module.scss.js";
-import { Link as E } from "../link/Link.js";
-import { Loading as M } from "../loading/Loading.js";
-import { Icon as O } from "../icon/Icon.js";
-const o = K(j, "Button"), R = {}, q = {}, J = ({
-  id: u,
-  fullWidth: f,
-  color: t = "primary",
-  iconProps: m = {},
-  loading: h,
-  variant: e = "contained",
-  className: B,
-  contentClassName: s,
-  disabled: i,
-  redirect: d,
-  ...n
-}) => {
-  const k = v(), N = w(null), x = `Button-${k}`, C = e === "outlined", $ = m == null ? void 0 : m.name, b = $ && !(n != null && n.title), c = D(
-    () => ({
-      "icon-only": !!b
-    }),
-    [b]
-  ), g = () => /* @__PURE__ */ r("span", { ref: N, "aria-labelledby": x, className: o("title"), children: [
-    $ && /* @__PURE__ */ l(O, { className: o("icon", c), ...m }),
-    n == null ? void 0 : n.title
-  ] }), y = () => h ? /* @__PURE__ */ l(M, { size: "xs" }) : g(), I = () => C ? /* @__PURE__ */ l("div", { className: o("content", c, s), children: y() }) : y();
-  return d ? /* @__PURE__ */ l(
-    E,
-    {
-      disabled: i,
-      href: d.href,
-      className: o(
-        void 0,
-        {
-          "has-fullWidth": !!f,
-          [`has-variant-${e}`]: !0,
-          [`has-bg-${t}`]: e === "contained",
-          [`has-text-${t}`]: e === "text",
-          "is-disabled": !!i,
-          ...c
-        },
-        B
-      ),
-      onClick: () => {
-        var a;
-        return (a = n == null ? void 0 : n.onClick) == null ? void 0 : a.call(n, R);
-      },
-      onKeyDown: () => {
-        var a;
-        return (a = n == null ? void 0 : n.onKeyDown) == null ? void 0 : a.call(n, q);
-      },
-      children: I()
-    }
-  ) : /* @__PURE__ */ l(
-    "button",
-    {
-      ...n,
-      color: t,
-      disabled: !!i || !!h,
-      id: `${x}${L(u) ? ` ${u}` : ""}`,
-      className: o(
-        void 0,
-        {
-          "has-fullWidth": !!f,
-          [`has-variant-${e}`]: !0,
-          [`has-bg-${t}`]: e === "contained",
-          [`has-text-${t}`]: e === "text",
-          "is-disabled": !!i,
-          ...c
-        },
-        B
-      ),
-      tabIndex: d !== void 0 || i ? -1 : (n == null ? void 0 : n.tabIndex) ?? void 0,
-      children: I()
-    }
-  );
-};
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy, Fragment } from "react";
+import ButtonServer from "./Button.server.js";
+const LazyWrapper = typeof window !== "undefined" ? (
+  /* webpackIgnore: true */
+  lazy(() => import("./Button.lazy.js"))
+) : null;
+const Button = /* @__PURE__ */ __name((props) => {
+  const interactive = !!props.onClick || !!props.onKeyDown || !!props.redirect;
+  if (!interactive) return /* @__PURE__ */ jsx(ButtonServer, { ...props });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ButtonServer, { ...props }), children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props }) : /* @__PURE__ */ jsx(Fragment, {}) });
+}, "Button");
 export {
-  J as Button
+  Button
 };

package/dist/components/button/Button.lazy.js

@@ -0,0 +1,20 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useHydrationReady } from "../../hooks/useHydrationReady.js";
+import ButtonClient from "./Button.client.js";
+import ButtonServer from "./Button.server.js";
+function ButtonClientWrapper(props) {
+  const hasInteraction = !!props.onClick || !!props.onKeyDown || !!props.redirect;
+  const [visible, ref] = useHydrationReady({ enabled: hasInteraction });
+  const shouldHydrate = hasInteraction && visible;
+  if (shouldHydrate) {
+    return /* @__PURE__ */ jsx(ButtonClient, { ...props });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
+}
+__name(ButtonClientWrapper, "ButtonClientWrapper");
+export {
+  ButtonClientWrapper as default
+};

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

@@ -1,4 +1,6 @@
-const o = "gradientMove", t = "fadeInKeyframe", n = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Button": "prokodo-Button",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
   "prokodo-Button--has-bg-secondary": "prokodo-Button--has-bg-secondary",
@@ -24,11 +26,11 @@ const o = "gradientMove", t = "fadeInKeyframe", n = {
   "prokodo-Button__link--icon-only": "prokodo-Button__link--icon-only",
   "prokodo-Button__content": "prokodo-Button__content",
   "prokodo-Button__content--icon-only": "prokodo-Button__content--icon-only",
-  gradientMove: o,
-  fadeInKeyframe: t
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  n as default,
-  t as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/button/Button.server.js

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Button.module.scss.js";
+import { Link } from "../link/Link.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Button");
+function ButtonServer(props) {
+  const {
+    fullWidth,
+    color = "primary",
+    iconProps = {},
+    variant = "contained",
+    className,
+    contentClassName,
+    disabled,
+    redirect
+  } = props;
+  const isOutlined = variant === "outlined";
+  const iconName = iconProps == null ? void 0 : iconProps.name;
+  const isIconOnly = iconName && !(props == null ? void 0 : props.title);
+  const iconModifier = {
+    "icon-only": Boolean(isIconOnly)
+  };
+  const renderInnerContent = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs("span", { className: bem("title"), children: [
+    iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconModifier), ...iconProps }),
+    props == null ? void 0 : props.title
+  ] }), "renderInnerContent");
+  const renderVariant = /* @__PURE__ */ __name(() => isOutlined ? /* @__PURE__ */ jsx("div", { className: bem("content", iconModifier, contentClassName), children: renderInnerContent() }) : renderInnerContent(), "renderVariant");
+  if (redirect) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        disabled,
+        href: redirect.href,
+        className: bem(
+          void 0,
+          {
+            "has-fullWidth": Boolean(fullWidth),
+            [`has-variant-${variant}`]: true,
+            [`has-bg-${color}`]: variant === "contained",
+            [`has-text-${color}`]: variant === "text",
+            "is-disabled": Boolean(disabled),
+            ...iconModifier
+          },
+          className
+        ),
+        children: renderVariant()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      disabled: Boolean(disabled),
+      type: "button",
+      className: bem(
+        void 0,
+        {
+          "has-fullWidth": Boolean(fullWidth),
+          [`has-variant-${variant}`]: true,
+          [`has-bg-${color}`]: variant === "contained",
+          [`has-text-${color}`]: variant === "text",
+          "is-disabled": Boolean(disabled),
+          ...iconModifier
+        },
+        className
+      ),
+      children: renderVariant()
+    }
+  );
+}
+__name(ButtonServer, "ButtonServer");
+export {
+  ButtonServer as default
+};

package/dist/components/button/index.js

@@ -1,4 +1,4 @@
-import { Button as r } from "./Button.js";
+import { Button } from "./Button.js";
 export {
-  r as Button
+  Button
 };