@prokodo/ui 0.1.12 → 0.1.13

package/dist/components/tabs/Tabs.module.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.module.scss.js

@@ -0,0 +1,19 @@
+const styles = {
+  "prokodo-Tabs": "prokodo-Tabs",
+  "prokodo-Tabs--vertical": "prokodo-Tabs--vertical",
+  "prokodo-Tabs__list": "prokodo-Tabs__list",
+  "prokodo-Tabs__list--vertical": "prokodo-Tabs__list--vertical",
+  "prokodo-Tabs__list--disabled": "prokodo-Tabs__list--disabled",
+  "prokodo-Tabs__tab": "prokodo-Tabs__tab",
+  "prokodo-Tabs__tab--vertical": "prokodo-Tabs__tab--vertical",
+  "prokodo-Tabs__tab--fullWidth": "prokodo-Tabs__tab--fullWidth",
+  "prokodo-Tabs__tab--selected": "prokodo-Tabs__tab--selected",
+  "prokodo-Tabs__tab--disabled": "prokodo-Tabs__tab--disabled",
+  "prokodo-Tabs__tabLabel": "prokodo-Tabs__tabLabel",
+  "prokodo-Tabs__badge": "prokodo-Tabs__badge",
+  "prokodo-Tabs__badgeChip": "prokodo-Tabs__badgeChip",
+  "prokodo-Tabs__panel": "prokodo-Tabs__panel"
+};
+export {
+  styles as default
+};

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

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { TabsView } from "./Tabs.view.js";
+function TabsServer(props) {
+  return /* @__PURE__ */ jsx(TabsView, { ...props });
+}
+__name(TabsServer, "TabsServer");
+export {
+  TabsServer as default
+};

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

@@ -0,0 +1,157 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Tabs.module.scss.js";
+import { Chip } from "../chip/Chip.js";
+const bem = create(styles, "Tabs");
+function getFirstEnabledValue(items) {
+  const firstEnabled = items.find((item) => item.disabled !== true);
+  return (firstEnabled == null ? void 0 : firstEnabled.value) ?? null;
+}
+__name(getFirstEnabledValue, "getFirstEnabledValue");
+function resolveSelectedValue(items, value, defaultValue) {
+  const activeCandidate = value ?? defaultValue;
+  if (activeCandidate !== void 0) {
+    const isValid = items.some(
+      (item) => item.value === activeCandidate && item.disabled !== true
+    );
+    if (isValid) return activeCandidate;
+  }
+  return getFirstEnabledValue(items);
+}
+__name(resolveSelectedValue, "resolveSelectedValue");
+function TabsView({
+  id,
+  ariaLabel,
+  items,
+  value,
+  defaultValue,
+  orientation = "horizontal",
+  disabled,
+  fullWidth,
+  className,
+  listClassName,
+  tabClassName,
+  panelsClassName,
+  badgeChipProps,
+  _clientState
+}) {
+  var _a;
+  if (!(items == null ? void 0 : items.length)) return null;
+  const selectedValue = (_clientState == null ? void 0 : _clientState.activeValue) ?? resolveSelectedValue(items, value, defaultValue) ?? ((_a = items[0]) == null ? void 0 : _a.value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: bem(
+        void 0,
+        {
+          vertical: orientation === "vertical"
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": ariaLabel,
+            "aria-orientation": orientation,
+            role: "tablist",
+            className: bem(
+              "list",
+              {
+                disabled: disabled === true,
+                fullWidth: fullWidth === true,
+                vertical: orientation === "vertical"
+              },
+              listClassName
+            ),
+            children: items.map((item, index) => {
+              const isDisabled = disabled === true || item.disabled === true;
+              const isSelected = item.value === selectedValue;
+              const tabId = `${id}-tab-${index}`;
+              const panelId = `${id}-panel-${index}`;
+              const mergedBadgeChipProps = {
+                variant: "outlined",
+                color: "primary",
+                ...badgeChipProps,
+                ...item.badgeChipProps
+              };
+              const { className: badgeChipClassName, ...restBadgeChipProps } = mergedBadgeChipProps;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: /* @__PURE__ */ __name((node) => {
+                    if (_clientState == null ? void 0 : _clientState.tabsRef.current) {
+                      _clientState.tabsRef.current[index] = node;
+                    }
+                  }, "ref"),
+                  "aria-controls": panelId,
+                  "aria-selected": isSelected,
+                  disabled: isDisabled,
+                  id: tabId,
+                  role: "tab",
+                  tabIndex: isSelected ? 0 : -1,
+                  type: "button",
+                  className: bem(
+                    "tab",
+                    {
+                      disabled: isDisabled,
+                      fullWidth: fullWidth === true,
+                      selected: isSelected,
+                      vertical: orientation === "vertical"
+                    },
+                    tabClassName
+                  ),
+                  onClick: /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabClick(index, event), "onClick"),
+                  onKeyDown: /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabKeyDown(index, event), "onKeyDown"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: bem("tabLabel"), children: item.label }),
+                    item.badge ? /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        ...restBadgeChipProps,
+                        className: bem("badgeChip", void 0, badgeChipClassName),
+                        label: item.badge
+                      }
+                    ) : null
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ),
+        items.map((item, index) => {
+          const isSelected = item.value === selectedValue;
+          const tabId = `${id}-tab-${index}`;
+          const panelId = `${id}-panel-${index}`;
+          const mergedPanelClassName = [item.className, panelsClassName].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-labelledby": tabId,
+              hidden: !isSelected,
+              id: panelId,
+              role: "tabpanel",
+              tabIndex: 0,
+              className: bem(
+                "panel",
+                {
+                  selected: isSelected
+                },
+                mergedPanelClassName
+              ),
+              children: item.content
+            },
+            `${item.value}-panel`
+          );
+        })
+      ]
+    }
+  );
+}
+__name(TabsView, "TabsView");
+export {
+  TabsView
+};

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+import { Tabs } from "./Tabs.js";
+export {
+  Tabs
+};

package/dist/components/tooltip/Tooltip.client.js

@@ -206,8 +206,10 @@ function TooltipClient(props) {
         scheduleOpen();
       } : triggerProps == null ? void 0 : triggerProps.onMouseEnter,
       onMouseLeave: openOnHover ? (e) => {
-        var _a;
+        var _a, _b;
         (_a = triggerProps == null ? void 0 : triggerProps.onMouseLeave) == null ? void 0 : _a.call(triggerProps, e);
+        const nextTarget = e.relatedTarget;
+        if (nextTarget && ((_b = bubbleRef.current) == null ? void 0 : _b.contains(nextTarget))) return;
         if (anchor === "pointer") lastPointer.current = null;
         scheduleClose();
       } : triggerProps == null ? void 0 : triggerProps.onMouseLeave,
@@ -359,6 +361,13 @@ function TooltipClient(props) {
           role: "tooltip",
           style: bubbleStyle,
           className: bubbleStyle ? portalBubbleClassFinal : portalBubbleClassBase,
+          onMouseEnter: openOnHover ? () => {
+            clearTimers();
+            setOpen(true);
+          } : void 0,
+          onMouseLeave: openOnHover ? () => {
+            scheduleClose();
+          } : void 0,
           children: content
         }
       ),

package/dist/components/tooltip/Tooltip.css

@@ -199,6 +199,7 @@
 .prokodo-Tooltip__bubble--open {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .prokodo-Tooltip__bubble::after {
   content: "";

package/dist/components/tooltip/Tooltip.module.css

@@ -199,6 +199,7 @@
 .prokodo-Tooltip__bubble--open {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .prokodo-Tooltip__bubble::after {
   content: "";

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.12";
+const PROKODO_UI_VERSION = "0.1.13";
 export {
   PROKODO_UI_VERSION
 };

package/dist/index.js

@@ -2,6 +2,7 @@ import { UIRuntimeProvider, useUIRuntime } from "./helpers/runtime.client.js";
 import { Accordion } from "./components/accordion/Accordion.js";
 import { Animated } from "./components/animated/Animated.js";
 import { AnimatedText } from "./components/animatedText/AnimatedText.js";
+import { Autocomplete } from "./components/autocomplete/Autocomplete.js";
 import { Avatar } from "./components/avatar/Avatar.js";
 import { BaseLink } from "./components/base-link/BaseLink.js";
 import { Button } from "./components/button/Button.js";
@@ -47,12 +48,14 @@ import { Snackbar } from "./components/snackbar/Snackbar.js";
 import { Stepper } from "./components/stepper/Stepper.js";
 import { Switch } from "./components/switch/Switch.js";
 import { Table } from "./components/table/Table.js";
+import { Tabs } from "./components/tabs/Tabs.js";
 import { Teaser } from "./components/teaser/Teaser.js";
 import { Tooltip } from "./components/tooltip/Tooltip.js";
 export {
   Accordion,
   Animated,
   AnimatedText,
+  Autocomplete,
   Avatar,
   BaseLink,
   Button,
@@ -98,6 +101,7 @@ export {
   Stepper,
   Switch,
   Table,
+  Tabs,
   Teaser,
   Tooltip,
   UIRuntimeProvider,