@prokodo/ui 0.0.32 → 0.0.34

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

@@ -1,98 +1,26 @@
 "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 { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Link } from "../link/Link.js";
-import { Icon } from "../icon/Icon.js";
+import { ButtonView } from "./Button.view.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,
+  const { loading, iconProps = {}, ...rest } = props;
+  const isIconOnly = typeof (iconProps == null ? void 0 : iconProps.name) === "string" && !props.title;
+  const finalIconProps = Boolean(loading) ? { name: void 0 } : iconProps;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Boolean(loading) && /* @__PURE__ */ jsx(Loading, { size: "xs" }),
+    /* @__PURE__ */ jsx(
+      ButtonView,
       {
-        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()
+        ...rest,
+        iconProps: finalIconProps,
+        isIconOnly: Boolean(isIconOnly),
+        LinkComponent: Link
       }
-    );
-  }
-  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 {

package/dist/components/button/Button.js

@@ -1,16 +1,16 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 import ButtonServer from "./Button.server.js";
 const loader = /* @__PURE__ */ __name(() => import("./Button.lazy.js"), "loader");
 if (typeof window !== "undefined") void loader();
 const LazyWrapper = typeof window !== "undefined" ? lazy(loader) : null;
-function Button({ priority, ...props }) {
+function Button({ priority = false, ...props }) {
   const interactive = !!props.onClick || !!props.onKeyDown || !!props.redirect;
   if (!interactive) return /* @__PURE__ */ jsx(ButtonServer, { ...props });
-  const Child = LazyWrapper ?? ((p) => /* @__PURE__ */ jsx(ButtonServer, { ...p }));
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ButtonServer, { ...props }), children: /* @__PURE__ */ jsx(Child, { ...props, priority }) });
+  const Fallback = /* @__PURE__ */ jsx("div", { "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: Fallback, children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props, priority }) : /* @__PURE__ */ jsx(Fragment, {}) });
 }
 __name(Button, "Button");
 export {

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

@@ -5,17 +5,18 @@ 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 ButtonWrapper(props) {
+function ButtonWrapper({
+  priority = false,
+  ...props
+}) {
   const hasInteraction = !!props.onClick || !!props.onKeyDown || !!props.redirect;
-  const lazy = Boolean(props == null ? void 0 : props.priority) ? false : true;
   const [visible, ref] = useHydrationReady({
-    enabled: hasInteraction && lazy,
-    priority: props.priority
+    enabled: hasInteraction && !priority
   });
-  if (hasInteraction && (visible || !lazy)) {
+  if (hasInteraction && (priority || visible)) {
     return /* @__PURE__ */ jsx(ButtonClient, { ...props });
   }
-  return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
+  return /* @__PURE__ */ jsx("div", { ref, "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
 }
 __name(ButtonWrapper, "ButtonWrapper");
 export {

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

@@ -1,73 +1,17 @@
 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 { jsx } from "react/jsx-runtime";
 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()
-      }
-    );
-  }
+import { ButtonView } from "./Button.view.js";
+function ButtonServer(p) {
+  var _a;
+  const isIconOnly = ((_a = p.iconProps) == null ? void 0 : _a.name) && !("title" in p && p.title);
   return /* @__PURE__ */ jsx(
-    "button",
+    ButtonView,
     {
-      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()
+      ...p,
+      isIconOnly: Boolean(isIconOnly),
+      LinkComponent: Link
     }
   );
 }

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

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Button.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Button");
+function ButtonView({
+  fullWidth,
+  color,
+  variant,
+  className,
+  contentClassName,
+  disabled,
+  redirect,
+  iconProps = {},
+  isIconOnly,
+  LinkComponent,
+  ...rest
+}) {
+  const isOutlined = variant === "outlined";
+  const iconName = iconProps == null ? void 0 : iconProps.name;
+  const iconMod = { "icon-only": isIconOnly };
+  const { title } = rest;
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconMod), ...iconProps }),
+    title
+  ] });
+  const variantNode = isOutlined ? /* @__PURE__ */ jsx("div", { className: bem("content", iconMod, contentClassName), children: inner }) : inner;
+  const common = {
+    id: rest.id,
+    "aria-label": title ?? void 0,
+    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),
+        ...iconMod
+      },
+      className
+    )
+  };
+  return redirect ? /* @__PURE__ */ jsx(LinkComponent, { ...common, disabled, href: redirect.href, children: variantNode }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...common,
+      disabled: Boolean(disabled),
+      tabIndex: redirect !== void 0 || Boolean(disabled) ? -1 : rest.tabIndex,
+      type: "button",
+      ...rest,
+      children: variantNode
+    }
+  );
+}
+__name(ButtonView, "ButtonView");
+export {
+  ButtonView
+};

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.32";
+const PROKODO_UI_VERSION = "0.0.34";
 export {
   PROKODO_UI_VERSION
 };

package/dist/hooks/useHydrationReady.js

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useRef, useState, useLayoutEffect } from "react";
 function useHydrationReady(opts = {}) {
-  const { enabled = true, threshold = 0.1, priority = false } = opts;
+  const { enabled = true, threshold = 0.1 } = opts;
   const ref = useRef(null);
-  const [visible, setVisible] = useState(() => {
+  const [visible, set] = useState(() => {
     var _a;
-    if (!enabled || !!priority || typeof window === "undefined") return !enabled;
+    if (!enabled || typeof window === "undefined") return !enabled;
     const box = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
     return !!box && box.top < window.innerHeight;
   });
@@ -15,7 +15,7 @@ function useHydrationReady(opts = {}) {
     const io = new IntersectionObserver(
       ([e]) => {
         if ((e == null ? void 0 : e.isIntersecting) === true) {
-          setVisible(true);
+          set(true);
           io.disconnect();
         }
       },