@prokodo/ui 0.1.12 → 0.1.13

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
+};