@prokodo/ui 0.1.11 → 0.1.13

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

@@ -26,6 +26,7 @@ function SelectView({
   items,
   _clientState
 }) {
+  var _a;
   if (!(items == null ? void 0 : items.length)) return null;
   const isError = Boolean(errorText);
   const hasHelper = Boolean(helperText);
@@ -34,7 +35,6 @@ function SelectView({
   const helperId = hasHelper ? `${id}-helper` : void 0;
   const open = Boolean(_clientState == null ? void 0 : _clientState.open) ?? false;
   const btnRef = _clientState == null ? void 0 : _clientState.buttonRef;
-  const listRef = _clientState == null ? void 0 : _clientState.listRef;
   const selectedItems = Array.isArray(value) ? items.filter((i) => value.includes(i.value)) : items.filter((i) => i.value === value);
   const display = selectedItems.length === 0 ? /* @__PURE__ */ jsx(
     "span",
@@ -47,9 +47,9 @@ function SelectView({
       children: placeholder
     }
   ) : /* @__PURE__ */ jsx("span", { className: bem("button__inner", { expanded: open }), children: selectedItems.map((i, idx) => {
-    var _a;
+    var _a2;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      Boolean(iconVisible) && ((_a = i.icon) == null ? void 0 : _a.call(i)),
+      Boolean(iconVisible) && ((_a2 = i.icon) == null ? void 0 : _a2.call(i)),
       i.label,
       idx < selectedItems.length - 1 && ", "
     ] }, i == null ? void 0 : i.label);
@@ -104,60 +104,23 @@ function SelectView({
               value: Array.isArray(value) ? value.join(",") : value ?? ""
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "ul",
-            {
-              ref: listRef,
-              className: bem("listbox", { "is-open": open, "is-closed": !open }),
-              hidden: !open,
-              id: listId,
-              role: "listbox",
-              tabIndex: -1,
-              children: [
-                !Boolean(required) && !Boolean(multiple) && /* @__PURE__ */ jsx(
-                  "li",
-                  {
-                    "aria-selected": selectedItems.length === 0,
-                    className: bem("item", { selected: selectedItems.length === 0 }),
-                    role: "option",
-                    onClick: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(null), "onClick"),
-                    onKeyDown: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(null), "onKeyDown"),
-                    children: placeholder
-                  },
-                  "placeholder"
-                ),
-                items.map((opt) => {
-                  var _a;
-                  const selected = Array.isArray(value) ? value.includes(opt.value) : opt.value === value;
-                  return /* @__PURE__ */ jsxs(
-                    "li",
-                    {
-                      "aria-selected": selected,
-                      className: bem("item", { selected }),
-                      role: "option",
-                      onClick: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(opt.value), "onClick"),
-                      onKeyDown: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(opt.value), "onKeyDown"),
-                      children: [
-                        Boolean(multiple) && /* @__PURE__ */ jsx(
-                          "input",
-                          {
-                            readOnly: true,
-                            "aria-hidden": "true",
-                            className: bem("checkbox", { checked: selected }),
-                            defaultChecked: selected,
-                            type: "checkbox"
-                          }
-                        ),
-                        Boolean(iconVisible) && ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
-                        opt.label
-                      ]
-                    },
-                    `${id}-${opt.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 }),
+            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"),
+            iconVisible,
+            bemItem: /* @__PURE__ */ __name((mods) => bem("item", mods), "bemItem"),
+            bemCheckbox: /* @__PURE__ */ __name((mods) => bem("checkbox", mods), "bemCheckbox")
+          })
         ] }),
         (isError || Boolean(helperText)) && /* @__PURE__ */ jsx(
           "div",

package/dist/components/switch/Switch.css

@@ -203,7 +203,7 @@
   left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-600);
 }
 .prokodo-Switch__thumb {
   /* Center child icon */

package/dist/components/switch/Switch.module.css

@@ -203,7 +203,7 @@
   left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-600);
 }
 .prokodo-Switch__thumb {
   /* Center child icon */

package/dist/components/switch/Switch.view.js

@@ -20,7 +20,8 @@ const SwitchView = /* @__PURE__ */ __name(({
   className,
   onChangeInternal,
   onFocusInternal,
-  onBlurInternal
+  onBlurInternal,
+  ...props
 }) => {
   const hasLabel = typeof label === "string" && label.length > 0;
   return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [variant]: true }, className), children: [
@@ -58,6 +59,7 @@ const SwitchView = /* @__PURE__ */ __name(({
           /* @__PURE__ */ jsx(
             "input",
             {
+              ...props,
               "aria-checked": isChecked,
               "aria-disabled": disabled || void 0,
               "aria-required": required || void 0,

package/dist/components/tabs/Tabs.client.js

@@ -0,0 +1,182 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { TabsView } from "./Tabs.view.js";
+function getFirstEnabledIndex(items) {
+  const index = items.findIndex((item) => item.disabled !== true);
+  return index >= 0 ? index : 0;
+}
+__name(getFirstEnabledIndex, "getFirstEnabledIndex");
+function getEnabledIndices(items) {
+  return items.map((item, index) => ({ item, index })).filter((entry) => entry.item.disabled !== true).map((entry) => entry.index);
+}
+__name(getEnabledIndices, "getEnabledIndices");
+function resolveInitialValue(items, value, defaultValue) {
+  if (!items.length) {
+    return value ?? defaultValue ?? "";
+  }
+  const candidate = value ?? defaultValue;
+  if (candidate !== void 0) {
+    const valid = items.find(
+      (item) => item.value === candidate && item.disabled !== true
+    );
+    if (valid) return valid.value;
+  }
+  const firstEnabled = items.find((item) => item.disabled !== true) ?? items[0];
+  return (firstEnabled == null ? void 0 : firstEnabled.value) ?? value ?? defaultValue ?? "";
+}
+__name(resolveInitialValue, "resolveInitialValue");
+function findIndexByValue(items, value) {
+  const found = items.findIndex((item) => item.value === value);
+  return found >= 0 ? found : getFirstEnabledIndex(items);
+}
+__name(findIndexByValue, "findIndexByValue");
+function TabsClient({
+  items,
+  value,
+  defaultValue,
+  activationMode = "automatic",
+  disabled,
+  onChange,
+  ...rest
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    () => resolveInitialValue(items, value, defaultValue)
+  );
+  const tabsRef = useRef([]);
+  const activeValue = isControlled ? value : internalValue;
+  const [focusIndex, setFocusIndex] = useState(
+    () => findIndexByValue(items, activeValue)
+  );
+  useEffect(() => {
+    if (isControlled) return;
+    setInternalValue(resolveInitialValue(items, void 0, defaultValue));
+  }, [defaultValue, isControlled, items]);
+  useEffect(() => {
+    setFocusIndex(findIndexByValue(items, activeValue));
+  }, [activeValue, items]);
+  const enabledIndices = useMemo(() => getEnabledIndices(items), [items]);
+  const selectByIndex = useCallback(
+    (index) => {
+      const next = items[index];
+      if (!next || next.disabled === true || disabled === true) return;
+      if (!isControlled) {
+        setInternalValue(next.value);
+      }
+      onChange == null ? void 0 : onChange({
+        value: next.value,
+        index
+      });
+    },
+    [disabled, isControlled, items, onChange]
+  );
+  const moveFocus = useCallback(
+    (currentIndex, direction) => {
+      if (!enabledIndices.length) return currentIndex;
+      const currentEnabledPos = enabledIndices.findIndex(
+        (enabledIndex) => enabledIndex === currentIndex
+      );
+      const safePosition = currentEnabledPos >= 0 ? currentEnabledPos : enabledIndices.findIndex((index) => index >= currentIndex);
+      const normalizedPosition = safePosition >= 0 ? safePosition : 0;
+      const nextPosition = (normalizedPosition + direction + enabledIndices.length) % enabledIndices.length;
+      return enabledIndices[nextPosition] ?? currentIndex;
+    },
+    [enabledIndices]
+  );
+  const focusTab = useCallback(
+    (index) => {
+      var _a;
+      setFocusIndex(index);
+      (_a = tabsRef.current[index]) == null ? void 0 : _a.focus();
+    },
+    [tabsRef]
+  );
+  const handleTabClick = useCallback(
+    (index) => {
+      focusTab(index);
+      selectByIndex(index);
+    },
+    [focusTab, selectByIndex]
+  );
+  const handleTabKeyDown = useCallback(
+    (index, event) => {
+      if (disabled === true) return;
+      const isHorizontal = (rest.orientation ?? "horizontal") === "horizontal";
+      if (isHorizontal && event.key === "ArrowRight" || !isHorizontal && event.key === "ArrowDown") {
+        event.preventDefault();
+        const nextIndex = moveFocus(index, 1);
+        focusTab(nextIndex);
+        if (activationMode === "automatic") {
+          selectByIndex(nextIndex);
+        }
+        return;
+      }
+      if (isHorizontal && event.key === "ArrowLeft" || !isHorizontal && event.key === "ArrowUp") {
+        event.preventDefault();
+        const nextIndex = moveFocus(index, -1);
+        focusTab(nextIndex);
+        if (activationMode === "automatic") {
+          selectByIndex(nextIndex);
+        }
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        const nextIndex = enabledIndices[0] ?? 0;
+        focusTab(nextIndex);
+        if (activationMode === "automatic") {
+          selectByIndex(nextIndex);
+        }
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        const nextIndex = enabledIndices[enabledIndices.length - 1] ?? 0;
+        focusTab(nextIndex);
+        if (activationMode === "automatic") {
+          selectByIndex(nextIndex);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectByIndex(index);
+      }
+    },
+    [
+      activationMode,
+      disabled,
+      enabledIndices,
+      focusTab,
+      moveFocus,
+      rest.orientation,
+      selectByIndex
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    TabsView,
+    {
+      ...rest,
+      items,
+      value: activeValue,
+      _clientState: {
+        activeValue,
+        focusIndex,
+        tabsRef,
+        onTabClick: /* @__PURE__ */ __name((index, event) => {
+          event.preventDefault();
+          handleTabClick(index);
+        }, "onTabClick"),
+        onTabKeyDown: handleTabKeyDown
+      }
+    }
+  );
+}
+__name(TabsClient, "TabsClient");
+const TabsClient$1 = memo(TabsClient);
+export {
+  TabsClient$1 as default
+};

package/dist/components/tabs/Tabs.css

@@ -0,0 +1,330 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Tabs {
+  width: 100%;
+}
+.prokodo-Tabs--vertical {
+  display: grid;
+  grid-gap: 1rem;
+  gap: 1rem;
+  grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
+}
+.prokodo-Tabs__list {
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-grey-200);
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0;
+  position: relative;
+  scrollbar-width: none;
+}
+html[data-theme=dark] .prokodo-Tabs__list {
+  border-bottom-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--vertical {
+  border-bottom: none;
+  border-right: 1px solid var(--color-grey-200);
+  flex-direction: column;
+  overflow-x: visible;
+}
+html[data-theme=dark] .prokodo-Tabs__list--vertical {
+  border-right-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--disabled {
+  opacity: 0.7;
+}
+.prokodo-Tabs__tab {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+  box-shadow: none;
+  color: var(--color-grey-700);
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  justify-content: center;
+  min-height: px-to-rem(44px);
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
+  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-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__tab--vertical {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Tabs__tab:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab::after {
+  background: transparent;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition: background-color 180ms ease, transform 180ms ease;
+}
+.prokodo-Tabs__tab--fullWidth {
+  flex: 1 1;
+}
+.prokodo-Tabs__tab--selected {
+  color: var(--color-primary-900);
+}
+.prokodo-Tabs__tab--selected::after {
+  background: var(--gradient-border-4);
+  transform: scaleX(1);
+}
+.prokodo-Tabs__tab--disabled {
+  color: var(--color-grey-500);
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+.prokodo-Tabs__tab--disabled:hover {
+  background: transparent;
+}
+.prokodo-Tabs__tab--disabled::after {
+  background: transparent;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab {
+  justify-content: flex-start;
+  text-align: left;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
+  bottom: 0;
+  height: auto;
+  left: 0;
+  right: auto;
+  top: 0;
+  transform: scaleY(0.35);
+  transform-origin: center;
+  width: 3px;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab--selected::after {
+  transform: scaleY(1);
+}
+.prokodo-Tabs__tabLabel {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Tabs__badge {
+  align-items: center;
+  background: var(--color-grey-200);
+  border-radius: px-to-rem(999px);
+  color: var(--color-grey-700);
+  display: inline-flex;
+  justify-content: center;
+  min-width: px-to-rem(20px);
+  padding: 0 0.25rem;
+  font-size: px-to-rem(12px);
+  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-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__badgeChip {
+  pointer-events: none;
+  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-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tabs__panel {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 1rem;
+}
+.prokodo-Tabs__panel[hidden] {
+  display: none !important;
+}
+.prokodo-Tabs__panel:focus-visible {
+  outline: 0;
+  background: var(--gradient-border-4);
+}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import TabsServer from "./Tabs.server.js";
+const Tabs = createIsland({
+  name: "Tabs",
+  Server: TabsServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Tabs.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Tabs
+};

package/dist/components/tabs/Tabs.lazy.js

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import TabsClient from "./Tabs.client.js";
+import TabsServer from "./Tabs.server.js";
+const Tabs_lazy = createLazyWrapper({
+  name: "Tabs",
+  Client: TabsClient,
+  Server: TabsServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Tabs_lazy as default
+};