@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/select/Select.module.scss.js

@@ -1,33 +1,76 @@
-const Select__button__inner = "Select__button__inner";
+const selectNotchAnimate = "selectNotchAnimate";
+const selectFadeIn = "selectFadeIn";
+const selectSlideUp = "selectSlideUp";
+const selectBorderShift = "selectBorderShift";
 const styles = {
   "prokodo-Select": "prokodo-Select",
+  "prokodo-Select--primary": "prokodo-Select--primary",
+  "prokodo-Select--secondary": "prokodo-Select--secondary",
+  "prokodo-Select--success": "prokodo-Select--success",
+  "prokodo-Select--warning": "prokodo-Select--warning",
+  "prokodo-Select--error": "prokodo-Select--error",
+  "prokodo-Select--info": "prokodo-Select--info",
+  "prokodo-Select--inherit": "prokodo-Select--inherit",
+  "prokodo-Select--white": "prokodo-Select--white",
   "prokodo-Select--fullWidth": "prokodo-Select--fullWidth",
   "prokodo-Select__label": "prokodo-Select__label",
+  "prokodo-Select__label--is-focused": "prokodo-Select__label--is-focused",
   "prokodo-Select__field": "prokodo-Select__field",
-  "prokodo-Select__field--expanded": "prokodo-Select__field--expanded",
-  "prokodo-Select__button": "prokodo-Select__button",
+  "prokodo-Select__notch": "prokodo-Select__notch",
+  selectNotchAnimate,
   "prokodo-Select__button--expanded": "prokodo-Select__button--expanded",
-  Select__button__inner,
+  "prokodo-Select__sizer": "prokodo-Select__sizer",
+  "prokodo-Select__button": "prokodo-Select__button",
+  "prokodo-Select__notch--is-focused": "prokodo-Select__notch--is-focused",
+  "prokodo-Select__notch--expanded": "prokodo-Select__notch--expanded",
   "prokodo-Select__button__inner": "prokodo-Select__button__inner",
-  "prokodo-Select__button__inner--expanded": "prokodo-Select__button__inner--expanded",
+  "prokodo-Select__button__inner--is-hidden": "prokodo-Select__button__inner--is-hidden",
   "prokodo-Select__button__inner--is-placeholder": "prokodo-Select__button__inner--is-placeholder",
   "prokodo-Select__button__inner--is-placeholder--disabled": "prokodo-Select__button__inner--is-placeholder--disabled",
   "prokodo-Select__listbox": "prokodo-Select__listbox",
-  "prokodo-Select__listbox--is-open": "prokodo-Select__listbox--is-open",
-  "fade-in": "fade-in",
+  "prokodo-Select__listbox--primary": "prokodo-Select__listbox--primary",
+  "prokodo-Select__listbox--secondary": "prokodo-Select__listbox--secondary",
+  "prokodo-Select__listbox--success": "prokodo-Select__listbox--success",
+  "prokodo-Select__listbox--warning": "prokodo-Select__listbox--warning",
+  "prokodo-Select__listbox--error": "prokodo-Select__listbox--error",
+  "prokodo-Select__listbox--info": "prokodo-Select__listbox--info",
+  "prokodo-Select__listbox--inherit": "prokodo-Select__listbox--inherit",
+  "prokodo-Select__listbox--white": "prokodo-Select__listbox--white",
   "prokodo-Select__listbox--is-closed": "prokodo-Select__listbox--is-closed",
-  "fade-out": "fade-out",
   "prokodo-Select__item": "prokodo-Select__item",
-  "prokodo-Select__item--selected": "prokodo-Select__item--selected",
   "prokodo-Select__item--active": "prokodo-Select__item--active",
-  "prokodo-Select__item--selected--active": "prokodo-Select__item--selected--active",
+  "prokodo-Select__item--selected": "prokodo-Select__item--selected",
   "prokodo-Select__checkbox": "prokodo-Select__checkbox",
   "prokodo-Select__checkbox--checked": "prokodo-Select__checkbox--checked",
   "prokodo-Select__helperText": "prokodo-Select__helperText",
-  "prokodo-Select__helperText__content": "prokodo-Select__helperText__content",
-  "prokodo-Select__helperText__content--is-error": "prokodo-Select__helperText__content--is-error"
+  "prokodo-Select__helperText__content--is-error": "prokodo-Select__helperText__content--is-error",
+  "prokodo-Select__sheet__backdrop": "prokodo-Select__sheet__backdrop",
+  selectFadeIn,
+  "prokodo-Select__sheet": "prokodo-Select__sheet",
+  selectSlideUp,
+  "prokodo-Select__sheet--primary": "prokodo-Select__sheet--primary",
+  "prokodo-Select__sheet--secondary": "prokodo-Select__sheet--secondary",
+  "prokodo-Select__sheet--success": "prokodo-Select__sheet--success",
+  "prokodo-Select__sheet--warning": "prokodo-Select__sheet--warning",
+  "prokodo-Select__sheet--error": "prokodo-Select__sheet--error",
+  "prokodo-Select__sheet--info": "prokodo-Select__sheet--info",
+  "prokodo-Select__sheet--inherit": "prokodo-Select__sheet--inherit",
+  "prokodo-Select__sheet--white": "prokodo-Select__sheet--white",
+  "prokodo-Select__sheet__header": "prokodo-Select__sheet__header",
+  "prokodo-Select__sheet__title": "prokodo-Select__sheet__title",
+  "prokodo-Select__sheet__close": "prokodo-Select__sheet__close",
+  "prokodo-Select__sheet__list": "prokodo-Select__sheet__list",
+  "prokodo-Select__sheet__item": "prokodo-Select__sheet__item",
+  "prokodo-Select__sheet__item--active": "prokodo-Select__sheet__item--active",
+  "prokodo-Select__sheet__item--selected": "prokodo-Select__sheet__item--selected",
+  "prokodo-Select__sheet__footer": "prokodo-Select__sheet__footer",
+  "prokodo-Select__sheet__done": "prokodo-Select__sheet__done",
+  selectBorderShift
 };
 export {
-  Select__button__inner,
-  styles as default
+  styles as default,
+  selectBorderShift,
+  selectFadeIn,
+  selectNotchAnimate,
+  selectSlideUp
 };

package/dist/components/select/Select.view.js

@@ -24,6 +24,7 @@ function SelectView({
   multiple,
   value,
   items,
+  color = "primary",
   _clientState
 }) {
   var _a;
@@ -33,15 +34,26 @@ function SelectView({
   const listId = `${id}-listbox`;
   const errorId = isError ? `${id}-error` : void 0;
   const helperId = hasHelper ? `${id}-helper` : void 0;
-  const open = Boolean(_clientState == null ? void 0 : _clientState.open) ?? false;
+  const open = Boolean(_clientState == null ? void 0 : _clientState.open) ?? /* istanbul ignore next */
+  false;
   const btnRef = _clientState == null ? void 0 : _clientState.buttonRef;
-  const selectedItems = Array.isArray(value) ? items.filter((i) => value.includes(i.value)) : items.filter((i) => i.value === value);
+  const selectedItems = Array.isArray(value) ? (
+    /* istanbul ignore next */
+    items.filter(
+      /* istanbul ignore next */
+      (i) => value.includes(i.value)
+    )
+  ) : items.filter((i) => i.value === value);
+  const isFloated = open || selectedItems.length > 0;
   const display = selectedItems.length === 0 ? /* @__PURE__ */ jsx(
     "span",
     {
       className: bem("button__inner", {
         "is-placeholder": true,
         "is-placeholder--disabled": Boolean(disabled),
+        // hide placeholder text when label sits at rest inside the button
+        // (label visually acts as placeholder; span still reserves height)
+        "is-hidden": !isFloated,
         expanded: open
       }),
       children: placeholder
@@ -49,9 +61,11 @@ function SelectView({
   ) : /* @__PURE__ */ jsx("span", { className: bem("button__inner", { expanded: open }), children: selectedItems.map((i, idx) => {
     var _a2;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      Boolean(iconVisible) && ((_a2 = i.icon) == null ? void 0 : _a2.call(i)),
+      Boolean(iconVisible) && /* istanbul ignore next */
+      ((_a2 = i.icon) == null ? void 0 : _a2.call(i)),
       i.label,
-      idx < selectedItems.length - 1 && ", "
+      idx < selectedItems.length - 1 && /* istanbul ignore next */
+      ", "
     ] }, i == null ? void 0 : i.label);
   }) });
   return /* @__PURE__ */ jsxs(
@@ -60,24 +74,41 @@ function SelectView({
       className: bem(
         void 0,
         {
-          fullWidth: Boolean(fullWidth)
+          fullWidth: Boolean(fullWidth),
+          [color]: true
         },
         className
       ),
       children: [
-        !Boolean(hideLabel) && /* @__PURE__ */ jsx(
-          Label,
-          {
-            ...labelProps,
-            className: bem("label", void 0, labelProps == null ? void 0 : labelProps.className),
-            error: isError,
-            htmlFor: id,
-            label,
-            required,
-            type: "label"
-          }
-        ),
         /* @__PURE__ */ jsxs("div", { className: bem("field", void 0, fieldClassName), children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("sizer"), children: items.map((i) => /* @__PURE__ */ jsx("span", { children: i.label }, i.value)) }),
+          !Boolean(hideLabel) && /* @__PURE__ */ jsx(
+            Label,
+            {
+              ...labelProps,
+              error: isError,
+              htmlFor: id,
+              label,
+              required,
+              type: "label",
+              className: bem(
+                "label",
+                { "is-focused": isFloated },
+                labelProps == null ? void 0 : labelProps.className
+              )
+            }
+          ),
+          !Boolean(hideLabel) && /* @__PURE__ */ jsx(
+            "fieldset",
+            {
+              "aria-hidden": "true",
+              className: bem("notch", {
+                "is-focused": isFloated,
+                expanded: open
+              }),
+              children: /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -101,25 +132,44 @@ function SelectView({
             {
               name,
               type: "hidden",
-              value: Array.isArray(value) ? value.join(",") : value ?? ""
+              value: (
+                /* istanbul ignore next */
+                Array.isArray(value) ? (
+                  /* istanbul ignore next */
+                  value.join(",")
+                ) : value ?? ""
+              )
             }
           ),
           (_a = _clientState == null ? void 0 : _clientState.renderListbox) == null ? void 0 : _a.call(_clientState, {
             id: listId,
-            className: bem("listbox", { "is-open": open, "is-closed": !open }),
+            className: bem("listbox", {
+              "is-open": open,
+              "is-closed": !open,
+              [color]: true
+            }),
             open,
             required,
             multiple,
             placeholder,
             items,
             value: value ?? (Boolean(multiple) ? [] : ""),
-            onOptionClick: /* @__PURE__ */ __name((opt) => {
-              var _a2;
-              return (_a2 = _clientState == null ? void 0 : _clientState.onOptionClick) == null ? void 0 : _a2.call(_clientState, opt);
-            }, "onOptionClick"),
+            onOptionClick: (
+              /* istanbul ignore next */
+              /* @__PURE__ */ __name((opt) => {
+                var _a2;
+                return (_a2 = _clientState == null ? void 0 : _clientState.onOptionClick) == null ? void 0 : _a2.call(_clientState, opt);
+              }, "onOptionClick")
+            ),
             iconVisible,
-            bemItem: /* @__PURE__ */ __name((mods) => bem("item", mods), "bemItem"),
-            bemCheckbox: /* @__PURE__ */ __name((mods) => bem("checkbox", mods), "bemCheckbox")
+            bemItem: (
+              /* istanbul ignore next */
+              /* @__PURE__ */ __name((mods) => bem("item", mods), "bemItem")
+            ),
+            bemCheckbox: (
+              /* istanbul ignore next */
+              /* @__PURE__ */ __name((mods) => bem("checkbox", mods), "bemCheckbox")
+            )
           })
         ] }),
         (isError || Boolean(helperText)) && /* @__PURE__ */ jsx(

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

@@ -7,6 +7,7 @@ import SideNavView from "./SideNav.view.js";
 const STORAGE_KEY = "prokodo-adminSidebarCollapsed";
 function SidebarClient({
   items,
+  sections,
   onChange,
   ...props
 }) {
@@ -22,7 +23,7 @@ function SidebarClient({
     });
   }, "handleToggle");
   const formatedItems = useMemo(
-    () => items.map((el) => {
+    () => items == null ? void 0 : items.map((el) => {
       var _a;
       return {
         ...el,
@@ -39,12 +40,34 @@ function SidebarClient({
     }),
     [items, onChange]
   );
+  const formatedSections = useMemo(
+    () => sections == null ? void 0 : sections.map((section) => ({
+      ...section,
+      items: section.items.map((el) => {
+        var _a;
+        return {
+          ...el,
+          redirect: (el == null ? void 0 : el.redirect) && {
+            ...el == null ? void 0 : el.redirect,
+            href: ((_a = el == null ? void 0 : el.redirect) == null ? void 0 : _a.href) ?? "",
+            onClick: /* @__PURE__ */ __name((e) => {
+              var _a2, _b;
+              (_b = (_a2 = el == null ? void 0 : el.redirect) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2, e);
+              onChange == null ? void 0 : onChange(el);
+            }, "onClick")
+          }
+        };
+      })
+    })),
+    [sections, onChange]
+  );
   return /* @__PURE__ */ jsx(
     SideNavView,
     {
       ...props,
       collapsed,
       items: formatedItems,
+      sections: formatedSections,
       onToggle: handleToggle
     }
   );

package/dist/components/sidenav/SideNav.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.js

@@ -5,9 +5,15 @@ import SideNavServer from "./SideNav.server.js";
 const SideNav = createIsland({
   name: "SideNav",
   Server: SideNavServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./SideNav.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./SideNav.lazy.js"), "loadLazy")
+  ),
   // Sidebar is *always* interactive (toggle button)
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   SideNav