@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/sidenav/SideNav.module.css

@@ -143,8 +143,6 @@
   }
 }
 .prokodo-SideNav {
-  --bg: var(--color-white);
-  --shadow: var(--elevation-2);
   --t: 280ms;
   top: 0;
   left: 0;
@@ -152,11 +150,12 @@
   display: flex;
   flex-direction: column;
   width: 240px;
-  background: var(--bg);
-  box-shadow: var(--shadow);
+  background: var(--pk-sidenav-bg);
+  box-shadow: var(--pk-sidenav-shadow);
   /* ───── collapsed → slide to the right leaving only the toggle visible */
   /* toggle button (always visible!) ------------------------------------- */
   /* list / items -------------------------------------------------------- */
+  /* sections ------------------------------------------------------------ */
 }
 .prokodo-SideNav--collapsed {
   width: 56px;
@@ -166,9 +165,9 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  background: var(--bg);
+  background: var(--pk-sidenav-bg);
   transition: background-color 120ms;
-  padding: 0.75rem 1rem 0.75rem 0.75rem;
+  padding: var(--pk-sidenav-pad-md) var(--pk-sidenav-pad-lg) var(--pk-sidenav-pad-md) var(--pk-sidenav-pad-md);
   border: none;
   cursor: pointer;
 }
@@ -182,7 +181,7 @@
   background: var(--gradient-background-primary-secondary);
 }
 .prokodo-SideNav__toggle:hover {
-  background: var(--color-grey-50);
+  background: var(--pk-sidenav-toggle-hover);
 }
 .prokodo-SideNav__list {
   margin: 0;
@@ -190,22 +189,22 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--pk-sidenav-gap);
   flex: 1 0 auto;
 }
 .prokodo-SideNav__link {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  gap: var(--pk-sidenav-link-gap);
+  padding: var(--pk-sidenav-pad-sm) var(--pk-sidenav-pad-lg) var(--pk-sidenav-pad-sm) var(--pk-sidenav-pad-md);
   text-decoration: none;
-  border-radius: 0.25rem;
+  border-radius: var(--pk-sidenav-radius);
   transition: background-color 120ms;
 }
 .prokodo-SideNav__link--is-active, .prokodo-SideNav__link:hover {
   text-decoration: none;
-  background: var(--color-primary-100);
+  background: var(--pk-sidenav-link-hover-bg);
 }
 .prokodo-SideNav__link--is-active > div:first-of-type, .prokodo-SideNav__link:hover > div:first-of-type {
   position: relative;
@@ -218,28 +217,28 @@
   width: 100%;
   height: 100%;
   background: var(--gradient-background-primary);
-  border-radius: 13px;
+  border-radius: var(--pk-sidenav-radius);
   opacity: 0.5;
 }
 .prokodo-SideNav__link[aria-current=page] {
-  background: var(--color-primary-50);
+  background: var(--pk-sidenav-link-active-bg);
 }
 .prokodo-SideNav__icon {
-  color: var(--color-grey-900);
+  color: var(--pk-sidenav-icon-color);
 }
 .prokodo-SideNav__icon__wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  background: var(--color-grey-50);
-  border-radius: 13px;
+  padding: var(--pk-sidenav-pad-xs);
+  background: var(--pk-sidenav-icon-bg);
+  border-radius: var(--pk-sidenav-radius);
 }
 .prokodo-SideNav__collapse__icon {
-  color: var(--color-grey-700);
+  color: var(--pk-sidenav-label-color);
 }
 .prokodo-SideNav__collapse__label {
-  color: var(--color-grey-700);
+  color: var(--pk-sidenav-label-color);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -271,7 +270,7 @@
   text-indent: -99999px;
 }
 .prokodo-SideNav__label {
-  color: var(--color-grey-900);
+  color: var(--pk-sidenav-fg);
   animation: label-in 150ms ease forwards;
   font-weight: 400;
   font-size: 1.125rem;
@@ -295,4 +294,73 @@
 }
 .prokodo-SideNav__label--collapsed .prokodo-SideNav__label {
   animation: label-out 150ms ease forwards;
+}
+.prokodo-SideNav__sections {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+.prokodo-SideNav__section {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-SideNav__section + .prokodo-SideNav__section {
+  margin-top: var(--pk-sidenav-pad-sm);
+}
+.prokodo-SideNav__section__header {
+  padding: var(--pk-sidenav-pad-sm) var(--pk-sidenav-pad-lg) var(--pk-sidenav-pad-xs) var(--pk-sidenav-pad-md);
+}
+.prokodo-SideNav__section__headline {
+  display: block;
+  color: var(--pk-sidenav-section-headline-color);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-SideNav__section__headline {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__section__headline {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-SideNav__section__description {
+  color: var(--pk-sidenav-label-color);
+  margin: 0;
+  margin-top: 2px;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-SideNav__section__description {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__section__description {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }

package/dist/components/sidenav/SideNav.module.scss.js

@@ -13,7 +13,12 @@ const styles = {
   "prokodo-SideNav__label": "prokodo-SideNav__label",
   "label-in": "label-in",
   "prokodo-SideNav__label--collapsed": "prokodo-SideNav__label--collapsed",
-  "label-out": "label-out"
+  "label-out": "label-out",
+  "prokodo-SideNav__sections": "prokodo-SideNav__sections",
+  "prokodo-SideNav__section": "prokodo-SideNav__section",
+  "prokodo-SideNav__section__header": "prokodo-SideNav__section__header",
+  "prokodo-SideNav__section__headline": "prokodo-SideNav__section__headline",
+  "prokodo-SideNav__section__description": "prokodo-SideNav__section__description"
 };
 export {
   styles as default

package/dist/components/sidenav/SideNav.view.js

@@ -5,9 +5,11 @@ import { create } from "../../helpers/bem.js";
 import styles from "./SideNav.module.scss.js";
 import { Icon } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
+import { Headline } from "../headline/Headline.js";
 const bem = create(styles, "SideNav");
 function SideNavView({
   items,
+  sections,
   collapsed,
   collapsedLabel = "Expand menu",
   collapsedIcon = "ArrowRight01Icon",
@@ -18,7 +20,9 @@ function SideNavView({
   interactive = true,
   ariaLabel = "Main navigation",
   className,
-  renderFooter
+  renderFooter,
+  headlineProps: globalHeadlineProps,
+  descriptionProps: globalDescriptionProps
 }) {
   const renderItem = /* @__PURE__ */ __name((icon, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
@@ -31,6 +35,69 @@ function SideNavView({
     ) }),
     !collapsed && /* @__PURE__ */ jsx("span", { className: bem("label", { collapsed }), children: label })
   ] }), "renderItem");
+  const renderNavItem = /* @__PURE__ */ __name(({ label, icon, redirect, active }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...redirect,
+      href: redirect.href,
+      className: bem(
+        "link",
+        { collapsed, "is-active": Boolean(active) },
+        redirect == null ? void 0 : redirect.className
+      ),
+      children: renderItem(icon, label)
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label), "renderNavItem");
+  const renderSection = /* @__PURE__ */ __name((section, index) => {
+    const {
+      headline,
+      description,
+      headlineComponent: HeadlineComponent,
+      headlineProps: sectionHeadlineProps,
+      descriptionProps: sectionDescriptionProps,
+      items: sectionItems
+    } = section;
+    const mergedHeadlineProps = {
+      ...globalHeadlineProps,
+      ...sectionHeadlineProps
+    };
+    const mergedDescriptionProps = {
+      ...globalDescriptionProps,
+      ...sectionDescriptionProps
+    };
+    const showHeader = !collapsed && (headline || description || HeadlineComponent);
+    return /* @__PURE__ */ jsxs("div", { className: bem("section"), children: [
+      showHeader && /* @__PURE__ */ jsxs("div", { className: bem("section__header"), children: [
+        HeadlineComponent ? /* @__PURE__ */ jsx(HeadlineComponent, { className: bem("section__headline") }) : headline && /* @__PURE__ */ jsx(
+          Headline,
+          {
+            size: "xs",
+            type: "h6",
+            ...mergedHeadlineProps,
+            className: bem(
+              "section__headline",
+              void 0,
+              mergedHeadlineProps == null ? void 0 : mergedHeadlineProps.className
+            ),
+            children: headline
+          }
+        ),
+        !HeadlineComponent && description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...mergedDescriptionProps,
+            className: bem(
+              "section__description",
+              void 0,
+              mergedDescriptionProps == null ? void 0 : mergedDescriptionProps.className
+            ),
+            children: description
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: bem("list"), children: sectionItems.map(renderNavItem) })
+    ] }, index);
+  }, "renderSection");
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -59,19 +126,7 @@ function SideNavView({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("nav", { id: "sidenav", children: /* @__PURE__ */ jsx("ul", { className: bem("list"), children: items.map(({ label, icon, redirect, active }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
-          Link,
-          {
-            ...redirect,
-            href: redirect.href,
-            className: bem(
-              "link",
-              { collapsed, "is-active": Boolean(active) },
-              redirect == null ? void 0 : redirect.className
-            ),
-            children: renderItem(icon, label)
-          }
-        ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) }),
+        /* @__PURE__ */ jsx("nav", { id: "sidenav", children: sections && sections.length > 0 ? /* @__PURE__ */ jsx("div", { className: bem("sections"), children: sections.map(renderSection) }) : /* @__PURE__ */ jsx("ul", { className: bem("list"), children: (items ?? []).map(renderNavItem) }) }),
         renderFooter !== void 0 && !collapsed && renderFooter()
       ]
     }

package/dist/components/skeleton/Skeleton.css

@@ -150,8 +150,8 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(255, 255, 255, 0.11);
-  border-radius: 4px;
+  background-color: var(--pk-skeleton-bg);
+  border-radius: var(--pk-skeleton-radius);
   position: relative;
   overflow: hidden;
   /* shimmer carrier (animation is attached in modifier) */
@@ -159,7 +159,7 @@
   /* animation hooks (keyframes live in effects sheet) */
 }
 html[data-theme=dark] .prokodo-Skeleton {
-  background-color: rgba(30, 48, 79, 0.11);
+  background-color: var(--pk-skeleton-bg-dark);
 }
 .prokodo-Skeleton::after {
   content: "";
@@ -167,18 +167,18 @@ html[data-theme=dark] .prokodo-Skeleton {
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg), transparent);
   opacity: 0.6;
 }
 html[data-theme=dark] .prokodo-Skeleton::after {
-  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg-dark), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--rectangular {
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--circular {
   border-radius: 50%;

package/dist/components/skeleton/Skeleton.module.css

@@ -150,8 +150,8 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(255, 255, 255, 0.11);
-  border-radius: 4px;
+  background-color: var(--pk-skeleton-bg);
+  border-radius: var(--pk-skeleton-radius);
   position: relative;
   overflow: hidden;
   /* shimmer carrier (animation is attached in modifier) */
@@ -159,7 +159,7 @@
   /* animation hooks (keyframes live in effects sheet) */
 }
 html[data-theme=dark] .prokodo-Skeleton {
-  background-color: rgba(30, 48, 79, 0.11);
+  background-color: var(--pk-skeleton-bg-dark);
 }
 .prokodo-Skeleton::after {
   content: "";
@@ -167,18 +167,18 @@ html[data-theme=dark] .prokodo-Skeleton {
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg), transparent);
   opacity: 0.6;
 }
 html[data-theme=dark] .prokodo-Skeleton::after {
-  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg-dark), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--rectangular {
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--circular {
   border-radius: 50%;

package/dist/components/slider/Slider.client.js

@@ -35,6 +35,7 @@ function SliderClient(props) {
     return [];
   }, [marks, min, max, step]);
   const snapToStep = useCallback(
+    /* istanbul ignore next */
     (v) => clamp(step > 0 ? Math.round((v - min) / step) * step + min : v),
     [clamp, step, min]
   );
@@ -75,9 +76,17 @@ function SliderClient(props) {
   const [internalValue, setInternalValue] = useState(initial);
   useEffect(() => {
     if (controlledValue !== void 0) {
-      const n = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : min;
+      const n = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : (
+        /* istanbul ignore next */
+        min
+      );
       const q = quantize(n);
-      setInternalValue((prev) => prev === q ? prev : q);
+      setInternalValue(
+        (prev) => prev === q ? prev : (
+          /* istanbul ignore next */
+          q
+        )
+      );
     }
   }, [controlledValue, min, quantize]);
   const [isFocused, setIsFocused] = useState(false);