@mario_hahn/jumpy-ui 0.14.1 → 0.14.3

package/dist/{chunk-KDFNGI6Y.js → chunk-73UN7NZJ.js}

@@ -14496,6 +14496,10 @@ var providerStyles = `
   color: var(--jumpy-cmp-base-input-value-color);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='input'][type='number']::-webkit-inner-spin-button {
+  transform: translateY(var(--jumpy-input-spin-shift, 0px));
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='input'][type='search']::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
@@ -15947,7 +15951,7 @@ var providerStyles = `
    Explicit columns so a hidden menu button does not shift the title. */
 [data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] > [data-jumpy-slot='top-bar-leading'] {

package/dist/{chunk-KUCMD6DR.js → chunk-KSMTJ2AH.js}

@@ -18,7 +18,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-KDFNGI6Y.js";
+} from "./chunk-73UN7NZJ.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -36,6 +36,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var JumpyTableContext = createContext2(null);
 var JumpyExpandableContext = createContext2(null);
 var JumpySideMenuContext = createContext2(null);
+var JumpyAppShellNavigationContext = createContext2(false);
 var JumpyToggleButtonGroupContext = createContext2(null);
 var JumpySnackbarContext = createContext2({ addSnackbar: () => "", removeSnackbar: () => {
 }, clearAll: () => {
@@ -789,6 +790,7 @@ function JumpSideMenu({ as, children, className = "", collapsed = false, selecte
   const previousCollapsed = useRef(collapsed);
   const releaseTimer = useRef(void 0);
   const [isResizing, setIsResizing] = useState(false);
+  const fillsNavigation = useContext(JumpyAppShellNavigationContext) && !collapsed;
   useLayoutEffect(() => {
     if (previousCollapsed.current === collapsed) return void 0;
     previousCollapsed.current = collapsed;
@@ -845,7 +847,7 @@ function JumpSideMenu({ as, children, className = "", collapsed = false, selecte
       className: cn(className),
       style: {
         display: "block",
-        width: "fit-content",
+        width: fillsNavigation ? "100%" : "fit-content",
         height: "fit-content",
         overflowX: "hidden",
         overflowY: "auto",
@@ -2298,7 +2300,7 @@ function JumpyAppShellActions({ actions, variant, ariaLabels }) {
   if (!actions.length) return null;
   const gap = spacingValue(theme, JumpySpacing.smallXS);
   if (variant === "full") {
-    return /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "app-shell-actions", "data-variant": "full", style: { alignItems: "center", gap, flexWrap: "wrap", justifyContent: "flex-end" }, children: actions.map((action, index) => /* @__PURE__ */ jsx(JumpButton, { as: action.href ? "a" : void 0, href: action.href, variant: action.variant || "secondary", leadingIcon: action.icon, disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index)) });
+    return /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "app-shell-actions", "data-variant": "full", style: { alignItems: "center", gap, flexWrap: "nowrap", justifyContent: "flex-end" }, children: actions.map((action, index) => /* @__PURE__ */ jsx(JumpButton, { as: action.href ? "a" : void 0, href: action.href, variant: action.variant || "secondary", leadingIcon: action.icon, disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index)) });
   }
   const visible = actions.length > 2 ? actions.slice(0, 1) : actions;
   const overflow = actions.length > 2 ? actions.slice(1) : [];
@@ -2407,6 +2409,7 @@ ${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { display: no
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='tab-bar'] { display: none; }
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'][data-mobile-only='true'] { display: none; }
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'] > [data-leading='menu'] { display: none; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'][data-large-title='true'] [data-jumpy-slot='app-shell-back'][data-variant='bar'] { display: none; }
 }`;
   const topBarNode = /* @__PURE__ */ jsx(
     JumpTopBar,
@@ -2465,7 +2468,7 @@ ${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { display: no
             },
             children: [
               brand ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-brand", style: { flex: "0 0 auto", padding: spacingValue(theme, JumpySpacing.large2XL), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: brand }) : null,
-              navigation ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }) : null,
+              navigation ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: /* @__PURE__ */ jsx(JumpyAppShellNavigationContext.Provider, { value: true, children: navigation }) }) : null,
               sidebarFooter ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-sidebar-footer", style: { flex: "0 0 auto", padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
             ]
           }
@@ -2535,7 +2538,7 @@ ${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { display: no
                   title: brand
                 }
               ),
-              /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }),
+              /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: /* @__PURE__ */ jsx(JumpyAppShellNavigationContext.Provider, { value: true, children: navigation }) }),
               sidebarFooter ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-drawer-footer", style: { flex: "0 0 auto", padding: `${spacingValue(theme, JumpySpacing.large)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-bottom, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`, borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`, backgroundColor: "var(--jumpy-color-surface-card)" }, children: sidebarFooter }) : null
             ]
           }
@@ -2967,6 +2970,18 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
     setInternalOpen(next);
     onOpenChange?.(next);
   }
+  useEffect(() => {
+    if (!isOpen) return void 0;
+    function dismissOutside(event) {
+      if (!refs.reference.current?.contains(event.target) && !refs.floating.current?.contains(event.target)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("focusin", dismissOutside);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("focusin", dismissOutside);
+    };
+  });
   function commit(date) {
     if (date && dateIsUnavailable(date, { minDate, maxDate, disabledDates, isDateDisabled })) return;
     const next = coerceDateOutput(date, value ?? defaultValue);
@@ -3080,6 +3095,18 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
     setInternalOpen(next);
     onOpenChange?.(next);
   }
+  useEffect(() => {
+    if (!isOpen) return void 0;
+    function dismissOutside(event) {
+      if (!refs.reference.current?.contains(event.target) && !refs.floating.current?.contains(event.target)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("focusin", dismissOutside);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("focusin", dismissOutside);
+    };
+  });
   function commit(part, rawValue) {
     const next = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
     if (part === "hour") {
@@ -3776,11 +3803,18 @@ function JumpLinkButton({ href, variant = "borderless", status = "regular", clas
     }
   );
 }
+function nativeColorScheme(theme) {
+  const match = /^#([0-9a-f]{6})/i.exec(String(theme.color?.surfaceField || ""));
+  if (!match) return void 0;
+  const [r, g, b] = [0, 2, 4].map((index) => parseInt(match[1].slice(index, index + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.4 ? "dark" : "light";
+}
 var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref) {
   const theme = useJumpyTheme();
   const fieldContext = useContext(JumpyFieldContext);
   const inputOffset = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : spacingValue(theme, JumpySpacing.zero);
   const inputMinHeight = fieldContext ? void 0 : sizeValue(theme, JumpySize.largeXL) - spacingValue(theme, JumpySpacing.small3XS) * 2;
+  const spinShift = props.type === "number" && inputOffset ? Math.max(0, (inputOffset - spacingValue(theme, JumpySpacing.small3XS) / 2) / 2) : 0;
   const inputElement = /* @__PURE__ */ jsx(
     "input",
     {
@@ -3791,7 +3825,9 @@ var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref
       style: {
         ...getFieldInputStyles(theme, props.disabled),
         minHeight: inputMinHeight,
-        marginTop: inputOffset,
+        marginTop: inputOffset - spinShift,
+        ...spinShift ? { paddingTop: spinShift, "--jumpy-input-spin-shift": `${-spinShift}px` } : {},
+        colorScheme: props.type === "number" ? nativeColorScheme(theme) : void 0,
         ...props.style || {}
       }
     }

package/dist/{chunk-KYDYZC4E.js → chunk-YSO235OL.js}

@@ -1,12 +1,12 @@
 import {
   JumpField,
   JumpyFieldContext
-} from "./chunk-KUCMD6DR.js";
+} from "./chunk-KSMTJ2AH.js";
 import {
   JumpySpacing,
   spacingValue,
   useJumpyTheme
-} from "./chunk-KDFNGI6Y.js";
+} from "./chunk-73UN7NZJ.js";
 
 // editor.js
 import { useContext, useRef as useRef2, useState as useState2 } from "react";

package/dist/components.js

@@ -74,7 +74,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-KUCMD6DR.js";
+} from "./chunk-KSMTJ2AH.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -105,7 +105,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-KDFNGI6Y.js";
+} from "./chunk-73UN7NZJ.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/editor.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-KYDYZC4E.js";
-import "./chunk-KUCMD6DR.js";
-import "./chunk-KDFNGI6Y.js";
+} from "./chunk-YSO235OL.js";
+import "./chunk-KSMTJ2AH.js";
+import "./chunk-73UN7NZJ.js";
 import "./chunk-3DBKYKP2.js";
 import "./chunk-XDTVYUWG.js";
 export {

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-KYDYZC4E.js";
+} from "./chunk-YSO235OL.js";
 import {
   BrandMark,
   JumpAppShell,
@@ -77,7 +77,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-KUCMD6DR.js";
+} from "./chunk-KSMTJ2AH.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -108,7 +108,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-KDFNGI6Y.js";
+} from "./chunk-73UN7NZJ.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/theme.js

@@ -30,7 +30,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-KDFNGI6Y.js";
+} from "./chunk-73UN7NZJ.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mario_hahn/jumpy-ui",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": ["**/*.css"],