@mario_hahn/jumpy-ui 0.15.0 → 0.15.2

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

@@ -1,12 +1,12 @@
 import {
   JumpField,
   JumpyFieldContext
-} from "./chunk-K4DXYTVW.js";
+} from "./chunk-ONQSFWRA.js";
 import {
   JumpySpacing,
   spacingValue,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-YWENJWF3.js";
 
 // editor.js
 import { useContext, useRef as useRef2, useState as useState2 } from "react";

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

@@ -18,7 +18,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-YWENJWF3.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -2722,7 +2722,7 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
     }
   );
 }
-function JumpSwitch({ label, children, checked, defaultChecked = false, onCheckedChange, labelPlacement = "end", innerClasses = {}, className = "", disabled = false, readOnly = false, style, ...props }) {
+function JumpSwitch({ label, children, checked, defaultChecked = false, onCheckedChange, labelPlacement = "end", variant = "inline", innerClasses = {}, className = "", disabled = false, readOnly = false, style, ...props }) {
   const theme = useJumpyTheme();
   const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
   const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
@@ -2732,6 +2732,7 @@ function JumpSwitch({ label, children, checked, defaultChecked = false, onChecke
   const selectorState = disabled ? "disabled" : isReadonly ? "readOnly" : "default";
   const selectorTokens = isChecked ? theme.selectors.active[selectorState] : theme.selectors.inactive[selectorState];
   const labelContent = children ?? label;
+  const fieldRow = variant === "field";
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -2739,7 +2740,8 @@ function JumpSwitch({ label, children, checked, defaultChecked = false, onChecke
       "data-checked": isChecked ? "true" : "false",
       "data-disabled": disabled ? "true" : void 0,
       "data-readonly": isReadonly ? "true" : void 0,
-      "data-label-placement": labelPlacement,
+      "data-label-placement": fieldRow ? "start" : labelPlacement,
+      "data-variant": variant,
       className: cn(className),
       style: {
         "--jumpy-cmp-switch-thumb-size": `${sizeValue(theme, JumpySize.small2XS)}px`,
@@ -2761,6 +2763,7 @@ function JumpSwitch({ label, children, checked, defaultChecked = false, onChecke
         fontSize: bodyMedium.fontSize,
         lineHeight: bodyMedium.lineHeight,
         fontWeight: bodyMedium.fontWeight,
+        ...fieldRow ? { ...getFieldShellStyles(theme, disabled, "regular", false, readOnly), justifyContent: "space-between", paddingRight: spacingValue(theme, JumpySpacing.large), cursor: disabled || readOnly ? "default" : "pointer", "--jumpy-cmp-switch-label-color": "var(--jumpy-color-text-primary)" } : {},
         ...style || {}
       },
       children: [
@@ -2876,17 +2879,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 +3035,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 +3056,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 +3179,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 +3933,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-YAOAIT3N.js → chunk-YWENJWF3.js}

@@ -15690,6 +15690,20 @@ var providerStyles = `
   isolation: isolate;
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='switch'][data-variant='field'] {
+  --jumpy-cmp-base-input-border-color: var(--jumpy-input-regular-default-border);
+  --jumpy-cmp-base-input-surface-color: var(--jumpy-input-regular-default-surface);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='switch'][data-variant='field']:hover:not([data-disabled='true']):not([data-readonly='true']) {
+  --jumpy-cmp-base-input-border-color: var(--jumpy-input-regular-hover-border);
+  --jumpy-cmp-base-input-surface-color: var(--jumpy-input-regular-hover-surface);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='switch'][data-variant='field']:has([data-jumpy-slot='switch-input']:focus-visible) {
+  --jumpy-cmp-base-input-border-color: var(--jumpy-input-regular-focus-border);
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='switch'][data-label-placement='start'] {
   flex-direction: row-reverse;
 }
@@ -16658,18 +16672,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 +16711,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 +16743,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/components.js

@@ -74,7 +74,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-K4DXYTVW.js";
+} from "./chunk-ONQSFWRA.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -105,7 +105,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-YWENJWF3.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-CEG6MK6U.js";
+import "./chunk-ONQSFWRA.js";
+import "./chunk-YWENJWF3.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-CEG6MK6U.js";
 import {
   BrandMark,
   JumpAppShell,
@@ -77,7 +77,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-K4DXYTVW.js";
+} from "./chunk-ONQSFWRA.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -108,7 +108,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-YAOAIT3N.js";
+} from "./chunk-YWENJWF3.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-YWENJWF3.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/index.d.ts

@@ -127,7 +127,7 @@ export declare function JumpSectionFooter(props: HTMLAttributes<HTMLElement> & {
 export declare function JumpTag(props: HTMLAttributes<HTMLSpanElement> & { size?: 'small' | 'medium'; status?: 'regular' | 'positive' | 'warning' | 'alarm'; disabled?: boolean; children: ReactNode }): ReactNode
 export declare function JumpChip(props: ButtonHTMLAttributes<HTMLButtonElement> & { selected?: boolean; disabled?: boolean; children: ReactNode }): ReactNode
 export declare function JumpCheckbox(props: Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'children'> & { label?: ReactNode; children?: ReactNode; checked?: boolean; defaultChecked?: boolean; indeterminate?: boolean; onCheckedChange?: (checked: boolean) => void; onIndeterminateChange?: (indeterminate: boolean) => void; disabled?: boolean; readOnly?: boolean; labelPlacement?: 'start' | 'end'; innerClasses?: Partial<Record<'container' | 'input' | 'icons', { className?: string; style?: import('react').CSSProperties }>> }): ReactNode
-export declare function JumpSwitch(props: Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'role' | 'children'> & { label?: ReactNode; children?: ReactNode; checked?: boolean; defaultChecked?: boolean; onChange?: (event: unknown) => void; onCheckedChange?: (checked: boolean) => void; disabled?: boolean; readOnly?: boolean; labelPlacement?: 'start' | 'end'; innerClasses?: JumpSwitchInnerClasses }): ReactNode
+export declare function JumpSwitch(props: Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'role' | 'children'> & { label?: ReactNode; children?: ReactNode; checked?: boolean; defaultChecked?: boolean; onChange?: (event: unknown) => void; onCheckedChange?: (checked: boolean) => void; disabled?: boolean; readOnly?: boolean; labelPlacement?: 'start' | 'end'; variant?: 'inline' | 'field'; innerClasses?: JumpSwitchInnerClasses }): ReactNode
 export declare function JumpRadioGroup(props: HTMLAttributes<HTMLDivElement> & { name?: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; disabled?: boolean; readOnly?: boolean; direction?: 'horizontal' | 'vertical'; innerClasses?: JumpRadioInnerClasses; options: Array<{ value: string; label: ReactNode; disabled?: boolean }> }): ReactNode
 export type JumpDropdownItemValue = string | number
 export interface JumpDropdownItem<TValue extends JumpDropdownItemValue = JumpDropdownItemValue> { label: string; value: TValue; children?: Array<JumpDropdownItem<TValue>>; metadata?: Record<string, unknown>; disabled?: boolean }

package/package.json

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