@mario_hahn/jumpy-ui 0.5.0 → 0.7.0

package/dist/index.js

@@ -11,6 +11,7 @@ import {
   JumpySpacing,
   JumpyTextStyle,
   JumpyThemeProvider,
+  JumpyThemeScopeContext,
   animationDelayValue,
   animationDurationValue,
   animationEasingValue,
@@ -27,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-5QINBZIU.js";
+} from "./chunk-KIZKZXWH.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -94,8 +95,10 @@ function responsiveValue(value, defaults) {
   return { small: value, medium: value, large: value, xLarge: value };
 }
 function gridSpacingValue(spacing, fallback = "1rem") {
-  if (Array.isArray(spacing)) return [spacing[0] ?? fallback, spacing[1] ?? fallback];
-  return [spacing ?? fallback, spacing ?? fallback];
+  const length = (value2) => typeof value2 === "number" ? `${value2}px` : value2;
+  if (Array.isArray(spacing)) return [length(spacing[0] ?? fallback), length(spacing[1] ?? fallback)];
+  const value = length(spacing ?? fallback);
+  return [value, value];
 }
 function responsiveGridSpacing(spacing) {
   const defaults = { small: ["1rem", "1rem"], medium: ["1rem", "1rem"], large: ["1.5rem", "1.5rem"], xLarge: ["1.5rem", "1.5rem"] };
@@ -172,28 +175,29 @@ function getButtonVariantStyles(theme, variant, status = "regular") {
   const variantTokens = theme.actions[variant] || theme.actions.primary;
   const tokens = variantTokens[status] || variantTokens.regular;
   const elevated = variant === "primary";
+  const token = (state, slot, fallback) => variant === "primary" && status === "regular" ? `var(--jumpy-actions-primary-regular-${state}-${slot}, ${fallback})` : fallback;
   return {
-    "--jumpy-action-default-surface": tokens.default.surface,
-    "--jumpy-action-default-text": tokens.default.text,
-    "--jumpy-action-default-border": tokens.default.border,
-    "--jumpy-action-default-icon": tokens.default.icon,
-    "--jumpy-action-hover-surface": tokens.hover.surface,
-    "--jumpy-action-hover-text": tokens.hover.text,
-    "--jumpy-action-hover-icon": tokens.hover.icon,
-    "--jumpy-action-hover-border": tokens.hover.border,
-    "--jumpy-action-pressed-surface": tokens.pressed.surface,
-    "--jumpy-action-pressed-text": tokens.pressed.text,
-    "--jumpy-action-pressed-icon": tokens.pressed.icon,
-    "--jumpy-action-pressed-border": tokens.pressed.border,
-    "--jumpy-action-focus-surface": tokens.focus.surface,
-    "--jumpy-action-focus-text": tokens.focus.text,
-    "--jumpy-action-focus-icon": tokens.focus.icon,
-    "--jumpy-action-focus-border": tokens.focus.border,
-    "--jumpy-action-focus-ring": tokens.focus.focusRing,
-    "--jumpy-action-disabled-surface": tokens.disabled.surface,
-    "--jumpy-action-disabled-text": tokens.disabled.text,
-    "--jumpy-action-disabled-icon": tokens.disabled.icon,
-    "--jumpy-action-disabled-border": tokens.disabled.border,
+    "--jumpy-action-default-surface": token("default", "surface", tokens.default.surface),
+    "--jumpy-action-default-text": token("default", "text", tokens.default.text),
+    "--jumpy-action-default-border": token("default", "border", tokens.default.border),
+    "--jumpy-action-default-icon": token("default", "icon", tokens.default.icon),
+    "--jumpy-action-hover-surface": token("hover", "surface", tokens.hover.surface),
+    "--jumpy-action-hover-text": token("hover", "text", tokens.hover.text),
+    "--jumpy-action-hover-icon": token("hover", "icon", tokens.hover.icon),
+    "--jumpy-action-hover-border": token("hover", "border", tokens.hover.border),
+    "--jumpy-action-pressed-surface": token("pressed", "surface", tokens.pressed.surface),
+    "--jumpy-action-pressed-text": token("pressed", "text", tokens.pressed.text),
+    "--jumpy-action-pressed-icon": token("pressed", "icon", tokens.pressed.icon),
+    "--jumpy-action-pressed-border": token("pressed", "border", tokens.pressed.border),
+    "--jumpy-action-focus-surface": token("focus", "surface", tokens.focus.surface),
+    "--jumpy-action-focus-text": token("focus", "text", tokens.focus.text),
+    "--jumpy-action-focus-icon": token("focus", "icon", tokens.focus.icon),
+    "--jumpy-action-focus-border": token("focus", "border", tokens.focus.border),
+    "--jumpy-action-focus-ring": token("focus", "focus-ring", tokens.focus.focusRing),
+    "--jumpy-action-disabled-surface": token("disabled", "surface", tokens.disabled.surface),
+    "--jumpy-action-disabled-text": token("disabled", "text", tokens.disabled.text),
+    "--jumpy-action-disabled-icon": token("disabled", "icon", tokens.disabled.icon),
+    "--jumpy-action-disabled-border": token("disabled", "border", tokens.disabled.border),
     "--jumpy-action-hover-shadow": "none",
     "--jumpy-action-focus-shadow": elevated ? shadowValue(theme, JumpyShadowStyle.positiveSmall) : "none",
     "--jumpy-action-pressed-shadow": "none",
@@ -449,6 +453,7 @@ function getFieldInputStyles(theme, disabled) {
 }
 function getFieldShellStyles(theme, disabled, status = "regular", focused = false, readOnly = false) {
   const outlineWidth = borderWidthValue(theme, focused && !readOnly ? JumpyBorderWidth.medium : JumpyBorderWidth.small);
+  const easing = focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease;
   return {
     display: "flex",
     alignItems: "center",
@@ -469,7 +474,7 @@ function getFieldShellStyles(theme, disabled, status = "regular", focused = fals
     gap: spacingValue(theme, JumpySpacing.medium),
     cursor: disabled || readOnly ? "default" : "text",
     pointerEvents: disabled ? "none" : void 0,
-    transition: `background-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}, outline-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}, outline-width ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}`
+    transition: `background-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${easing}, outline-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${easing}, outline-width ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${easing}`
   };
 }
 function renderStandaloneField(theme, disabled, className, style, inputElement, status = "regular", readOnly = false) {
@@ -717,6 +722,7 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
       style: {
         ...getListItemStateStyles(theme, selected),
         display: "grid",
+        textAlign: "start",
         gridTemplateColumns: `${resolvedSelector ? "min-content " : ""}${resolvedLeading ? "min-content " : ""}minmax(0, 1fr) ${resolvedMetadata ? "minmax(0, min-content) " : ""}${resolvedTrailing || hasNestedList ? "min-content" : ""}`,
         gridTemplateRows: resolvedDescription ? "auto auto" : "auto",
         alignItems: "center",
@@ -1288,11 +1294,12 @@ function JumpPopover({ open, defaultOpen = false, onOpenChange, trigger, childre
     visible ? /* @__PURE__ */ jsx("div", { role: "dialog", "data-jumpy-component": "popover", style: { position: "absolute", top: `calc(100% + ${spacingValue(theme, JumpySpacing.smallXS)}px)`, left: 0, zIndex: 30, minWidth: 220, borderRadius: radiusValue(theme, JumpyRadius.large), border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}`, backgroundColor: theme.color.surfaceCard, color: theme.color.textPrimary, boxShadow: theme.shadow.positiveMedium, padding: spacingValue(theme, JumpySpacing.large) }, children }) : null
   ] });
 }
-function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, footer, children, className = "", placement = "bottom-start", ...props }) {
+function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, footer, children, className = "", placement = "bottom-start", closeOnSelect = true, ...props }) {
   const theme = useJumpyTheme();
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isOpen = open ?? internalOpen;
   const menuRef = useRef(null);
+  const insideEventRef = useRef(null);
   const menuOffset = spacingValue(theme, JumpySpacing.small3XS);
   const menuPadding = spacingValue(theme, JumpySpacing.medium);
   const menuMinWidth = sizeValue(theme, JumpySize.large8XL);
@@ -1369,9 +1376,32 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
     }
     props.onKeyDown?.(event);
   }
-  return /* @__PURE__ */ jsxs("span", { "data-jumpy-component": "menu-root", className: cn(className), style: { display: "inline-flex", ...props.style || {} }, children: [
+  useEffect(() => {
+    if (!isOpen) return void 0;
+    function dismissOutside(event) {
+      if (insideEventRef.current !== event) setOpen(false);
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("focusin", dismissOutside);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("focusin", dismissOutside);
+    };
+  });
+  function markInteractionInside(event) {
+    insideEventRef.current = event.nativeEvent;
+  }
+  function handleMenuClick(event) {
+    props.onClick?.(event);
+    if (!closeOnSelect || event.defaultPrevented) return;
+    const item = event.target.closest?.('[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]');
+    if (!item || item.disabled || item.getAttribute("aria-disabled") === "true" || item.closest("[aria-haspopup]")) return;
+    setOpen(false);
+    refs.domReference.current?.focus?.();
+  }
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-component": "menu-root", className: cn(className), onPointerDown: markInteractionInside, onFocus: markInteractionInside, style: { display: "inline-flex", ...props.style || {} }, children: [
     /* @__PURE__ */ jsx("span", { ref: refs.setReference, "aria-haspopup": "menu", "aria-expanded": isOpen, tabIndex: 0, onClick: () => setOpen(!isOpen), onKeyDown: handleTriggerKeyDown, children: trigger }),
-    isOpen ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    isOpen ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs(
       "div",
       {
         ...props,
@@ -1379,14 +1409,13 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
           refs.setFloating(node);
           menuRef.current = node;
         },
-        "data-jumpy-theme": "true",
         "data-jumpy-component": "menu",
         role: "menu",
+        onClick: handleMenuClick,
         onKeyDown: handleMenuKeyDown,
         style: {
-          ...themeToCSSVariables(theme),
           ...floatingStyles,
-          zIndex: 1e3,
+          zIndex: JUMPY_POPUP_Z_INDEX,
           maxWidth: "min(420px, calc(100vw - 32px))",
           overflowY: "auto",
           ...props.style || {}
@@ -1987,13 +2016,19 @@ function JumpExpandableGroup({ as, multiple = false, disabled = false, headingLe
     ] }, child.key || index);
   }) });
 }
+var JUMPY_POPUP_Z_INDEX = 1200;
+function JumpyPortal({ children }) {
+  const theme = useJumpyTheme();
+  const scope = useContext(JumpyThemeScopeContext);
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", { "data-jumpy-theme": "true", "data-jumpy-scope": scope || void 0, "data-jumpy-portal": "true", style: { ...!scope ? themeToCSSVariables(theme) : {}, fontFamily: theme.fontFamily.familyBase }, children }) });
+}
 function JumpyModalLayer({ children, onVisibleChange, style, onPointerDown, ...props }) {
   const theme = useJumpyTheme();
   const { refs, context } = useFloating({ open: true, onOpenChange: onVisibleChange });
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingOverlay, { ...props, lockScroll: true, "data-jumpy-theme": "true", onPointerDown: (event) => {
+  return /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsx(FloatingOverlay, { ...props, lockScroll: true, onPointerDown: (event) => {
     onPointerDown?.(event);
     if (event.target === event.currentTarget) event.preventDefault();
-  }, style: { ...themeToCSSVariables(theme), ...style }, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, outsideElementsInert: true, restoreFocus: true, children: cloneElement(children, {
+  }, style, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, outsideElementsInert: true, restoreFocus: true, children: cloneElement(children, {
     ref: refs.setFloating,
     tabIndex: -1,
     onKeyDown(event) {
@@ -2468,6 +2503,7 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
         "aria-haspopup": "dialog",
         readOnly,
         disabled,
+        "data-has-value": selectedTime !== null,
         value: draft,
         placeholder: props.placeholder || (Array.isArray(format) ? format[0] : format),
         autoComplete: "off",
@@ -2504,7 +2540,7 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
         }
       }
     ) }),
-    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, "data-jumpy-theme": "true", style: { ...themeToCSSVariables(theme), ...floatingStyles, zIndex: 1e3, width: sizeValue(theme, JumpySize.large8XL) * 2.5, maxWidth: "calc(100vw - 32px)", overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: "var(--jumpy-card-inactive-default-surface, var(--jumpy-color-surface-card))", color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0` }, children: [
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, width: sizeValue(theme, JumpySize.large8XL) * 2.5, maxWidth: "calc(100vw - 32px)", overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: "var(--jumpy-card-inactive-default-surface, var(--jumpy-color-surface-card))", color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0` }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.medium), padding: spacingValue(theme, JumpySpacing.small3XS) }, children: [
         /* @__PURE__ */ jsx(JumpIconButton, { variant: "borderless", "aria-label": "Previous", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)), children: "\u2039" }),
         /* @__PURE__ */ jsx("strong", { style: { fontFamily: theme.fontFamily.familyBase, color: "inherit" }, children: viewDate.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
@@ -2589,6 +2625,7 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
         "aria-haspopup": "dialog",
         readOnly,
         disabled,
+        "data-has-value": selectedTime !== null,
         value: draft,
         placeholder: props.placeholder || resolvedFormat,
         autoComplete: "off",
@@ -2625,7 +2662,7 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
         }
       }
     ) }),
-    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, "data-jumpy-theme": "true", style: { ...themeToCSSVariables(theme), ...floatingStyles, zIndex: 1e3, overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: `var(--jumpy-non-interactive-background-alternative, var(--jumpy-color-non-interactive-background-alternative, ${theme.color.surfaceCard}))`, color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, minWidth: 260 }, children: [
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: `var(--jumpy-non-interactive-background-alternative, var(--jumpy-color-non-interactive-background-alternative, ${theme.color.surfaceCard}))`, color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, minWidth: 260 }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", justifyContent: "center", alignItems: "center", gap: spacingValue(theme, JumpySpacing.small), padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.zero)}px`, overflow: "hidden" }, children: [
         /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: 0, right: 0, top: "50%", height: sizeValue(theme, JumpySize.medium), transform: "translateY(-50%)", backgroundColor: "var(--jumpy-interactive-active-regular-default-surface)", pointerEvents: "none" } }),
         /* @__PURE__ */ jsx(TimeColumn, { label: "Hour", values: hours, selected: String(displayHour).padStart(2, "0"), onSelect: (next) => commit("hour", next), theme }),
@@ -2809,19 +2846,17 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
     setSearchValue("");
     onClear?.();
   }, className, trailing, children: triggerInput });
-  const listbox = isOpen && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+  const listbox = isOpen && !disabled ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: refs.setFloating,
       id: `${triggerId}-listbox`,
       role: "listbox",
       "aria-multiselectable": multiple || void 0,
-      "data-jumpy-theme": "true",
       "data-jumpy-component": "dropdown-popover",
       style: {
-        ...themeToCSSVariables(theme),
         ...floatingStyles,
-        zIndex: 1e3,
+        zIndex: JUMPY_POPUP_Z_INDEX,
         overflowX: "hidden",
         overflowY: "auto",
         borderRadius: radiusValue(theme, JumpyRadius.large),
@@ -3352,11 +3387,11 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
     },
     onBlur: (event) => {
       setFocused(false);
-      setHasValue(isDropdown || Boolean(String(event.target?.value ?? "").length));
+      setHasValue(childHasValue || Boolean(String(event.target?.value ?? "").length));
       originalOnBlur?.(event);
     },
     onChange: (event) => {
-      setHasValue(isDropdown || Boolean(String(event.target?.value ?? "").length));
+      setHasValue(childHasValue || Boolean(String(event.target?.value ?? "").length));
       setInputValue(String(event.target?.value ?? ""));
       originalOnChange?.(event);
     }
@@ -3385,6 +3420,13 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
             "data-readonly": readOnly ? "true" : "false",
             "data-status": status,
             "data-testid": props["data-testid"],
+            onMouseDown: (event) => {
+              const control = document.getElementById(child.props.id || fieldId);
+              const interactive = event.target.closest("input, textarea, select, button, a, [tabindex]");
+              if (disabled || !control || event.button !== 0 || interactive && event.currentTarget.contains(interactive)) return;
+              event.preventDefault();
+              control.focus();
+            },
             style: {
               ...getFieldShellStyles(theme, disabled, status, focused, readOnly),
               alignItems: isTextarea ? "flex-start" : "center",
@@ -3591,7 +3633,8 @@ function JumpTabs({ items, value, onChange, className = "" }) {
   const scrollRef = useRef(null);
   const indicatorRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
+  const placeIndicatorRef = useRef(null);
+  placeIndicatorRef.current = (animate) => {
     const selectedTab = tabRefs.current.get(value);
     const scrollContainer = scrollRef.current;
     const indicator = indicatorRef.current;
@@ -3605,10 +3648,37 @@ function JumpTabs({ items, value, onChange, className = "" }) {
     const insetRight = Number.parseFloat(tabStyles.paddingRight) + (contentStyles ? Number.parseFloat(contentStyles.paddingRight) : 0);
     const x = tabBounds.left - containerBounds.left + scrollContainer.scrollLeft + insetLeft;
     const width = tabBounds.width - insetLeft - insetRight;
+    if (!animate) indicator.style.transition = "none";
     indicator.style.setProperty("--jumpy-cmp-tabs-indicator-x", `${x}px`);
     indicator.style.setProperty("--jumpy-cmp-tabs-indicator-width", `${width}px`);
     indicator.style.setProperty("--jumpy-cmp-tabs-indicator-opacity", "1");
+    if (!animate) {
+      indicator.getBoundingClientRect();
+      indicator.style.transition = "";
+    }
+  };
+  const indicatorPlacedRef = useRef(false);
+  useLayoutEffect(() => {
+    placeIndicatorRef.current(indicatorPlacedRef.current);
+    indicatorPlacedRef.current = true;
   }, [items, value]);
+  useEffect(() => {
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer || typeof ResizeObserver === "undefined") return void 0;
+    const sizes = /* @__PURE__ */ new WeakMap();
+    const observer = new ResizeObserver((entries) => {
+      let resized = false;
+      entries.forEach(({ target, contentRect }) => {
+        const size2 = `${contentRect.width}x${contentRect.height}`;
+        if (sizes.has(target) && sizes.get(target) !== size2) resized = true;
+        sizes.set(target, size2);
+      });
+      if (resized) placeIndicatorRef.current(false);
+    });
+    observer.observe(scrollContainer);
+    tabRefs.current.forEach((tab) => observer.observe(tab));
+    return () => observer.disconnect();
+  }, [items]);
   return /* @__PURE__ */ jsx("div", { className, "data-jumpy-component": "tabs", children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, "data-jumpy-slot": "tabs-scroll-container", role: "tablist", "aria-orientation": "horizontal", tabIndex: -1, children: [
     items.map((item) => {
       const active = item.key === value;

package/dist/theme.js

@@ -11,6 +11,7 @@ import {
   JumpySpacing,
   JumpyTextStyle,
   JumpyThemeProvider,
+  JumpyThemeScopeContext,
   animationDelayValue,
   animationDurationValue,
   animationEasingValue,
@@ -27,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-5QINBZIU.js";
+} from "./chunk-KIZKZXWH.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -40,6 +41,7 @@ export {
   JumpySpacing,
   JumpyTextStyle,
   JumpyThemeProvider,
+  JumpyThemeScopeContext,
   animationDelayValue,
   animationDurationValue,
   animationEasingValue,

package/index.d.ts

@@ -71,7 +71,7 @@ export declare function JumpSkeletonLoader(props: HTMLAttributes<HTMLElement> &
 export declare const JumpSearchField: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & { label?: string } & import('react').RefAttributes<HTMLInputElement>>
 export declare function JumpTooltip(props: HTMLAttributes<HTMLSpanElement> & { content: ReactNode; children: ReactNode }): ReactNode
 export declare function JumpPopover(props: HTMLAttributes<HTMLSpanElement> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; trigger: ReactNode; children: ReactNode }): ReactNode
-export declare function JumpMenu(props: HTMLAttributes<HTMLDivElement> & { trigger: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; header?: ReactNode; footer?: ReactNode; placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; children: ReactNode }): ReactNode
+export declare function JumpMenu(props: HTMLAttributes<HTMLDivElement> & { trigger: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; closeOnSelect?: boolean; header?: ReactNode; footer?: ReactNode; placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; children: ReactNode }): ReactNode
 export declare function JumpMenuItem(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; children: ReactNode; selected?: boolean; disabled?: boolean; readOnly?: boolean; focusedView?: boolean; leading?: ReactNode; trailing?: ReactNode; metadata?: ReactNode; description?: ReactNode; slots?: JumpListItemSlots; nestedMenu?: ReactNode }): ReactNode
 export type JumpToggleButtonValue = string | number
 export declare function JumpToggleButton(props: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & { as?: ElementTag; selected?: boolean; value?: JumpToggleButtonValue; onChange?: (selected: boolean) => void; leading?: ReactNode | ((state: { selected: boolean }) => ReactNode); children?: ReactNode }): ReactNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mario_hahn/jumpy-ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "MIT",
   "type": "module",
   "scripts": {

package/theme.d.ts

@@ -43,5 +43,5 @@ export declare function animationEasingValue(theme: Required<JumpyTheme>, token:
 export declare function shadowValue(theme: Required<JumpyTheme>, token: string): string
 export declare function textStyleValue(theme: Required<JumpyTheme>, token: string): Record<string, unknown>
 export declare function themeToCSSVariables(theme?: JumpyTheme): Record<string, string>
-export declare function JumpyThemeProvider(props: { theme?: JumpyTheme; children: ReactNode }): ReactNode
+export declare function JumpyThemeProvider(props: { theme?: JumpyTheme; tokens?: Record<`--jumpy-${string}`, string | number>; children: ReactNode }): ReactNode
 export declare function useJumpyTheme(): Required<JumpyTheme>

package/tokens/android/tokens/src/main/kotlin/com/mariohahn/jumpy/tokens/berry/Tokens.kt

@@ -256,7 +256,7 @@ object JumpyBerryTokens {
     val colorPrimaryExtralight: Color = jumpyColor("#338F3D7A")
     val colorPrimaryLight: Color = jumpyColor("#FFDDEABE")
     val colorPrimaryLightbase: Color = jumpyColor("#FFC86CAF")
-    val colorPrimaryMegalight: Color = jumpyColor("#FFF9FCF4")
+    val colorPrimaryMegalight: Color = jumpyColor("#148F3D7A")
     val colorPrimaryUltralight: Color = jumpyColor("#148F3D7A")
     val colorSecondary100: Color = jumpyColor("#FFFFF9F4")
     val colorSecondary200: Color = jumpyColor("#FFFFF3E8")
@@ -350,7 +350,7 @@ object JumpyBerryTokens {
     val actionsBorderlessRegularHoverBorder: Color = jumpyColor("#00FFFFFF")
     val actionsBorderlessRegularHoverFocus: Color = jumpyColor("#00FFFFFF")
     val actionsBorderlessRegularHoverIcon: Color = jumpyColor("#FF8F3D7A")
-    val actionsBorderlessRegularHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val actionsBorderlessRegularHoverSurface: Color = jumpyColor("#148F3D7A")
     val actionsBorderlessRegularHoverSurfaceAlternate: Color = jumpyColor("#148F3D7A")
     val actionsBorderlessRegularHoverText: Color = jumpyColor("#FF8F3D7A")
     val actionsBorderlessRegularPressedAction: Color = jumpyColor("#FF343434")
@@ -404,25 +404,25 @@ object JumpyBerryTokens {
     val actionsPrimaryInfoPressedSurface: Color = jumpyColor("#FFF6F6F6")
     val actionsPrimaryInfoPressedText: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularDefaultBorder: Color = jumpyColor("#FF8F3D7A")
-    val actionsPrimaryRegularDefaultIcon: Color = jumpyColor("#FFF9FCF4")
+    val actionsPrimaryRegularDefaultIcon: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularDefaultSurface: Color = jumpyColor("#FF8F3D7A")
     val actionsPrimaryRegularDefaultText: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularDisabledBorder: Color = jumpyColor("#FFF7EEF7")
-    val actionsPrimaryRegularDisabledIcon: Color = jumpyColor("#26575B5E")
+    val actionsPrimaryRegularDisabledIcon: Color = jumpyColor("#FF6F5A6B")
     val actionsPrimaryRegularDisabledSurface: Color = jumpyColor("#FFF7EEF7")
     val actionsPrimaryRegularDisabledSurfaceAlternate: Color = jumpyColor("#FFF6F6F6")
     val actionsPrimaryRegularDisabledText: Color = jumpyColor("#FF6F5A6B")
     val actionsPrimaryRegularFocusBorder: Color = jumpyColor("#FF8F3D7A")
     val actionsPrimaryRegularFocusFocusRing: Color = jumpyColor("#FF8F3D7A")
-    val actionsPrimaryRegularFocusIcon: Color = jumpyColor("#FFF9FCF4")
+    val actionsPrimaryRegularFocusIcon: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularFocusSurface: Color = jumpyColor("#FF8F3D7A")
     val actionsPrimaryRegularFocusText: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularHoverBorder: Color = jumpyColor("#FF8F3D7A")
-    val actionsPrimaryRegularHoverIcon: Color = jumpyColor("#FFF9FCF4")
+    val actionsPrimaryRegularHoverIcon: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularHoverSurface: Color = jumpyColor("#FF7A3268")
     val actionsPrimaryRegularHoverText: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularPressedBorder: Color = jumpyColor("#FF8F3D7A")
-    val actionsPrimaryRegularPressedIcon: Color = jumpyColor("#FFF9FCF4")
+    val actionsPrimaryRegularPressedIcon: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularPressedSurface: Color = jumpyColor("#FF8F3D7A")
     val actionsPrimaryRegularPressedText: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryWarningDefaultBorder: Color = jumpyColor("#FF1A1C1F")
@@ -493,7 +493,7 @@ object JumpyBerryTokens {
     val actionsSecondaryRegularHoverAction: Color = jumpyColor("#FF343434")
     val actionsSecondaryRegularHoverBorder: Color = jumpyColor("#FF575B5E")
     val actionsSecondaryRegularHoverIcon: Color = jumpyColor("#FF8F3D7A")
-    val actionsSecondaryRegularHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val actionsSecondaryRegularHoverSurface: Color = jumpyColor("#148F3D7A")
     val actionsSecondaryRegularHoverSurfaceAlternate: Color = jumpyColor("#148F3D7A")
     val actionsSecondaryRegularHoverText: Color = jumpyColor("#FF8F3D7A")
     val actionsSecondaryRegularPressedAction: Color = jumpyColor("#FF343434")
@@ -554,7 +554,7 @@ object JumpyBerryTokens {
     val actionsTertiaryRegularHoverBorder: Color = jumpyColor("#00FFFFFF")
     val actionsTertiaryRegularHoverFocus: Color = jumpyColor("#00FFFFFF")
     val actionsTertiaryRegularHoverIcon: Color = jumpyColor("#FF8F3D7A")
-    val actionsTertiaryRegularHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val actionsTertiaryRegularHoverSurface: Color = jumpyColor("#148F3D7A")
     val actionsTertiaryRegularHoverSurfaceAlternate: Color = jumpyColor("#148F3D7A")
     val actionsTertiaryRegularHoverText: Color = jumpyColor("#FF8F3D7A")
     val actionsTertiaryRegularPressedAction: Color = jumpyColor("#FF343434")
@@ -566,7 +566,7 @@ object JumpyBerryTokens {
     val cardActiveDefaultBorder: Color = jumpyColor("#26575B5E")
     val cardActiveDefaultIcon: Color = jumpyColor("#FF575B5E")
     val cardActiveDefaultSubtext: Color = jumpyColor("#FF241A23")
-    val cardActiveDefaultSurface: Color = jumpyColor("#FFF9FCF4")
+    val cardActiveDefaultSurface: Color = jumpyColor("#148F3D7A")
     val cardActiveDefaultText: Color = jumpyColor("#FF343434")
     val cardActiveDisabledBorder: Color = jumpyColor("#FFF7EEF7")
     val cardActiveDisabledIcon: Color = jumpyColor("#26575B5E")
@@ -582,7 +582,7 @@ object JumpyBerryTokens {
     val cardActiveFocusFocusRing: Color = jumpyColor("#FF8F3D7A")
     val cardActiveFocusIcon: Color = jumpyColor("#FF575B5E")
     val cardActiveFocusSubtext: Color = jumpyColor("#FF241A23")
-    val cardActiveFocusSurface: Color = jumpyColor("#FFF9FCF4")
+    val cardActiveFocusSurface: Color = jumpyColor("#148F3D7A")
     val cardActiveFocusText: Color = jumpyColor("#FF343434")
     val cardActiveHoverBorder: Color = jumpyColor("#FFC86CAF")
     val cardActiveHoverIcon: Color = jumpyColor("#FF575B5E")
@@ -618,7 +618,7 @@ object JumpyBerryTokens {
     val cardInactiveHoverBorder: Color = jumpyColor("#FFC86CAF")
     val cardInactiveHoverIcon: Color = jumpyColor("#FF575B5E")
     val cardInactiveHoverSubtext: Color = jumpyColor("#FF241A23")
-    val cardInactiveHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val cardInactiveHoverSurface: Color = jumpyColor("#148F3D7A")
     val cardInactiveHoverText: Color = jumpyColor("#FF343434")
     val cardInactivePressedBorder: Color = jumpyColor("#FF8F3D7A")
     val cardInactivePressedIcon: Color = jumpyColor("#FF575B5E")
@@ -641,10 +641,10 @@ object JumpyBerryTokens {
     val coachmarkHoverInnerCircleOutline: Color = jumpyColor("#FF8F3D7A")
     val coachmarkHoverInnerCircleSurface: Color = jumpyColor("#FFFFFFFF")
     val coachmarkHoverOuterCircleSurface: Color = jumpyColor("#148F3D7A")
-    val coachmarkHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val coachmarkHoverSurface: Color = jumpyColor("#148F3D7A")
     val coachmarkPressedInnerCircleOutline: Color = jumpyColor("#FF8F3D7A")
     val coachmarkPressedInnerCircleSurface: Color = jumpyColor("#FFFFFFFF")
-    val coachmarkPressedOuterCircleSurface: Color = jumpyColor("#FFF9FCF4")
+    val coachmarkPressedOuterCircleSurface: Color = jumpyColor("#148F3D7A")
     val coachmarkPressedSurface: Color = jumpyColor("#148F3D7A")
     val inputAlarmDefaultAlarmIcon: Color = jumpyColor("#FFDC2626")
     val inputAlarmDefaultBorder: Color = jumpyColor("#FFDC2626")
@@ -807,7 +807,7 @@ object JumpyBerryTokens {
     val interactiveInactiveRegularHoverBorder: Color = jumpyColor("#FF6F5A6B")
     val interactiveInactiveRegularHoverIcon: Color = jumpyColor("#FF343434")
     val interactiveInactiveRegularHoverSubtext: Color = jumpyColor("#FF575B5E")
-    val interactiveInactiveRegularHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val interactiveInactiveRegularHoverSurface: Color = jumpyColor("#148F3D7A")
     val interactiveInactiveRegularHoverSurfaceAlternate: Color = jumpyColor("#148F3D7A")
     val interactiveInactiveRegularHoverText: Color = jumpyColor("#FF343434")
     val interactiveInactiveRegularPressedBorder: Color = jumpyColor("#FF737373")
@@ -818,7 +818,7 @@ object JumpyBerryTokens {
     val nonInteractiveBackgroundAlternative: Color = jumpyColor("#FFFFFFFF")
     val nonInteractiveBackgroundAlternativeFloating: Color = jumpyColor("#FFFFFFFF")
     val nonInteractiveBackgroundAlternativeRaised: Color = jumpyColor("#FFF6F6F6")
-    val nonInteractiveBackgroundBrand: Color = jumpyColor("#FFF9FCF4")
+    val nonInteractiveBackgroundBrand: Color = jumpyColor("#148F3D7A")
     val nonInteractiveBackgroundDefault: Color = jumpyColor("#FFF5F5F2")
     val nonInteractiveBackgroundDefaultFloating: Color = jumpyColor("#FFFFFFFF")
     val nonInteractiveBackgroundDefaultRaised: Color = jumpyColor("#FFFFFFFF")
@@ -842,7 +842,7 @@ object JumpyBerryTokens {
     val selectorsActiveFocusText: Color = jumpyColor("#FF8F3D7A")
     val selectorsActiveHoverBorder: Color = jumpyColor("#FFC86CAF")
     val selectorsActiveHoverHandle: Color = jumpyColor("#FFFFFFFF")
-    val selectorsActiveHoverHoverRing: Color = jumpyColor("#FFF9FCF4")
+    val selectorsActiveHoverHoverRing: Color = jumpyColor("#148F3D7A")
     val selectorsActiveHoverIcon: Color = jumpyColor("#FFFFFFFF")
     val selectorsActiveHoverSurface: Color = jumpyColor("#FFC86CAF")
     val selectorsActiveHoverText: Color = jumpyColor("#FF8F3D7A")
@@ -874,9 +874,9 @@ object JumpyBerryTokens {
     val selectorsInactiveFocusText: Color = jumpyColor("#FF343434")
     val selectorsInactiveHoverBorder: Color = jumpyColor("#FF575B5E")
     val selectorsInactiveHoverHandle: Color = jumpyColor("#FF575B5E")
-    val selectorsInactiveHoverHoverRing: Color = jumpyColor("#FFF9FCF4")
+    val selectorsInactiveHoverHoverRing: Color = jumpyColor("#148F3D7A")
     val selectorsInactiveHoverIcon: Color = jumpyColor("#FF575B5E")
-    val selectorsInactiveHoverSurface: Color = jumpyColor("#FFF9FCF4")
+    val selectorsInactiveHoverSurface: Color = jumpyColor("#148F3D7A")
     val selectorsInactiveHoverText: Color = jumpyColor("#FF343434")
     val selectorsInactivePressedBorder: Color = jumpyColor("#FF6F5A6B")
     val selectorsInactivePressedHandle: Color = jumpyColor("#FF575B5E")
@@ -908,7 +908,7 @@ object JumpyBerryTokens {
     val sliderActiveFocusStopText: Color = jumpyColor("#FF343434")
     val sliderActiveFocusTrack: Color = jumpyColor("#FF8F3D7A")
     val sliderActiveHoverHandle: Color = jumpyColor("#FF8F3D7A")
-    val sliderActiveHoverHandleSurface: Color = jumpyColor("#FFF9FCF4")
+    val sliderActiveHoverHandleSurface: Color = jumpyColor("#148F3D7A")
     val sliderActiveHoverIcon: Color = jumpyColor("#FF8F3D7A")
     val sliderActiveHoverStopDot: Color = jumpyColor("#26575B5E")
     val sliderActiveHoverStopText: Color = jumpyColor("#FF343434")

package/tokens/android/tokens/src/main/kotlin/com/mariohahn/jumpy/tokens/berryDark/Tokens.kt

@@ -404,25 +404,25 @@ object JumpyBerryDarkTokens {
     val actionsPrimaryInfoPressedSurface: Color = jumpyColor("#FF949494")
     val actionsPrimaryInfoPressedText: Color = jumpyColor("#FFFFFFFF")
     val actionsPrimaryRegularDefaultBorder: Color = jumpyColor("#FFC86CAF")
-    val actionsPrimaryRegularDefaultIcon: Color = jumpyColor("#1FC86CAF")
+    val actionsPrimaryRegularDefaultIcon: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularDefaultSurface: Color = jumpyColor("#FFD881BE")
     val actionsPrimaryRegularDefaultText: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularDisabledBorder: Color = jumpyColor("#FF2B1E2F")
-    val actionsPrimaryRegularDisabledIcon: Color = jumpyColor("#24C8B2C2")
+    val actionsPrimaryRegularDisabledIcon: Color = jumpyColor("#FFC8B2C2")
     val actionsPrimaryRegularDisabledSurface: Color = jumpyColor("#24C8B2C2")
     val actionsPrimaryRegularDisabledSurfaceAlternate: Color = jumpyColor("#FF1A1A1A")
     val actionsPrimaryRegularDisabledText: Color = jumpyColor("#FFC8B2C2")
     val actionsPrimaryRegularFocusBorder: Color = jumpyColor("#FFC86CAF")
     val actionsPrimaryRegularFocusFocusRing: Color = jumpyColor("#FFC86CAF")
-    val actionsPrimaryRegularFocusIcon: Color = jumpyColor("#1FC86CAF")
+    val actionsPrimaryRegularFocusIcon: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularFocusSurface: Color = jumpyColor("#FFD881BE")
     val actionsPrimaryRegularFocusText: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularHoverBorder: Color = jumpyColor("#FFC86CAF")
-    val actionsPrimaryRegularHoverIcon: Color = jumpyColor("#1FC86CAF")
+    val actionsPrimaryRegularHoverIcon: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularHoverSurface: Color = jumpyColor("#FFC86CAF")
     val actionsPrimaryRegularHoverText: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularPressedBorder: Color = jumpyColor("#FFC86CAF")
-    val actionsPrimaryRegularPressedIcon: Color = jumpyColor("#1FC86CAF")
+    val actionsPrimaryRegularPressedIcon: Color = jumpyColor("#FF000000")
     val actionsPrimaryRegularPressedSurface: Color = jumpyColor("#FFEEF5DF")
     val actionsPrimaryRegularPressedText: Color = jumpyColor("#FF000000")
     val actionsPrimaryWarningDefaultBorder: Color = jumpyColor("#FF1A1C1F")