@mario_hahn/jumpy-ui 0.15.0 → 0.15.1

package/dist/{chunk-YAOAIT3N.js → chunk-5YSWJIM2.js}

@@ -16658,18 +16658,18 @@ function createCardTokens(theme) {
   if (presetCard?.inactive && presetCard?.active) {
     return {
       inactive: {
-        default: normalizeTokenState(presetCard.inactive.default),
-        hover: normalizeTokenState(presetCard.inactive.hover),
-        pressed: normalizeTokenState(presetCard.inactive.pressed),
-        focus: normalizeTokenState(presetCard.inactive.focus),
-        disabled: normalizeTokenState(presetCard.inactive.disabled)
+        default: resolveGeneratedState(presetCard.inactive.default, "card-inactive-default", theme),
+        hover: resolveGeneratedState(presetCard.inactive.hover, "card-inactive-hover", theme),
+        pressed: resolveGeneratedState(presetCard.inactive.pressed, "card-inactive-pressed", theme),
+        focus: resolveGeneratedState(presetCard.inactive.focus, "card-inactive-focus", theme),
+        disabled: resolveGeneratedState(presetCard.inactive.disabled, "card-inactive-disabled", theme)
       },
       active: {
-        default: normalizeTokenState(presetCard.active.default),
-        hover: normalizeTokenState(presetCard.active.hover),
-        pressed: normalizeTokenState(presetCard.active.pressed),
-        focus: normalizeTokenState(presetCard.active.focus),
-        disabled: normalizeTokenState(presetCard.active.disabled)
+        default: resolveGeneratedState(presetCard.active.default, "card-active-default", theme),
+        hover: resolveGeneratedState(presetCard.active.hover, "card-active-hover", theme),
+        pressed: resolveGeneratedState(presetCard.active.pressed, "card-active-pressed", theme),
+        focus: resolveGeneratedState(presetCard.active.focus, "card-active-focus", theme),
+        disabled: resolveGeneratedState(presetCard.active.disabled, "card-active-disabled", theme)
       }
     };
   }
@@ -16697,18 +16697,18 @@ function createListItemTokens(theme) {
   if (presetInactiveRegular && presetActiveRegular) {
     return {
       inactive: {
-        default: normalizeTokenState(presetInactiveRegular.default),
-        hover: normalizeTokenState(presetInactiveRegular.hover),
-        pressed: normalizeTokenState(presetInactiveRegular.pressed),
-        focus: normalizeTokenState(presetInactiveRegular.focus),
-        disabled: normalizeTokenState(presetInactiveRegular.disabled)
+        default: resolveGeneratedState(presetInactiveRegular.default, "interactive-inactive-regular-default", theme),
+        hover: resolveGeneratedState(presetInactiveRegular.hover, "interactive-inactive-regular-hover", theme),
+        pressed: resolveGeneratedState(presetInactiveRegular.pressed, "interactive-inactive-regular-pressed", theme),
+        focus: resolveGeneratedState(presetInactiveRegular.focus, "interactive-inactive-regular-focus", theme),
+        disabled: resolveGeneratedState(presetInactiveRegular.disabled, "interactive-inactive-regular-disabled", theme)
       },
       active: {
-        default: normalizeTokenState(presetActiveRegular.default),
-        hover: normalizeTokenState(presetActiveRegular.hover),
-        pressed: normalizeTokenState(presetActiveRegular.pressed),
-        focus: normalizeTokenState(presetActiveRegular.focus),
-        disabled: normalizeTokenState(presetActiveRegular.disabled)
+        default: resolveGeneratedState(presetActiveRegular.default, "interactive-active-regular-default", theme),
+        hover: resolveGeneratedState(presetActiveRegular.hover, "interactive-active-regular-hover", theme),
+        pressed: resolveGeneratedState(presetActiveRegular.pressed, "interactive-active-regular-pressed", theme),
+        focus: resolveGeneratedState(presetActiveRegular.focus, "interactive-active-regular-focus", theme),
+        disabled: resolveGeneratedState(presetActiveRegular.disabled, "interactive-active-regular-disabled", theme)
       }
     };
   }
@@ -16729,25 +16729,41 @@ function createListItemTokens(theme) {
     }
   };
 }
+function resolveGeneratedState(state, prefix, theme) {
+  const normalized = normalizeTokenState(state);
+  if (!normalized) return normalized;
+  const sources = { ...color_sources_default.base, ...color_sources_default.presets?.[theme.__tokenPresetName || "default-light"] };
+  const slots = { surface: "surface", border: "border", text: "text", subtext: "subtext", icon: "icon", handle: "handle", focusRing: "focus-ring", hoverRing: "hover-ring" };
+  const resolved = { ...normalized };
+  for (const [slot, cssSlot] of Object.entries(slots)) {
+    const source = sources[`jumpy-${prefix}-${cssSlot}`];
+    if (source && theme.color?.[source] !== void 0) resolved[slot] = theme.color[source];
+  }
+  return resolved;
+}
+function resolveSelectorState(state, group, name, theme) {
+  return resolveGeneratedState(state, `selectors-${group}-${name}`, theme);
+}
 function createSelectorTokens(theme) {
   const presetSelectors = getWebPresetTokenRoot(theme.__tokenPresetName || "default-light")?.selectors;
   if (presetSelectors?.inactive && presetSelectors?.active) {
+    const state = (group, name, key = name) => resolveSelectorState(presetSelectors[group][key], group, name, theme);
     return {
       inactive: {
-        default: normalizeTokenState(presetSelectors.inactive.default),
-        disabled: normalizeTokenState(presetSelectors.inactive.disabled),
-        focus: normalizeTokenState(presetSelectors.inactive.focus),
-        hover: normalizeTokenState(presetSelectors.inactive.hover),
-        pressed: normalizeTokenState(presetSelectors.inactive.pressed),
-        readOnly: normalizeTokenState(presetSelectors.inactive.read?.only)
+        default: state("inactive", "default"),
+        disabled: state("inactive", "disabled"),
+        focus: state("inactive", "focus"),
+        hover: state("inactive", "hover"),
+        pressed: state("inactive", "pressed"),
+        readOnly: resolveSelectorState(presetSelectors.inactive.read?.only, "inactive", "read-only", theme)
       },
       active: {
-        default: normalizeTokenState(presetSelectors.active.default),
-        disabled: normalizeTokenState(presetSelectors.active.disabled),
-        focus: normalizeTokenState(presetSelectors.active.focus),
-        hover: normalizeTokenState(presetSelectors.active.hover),
-        pressed: normalizeTokenState(presetSelectors.active.pressed),
-        readOnly: normalizeTokenState(presetSelectors.active.read?.only)
+        default: state("active", "default"),
+        disabled: state("active", "disabled"),
+        focus: state("active", "focus"),
+        hover: state("active", "hover"),
+        pressed: state("active", "pressed"),
+        readOnly: resolveSelectorState(presetSelectors.active.read?.only, "active", "read-only", theme)
       }
     };
   }

package/dist/{chunk-K4DXYTVW.js → chunk-UT6U2IMA.js}

@@ -18,7 +18,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-5YSWJIM2.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -2876,17 +2876,45 @@ function formatTimeValue(value, format = "HH:mm") {
   const hours12 = hours24 % 12 || 12;
   return format.includes("aa") ? format.replace("hh", String(hours12).padStart(2, "0")).replace("mm", minutes).replace("aa", period) : format.replace("HH", String(hours24).padStart(2, "0")).replace("mm", minutes);
 }
-function parseDateValue(text, format = "MM/dd/yyyy") {
+var MASK_TOKENS = { yyyy: { max: 4 }, MM: { max: 2, padAbove: "1" }, dd: { max: 2, padAbove: "3" }, HH: { max: 2, padAbove: "2" }, mm: { max: 2, padAbove: "5" } };
+function maskDigitsToFormat(text, format) {
+  const digits = text.replace(/\D/g, "");
+  const typedSeparator = /\D$/.test(text);
+  const parts = format.split(/(yyyy|MM|dd|HH|mm)/).filter(Boolean);
+  let out = "";
+  let index = 0;
+  for (let i = 0; i < parts.length; i += 1) {
+    const rule = MASK_TOKENS[parts[i]];
+    if (!rule) continue;
+    if (index >= digits.length) break;
+    let chunk;
+    if (rule.padAbove && digits[index] > rule.padAbove) {
+      chunk = `0${digits[index]}`;
+      index += 1;
+    } else {
+      chunk = digits.slice(index, index + rule.max);
+      index += chunk.length;
+      if (rule.padAbove && chunk.length === 1 && typedSeparator && index === digits.length) chunk = `0${chunk}`;
+    }
+    out += chunk;
+    if (chunk.length < rule.max) break;
+    const next = parts.findIndex((part, position) => position > i && MASK_TOKENS[part]);
+    if (next !== -1 && (index < digits.length || typedSeparator)) out += parts.slice(i + 1, next).join("");
+  }
+  return out;
+}
+function parseDateValue(text, format = "MM/dd/yyyy", { shortYear = false } = {}) {
   const value = text.trim();
   if (!value) return null;
   const activeFormat = Array.isArray(format) ? format[0] : format;
   const escaped = activeFormat.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const pattern = escaped.replace("dd", "(?<dd>\\d{1,2})").replace("MM", "(?<MM>\\d{1,2})").replace("yyyy", "(?<yyyy>\\d{4})");
+  const pattern = escaped.replace("dd", "(?<dd>\\d{1,2})").replace("MM", "(?<MM>\\d{1,2})").replace("yyyy", shortYear ? "(?<yyyy>\\d{4}|\\d{2})" : "(?<yyyy>\\d{4})");
   const match = value.match(new RegExp(`^${pattern}$`));
   if (!match?.groups) return null;
   const day = Number(match.groups.dd);
   const month = Number(match.groups.MM) - 1;
-  const year = Number(match.groups.yyyy);
+  let year = Number(match.groups.yyyy);
+  if (match.groups.yyyy.length === 2) year += year <= (/* @__PURE__ */ new Date()).getFullYear() % 100 + 10 ? 2e3 : 1900;
   const date = new Date(year, month, day);
   return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day ? date : null;
 }
@@ -3004,12 +3032,14 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
         readOnly,
         disabled,
         "data-has-value": selectedTime !== null,
+        "data-jumpy-floating": isOpen,
         value: draft,
         placeholder: props.placeholder || (Array.isArray(format) ? format[0] : format),
         autoComplete: "off",
         inputMode: "numeric",
         onChange: (event) => {
-          const text = event.target.value;
+          const typed = event.target.value;
+          const text = typed.length > draft.length && event.target.selectionStart === typed.length ? maskDigitsToFormat(typed, resolvedFormat) || typed : typed;
           setDraft(text);
           const parsedDate = parseDateValue(text, format);
           typedValue.current = void 0;
@@ -3023,7 +3053,15 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
         },
         onBlur: (event) => {
           typedValue.current = void 0;
-          setDraft(inputValue);
+          const shortDate = parseDateValue(draft, format) ? null : parseDateValue(draft, format, { shortYear: true });
+          if (shortDate && shortDate.getTime() !== selectedTime && !dateIsUnavailable(shortDate, { minDate, maxDate, disabledDates, isDateDisabled })) {
+            const next = coerceDateOutput(shortDate, value ?? defaultValue);
+            setDraft(formatDateValue(shortDate, resolvedFormat));
+            if (!isControlled) setInternalValue(next);
+            onChange?.(next);
+          } else {
+            setDraft(inputValue);
+          }
           props.onBlur?.(event);
         },
         onClick: (event) => {
@@ -3138,12 +3176,14 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
         readOnly,
         disabled,
         "data-has-value": selectedTime !== null,
+        "data-jumpy-floating": isOpen,
         value: draft,
         placeholder: props.placeholder || resolvedFormat,
         autoComplete: "off",
         inputMode: resolvedFormat.includes("aa") ? "text" : "numeric",
         onChange: (event) => {
-          const text = event.target.value;
+          const typed = event.target.value;
+          const text = !resolvedFormat.includes("aa") && typed.length > draft.length && event.target.selectionStart === typed.length ? maskDigitsToFormat(typed, resolvedFormat) || typed : typed;
           setDraft(text);
           const parsedDate = parseTimeValue(text, resolvedFormat);
           typedValue.current = void 0;
@@ -3890,7 +3930,8 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
   const disabled = Boolean(child.props.disabled);
   const isDropdownTrigger = child.props["data-jumpy-dropdown-trigger"] === true || child.props["data-jumpy-dropdown-trigger"] === "true";
   const readOnly = Boolean(child.props.readOnly) && !isDropdownTrigger;
-  const floating = focused && !readOnly || hasValue || Boolean(props.slots?.content);
+  const keepFloating = child.props["data-jumpy-floating"] === true || child.props["data-jumpy-floating"] === "true";
+  const floating = focused && !readOnly || hasValue || childHasValue || keepFloating || Boolean(props.slots?.content);
   const isTextarea = child.type === JumpTextarea || child.props["data-jumpy-token-editor"] && child.props.multiline;
   const isDropdown = isDropdownTrigger || child.props["data-jumpy-component"] === "dropdown";
   const status = error ? "alarm" : props.status || "regular";

package/dist/{chunk-NK6N6UY5.js → chunk-ZFRDQCPV.js}

@@ -1,12 +1,12 @@
 import {
   JumpField,
   JumpyFieldContext
-} from "./chunk-K4DXYTVW.js";
+} from "./chunk-UT6U2IMA.js";
 import {
   JumpySpacing,
   spacingValue,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-5YSWJIM2.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-K4DXYTVW.js";
+} from "./chunk-UT6U2IMA.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -105,7 +105,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-5YSWJIM2.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/editor.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-NK6N6UY5.js";
-import "./chunk-K4DXYTVW.js";
-import "./chunk-YAOAIT3N.js";
+} from "./chunk-ZFRDQCPV.js";
+import "./chunk-UT6U2IMA.js";
+import "./chunk-5YSWJIM2.js";
 import "./chunk-3DBKYKP2.js";
 import "./chunk-XDTVYUWG.js";
 export {

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-NK6N6UY5.js";
+} from "./chunk-ZFRDQCPV.js";
 import {
   BrandMark,
   JumpAppShell,
@@ -77,7 +77,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-K4DXYTVW.js";
+} from "./chunk-UT6U2IMA.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -108,7 +108,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-5YSWJIM2.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/theme.js

@@ -30,7 +30,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-5YSWJIM2.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/package.json

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