@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/autocomplete/Autocomplete.module.scss.js

@@ -1,18 +1,25 @@
 const styles = {
   "prokodo-Autocomplete": "prokodo-Autocomplete",
+  "prokodo-Autocomplete--primary": "prokodo-Autocomplete--primary",
+  "prokodo-Autocomplete--secondary": "prokodo-Autocomplete--secondary",
+  "prokodo-Autocomplete--success": "prokodo-Autocomplete--success",
+  "prokodo-Autocomplete--warning": "prokodo-Autocomplete--warning",
+  "prokodo-Autocomplete--error": "prokodo-Autocomplete--error",
+  "prokodo-Autocomplete--info": "prokodo-Autocomplete--info",
+  "prokodo-Autocomplete--inherit": "prokodo-Autocomplete--inherit",
+  "prokodo-Autocomplete--white": "prokodo-Autocomplete--white",
   "prokodo-Autocomplete__inputWrap": "prokodo-Autocomplete__inputWrap",
-  "prokodo-Autocomplete__input": "prokodo-Autocomplete__input",
+  "prokodo-Autocomplete__input--is-open": "prokodo-Autocomplete__input--is-open",
   "prokodo-Autocomplete__input__inner--is-open": "prokodo-Autocomplete__input__inner--is-open",
+  "prokodo-Autocomplete__input__node": "prokodo-Autocomplete__input__node",
   "prokodo-Autocomplete__input__node--is-open": "prokodo-Autocomplete__input__node--is-open",
   "prokodo-Autocomplete__list": "prokodo-Autocomplete__list",
-  "fade-in": "fade-in",
   "prokodo-Autocomplete__state": "prokodo-Autocomplete__state",
   "prokodo-Autocomplete__itemRow": "prokodo-Autocomplete__itemRow",
-  "prokodo-Autocomplete__itemRow--is-last": "prokodo-Autocomplete__itemRow--is-last",
   "prokodo-Autocomplete__item": "prokodo-Autocomplete__item",
+  "prokodo-Autocomplete__item--is-active": "prokodo-Autocomplete__item--is-active",
   "prokodo-Autocomplete__item--is-first": "prokodo-Autocomplete__item--is-first",
   "prokodo-Autocomplete__item--is-last": "prokodo-Autocomplete__item--is-last",
-  "prokodo-Autocomplete__item--is-active": "prokodo-Autocomplete__item--is-active",
   "prokodo-Autocomplete__itemLabel": "prokodo-Autocomplete__itemLabel",
   "prokodo-Autocomplete__itemDescription": "prokodo-Autocomplete__itemDescription"
 };

package/dist/components/autocomplete/Autocomplete.view.js

@@ -31,6 +31,7 @@ function AutocompleteView({
   listClassName,
   itemClassName,
   inputProps,
+  color = "primary",
   _clientState,
   onChange,
   onSelect
@@ -39,7 +40,7 @@ function AutocompleteView({
   const hasItems = isArray(items) && items.length > 0;
   const canShowList = Boolean(_clientState == null ? void 0 : _clientState.open);
   const canSearch = String(value ?? "").trim().length >= minQueryLength;
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: true }, className), children: [
     /* @__PURE__ */ jsx("div", { className: bem("inputWrap"), children: /* @__PURE__ */ jsx(
       Input,
       {
@@ -47,6 +48,7 @@ function AutocompleteView({
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": ariaLabelledBy,
         autoComplete,
+        color,
         disabled,
         fullWidth,
         hideLegend: hideLabel || (restInputProps == null ? void 0 : restInputProps.hideLegend),
@@ -94,13 +96,22 @@ function AutocompleteView({
         className: bem("list", void 0, listClassName),
         role: "listbox",
         tabIndex: -1,
-        style: {
-          top: isNumber(_clientState == null ? void 0 : _clientState.listTop) ? `${_clientState.listTop}px` : void 0
-        },
+        style: (
+          /* istanbul ignore next */
+          {
+            top: isNumber(_clientState == null ? void 0 : _clientState.listTop) ? `${_clientState.listTop}px` : (
+              /* istanbul ignore next */
+              void 0
+            )
+          }
+        ),
         children: Boolean(loading) ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("p", { className: bem("state"), children: [
           /* @__PURE__ */ jsx(Loading, { size: "sm" }),
           loadingText
-        ] }) }) : !canSearch ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: isNumber(minQueryLength) ? (minQueryLengthText ?? "{count} characters required").replaceAll("{count}", String(minQueryLength)) : "Type to search" }) }) : !hasItems ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: emptyText }) }) : items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx(
+        ] }) }) : !canSearch ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: isNumber(minQueryLength) ? (minQueryLengthText ?? "{count} characters required").replaceAll("{count}", String(minQueryLength)) : (
+          /* istanbul ignore next */
+          "Type to search"
+        ) }) }) : !hasItems ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: emptyText }) }) : items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx(
           "li",
           {
             "aria-selected": (_clientState == null ? void 0 : _clientState.activeIndex) === index,

package/dist/components/avatar/Avatar.css

@@ -134,25 +134,28 @@
   background-color: transparent;
 }
 .prokodo-Avatar--primary {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Avatar--secondary {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
 }
 .prokodo-Avatar--info {
-  background-color: var(--color-grey-300);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Avatar--success {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Avatar--warning {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
 }
 .prokodo-Avatar--error {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Avatar--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-palette-white);
+}
+.prokodo-Avatar--inherit {
+  color: var(--pk-color-fg);
 }
 .prokodo-Avatar--has-size-xs {
   width: 30px;
@@ -183,6 +186,6 @@
   border-radius: 100%;
 }
 .prokodo-Avatar__link {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-shadow-sm);
   border-radius: 200px;
 }

package/dist/components/avatar/Avatar.js

@@ -5,7 +5,10 @@ import AvatarServer from "./Avatar.server.js";
 const Avatar = createIsland({
   name: "Avatar",
   Server: AvatarServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Avatar.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Avatar.lazy.js"), "loadLazy")
+  )
 });
 export {
   Avatar

package/dist/components/avatar/Avatar.module.css

@@ -134,25 +134,28 @@
   background-color: transparent;
 }
 .prokodo-Avatar--primary {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Avatar--secondary {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
 }
 .prokodo-Avatar--info {
-  background-color: var(--color-grey-300);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Avatar--success {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Avatar--warning {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
 }
 .prokodo-Avatar--error {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Avatar--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-palette-white);
+}
+.prokodo-Avatar--inherit {
+  color: var(--pk-color-fg);
 }
 .prokodo-Avatar--has-size-xs {
   width: 30px;
@@ -183,6 +186,6 @@
   border-radius: 100%;
 }
 .prokodo-Avatar__link {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-shadow-sm);
   border-radius: 200px;
 }

package/dist/components/avatar/Avatar.module.scss.js

@@ -7,6 +7,7 @@ const styles = {
   "prokodo-Avatar--warning": "prokodo-Avatar--warning",
   "prokodo-Avatar--error": "prokodo-Avatar--error",
   "prokodo-Avatar--white": "prokodo-Avatar--white",
+  "prokodo-Avatar--inherit": "prokodo-Avatar--inherit",
   "prokodo-Avatar--has-size-xs": "prokodo-Avatar--has-size-xs",
   "prokodo-Avatar--has-size-sm": "prokodo-Avatar--has-size-sm",
   "prokodo-Avatar--has-size-md": "prokodo-Avatar--has-size-md",

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

@@ -10,15 +10,16 @@ import { Image } from "../image/Image.js";
 const bem = create(styles, "Avatar");
 function AvatarView({
   className,
-  variant = "inherit",
+  color = "inherit",
   size = "sm",
   image,
   redirect,
+  iconOverride,
   ...rest
 }) {
   const rootClass = bem(
     void 0,
-    { [variant]: true, [`has-size-${size}`]: true },
+    { [color]: true, [`has-size-${size}`]: true },
     className
   );
   const iconSize = getIconSize(size);
@@ -28,10 +29,13 @@ function AvatarView({
       ...rest,
       className: rootClass,
       tabIndex: -1,
-      style: isNumber(size) ? {
-        width: size,
-        height: size
-      } : void 0,
+      style: isNumber(size) ? (
+        /* istanbul ignore next */
+        {
+          width: size,
+          height: size
+        }
+      ) : void 0,
       children: image ? /* @__PURE__ */ jsx(
         Image,
         {
@@ -40,14 +44,17 @@ function AvatarView({
           className: bem("image", void 0, image.className),
           tabIndex: 0
         }
-      ) : /* @__PURE__ */ jsx(
-        Icon,
-        {
-          className: bem("icon", { [variant]: true }),
-          color: !["inherit", "white"].includes(variant) ? "white" : void 0,
-          name: "UserIcon",
-          size: iconSize
-        }
+      ) : (
+        /* istanbul ignore next */
+        iconOverride ? iconOverride : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: bem("icon", { [color]: true }),
+            color: !["inherit", "white"].includes(color) ? "white" : void 0,
+            name: "UserIcon",
+            size: iconSize
+          }
+        )
       )
     }
   );
@@ -57,7 +64,7 @@ function AvatarView({
       ...redirect,
       className: bem(
         "link",
-        { [variant]: true, [`has-size-${size}`]: true },
+        { [color]: true, [`has-size-${size}`]: true },
         redirect.className
       ),
       children: inner

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

@@ -6,7 +6,10 @@ const isInteractive = /* @__PURE__ */ __name((p) => typeof p.linkComponent === "
 const BaseLink = createIsland({
   name: "BaseLink",
   Server: BaseLinkServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./BaseLink.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./BaseLink.lazy.js"), "loadLazy")
+  ),
   isInteractive
 });
 export {

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

@@ -43,12 +43,14 @@ function BaseLinkView({
   const pointerOff = { pointerEvents: "none" };
   const tabIndex = !isNull(disabled) ? -1 : void 0;
   const linkStyle = !isNull(disabled) ? { ...pointerOff, ...style } : style;
+  const ariaDisabled = !isNull(disabled) ? true : void 0;
   const { linkComponent, ...aProps } = restProps;
   if (linkComponent) {
     const LinkTag = linkComponent;
     return /* @__PURE__ */ jsx(
       LinkTag,
       {
+        "aria-disabled": ariaDisabled,
         href: finalHref,
         rel: computedRel,
         style: linkStyle,
@@ -63,6 +65,7 @@ function BaseLinkView({
     "a",
     {
       ...aProps,
+      "aria-disabled": ariaDisabled,
       href: finalHref,
       rel: computedRel,
       style: linkStyle,

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

@@ -1,28 +1,24 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import LinkClient from "../link/Link.client.js";
 import { ButtonView } from "./Button.view.js";
-import { Loading } from "../loading/Loading.js";
 function ButtonClient(props, ref) {
   const { loading, iconProps = {}, ...rest } = props;
   const isIconOnly = typeof (iconProps == null ? void 0 : iconProps.name) === "string" && !props.title;
-  const finalIconProps = Boolean(loading) ? { name: void 0 } : iconProps;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    Boolean(loading) && /* @__PURE__ */ jsx(Loading, { size: "xs" }),
-    /* @__PURE__ */ jsx(
-      ButtonView,
-      {
-        ...rest,
-        buttonRef: ref,
-        iconProps: finalIconProps,
-        isIconOnly: Boolean(isIconOnly),
-        LinkComponent: LinkClient
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    ButtonView,
+    {
+      ...rest,
+      buttonRef: ref,
+      iconProps,
+      isIconOnly: Boolean(isIconOnly),
+      LinkComponent: LinkClient,
+      loading
+    }
+  );
 }
 __name(ButtonClient, "ButtonClient");
 const ButtonClient$1 = forwardRef(ButtonClient);