@prokodo/ui 0.0.38 → 0.0.39

package/README.md

@@ -43,34 +43,74 @@ npm install @prokodo/ui
 
 ### 2. Use a component
 
-#### Next.js (RSC)
+#### React
 
 ```tsx
-import { Headline, type HeadlineProps } from "@prokodo/ui/button"
+import { Button, type ButtonProps } from "@prokodo/ui/button";
 
 export default function Layout() {
-  return <Headline>Click me</Headline>
+  // Renders to HTML on the server with zero‐JS.
+  // On the client, it will hydrate when scrolled into view or the user interacts.
+  return <Headline title="Click me"/>;
 }
 ```
 
-#### Next.js (Client optimized)
+
+#### Next.js (RSC + AIC, lazy‐hydrate when visible/interacted)
 
 ```tsx
-import { HeadlineClient, type HeadlineProps } from "@prokodo/ui/button"
+import { Button, type ButtonProps } from "@prokodo/ui/button";
 
 export default function Layout() {
-  return <HeadlineClient>Click me</HeadlineClient>
+  // Renders to HTML on the server with zero‐JS.
+  // On the client, it will hydrate when scrolled into view or the user interacts.
+  return <Headline title="Click me"/>;
 }
 ```
 
-#### Next.js (Client non-optimized, means RSC only)
+#### Next.js (RSC + AIC, force immediate hydration with priority)
 
 ```tsx
-"use client"
-import { Headline as UIHeadline, type HeadlineProps } from "@prokodo/ui/button"
-import { type FC, memo } from "react"
+import { Button, type ButtonProps } from "@prokodo/ui/button";
+
+export default function AboveTheFoldHero() {
+  // Because this lives above the fold, we want it to hydrate right away:
+  return <Button priority title="Welcome to prokodo"/>;
+}
+```
+
+#### Next.js ("use client" wrapper, immediate hydration - above the fold)
+
+```tsx
+"use client";
+
+import { Button, type ButtonProps } from "@prokodo/ui/button";
+import { type FC, memo } from "react";
+
+// In a pure‐client file, you can wrap the AIC export.
+// The `priority` prop here ensures hydration runs immediately when mounted.
+export const HeadlineClient: FC<ButtonProps> = memo((props) => {
+  return <Button {...props} priority />;
+});
+```
+
+#### Next.js (hydrate on visibility only, default behavior)
 
-export const Headline: FC<HeadlineProps> = memo(props => <UIHeadline {...props} />)
+```tsx
+import { Headline, type ButtonProps } from "@prokodo/ui/button";
+
+export default function GalleryPage() {
+  return (
+    <div style={{ height: "200vh" }}>
+      <p>Keep scrolling…</p>
+      <div style={{ marginTop: "100vh" }}>
+        {/* This will render as HTML on the server;
+            on the client, it only hydrates when this element scrolls into view. */}
+        <Button title="I hydrate when you see me"/>
+      </div>
+    </div>
+  );
+}
 ```
 
 ## 📦 Available Components
@@ -83,50 +123,107 @@ export const Headline: FC<HeadlineProps> = memo(props => <UIHeadline {...props}
 
 > If RSC and client have ✅-symbol means available as RSC (<[ComponentName] />) & extra client export (<[ComponentName]Client />)
 
-| Komponente             | 🧠 RSC-Compatible (`app/layout.tsx`) | 💡 SSR-Compatible (`"use client"`) |
-|------------------------|:------------------------------------:|:----------------------------------:|
-| Accordion              | ❌                                   | ✅                                 |
-| Animated               | ❌                                   | ✅                                 |
-| AnimatedText           | ❌                                   | ✅                                 |
-| Avatar                 | ❌                                   | ✅                                 |
-| BaseLink               | ❌                                   | ✅                                 |
-| Button                 | ❌                                   | ✅                                 |
-| Calendly               | ❌                                   | ✅                                 |
-| Card                   | ❌                                   | ✅                                 |
-| Carousel               | ❌                                   | ✅                                 |
-| Chip                   | ❌                                   | ✅                                 |
-| DatePicker             | ❌                                   | ✅                                 |
-| Dialog                 | ❌                                   | ✅                                 |
-| Drawer                 | ❌                                   | ✅                                 |
-| Form                   | ❌                                   | ✅                                 |
-| FormResponse           | ✅                                   | –                                  |
-| Grid                   | ✅                                   | –                                  |
-| GridRow                | ✅                                   | –                                  |
-| Headline               | ✅                                   | ✅                                 |
-| Icon                   | ✅                                   | –                                  |
-| Image                  | ✅                                   | –                                  |
-| ImageText              | ❌                                   | ✅                                 |
-| Input                  | ❌                                   | ✅                                 |
-| InputOTP               | ❌                                   | ✅                                 |
-| Label                  | ✅                                   | –                                  |
-| Link                   | ❌                                   | ✅                                 |
-| List                   | ✅                                   | –                                  |
-| Loading                | ✅                                   | –                                  |
-| Lottie                 | ❌                                   | ✅                                 |
-| Map                    | ❌                                   | ✅                                 |
-| PostItem               | ✅                                   | –                                  |
-| PostTeaser             | ✅                                   | –                                  |
-| PostWidget             | ✅                                   | –                                  |
-| PostWidgetCarousel     | ❌                                   | ✅                                 |
-| Quote                  | ✅                                   | –                                  |
-| RichText               | ✅                                   | –                                  |
-| Select                 | ❌                                   | ✅                                 |
-| Skeleton               | ✅                                   | –                                  |
-| Slider                 | ❌                                   | ✅                                 |
-| Stepper                | ❌                                   | ✅                                 |
-| Switch                 | ❌                                   | ✅                                 |
-| Table                  | ✅                                   | –                                  |
-| Teaser                 | ❌                                   | ✅                                 |
+## 📦 Available Components
+
+### Compatibility of the components
+
+✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
+– = RSC (AIC) only; no client‐side bundle. (Best practice: Use it only in RSC)
+
+| Component             | ✅ AIC-Compatible (RSC + Client) | ✅ SSR-Compatible (`"use client"`) |
+|-----------------------|:--------------------------------:|:---------------------------------:|
+| Accordion             | ✅                               | ✅                                 |
+| Animated              | ✅                               | ✅                                 |
+| AnimatedText          | ✅                               | ✅                                 |
+| Avatar                | ✅                               | ✅                                 |
+| BaseLink              | ✅                               | ✅                                 |
+| Button                | ✅                               | ✅                                 |
+| Calendly              | ✅                               | ✅                                 |
+| Card                  | ✅                               | ✅                                 |
+| Carousel              | ✅                               | ✅                                 |
+| Chip                  | ✅                               | ✅                                 |
+| DatePicker            | ✅                               | ✅                                 |
+| Dialog                | ✅                               | ✅                                 |
+| Drawer                | ✅                               | ✅                                 |
+| Form                  | ✅                               | ✅                                 |
+| FormResponse          | ✅                               | –                                  |
+| Grid/GridRow          | ✅                               | –                                  |
+| Headline              | ✅                               | -                                  |
+| Icon                  | ✅                               | –                                  |
+| Image                 | ✅                               | –                                  |
+| ImageText             | ✅                               | -                                  |
+| Input                 | ✅                               | ✅                                 |
+| Label                 | ✅                               | –                                  |
+| Link                  | ✅                               | ✅                                 |
+| List                  | ✅                               | –                                  |
+| Loading               | ✅                               | –                                  |
+| Lottie                | ❌                               | ✅                                 |
+| Map                   | ❌                               | ✅                                 |
+| PostItem              | ❌ (Experimental - Coming soon)  | –                                  |
+| PostTeaser            | ❌ (Experimental - Coming soon)  | –                                  |
+| PostWidget            | ❌ (Experimental - Coming soon)  | –                                  |
+| PostWidgetCarousel    | ❌ (Experimental - Coming soon)  | -                                  |
+| Quote                 | ✅                               | –                                  |
+| RichText              | ✅                               | ✅                                 |
+| Select                | ✅                               | ✅                                 |
+| SideNav               | ✅                               | ✅                                 |
+| Skeleton              | ✅                               | –                                  |
+| Slider                | ✅                               | ✅                                 |
+| Stepper               | ✅                               | ✅                                 |
+| Switch                | ✅                               | ✅                                 |
+| Table                 | ✅                               | –                                  |
+| Teaser                | ✅                               | -                                  |
+
+## How to create my own Island Component?
+
+### 1. Create your island component (Navbar.tsx):
+
+Island architecture lets you render components on the server and hydrate them on the client only when needed.
+
+```tsx
+import { createIsland } from '@prokodo/ui/createIsland';
+import { NavbarServer } from './Navbar.server';
+
+import type { NavbarProps } from './Navbar.model';
+
+export const Navbar = createIsland<NavbarProps>({
+  name: 'Navbar',
+  Server: NavbarServer,
+  loadLazy: () => import('./Navbar.lazy'),
+
+  // Optional: Force client-side hydration as soon as someone uses an action
+  // We are automatically recognizing onChange, onKeyDown, ... events. Only needed for custom attributes.
+  isInteractive: (p: NavbarProps) => p.customEvent === true,
+});
+
+```
+
+### 2. Create your lazy wrapper (Navbar.lazy):
+
+```tsx
+'use client'
+import { createLazyWrapper } from '@prokodo/ui/createLazyWrapper';
+
+import { NavbarClient } from './Navbar.client';
+import { NavbarServer } from './Navbar.server';
+
+import type { NavbarProps } from './Navbar.model';
+
+export default createLazyWrapper<NavbarProps>({
+  name: 'Navbar',
+  Client: NavbarClient,
+  Server: NavbarServer,
+
+  // Optional: Defer hydration until the component becomes visible in the viewport (Default: true)
+  // Can be controlled by priority attribute.
+  hydrateOnVisible: false,
+
+  // Optional: Force client-side hydration as soon as someone uses an action.
+  // We are automatically recognizing onChange, onKeyDown, ... events. Only needed for custom attributes.
+  isInteractive: (p: NavbarProps) => p.customEvent === true,
+});
+
+```
 
 ## 🎯 Next steps
 
@@ -137,8 +234,6 @@ export const Headline: FC<HeadlineProps> = memo(props => <UIHeadline {...props}
 
 ## 📘 Documentation
 
-> Notice: Currently are not all components in Storybook available
-
 Explore all components and examples in the official Storybook:
 
 👉 https://ui.prokodo.com

package/dist/_virtual/default.js

@@ -0,0 +1,4 @@
+var _default = {};
+export {
+  _default as __exports
+};

package/dist/_virtual/default2.js

@@ -0,0 +1,4 @@
+var _default = {};
+export {
+  _default as __exports
+};

package/dist/_virtual/index.js

@@ -1,7 +1,5 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requirePropTypes } from "../node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js";
-var propTypesExports = /* @__PURE__ */ requirePropTypes();
-const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
+import { __require as requireLib } from "../node_modules/.pnpm/xss@1.0.15/node_modules/xss/lib/index.js";
+var libExports = /* @__PURE__ */ requireLib();
 export {
-  PropTypes as default
+  libExports as l
 };

package/dist/_virtual/index2.js

@@ -1,4 +1,4 @@
-var propTypes = { exports: {} };
+var lib = { exports: {} };
 export {
-  propTypes as __module
+  lib as __module
 };

package/dist/_virtual/index3.js

@@ -1,4 +1,4 @@
-var reactIs = { exports: {} };
+var lib = { exports: {} };
 export {
-  reactIs as __module
+  lib as __module
 };

package/dist/_virtual/parser.js

@@ -0,0 +1,4 @@
+var parser = {};
+export {
+  parser as __exports
+};

package/dist/components/accordion/Accordion.client.js

@@ -0,0 +1,30 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { AccordionView } from "./Accordion.view.js";
+function AccordionClient(props) {
+  const { expanded, onChange, ...rest } = props;
+  const [expandedIndex, setExpandedIndex] = useState(expanded);
+  const handleToggle = useCallback(
+    (index, e) => {
+      const next = expandedIndex === index ? null : index;
+      setExpandedIndex(next);
+      onChange == null ? void 0 : onChange(index, e, next !== null);
+    },
+    [expandedIndex, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    AccordionView,
+    {
+      ...rest,
+      expandedIndex,
+      onToggle: handleToggle
+    }
+  );
+}
+__name(AccordionClient, "AccordionClient");
+export {
+  AccordionClient as default
+};

package/dist/components/accordion/Accordion.js

@@ -1,123 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import { isNull } from "../../helpers/validations.js";
-import styles from "./Accordion.module.scss.js";
-import { Headline } from "../headline/Headline.server.js";
-import { Animated } from "../animated/Animated.js";
-import { Button } from "../button/Button.js";
-import { Icon } from "../icon/Icon.js";
-const bem = create(styles, "Accordion");
-const Accordion = /* @__PURE__ */ __name(({
-  id,
-  expanded,
-  className,
-  variant = "primary",
-  titleOptions,
-  iconProps,
-  items,
-  onChange,
-  ...props
-}) => {
-  const [expandedIndex, setExpandedIndex] = useState(expanded);
-  const handleChange = useCallback(
-    (index, event) => {
-      const newIndex = expandedIndex === index ? null : index;
-      setExpandedIndex(newIndex);
-      onChange(index, event, newIndex !== null);
-    },
-    [expandedIndex, onChange]
-  );
-  const renderIcon = useCallback(
-    (name, color, hidden) => /* @__PURE__ */ jsx(
-      Icon,
-      {
-        className: bem("icon", { "is-hidden": Boolean(hidden) }),
-        color,
-        name,
-        size: "sm",
-        ...iconProps
-      }
-    ),
-    [iconProps]
-  );
-  return /* @__PURE__ */ jsx("div", { className: bem(void 0, { [variant]: true }, className), ...props, children: items.map((item, index) => {
-    const {
-      className: itemClassName,
-      title,
-      renderHeader,
-      renderContent,
-      actions
-    } = item;
-    const accId = `${id}-${item.title}`;
-    const isExpanded = expandedIndex === index;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: bem(
-          "item",
-          { "is-expanded": isExpanded },
-          itemClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-controls": `${accId}-content`,
-              "aria-expanded": isExpanded,
-              className: bem("header", { "is-expanded": isExpanded }),
-              id: `${accId}-header`,
-              role: "button",
-              tabIndex: 0,
-              onClick: /* @__PURE__ */ __name((e) => handleChange(index, e), "onClick"),
-              onKeyDown: /* @__PURE__ */ __name((e) => {
-                if (e.key === "Enter" || e.key === " ") handleChange(index, e);
-              }, "onKeyDown"),
-              children: [
-                !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    className: bem("title", { "is-expanded": isExpanded }),
-                    size: "sm",
-                    type: "h3",
-                    ...(item == null ? void 0 : item.titleOptions) ?? titleOptions,
-                    children: title
-                  }
-                ),
-                renderIcon("PlusSignIcon", "primary", isExpanded),
-                renderIcon("MinusSignIcon", "white", !isExpanded)
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-labelledby": `${accId}-header`,
-              className: bem("content", { "is-expanded": isExpanded }),
-              hidden: !isExpanded,
-              id: `${accId}-content`,
-              role: "region",
-              children: [
-                !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
-                actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    ...action
-                  },
-                  `${accId}-action-${action.id}`
-                )) })
-              ]
-            }
-          )
-        ]
-      },
-      accId
-    );
-  }) });
-}, "Accordion");
-Accordion.displayName = "Accordion";
+import { createIsland } from "../../helpers/createIsland.js";
+import AccordionServer from "./Accordion.server.js";
+const Accordion = createIsland({
+  name: "Accordion",
+  Server: AccordionServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Accordion.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
 export {
   Accordion
 };

package/dist/components/accordion/Accordion.lazy.js

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import AccordionClient from "./Accordion.client.js";
+import AccordionServer from "./Accordion.server.js";
+const Accordion_lazy = createLazyWrapper({
+  name: "Accordion",
+  Client: AccordionClient,
+  Server: AccordionServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Accordion_lazy as default
+};

package/dist/components/accordion/Accordion.server.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { AccordionView } from "./Accordion.view.js";
+function AccordionServer(props) {
+  return /* @__PURE__ */ jsx(
+    AccordionView,
+    {
+      ...props,
+      expandedIndex: props.expanded ?? null,
+      onToggle: void 0
+    }
+  );
+}
+__name(AccordionServer, "AccordionServer");
+export {
+  AccordionServer as default
+};

package/dist/components/accordion/Accordion.view.js

@@ -0,0 +1,102 @@
+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 { isNull } from "../../helpers/validations.js";
+import styles from "./Accordion.module.scss.js";
+import { Headline } from "../headline/Headline.js";
+import { Animated } from "../animated/Animated.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Accordion");
+function AccordionView({
+  id,
+  variant = "primary",
+  className,
+  items,
+  expandedIndex,
+  onToggle,
+  titleOptions,
+  iconProps,
+  ...domRest
+}) {
+  return /* @__PURE__ */ jsx("div", { ...domRest, className: bem(void 0, { [variant]: true }, className), children: items.map((item, index) => {
+    const { title, renderHeader, renderContent, actions, className: itemCls } = item;
+    const accId = `${id}-${title}`;
+    const isExpanded = expandedIndex === index;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: bem("item", { "is-expanded": isExpanded }, itemCls),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-controls": `${accId}-content`,
+              "aria-expanded": isExpanded,
+              className: bem("header", { "is-expanded": isExpanded }),
+              id: `${accId}-header`,
+              role: "button",
+              tabIndex: 0,
+              onClick: onToggle ? (e) => onToggle(index, e) : void 0,
+              onKeyDown: onToggle ? (e) => {
+                if (e.key === "Enter" || e.key === " ") onToggle(index, e);
+              } : void 0,
+              children: [
+                !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
+                  Headline,
+                  {
+                    className: bem("title", { "is-expanded": isExpanded }),
+                    size: "sm",
+                    type: "h3",
+                    ...item.titleOptions ?? titleOptions,
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: bem("icon", { "is-hidden": isExpanded }),
+                    color: "primary",
+                    name: "PlusSignIcon",
+                    size: "sm",
+                    ...iconProps
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: bem("icon", { "is-hidden": !isExpanded }),
+                    color: "white",
+                    name: "MinusSignIcon",
+                    size: "sm",
+                    ...iconProps
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-labelledby": `${accId}-header`,
+              className: bem("content", { "is-expanded": isExpanded }),
+              hidden: !isExpanded,
+              id: `${accId}-content`,
+              role: "region",
+              children: [
+                !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
+                actions !== void 0 && (actions == null ? void 0 : actions.length) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action }, `${accId}-action-${action.id}`)) }) : null
+              ]
+            }
+          )
+        ]
+      },
+      accId
+    );
+  }) });
+}
+__name(AccordionView, "AccordionView");
+export {
+  AccordionView
+};

package/dist/components/animated/Animated.client.js

@@ -0,0 +1,49 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { isNumber } from "../../helpers/validations.js";
+import { AnimatedView } from "./Animated.view.js";
+function AnimatedClient(props) {
+  const {
+    delay = 0,
+    onAnimate,
+    disabled,
+    speed,
+    animation,
+    className,
+    children,
+    ...domRest
+  } = props;
+  const [isVisible, setVisible] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (Boolean(disabled)) return;
+    timeoutRef.current = window.setTimeout(() => {
+      setVisible(true);
+      onAnimate == null ? void 0 : onAnimate(true);
+    }, delay);
+    return () => {
+      if (timeoutRef.current !== null && isNumber(timeoutRef.current)) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [delay, disabled, onAnimate]);
+  return /* @__PURE__ */ jsx(
+    AnimatedView,
+    {
+      animation,
+      className,
+      disabled,
+      isVisible,
+      speed,
+      ...domRest,
+      children
+    }
+  );
+}
+__name(AnimatedClient, "AnimatedClient");
+export {
+  AnimatedClient as default
+};