@prokodo/ui 0.0.55 → 0.1.0

package/dist/types/components/image/Image.client.d.ts

@@ -0,0 +1,4 @@
+import type { ImageProps } from "./Image.model";
+import type { FC } from "react";
+declare const ImageClient: FC<ImageProps>;
+export default ImageClient;

package/dist/types/components/image/Image.d.ts

@@ -1,3 +1,4 @@
 import type { ImageProps } from "./Image.model";
-import type { FC } from "react";
-export declare const Image: FC<ImageProps>;
+export declare const Image: import("react").ComponentType<ImageProps & {
+    priority?: boolean;
+}>;

package/dist/types/components/image/Image.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { ImageProps } from "./Image.model";
+declare const _default: import("react").ComponentType<ImageProps & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/image/Image.server.d.ts

@@ -0,0 +1,4 @@
+import type { ImageProps } from "./Image.model";
+import type { FC } from "react";
+declare const ImageServer: FC<ImageProps>;
+export default ImageServer;

package/dist/types/components/link/Link.server.d.ts

@@ -1,3 +1,3 @@
 import type { LinkProps } from "./Link.model";
 import type { JSX } from "react";
-export default function LinkServer(props: LinkProps): JSX.Element;
+export default function LinkServer(rawProps: LinkProps): JSX.Element;

package/dist/types/helpers/runtime.client.d.ts

@@ -0,0 +1,15 @@
+import React, { type ComponentType, type ReactNode } from "react";
+type AnyProps = Record<string, unknown>;
+export type LinkLike = ComponentType<AnyProps>;
+export type ImageLike = ComponentType<AnyProps>;
+export type UIRuntimeCtx = {
+    linkComponent?: LinkLike;
+    imageComponent?: ImageLike;
+};
+export type UIRuntimeProviderProps = {
+    value: UIRuntimeCtx;
+    children: ReactNode;
+};
+export declare const UIRuntimeProvider: ({ value, children, }: UIRuntimeProviderProps) => React.JSX.Element;
+export declare const useUIRuntime: () => UIRuntimeCtx;
+export {};

package/dist/types/index.d.ts

@@ -42,3 +42,4 @@ export { Stepper } from "./components/stepper";
 export { Switch } from "./components/switch";
 export { Table } from "./components/table";
 export { Teaser } from "./components/teaser";
+export { UIRuntimeProvider, useUIRuntime } from "./helpers/runtime.client";

package/dist/ui.css

@@ -380,6 +380,8 @@
 .prokodo-Headline {
   margin: 0;
   /* Basale Farb-Varianten (ohne Gradients) */
+  /* Größen */
+  /* Alignment */
 }
 .prokodo-Headline--inherit {
   color: var(--color-grey-700);
@@ -408,9 +410,6 @@
 .prokodo-Headline--black {
   color: var(--color-black);
 }
-.prokodo-Headline {
-  /* Größen */
-}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;
@@ -517,9 +516,6 @@
     font-size: 2.75rem;
   }
 }
-.prokodo-Headline {
-  /* Alignment */
-}
 .prokodo-Headline--center {
   text-align: center;
   justify-content: center;
@@ -2147,6 +2143,12 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   color: var(--color-white);
   background-color: var(--color-white);
   border-radius: 2rem;
+  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
+  /* IMPORTANT: no animations in base
+     - remove fadeInAnimation()
+     - remove local @keyframes
+     - keep hooks only; effects sheet will add behavior
+  */
 }
 html[data-theme=dark] .prokodo-Card {
   background-color: var(--color-grey-200);
@@ -2201,9 +2203,6 @@ html[data-theme=dark] .prokodo-Card__background {
   outline-offset: 4px;
   border-radius: 1.5rem;
 }
-.prokodo-Card {
-  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
-}
 .prokodo-Card__gradiant {
   position: absolute;
   width: 100%;
@@ -2238,13 +2237,6 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Card--has-shadow {
   box-shadow: var(--elevation-1);
 }
-.prokodo-Card {
-  /* IMPORTANT: no animations in base
-     - remove fadeInAnimation()
-     - remove local @keyframes
-     - keep hooks only; effects sheet will add behavior
-  */
-}
 .prokodo-Card--is-clickable {
   cursor: pointer;
 }
@@ -2388,6 +2380,8 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
   overflow: hidden;
   /* shimmer carrier (animation is attached in modifier) */
+  /* variants */
+  /* animation hooks (keyframes live in effects sheet) */
 }
 .prokodo-Skeleton::after {
   content: "";
@@ -2397,9 +2391,6 @@ html[data-theme=dark] .prokodo-Card__background {
   left: -100%;
   background: linear-gradient(90deg, transparent, rgba(var(--color-white), 0.6), transparent);
 }
-.prokodo-Skeleton {
-  /* variants */
-}
 .prokodo-Skeleton--text {
   height: 1em;
   border-radius: 4px;
@@ -2410,9 +2401,6 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Skeleton--circular {
   border-radius: 50%;
 }
-.prokodo-Skeleton {
-  /* animation hooks (keyframes live in effects sheet) */
-}
 .prokodo-Skeleton--pulse {
   animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
@@ -2618,7 +2606,7 @@ html[data-theme=dark] .prokodo-Card__background {
   padding: 0.25rem;
 }
 .prokodo-Carousel__dots {
-  display: block;
+  display: flex;
   margin: 2rem auto 0 auto;
   text-align: center;
 }
@@ -3593,6 +3581,7 @@ html[data-theme=dark] .prokodo-Label__text {
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
   left: -99999px;
+  /* Full width modifier */
 }
 .prokodo-Dialog {
   position: fixed;
@@ -3631,13 +3620,11 @@ html[data-theme=dark] .prokodo-Label__text {
 
     $index: $index + 1;
   } */
+  /* Scroll behavior styles */
 }
 .prokodo-Dialog__container:focus-visible {
   outline: 0;
 }
-.prokodo-Dialog__container {
-  /* Scroll behavior styles */
-}
 .prokodo-Dialog__container--scroll-paper {
   height: 100%;
   max-height: calc(100vh - 3rem);
@@ -3760,9 +3747,6 @@ html[data-theme=dark] .prokodo-Label__text {
     transition: none;
   }
 }
-.prokodo-Dialog {
-  /* Full width modifier */
-}
 .prokodo-Dialog--fullScreen {
   max-width: none;
   width: 100%;
@@ -3895,6 +3879,9 @@ html[data-theme=dark] .prokodo-Label__text {
  */
 .prokodo-Drawer {
   /* Backdrop (unchanged, fades in) */
+  /* Container (slide + fade via transitions) */
+  /* Header */
+  /* Content */
 }
 .prokodo-Drawer__backdrop {
   position: fixed;
@@ -3914,9 +3901,6 @@ html[data-theme=dark] .prokodo-Label__text {
     transition: none !important;
   }
 }
-.prokodo-Drawer {
-  /* Container (slide + fade via transitions) */
-}
 .prokodo-Drawer__container {
   position: fixed;
   background-color: var(--color-white);
@@ -3930,6 +3914,10 @@ html[data-theme=dark] .prokodo-Label__text {
   opacity: 0;
   will-change: transform, opacity;
   transition: transform 0.3s ease, opacity 0.3s ease;
+  /* Anchor: left */
+  /* Anchor: right */
+  /* Anchor: top */
+  /* Anchor: bottom */
 }
 .prokodo-Drawer__container--open {
   pointer-events: auto;
@@ -3943,9 +3931,6 @@ html[data-theme=dark] .prokodo-Label__text {
   bottom: 0 !important;
   right: 0 !important;
 }
-.prokodo-Drawer__container {
-  /* Anchor: left */
-}
 .prokodo-Drawer__container--anchor-left {
   top: 0;
   left: 0;
@@ -3956,9 +3941,6 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-Drawer__container--anchor-left--open {
   transform: translateX(0);
 }
-.prokodo-Drawer__container {
-  /* Anchor: right */
-}
 .prokodo-Drawer__container--anchor-right {
   top: 0;
   right: 0;
@@ -3969,9 +3951,6 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-Drawer__container--anchor-right--open {
   transform: translateX(0);
 }
-.prokodo-Drawer__container {
-  /* Anchor: top */
-}
 .prokodo-Drawer__container--anchor-top {
   top: 0;
   left: 0;
@@ -3982,9 +3961,6 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-Drawer__container--anchor-top--open {
   transform: translateY(0);
 }
-.prokodo-Drawer__container {
-  /* Anchor: bottom */
-}
 .prokodo-Drawer__container--anchor-bottom {
   bottom: 0;
   left: 0;
@@ -4002,9 +3978,6 @@ html[data-theme=dark] .prokodo-Label__text {
     opacity: 1 !important;
   }
 }
-.prokodo-Drawer {
-  /* Header */
-}
 .prokodo-Drawer__header {
   display: flex;
   align-items: center;
@@ -4012,9 +3985,6 @@ html[data-theme=dark] .prokodo-Label__text {
   padding: 1rem;
   border-bottom: 1px solid var(--color-grey-200);
 }
-.prokodo-Drawer {
-  /* Content */
-}
 .prokodo-Drawer__content {
   padding: 1rem;
   max-height: calc(100% - 7rem);
@@ -4150,6 +4120,7 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-DynamicList {
   border: none;
   padding: 0;
+  /* ───────────────── helper / error text */
 }
 .prokodo-DynamicList__label {
   margin-bottom: 0.75rem;
@@ -4181,9 +4152,6 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-DynamicList__delete__button--is-multi {
   margin-top: 0.5rem;
 }
-.prokodo-DynamicList {
-  /* ───────────────── helper / error text */
-}
 .prokodo-DynamicList__helperText {
   padding-left: 1.5rem;
   padding-top: 0.75rem;
@@ -4369,6 +4337,12 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 }
 .prokodo-Select {
   position: relative;
+  /* ───────────────── field (container for button + listbox) */
+  /* ───────────────── toggle button */
+  /* ───────────────── listbox (popup) */
+  /* ───────────────── option item */
+  /* ───────────────── checkbox for multi-select */
+  /* ───────────────── helper / error text */
 }
 .prokodo-Select--fullWidth {
   width: 100%;
@@ -4397,9 +4371,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
     overflow: hidden;
   }
 }
-.prokodo-Select {
-  /* ───────────────── field (container for button + listbox) */
-}
 .prokodo-Select__field {
   position: relative;
   box-shadow: var(--elevation-1);
@@ -4409,9 +4380,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 .prokodo-Select__field--expanded {
   box-shadow: none;
 }
-.prokodo-Select {
-  /* ───────────────── toggle button */
-}
 .prokodo-Select__button {
   box-sizing: border-box;
   width: calc(100% - 0.25rem + 4px);
@@ -4428,6 +4396,10 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   -webkit-mask-composite: source-over;
           mask-composite: add;
   /* hover / focus */
+  /* open state — JS toggles .Select__button--expanded **and**
+     .Select__field--expanded plus aria-expanded="true"          */
+  /* caret / icon (if you still have one) */
+  /* inner text */
 }
 .prokodo-Select__button:hover {
   background: var(--gradient-border-4);
@@ -4444,10 +4416,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 .prokodo-Select__button:disabled:hover {
   background: var(--gradient-border-8);
 }
-.prokodo-Select__button {
-  /* open state — JS toggles .Select__button--expanded **and**
-     .Select__field--expanded plus aria-expanded="true"          */
-}
 .prokodo-Select__button--expanded {
   border-top-left-radius: 1.6875rem;
   border-top-right-radius: 1.6875rem;
@@ -4461,9 +4429,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.prokodo-Select__button {
-  /* caret / icon (if you still have one) */
-}
 .prokodo-Select__button > svg {
   position: absolute;
   top: 0;
@@ -4471,9 +4436,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   font-size: 1rem;
   height: 100%;
 }
-.prokodo-Select__button {
-  /* inner text */
-}
 .prokodo-Select__button__inner {
   display: flex;
   align-items: center;
@@ -4521,9 +4483,6 @@ html[data-theme=dark] .prokodo-Select__button__inner {
 .prokodo-Select__button__inner--is-placeholder--disabled {
   color: var(--color-grey-300);
 }
-.prokodo-Select {
-  /* ───────────────── listbox (popup) */
-}
 .prokodo-Select__listbox {
   position: absolute;
   box-sizing: border-box;
@@ -4548,9 +4507,6 @@ html[data-theme=dark] .prokodo-Select__button__inner {
 .prokodo-Select__listbox--is-closed {
   animation: fade-out 200ms ease-in forwards;
 }
-.prokodo-Select {
-  /* ───────────────── option item */
-}
 .prokodo-Select__item {
   list-style: none;
   display: flex;
@@ -4571,6 +4527,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   text-transform: none;
   text-align: left;
   text-decoration: none;
+  /* hover / focus */
+  /* selected */
+  /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
   .prokodo-Select__item {
@@ -4591,9 +4550,6 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   border-bottom-left-radius: 1.5625rem;
   border-bottom-right-radius: 1.5625rem;
 }
-.prokodo-Select__item {
-  /* hover / focus */
-}
 .prokodo-Select__item:hover {
   background-color: var(--color-grey-50);
 }
@@ -4601,22 +4557,13 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   outline: 0;
   background: var(--color-primary-100);
 }
-.prokodo-Select__item {
-  /* selected */
-}
 .prokodo-Select__item--selected {
   background-color: var(--color-primary-50);
 }
-.prokodo-Select__item {
-  /* disabled (if you add aria-disabled) */
-}
 .prokodo-Select__item[aria-disabled=true] {
   color: var(--color-grey-400);
   cursor: not-allowed;
 }
-.prokodo-Select {
-  /* ───────────────── checkbox for multi-select */
-}
 .prokodo-Select__checkbox {
   position: relative;
   min-width: 18px;
@@ -4652,9 +4599,6 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
   mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
 }
-.prokodo-Select {
-  /* ───────────────── helper / error text */
-}
 .prokodo-Select__helperText {
   padding-left: 1.5rem;
   padding-top: 0.75rem;
@@ -5657,6 +5601,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
  */
 .prokodo-GridRow {
   /* Grid alignment classes */
+  /* Define grid-column spans for different screen sizes */
 }
 .prokodo-GridRow--align-left {
   justify-items: start;
@@ -5667,9 +5612,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
 .prokodo-GridRow--align-right {
   justify-items: end;
 }
-.prokodo-GridRow {
-  /* Define grid-column spans for different screen sizes */
-}
 .prokodo-GridRow--xs-1 {
   grid-column: span 1;
 }
@@ -6169,6 +6111,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
   text-transform: none;
   text-align: left;
   text-decoration: none;
+  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item {
@@ -6182,9 +6125,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
     line-height: 1.5;
   }
 }
-.prokodo-List__item {
-  font-weight: 500;
-}
 .prokodo-List__item--has-icon {
   flex-wrap: nowrap;
 }
@@ -6259,6 +6199,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
+  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item__title--card {
@@ -6272,9 +6213,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.5;
   }
 }
-.prokodo-List__item__title--card {
-  font-weight: 500;
-}
 .prokodo-List__item__content {
   width: calc(100% - 2rem);
 }
@@ -6330,6 +6268,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
+  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item--is-clickable a {
@@ -6343,9 +6282,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.5;
   }
 }
-.prokodo-List__item--is-clickable a {
-  font-weight: 500;
-}
 .prokodo-List__item--is-clickable:hover span[role=presentation] {
   color: var(--color-primary-500);
 }
@@ -7860,6 +7796,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
+  /* This is the Image component’s container to force fill */
 }
 .prokodo-PostWidget__image__link {
   position: relative;
@@ -7871,9 +7808,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   border-radius: 13px;
   overflow: hidden;
 }
-.prokodo-PostWidget__image {
-  /* This is the Image component’s container to force fill */
-}
 .prokodo-PostWidget__image__container {
   position: absolute;
   inset: 0;
@@ -8661,6 +8595,8 @@ html[data-theme=dark] .prokodo-List__item__icon {
   background: var(--bg);
   box-shadow: var(--shadow);
   /* ───── collapsed → slide to the right leaving only the toggle visible */
+  /* toggle button (always visible!) ------------------------------------- */
+  /* list / items -------------------------------------------------------- */
 }
 .prokodo-SideNav--collapsed {
   width: 56px;
@@ -8696,9 +8632,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   height: 0;
   text-indent: -99999px;
 }
-.prokodo-SideNav {
-  /* toggle button (always visible!) ------------------------------------- */
-}
 .prokodo-SideNav__toggle {
   position: relative;
   display: flex;
@@ -8722,9 +8655,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-SideNav__toggle:hover {
   background: var(--color-grey-50);
 }
-.prokodo-SideNav {
-  /* list / items -------------------------------------------------------- */
-}
 .prokodo-SideNav__list {
   margin: 0;
   padding: 0;
@@ -8783,6 +8713,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
+  animation: label-in 150ms ease forwards;
 }
 @media screen and (min-width: 480px) {
   .prokodo-SideNav__label {
@@ -8796,9 +8727,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.45;
   }
 }
-.prokodo-SideNav__label {
-  animation: label-in 150ms ease forwards;
-}
 .prokodo-SideNav__label--collapsed .prokodo-SideNav__label {
   animation: label-out 150ms ease forwards;
 }/* stylelint-disable */
@@ -9235,7 +9163,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
           mask-composite: exclude;
 }
 .prokodo-Stepper__icon__container--is-active {
-  box-shadow: var(elevation-1);
+  box-shadow: var(--elevation-1);
 }
 .prokodo-Stepper__icon__container--is-active::before {
   background: var(--gradient-border-1);
@@ -10207,15 +10135,13 @@ html[data-theme=dark] .prokodo-List__item__icon {
 /* Headline.effects.module.scss */
 .prokodo-Headline {
   /* Highlight-Grundlage */
+  /* Varianten mit Highlight (mit Gradients/Shadow) */
 }
 .prokodo-Headline--is-highlighted {
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.prokodo-Headline {
-  /* Varianten mit Highlight (mit Gradients/Shadow) */
-}
 .prokodo-Headline--inherit--highlighted {
   background-image: var(--gradient-text-grey);
   -webkit-background-clip: text;
@@ -10384,13 +10310,16 @@ html[data-theme=dark] .prokodo-List__item__icon {
  */
 .prokodo-Card {
   /* Reveal animation (what used to be &--has-animation + fadeInAnimation) */
+  /* Highlight border fade-in that previously defined @keyframes inline */
+  /**
+  * Fade in
+  */
+  /* If your gradient mixins animate bg-position, that's okay here too.
+     (If they are static, it also doesn't hurt keeping them in base.) */
 }
 .prokodo-Card--has-animation {
   animation: Card_fadeInAnimation 0.5s;
 }
-.prokodo-Card {
-  /* Highlight border fade-in that previously defined @keyframes inline */
-}
 .prokodo-Card--has-highlight::before {
   content: "";
   position: absolute;
@@ -10406,11 +10335,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   background: var(--gradient-border-4);
   animation: Card_fadeInMask 0.5s ease forwards;
 }
-.prokodo-Card {
-  /**
-  * Fade in
-  */
-}
 @keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;
@@ -10423,10 +10347,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   to {
     opacity: 1;
   }
-}
-.prokodo-Card {
-  /* If your gradient mixins animate bg-position, that's okay here too.
-     (If they are static, it also doesn't hurt keeping them in base.) */
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.