@prokodo/ui 0.0.52 → 0.0.53

package/README.md

@@ -39,6 +39,7 @@ Adaptive Island Components (AIC) are fully modular and optimized for modern fram
 Each component is built for **lazy loading**, works seamlessly with **React Server Components (RSC)**, and can be **tree-shaken** out when unused.
 
 **Total bundle (all components): ~195 kB gzipped**
+
 - **Only 5–20 kB** are typically loaded per page
 - **Zero-JS on initial render** for most components
 - **Hydration is deferred** until interaction or visibility
@@ -65,58 +66,57 @@ npm install @prokodo/ui
 #### React
 
 ```tsx
-import { Button, type ButtonProps } from "@prokodo/ui/button";
+import { Button, type ButtonProps } from "@prokodo/ui/button"
 
 export default function Layout() {
   // Renders to HTML on the server with zero‐JS.
   // On the client, it will hydrate when scrolled into view or the user interacts.
-  return <Button title="Click me"/>;
+  return <Button title="Click me" />
 }
 ```
 
-
 #### Next.js (RSC + AIC, lazy‐hydrate when visible/interacted)
 
 ```tsx
-import { Button, type ButtonProps } from "@prokodo/ui/button";
+import { Button, type ButtonProps } from "@prokodo/ui/button"
 
 export default function Layout() {
   // Renders to HTML on the server with zero‐JS.
   // On the client, it will hydrate when scrolled into view or the user interacts.
-  return <Button title="Click me"/>;
+  return <Button title="Click me" />
 }
 ```
 
 #### Next.js (RSC + AIC, force immediate hydration with priority)
 
 ```tsx
-import { Button, type ButtonProps } from "@prokodo/ui/button";
+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"/>;
+  return <Button priority title="Welcome to prokodo" />
 }
 ```
 
 #### Next.js ("use client" wrapper, immediate hydration - above the fold)
 
 ```tsx
-"use client";
+"use client"
 
-import { Button, type ButtonProps } from "@prokodo/ui/button";
-import { type FC, memo } from "react";
+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 />;
-});
+export const HeadlineClient: FC<ButtonProps> = memo(props => {
+  return <Button {...props} priority />
+})
 ```
 
 #### Next.js (hydrate on visibility only, default behavior)
 
 ```tsx
-import { Headline, type ButtonProps } from "@prokodo/ui/button";
+import { Headline, type ButtonProps } from "@prokodo/ui/button"
 
 export default function GalleryPage() {
   return (
@@ -125,10 +125,10 @@ export default function GalleryPage() {
       <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"/>
+        <Button title="I hydrate when you see me" />
       </div>
     </div>
-  );
+  )
 }
 ```
 
@@ -139,52 +139,52 @@ export default function GalleryPage() {
 - ✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also be used as a client‐only entry.
 - \- = RSC (AIC) only; no client‐side bundle needed. (Usable in both, but best practice to use in RSC only)
 
-| Component             | ✅ AIC (RSC + optional client)   | ✅ SSR-Compatible (`"use client"`) |
-|-----------------------|:--------------------------------:|:---------------------------------:|
-| Accordion             | ✅                               | ✅                                 |
-| Animated              | ✅                               | ✅                                 |
-| AnimatedText          | ✅                               | ✅                                 |
-| Avatar                | ✅                               | ✅                                 |
-| BaseLink              | ✅                               | ✅                                 |
-| Button                | ✅                               | ✅                                 |
-| Calendly              | ✅                               | ✅                                 |
-| Card                  | ✅                               | ✅                                 |
-| Carousel              | ✅                               | ✅                                 |
-| Chip                  | ✅                               | ✅                                 |
-| DatePicker            | ✅                               | ✅                                 |
-| Dialog                | ✅                               | ✅                                 |
-| Drawer                | ✅                               | ✅                                 |
-| DynamicList           | ✅                               | ✅                                 |
-| 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)  | -                                  |
-| ProgressBar           | ✅                               | ✅                                 |
-| Quote                 | ✅                               | –                                  |
-| RichText              | ✅                               | ✅                                 |
-| Select                | ✅                               | ✅                                 |
-| SideNav               | ✅                               | ✅                                 |
-| Skeleton              | ✅                               | –                                  |
-| Slider                | ✅                               | ✅                                 |
-| Snackbar & Provider   | ✅                               | ✅                                 |
-| Stepper               | ✅                               | ✅                                 |
-| Switch                | ✅                               | ✅                                 |
-| Table                 | ✅                               | –                                  |
-| Teaser                | ✅                               | -                                  |
+| Component           | ✅ AIC (RSC + optional client) | ✅ SSR-Compatible (`"use client"`) |
+| ------------------- | :----------------------------: | :--------------------------------: |
+| Accordion           |               ✅               |                 ✅                 |
+| Animated            |               ✅               |                 ✅                 |
+| AnimatedText        |               ✅               |                 ✅                 |
+| Avatar              |               ✅               |                 ✅                 |
+| BaseLink            |               ✅               |                 ✅                 |
+| Button              |               ✅               |                 ✅                 |
+| Calendly            |               ✅               |                 ✅                 |
+| Card                |               ✅               |                 ✅                 |
+| Carousel            |               ✅               |                 ✅                 |
+| Chip                |               ✅               |                 ✅                 |
+| DatePicker          |               ✅               |                 ✅                 |
+| Dialog              |               ✅               |                 ✅                 |
+| Drawer              |               ✅               |                 ✅                 |
+| DynamicList         |               ✅               |                 ✅                 |
+| Form                |               ✅               |                 ✅                 |
+| FormResponse        |               ✅               |                 –                  |
+| Grid/GridRow        |               ✅               |                 –                  |
+| Headline            |               ✅               |                 -                  |
+| Icon                |               ✅               |                 –                  |
+| Image               |               ✅               |                 –                  |
+| ImageText           |               ✅               |                 -                  |
+| Input               |               ✅               |                 ✅                 |
+| Label               |               ✅               |                 –                  |
+| Link                |               ✅               |                 ✅                 |
+| List                |               ✅               |                 –                  |
+| Loading             |               ✅               |                 –                  |
+| Lottie              |               ❌               |                 ✅                 |
+| Map                 |               ❌               |                 ✅                 |
+| PostItem            |               ✅               |                 ✅                 |
+| PostTeaser          |               ✅               |                 ✅                 |
+| PostWidget          |               ✅               |                 ✅                 |
+| PostWidgetCarousel  |               ✅               |                 ✅                 |
+| ProgressBar         |               ✅               |                 ✅                 |
+| Quote               |               ✅               |                 –                  |
+| RichText            |               ✅               |                 ✅                 |
+| Select              |               ✅               |                 ✅                 |
+| SideNav             |               ✅               |                 ✅                 |
+| Skeleton            |               ✅               |                 –                  |
+| Slider              |               ✅               |                 ✅                 |
+| Snackbar & Provider |               ✅               |                 ✅                 |
+| Stepper             |               ✅               |                 ✅                 |
+| Switch              |               ✅               |                 ✅                 |
+| Table               |               ✅               |                 –                  |
+| Teaser              |               ✅               |                 -                  |
 
 ## How to create my own Island Component?
 
@@ -193,36 +193,35 @@ export default function GalleryPage() {
 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 { createIsland } from "@prokodo/ui/createIsland"
+import { NavbarServer } from "./Navbar.server"
 
-import type { NavbarProps } from './Navbar.model';
+import type { NavbarProps } from "./Navbar.model"
 
 export const Navbar = createIsland<NavbarProps>({
-  name: 'Navbar',
+  name: "Navbar",
   Server: NavbarServer,
-  loadLazy: () => import('./Navbar.lazy'),
+  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-hydrate wrapper (Navbar.lazy):
 
 ```tsx
-'use client'
-import { createLazyWrapper } from '@prokodo/ui/createLazyWrapper';
+"use client"
+import { createLazyWrapper } from "@prokodo/ui/createLazyWrapper"
 
-import { NavbarClient } from './Navbar.client';
-import { NavbarServer } from './Navbar.server';
+import { NavbarClient } from "./Navbar.client"
+import { NavbarServer } from "./Navbar.server"
 
-import type { NavbarProps } from './Navbar.model';
+import type { NavbarProps } from "./Navbar.model"
 
 export default createLazyWrapper<NavbarProps>({
-  name: 'Navbar',
+  name: "Navbar",
   Client: NavbarClient,
   Server: NavbarServer,
 
@@ -233,8 +232,7 @@ export default createLazyWrapper<NavbarProps>({
   // 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
@@ -245,9 +243,9 @@ export default createLazyWrapper<NavbarProps>({
 
 ## Examples (Next.js + Headless CMS)
 
-- Next.js + **Strapi** content models  
-- Next.js + **Contentful** entries & preview  
-- Migration from **Headless WordPress** to Next.js  
+- Next.js + **Strapi** content models
+- Next.js + **Contentful** entries & preview
+- Migration from **Headless WordPress** to Next.js
 
 Compare CMS options → [Strapi vs Contentful vs Headless WP](https://www.prokodo.com/de/loesung/next-js-cms?utm_source=github&utm_medium=readme_examples)
 
@@ -266,13 +264,15 @@ pnpm storybook    # Start Storybook locally
 ```
 
 To build:
+
 ```bash
 pnpm run build
 pnpm run storybook:build
 ```
 
 ## 📄 License
+
 This library is published under the Business Source License 1.1 (BUSL-1.1).
 
 © 2025 prokodo — All rights reserved.
-Visit us at [prokodo.com](https://www.prokodo.com).
+Visit us at [prokodo.com](https://www.prokodo.com).

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

@@ -6,7 +6,9 @@ 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 [expandedIndex, setExpandedIndex] = useState(
+    expanded
+  );
   const handleToggle = useCallback(
     (index, e) => {
       const next = expandedIndex === index ? null : index;

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

@@ -21,87 +21,106 @@ function AccordionView({
   iconProps,
   ...domRest
 }) {
-  return /* @__PURE__ */ jsxs("div", { ...domRest, className: bem(void 0, { [variant]: true }, className), children: [
-    /* @__PURE__ */ jsx(AccordionEffectsLoader, { useBorderShift: true }),
-    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,
-                    {
-                      animated: true,
-                      className: bem("title"),
-                      highlight: isExpanded,
-                      size: "xs",
-                      type: "h3",
-                      variant: isExpanded ? "primary" : "inherit",
-                      ...item.titleOptions ?? titleOptions,
-                      children: title
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      className: bem("icon", { "is-hidden": isExpanded }),
-                      color: "inherit",
-                      name: "PlusSignIcon",
-                      size: "sm",
-                      ...iconProps
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      className: bem("icon", { "is-hidden": !isExpanded }),
-                      color: "inherit",
-                      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
-      );
-    })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...domRest,
+      className: bem(void 0, { [variant]: true }, className),
+      children: [
+        /* @__PURE__ */ jsx(AccordionEffectsLoader, { useBorderShift: true }),
+        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,
+                        {
+                          animated: true,
+                          className: bem("title"),
+                          highlight: isExpanded,
+                          size: "xs",
+                          type: "h3",
+                          variant: isExpanded ? "primary" : "inherit",
+                          ...item.titleOptions ?? titleOptions,
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          className: bem("icon", { "is-hidden": isExpanded }),
+                          color: "inherit",
+                          name: "PlusSignIcon",
+                          size: "sm",
+                          ...iconProps
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          className: bem("icon", { "is-hidden": !isExpanded }),
+                          color: "inherit",
+                          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 {

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

@@ -2,7 +2,9 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import { AnimatedView } from "./Animated.view.js";
-function AnimatedServer({ ...rest }) {
+function AnimatedServer({
+  ...rest
+}) {
   rest == null ? true : delete rest.onAnimate;
   return /* @__PURE__ */ jsx(AnimatedView, { ...rest, isVisible: false });
 }

package/dist/components/animatedText/AnimatedText.client.js

@@ -27,13 +27,7 @@ function AnimatedTextClient({
     }, delay);
     return () => clearTimeout(t0);
   }, [children == null ? void 0 : children.length, delay, disabled, speed]);
-  return /* @__PURE__ */ jsx(
-    AnimatedTextView,
-    {
-      ...rest,
-      text: children == null ? void 0 : children.slice(0, index)
-    }
-  );
+  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: children == null ? void 0 : children.slice(0, index) });
 }
 __name(AnimatedTextClient, "AnimatedTextClient");
 export {

package/dist/components/animatedText/AnimatedText.view.js

@@ -1,7 +1,10 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-const AnimatedTextView = /* @__PURE__ */ __name((({ text, ...spanRest }) => /* @__PURE__ */ jsx("span", { ...spanRest, children: text })), "AnimatedTextView");
+const AnimatedTextView = /* @__PURE__ */ __name(({
+  text,
+  ...spanRest
+}) => /* @__PURE__ */ jsx("span", { ...spanRest, children: text }), "AnimatedTextView");
 AnimatedTextView.displayName = "AnimatedTextView";
 export {
   AnimatedTextView

package/dist/components/avatar/Avatar.view.js

@@ -31,9 +31,9 @@ function AvatarView({
     Icon,
     {
       className: bem("icon", { [variant]: true }),
+      color: !["inherit", "white"].includes(variant) ? "white" : void 0,
       name: "UserIcon",
-      size: getIconSize(size) * 2,
-      color: !["inherit", "white"].includes(variant) ? "white" : void 0
+      size: getIconSize(size)
     }
   ) });
   return redirect ? /* @__PURE__ */ jsx(

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

@@ -63,12 +63,12 @@ function BaseLinkView({
     "a",
     {
       ...aProps,
-      download: kind === "url" ? aProps.download : void 0,
       href: finalHref,
       rel: computedRel,
       style: linkStyle,
       tabIndex,
       target: computedTarget,
+      download: kind === "url" ? aProps.download : void 0,
       children
     }
   );

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

@@ -6,14 +6,7 @@ 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(
-    ButtonView,
-    {
-      ...p,
-      isIconOnly: Boolean(isIconOnly),
-      LinkComponent: LinkServer
-    }
-  );
+  return /* @__PURE__ */ jsx(ButtonView, { ...p, isIconOnly: Boolean(isIconOnly), LinkComponent: LinkServer });
 }
 __name(ButtonServer, "ButtonServer");
 export {