@prokodo/ui 0.1.11 → 0.1.13

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

@@ -0,0 +1,242 @@
+/* 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-Tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* Visually hidden described-by node (portal a11y). */
+  /* CSS-only fallback (only works for inline mode). */
+}
+.prokodo-Tooltip--disabled {
+  pointer-events: none;
+}
+.prokodo-Tooltip__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+.prokodo-Tooltip__trigger {
+  width: -moz-max-content !important;
+  width: max-content !important;
+  flex: 0 0 auto !important;
+}
+.prokodo-Tooltip__bubble {
+  /* Make sizing measurable and stable. */
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  /* Position via CSS vars, but NO animated transform/scale */
+  transform: translate3d(var(--pk-tt-x, 0px), var(--pk-tt-y, 0px), 0);
+  /* Only opacity changes for animation */
+  will-change: opacity;
+  z-index: var(--pk-tt-z, 2147483647);
+  max-width: min(360px, 100vw - 16px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  padding: 0.25rem 0.5rem;
+  border-radius: 10px;
+  box-shadow: var(--elevation-2);
+  background: var(--color-grey-900);
+  color: var(--color-white);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  /* fade only */
+  transition: opacity 120ms ease, visibility 120ms ease;
+  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-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tooltip__bubble--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.prokodo-Tooltip__bubble::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.prokodo-Tooltip__bubble--top::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  top: 100%;
+  transform: translateX(-50%);
+  border-width: 8px 8px 0 8px;
+  border-color: var(--color-grey-900) transparent transparent transparent;
+}
+.prokodo-Tooltip__bubble--bottom::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  bottom: 100%;
+  transform: translateX(-50%);
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent var(--color-grey-900) transparent;
+}
+.prokodo-Tooltip__bubble--left::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  left: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--color-grey-900);
+}
+.prokodo-Tooltip__bubble--right::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  right: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--color-grey-900) transparent transparent;
+}
+.prokodo-Tooltip:hover .prokodo-Tooltip__bubble, .prokodo-Tooltip:focus-within .prokodo-Tooltip__bubble {
+  opacity: 1;
+  visibility: visible;
+}

package/dist/components/tooltip/Tooltip.module.scss.js

@@ -0,0 +1,15 @@
+const styles = {
+  "prokodo-Tooltip": "prokodo-Tooltip",
+  "prokodo-Tooltip--disabled": "prokodo-Tooltip--disabled",
+  "prokodo-Tooltip__sr": "prokodo-Tooltip__sr",
+  "prokodo-Tooltip__trigger": "prokodo-Tooltip__trigger",
+  "prokodo-Tooltip__bubble": "prokodo-Tooltip__bubble",
+  "prokodo-Tooltip__bubble--open": "prokodo-Tooltip__bubble--open",
+  "prokodo-Tooltip__bubble--top": "prokodo-Tooltip__bubble--top",
+  "prokodo-Tooltip__bubble--bottom": "prokodo-Tooltip__bubble--bottom",
+  "prokodo-Tooltip__bubble--left": "prokodo-Tooltip__bubble--left",
+  "prokodo-Tooltip__bubble--right": "prokodo-Tooltip__bubble--right"
+};
+export {
+  styles as default
+};

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

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { TooltipView } from "./Tooltip.view.js";
+function TooltipServer(props) {
+  const portal = props.portal ?? true;
+  return /* @__PURE__ */ jsx(TooltipView, { ...props, __renderVisualBubble: !portal });
+}
+__name(TooltipServer, "TooltipServer");
+export {
+  TooltipServer as default
+};

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

@@ -0,0 +1,127 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, cloneElement } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Tooltip.module.scss.js";
+const bem = create(styles, "Tooltip");
+function mergeClassName(a, b) {
+  const v = [a, b].filter(Boolean).join(" ");
+  return v.length ? v : void 0;
+}
+__name(mergeClassName, "mergeClassName");
+function compose(a, b) {
+  if (!a && !b) return;
+  return (...args) => {
+    if (typeof a === "function") a(...args);
+    if (typeof b === "function") b(...args);
+  };
+}
+__name(compose, "compose");
+function setRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  try {
+    ;
+    ref.current = value;
+  } catch {
+  }
+}
+__name(setRef, "setRef");
+function TooltipView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const {
+    id,
+    content,
+    children,
+    placement = "top",
+    disabled,
+    open,
+    className,
+    tooltipClassName,
+    triggerClassName,
+    triggerProps,
+    __rootRef,
+    __triggerRef,
+    __bubbleRef,
+    __bubbleStyle,
+    __renderVisualBubble = true,
+    __open,
+    __placement,
+    __tooltipId
+  } = props;
+  const rid = useId();
+  const tooltipId = __tooltipId ?? id ?? `tt-${rid}`;
+  const describedBy = !disabled ? tooltipId : void 0;
+  const effectivePlacement = __placement ?? placement;
+  const effectiveOpen = __open ?? open;
+  const child = children;
+  const childProps = child.props;
+  const mergedStyle = {
+    ...childProps.style ?? {},
+    ...(triggerProps == null ? void 0 : triggerProps.style) ?? {},
+    // ✅ critical: prevent full-width triggers (global button resets, flex rules, etc.)
+    display: ((_a = triggerProps == null ? void 0 : triggerProps.style) == null ? void 0 : _a.display) ?? ((_b = childProps.style) == null ? void 0 : _b.display) ?? "inline-flex",
+    width: ((_c = triggerProps == null ? void 0 : triggerProps.style) == null ? void 0 : _c.width) ?? ((_d = childProps.style) == null ? void 0 : _d.width) ?? "max-content",
+    maxWidth: ((_e = triggerProps == null ? void 0 : triggerProps.style) == null ? void 0 : _e.maxWidth) ?? ((_f = childProps.style) == null ? void 0 : _f.maxWidth) ?? "max-content",
+    flex: ((_g = triggerProps == null ? void 0 : triggerProps.style) == null ? void 0 : _g.flex) ?? ((_h = childProps.style) == null ? void 0 : _h.flex) ?? "0 0 auto"
+  };
+  const merged = {
+    ...childProps,
+    ...triggerProps,
+    style: mergedStyle,
+    className: mergeClassName(
+      childProps.className,
+      bem("trigger", void 0, triggerClassName)
+    ),
+    "aria-describedby": mergeClassName(
+      childProps["aria-describedby"],
+      describedBy
+    ),
+    onMouseEnter: compose(childProps.onMouseEnter, triggerProps == null ? void 0 : triggerProps.onMouseEnter),
+    onMouseLeave: compose(childProps.onMouseLeave, triggerProps == null ? void 0 : triggerProps.onMouseLeave),
+    onFocus: compose(childProps.onFocus, triggerProps == null ? void 0 : triggerProps.onFocus),
+    onBlur: compose(childProps.onBlur, triggerProps == null ? void 0 : triggerProps.onBlur),
+    onKeyDown: compose(childProps.onKeyDown, triggerProps == null ? void 0 : triggerProps.onKeyDown),
+    ref: /* @__PURE__ */ __name((node) => {
+      setRef(childProps.ref, node);
+      if (__triggerRef) __triggerRef.current = node;
+    }, "ref")
+  };
+  const inlineBubbleClass = bem(
+    "bubble",
+    { open: Boolean(effectiveOpen), [effectivePlacement]: true },
+    tooltipClassName
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: __rootRef,
+      className: bem(void 0, { disabled: Boolean(disabled) }, className),
+      "data-placement": effectivePlacement,
+      "data-open": effectiveOpen === void 0 ? void 0 : String(Boolean(effectiveOpen)),
+      children: [
+        cloneElement(child, merged),
+        !disabled && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("sr"), id: tooltipId, children: content }),
+        !disabled && __renderVisualBubble && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: __bubbleRef,
+            "aria-hidden": effectiveOpen === void 0 ? void 0 : !effectiveOpen,
+            className: inlineBubbleClass,
+            role: "tooltip",
+            style: __bubbleStyle,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+__name(TooltipView, "TooltipView");
+export {
+  TooltipView
+};

package/dist/components/tooltip/index.js

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

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.11";
+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";
@@ -29,6 +30,7 @@ import { List } from "./components/list/List.js";
 import { Loading } from "./components/loading/Loading.js";
 import { Lottie } from "./components/lottie/Lottie.js";
 import { Map } from "./components/map/Map.js";
+import { Pagination } from "./components/pagination/Pagination.js";
 import { PostItem } from "./components/post-item/PostItem.js";
 import { PostTeaser } from "./components/post-teaser/PostTeaser.js";
 import { PostWidget } from "./components/post-widget/PostWidget.js";
@@ -46,11 +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,
@@ -78,6 +83,7 @@ export {
   Loading,
   Lottie,
   Map,
+  Pagination,
   PostItem,
   PostTeaser,
   PostWidget,
@@ -95,7 +101,9 @@ export {
   Stepper,
   Switch,
   Table,
+  Tabs,
   Teaser,
+  Tooltip,
   UIRuntimeProvider,
   useUIRuntime
 };