@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/rating/Rating.module.scss.js

@@ -1,6 +1,14 @@
 const styles = {
   "prokodo-Rating": "prokodo-Rating",
   "prokodo-Rating--full-width": "prokodo-Rating--full-width",
+  "prokodo-Rating--primary": "prokodo-Rating--primary",
+  "prokodo-Rating--secondary": "prokodo-Rating--secondary",
+  "prokodo-Rating--success": "prokodo-Rating--success",
+  "prokodo-Rating--warning": "prokodo-Rating--warning",
+  "prokodo-Rating--error": "prokodo-Rating--error",
+  "prokodo-Rating--info": "prokodo-Rating--info",
+  "prokodo-Rating--inherit": "prokodo-Rating--inherit",
+  "prokodo-Rating--white": "prokodo-Rating--white",
   "prokodo-Rating__inner": "prokodo-Rating__inner",
   "prokodo-Rating__label": "prokodo-Rating__label",
   "prokodo-Rating__field": "prokodo-Rating__field",

package/dist/components/rating/Rating.view.js

@@ -31,7 +31,8 @@ function RatingView(props) {
     onClick,
     onMouseEnter,
     onMouseLeave,
-    inputRef
+    inputRef,
+    color
   } = props;
   const isError = typeof errorText === "string";
   const hasHelperText = isString(helperText);
@@ -46,7 +47,7 @@ function RatingView(props) {
     {
       className: bem(
         void 0,
-        { "full-width": Boolean(fullWidth) },
+        { "full-width": Boolean(fullWidth), ...color && { [color]: true } },
         className
       ),
       children: [
@@ -55,6 +56,7 @@ function RatingView(props) {
             Label,
             {
               ...labelProps,
+              color,
               error: isError,
               htmlFor: name,
               label,

package/dist/components/rich-text/RichText.client.js

@@ -89,7 +89,7 @@ function RichTextClient({
   children,
   animated,
   animationProps = {},
-  variant = "primary",
+  color = "primary",
   schema = {},
   itemProp,
   linkComponent,
@@ -292,12 +292,12 @@ function RichTextClient({
             ...baseProps,
             "aria-label": childReactNodes.map(extractText).join(""),
             className: cls,
+            color: "primary",
             href,
             linkComponent,
             rel,
             target,
             title,
-            variant: "primary",
             children: linkText
           }
         );
@@ -376,7 +376,7 @@ function RichTextClient({
             Icon,
             {
               className: bem("li__icon"),
-              color: variant,
+              color,
               name: "ArrowRight01Icon",
               size: 18
             },

package/dist/components/rich-text/RichText.css

@@ -125,10 +125,10 @@
  * content.
  */
 .prokodo-RichText__a {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__p {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -152,15 +152,12 @@
 .prokodo-RichText__p {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__p {
-  color: var(--color-grey-700);
-}
 .prokodo-RichText__pre {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   padding: 0;
-  border: 1px solid var(--color-grey-200);
-  border-radius: 5px;
-  background-color: var(--color-grey-50);
+  border: 1px solid var(--pk-color-border);
+  border-radius: var(--pk-radius-sm);
+  background-color: var(--pk-color-surface-raised);
   overflow-x: auto;
   overflow-wrap: break-word;
   font-weight: 400;
@@ -188,19 +185,16 @@ html[data-theme=dark] .prokodo-RichText__p {
 .prokodo-RichText__pre {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__pre {
-  background-color: var(--color-grey-50);
-}
 .prokodo-RichText__blockquote {
-  background-color: var(--color-grey-50);
-  border-left: 3px solid var(--color-grey-100);
-  padding: 1px 1rem;
+  background-color: var(--pk-color-surface-raised);
+  border-left: 3px solid var(--pk-color-border);
+  padding: 1px var(--pk-space-lg);
   margin: 0;
 }
 .prokodo-RichText__image {
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__image__wrapper {
   position: relative;
@@ -208,7 +202,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   width: 100%;
   height: 300px;
   overflow: hidden;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
@@ -217,14 +211,14 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__li {
   display: flex;
   align-items: flex-start;
-  padding-bottom: 0.25rem;
+  padding-bottom: var(--pk-space-xs);
   margin-top: 2px;
 }
 .prokodo-RichText__li__icon {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   padding-top: 2px;
   line-height: 1;
 }
@@ -233,6 +227,28 @@ html[data-theme=dark] .prokodo-RichText__pre {
   min-width: 0;
   overflow-wrap: anywhere;
   display: inline;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-RichText__li__content {
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol__decimal {
   display: flex;
@@ -240,11 +256,11 @@ html[data-theme=dark] .prokodo-RichText__pre {
   align-items: center;
   width: 19px;
   height: 19px;
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
+  background-color: var(--pk-color-brand);
+  color: var(--pk-palette-white);
+  border: 1px solid var(--pk-color-brand);
   border-radius: 200px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,26 +290,26 @@ html[data-theme=dark] .prokodo-RichText__pre {
   display: -webkit-box;
 }
 .prokodo-RichText__ol > li icon--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol > li icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__ol > li icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-RichText__ol > li icon--info {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-RichText__ol > li icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-RichText__ol > li icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-RichText__ol > li icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-RichText__ol > li icon--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }

package/dist/components/rich-text/RichText.module.css

@@ -125,10 +125,10 @@
  * content.
  */
 .prokodo-RichText__a {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__p {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -152,15 +152,12 @@
 .prokodo-RichText__p {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__p {
-  color: var(--color-grey-700);
-}
 .prokodo-RichText__pre {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   padding: 0;
-  border: 1px solid var(--color-grey-200);
-  border-radius: 5px;
-  background-color: var(--color-grey-50);
+  border: 1px solid var(--pk-color-border);
+  border-radius: var(--pk-radius-sm);
+  background-color: var(--pk-color-surface-raised);
   overflow-x: auto;
   overflow-wrap: break-word;
   font-weight: 400;
@@ -188,19 +185,16 @@ html[data-theme=dark] .prokodo-RichText__p {
 .prokodo-RichText__pre {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__pre {
-  background-color: var(--color-grey-50);
-}
 .prokodo-RichText__blockquote {
-  background-color: var(--color-grey-50);
-  border-left: 3px solid var(--color-grey-100);
-  padding: 1px 1rem;
+  background-color: var(--pk-color-surface-raised);
+  border-left: 3px solid var(--pk-color-border);
+  padding: 1px var(--pk-space-lg);
   margin: 0;
 }
 .prokodo-RichText__image {
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__image__wrapper {
   position: relative;
@@ -208,7 +202,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   width: 100%;
   height: 300px;
   overflow: hidden;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
@@ -217,14 +211,14 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__li {
   display: flex;
   align-items: flex-start;
-  padding-bottom: 0.25rem;
+  padding-bottom: var(--pk-space-xs);
   margin-top: 2px;
 }
 .prokodo-RichText__li__icon {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   padding-top: 2px;
   line-height: 1;
 }
@@ -233,6 +227,28 @@ html[data-theme=dark] .prokodo-RichText__pre {
   min-width: 0;
   overflow-wrap: anywhere;
   display: inline;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-RichText__li__content {
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol__decimal {
   display: flex;
@@ -240,11 +256,11 @@ html[data-theme=dark] .prokodo-RichText__pre {
   align-items: center;
   width: 19px;
   height: 19px;
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
+  background-color: var(--pk-color-brand);
+  color: var(--pk-palette-white);
+  border: 1px solid var(--pk-color-brand);
   border-radius: 200px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,26 +290,26 @@ html[data-theme=dark] .prokodo-RichText__pre {
   display: -webkit-box;
 }
 .prokodo-RichText__ol > li icon--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol > li icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__ol > li icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-RichText__ol > li icon--info {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-RichText__ol > li icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-RichText__ol > li icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-RichText__ol > li icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-RichText__ol > li icon--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }

package/dist/components/rich-text/RichText.server.js

@@ -14,7 +14,7 @@ function RichTextServer(props) {
     schema = {},
     animated: _animated,
     animationProps: _animationProps,
-    variant: _variant,
+    color: _color,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     itemProp,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars

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

@@ -1,10 +1,14 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
+import { create } from "../../helpers/bem.js";
+import styles from "./Select.module.scss.js";
 import { SelectView } from "./Select.view.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Select");
 function isMulti(v) {
   return Array.isArray(v);
 }
@@ -43,6 +47,8 @@ function SelectClient({
   );
   const [popupStyle, setPopupStyle] = useState({});
   const [popupReady, setPopupReady] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const sheetSwipeStart = useRef(null);
   const hasPlaceholder = !Boolean(required) && !Boolean(multiple);
   const optionCount = (hasPlaceholder ? 1 : 0) + items.length;
   useEffect(() => {
@@ -155,6 +161,13 @@ function SelectClient({
     window.addEventListener("click", handleOutside);
     return () => window.removeEventListener("click", handleOutside);
   }, [open, close]);
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 480px)");
+    setIsMobile(mq.matches);
+    const handler = /* @__PURE__ */ __name((e) => setIsMobile(e.matches), "handler");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
   const handleKey = (
     /* istanbul ignore next */
     /* @__PURE__ */ __name((e) => {
@@ -275,6 +288,146 @@ function SelectClient({
               }
             }, "onListKeyDown")
           );
+          if (isMobile) {
+            const sheetVariant = rest.color ?? "primary";
+            const handleSheetTouchStart = /* @__PURE__ */ __name((e) => {
+              var _a;
+              sheetSwipeStart.current = ((_a = e.touches[0]) == null ? void 0 : _a.clientY) ?? null;
+            }, "handleSheetTouchStart");
+            const handleSheetTouchEnd = /* @__PURE__ */ __name((e) => {
+              var _a;
+              const startY = sheetSwipeStart.current;
+              sheetSwipeStart.current = null;
+              if (startY === null) return;
+              const dy = (((_a = e.changedTouches[0]) == null ? void 0 : _a.clientY) ?? startY) - startY;
+              if (dy > 60) close();
+            }, "handleSheetTouchEnd");
+            const sheet = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: bem("sheet__backdrop"),
+                  onClick: close
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-label": rest.label,
+                  "aria-modal": "true",
+                  className: bem("sheet", { [sheetVariant]: true }),
+                  role: "dialog",
+                  onTouchEnd: handleSheetTouchEnd,
+                  onTouchStart: handleSheetTouchStart,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: bem("sheet__header"), children: [
+                      /* @__PURE__ */ jsx("span", { className: bem("sheet__title"), children: rest.label }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": "Close",
+                          className: bem("sheet__close"),
+                          type: "button",
+                          onClick: close,
+                          children: /* @__PURE__ */ jsx(Icon, { name: "Cancel01Icon", size: "sm" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "ul",
+                      {
+                        ref: listRef,
+                        "aria-multiselectable": Boolean(args.multiple) || void 0,
+                        className: bem("sheet__list"),
+                        id: args.id,
+                        role: "listbox",
+                        tabIndex: 0,
+                        "aria-activedescendant": activeIndex >= 0 ? `${args.id}-opt-${activeIndex}` : void 0,
+                        onKeyDown: onListKeyDown,
+                        children: [
+                          !Boolean(args.required) && !Boolean(args.multiple) && /* @__PURE__ */ jsx(
+                            "li",
+                            {
+                              id: `${args.id}-opt-0`,
+                              role: "option",
+                              tabIndex: -1,
+                              "aria-selected": (
+                                /* istanbul ignore next */
+                                Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                              ),
+                              className: bem("sheet__item", {
+                                selected: (
+                                  /* istanbul ignore next */
+                                  Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                                ),
+                                active: activeIndex === 0
+                              }),
+                              onClick: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick")
+                              ),
+                              onKeyDown: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown")
+                              ),
+                              onMouseMove: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove")
+                              ),
+                              children: args.placeholder
+                            },
+                            "placeholder"
+                          ),
+                          args.items.map((opt) => {
+                            var _a;
+                            const hasPh = !Boolean(args.required) && !Boolean(args.multiple);
+                            const idx = args.items.findIndex(
+                              (x) => x.value === opt.value
+                            );
+                            const index = idx + (hasPh ? 1 : 0);
+                            const selected = Array.isArray(args.value) ? args.value.includes(opt.value) : opt.value === args.value;
+                            return /* @__PURE__ */ jsxs(
+                              "li",
+                              {
+                                "aria-selected": selected,
+                                id: `${args.id}-opt-${index}`,
+                                role: "option",
+                                tabIndex: -1,
+                                className: bem("sheet__item", {
+                                  selected,
+                                  active: activeIndex === index
+                                }),
+                                onClick: /* @__PURE__ */ __name(() => args.onOptionClick(opt.value), "onClick"),
+                                onMouseMove: /* @__PURE__ */ __name(() => setActiveIndex(index), "onMouseMove"),
+                                onKeyDown: /* @__PURE__ */ __name((e) => onOptionKeyDown(e, opt.value), "onKeyDown"),
+                                children: [
+                                  Boolean(args.iconVisible) && /* istanbul ignore next */
+                                  ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
+                                  opt.label
+                                ]
+                              },
+                              `${args.id}-${opt.value}`
+                            );
+                          })
+                        ]
+                      }
+                    ),
+                    Boolean(args.multiple) && /* @__PURE__ */ jsx("div", { className: bem("sheet__footer"), children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: bem("sheet__done"),
+                        type: "button",
+                        onClick: close,
+                        children: "Done"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] });
+            return createPortal(sheet, document.body);
+          }
           const listbox = /* @__PURE__ */ jsxs(
             "ul",
             {