@accelint/design-toolkit 9.4.0 → 9.5.0

package/dist/components/coordinate-field/segment.js

@@ -78,6 +78,10 @@ import { jsx } from "react/jsx-runtime";
 function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeholder, maxLength, className, isDisabled, isReadOnly, allowedChars, segmentRef, segmentIndex, totalSegments: _totalSegments, onAutoAdvance, onAutoRetreat, pad, ariaLabel }) {
 	const contextState = useCoordinateFieldStateContext();
 	const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;
+	const allowedCharsRegex = useMemo(() => {
+		if (!allowedChars) return null;
+		return new RegExp(`^${allowedChars}*$`, "i");
+	}, [allowedChars]);
 	const dynamicWidth = useMemo(() => {
 		if (maxLength === void 0) return;
 		const padding = pad ?? .5;
@@ -89,9 +93,7 @@ function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeh
 	]);
 	const handleChange = (e) => {
 		const newValue = e.target.value;
-		if (allowedChars) {
-			if (!(/* @__PURE__ */ new RegExp(`^${allowedChars}*$`)).test(newValue)) return;
-		}
+		if (allowedCharsRegex && !allowedCharsRegex.test(newValue)) return;
 		if (maxLength && newValue.length > maxLength) return;
 		onChange(newValue);
 		if (maxLength && newValue.length === maxLength && onAutoAdvance) {
@@ -103,11 +105,9 @@ function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeh
 	};
 	const handlePaste = (e) => {
 		const pastedText = e.clipboardData.getData("text");
-		if (allowedChars) {
-			if (!(/* @__PURE__ */ new RegExp(`^${allowedChars}*$`)).test(pastedText)) {
-				e.preventDefault();
-				return;
-			}
+		if (allowedCharsRegex && !allowedCharsRegex.test(pastedText)) {
+			e.preventDefault();
+			return;
 		}
 		if (maxLength && pastedText.length > maxLength) {
 			e.preventDefault();

package/dist/components/coordinate-field/segment.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment.js","names":[],"sources":["../../../src/components/coordinate-field/segment.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useMemo } from 'react';\nimport { useCoordinateFieldStateContext } from './context';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { CoordinateSegmentProps } from './types';\n\n/**\n * CoordinateSegment - A controlled input component for a single coordinate segment\n *\n * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).\n * It handles character filtering, focus management, and keyboard navigation.\n *\n * Segment Types (determined by allowedChars):\n * - Numeric: \"[0-9\\\\-\\\\.]\" - for DD degrees, DDM/DMS degrees/minutes/seconds\n * - Directional: \"[NSEW]\" - for DDM/DMS direction indicators\n * - Alphanumeric: \"[0-9A-Z]\" - for MGRS/UTM zone identifiers\n *\n * @param props - The coordinate segment props.\n * @param props.value - Current value of the segment.\n * @param props.onChange - Callback when the segment value changes.\n * @param props.onFocus - Callback when the segment gains focus.\n * @param props.onBlur - Callback when the segment loses focus.\n * @param props.onKeyDown - Callback for key down events.\n * @param props.placeholder - Placeholder text for the segment.\n * @param props.maxLength - Maximum character length for the segment.\n * @param props.className - Additional CSS class name.\n * @param props.isDisabled - Whether the segment is disabled.\n * @param props.isReadOnly - Whether the segment is read-only.\n * @param props.allowedChars - Regex pattern for allowed characters.\n * @param props.segmentRef - Ref for the segment input element.\n * @param props.segmentIndex - Index of this segment within the coordinate field.\n * @param props.totalSegments - Total number of segments in the coordinate field.\n * @param props.onAutoAdvance - Callback to advance focus to the next segment.\n * @param props.onAutoRetreat - Callback to retreat focus to the previous segment.\n * @param props.pad - Padding value for width calculation.\n * @param props.ariaLabel - Accessible label for the segment.\n * @returns The coordinate segment input component.\n *\n * @example\n * ```tsx\n * // Numeric segment (latitude degrees)\n * <CoordinateSegment\n *   value={latDegrees}\n *   onChange={setLatDegrees}\n *   allowedChars=\"[0-9\\\\-\\\\.]\"\n *   maxLength={10}\n *   placeholder=\"00.00000\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Directional segment (latitude direction)\n * <CoordinateSegment\n *   value={latDir}\n *   onChange={setLatDir}\n *   allowedChars=\"[NS]\"\n *   maxLength={1}\n *   placeholder=\"N\"\n * />\n * ```\n */\nexport function CoordinateSegment({\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  placeholder,\n  maxLength,\n  className,\n  isDisabled,\n  isReadOnly,\n  allowedChars,\n  segmentRef,\n  segmentIndex,\n  totalSegments: _totalSegments,\n  onAutoAdvance,\n  onAutoRetreat,\n  pad,\n  ariaLabel,\n}: CoordinateSegmentProps) {\n  const contextState = useCoordinateFieldStateContext();\n\n  const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;\n\n  // Calculate dynamic width based on focus state\n  const dynamicWidth = useMemo(() => {\n    if (maxLength === undefined) {\n      return undefined;\n    }\n\n    // Default padding to 0.5 if not specified\n    const padding = pad ?? 0.5;\n\n    // When blurred, use value length (or maxLength if empty) + padding\n    const contentLength = value.length > 0 ? value.length : maxLength;\n    return contentLength + padding;\n  }, [maxLength, pad, value.length]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n\n    if (allowedChars) {\n      const regex = new RegExp(`^${allowedChars}*$`);\n      if (!regex.test(newValue)) {\n        return;\n      }\n    }\n\n    if (maxLength && newValue.length > maxLength) {\n      return;\n    }\n\n    onChange(newValue);\n\n    if (maxLength && newValue.length === maxLength && onAutoAdvance) {\n      const timeoutId = setTimeout(() => {\n        onAutoAdvance();\n      }, 0);\n      contextState.registerTimeout(timeoutId);\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedText = e.clipboardData.getData('text');\n\n    if (allowedChars) {\n      const regex = new RegExp(`^${allowedChars}*$`);\n      if (!regex.test(pastedText)) {\n        e.preventDefault();\n        return;\n      }\n    }\n\n    if (maxLength && pastedText.length > maxLength) {\n      e.preventDefault();\n      onChange(pastedText.slice(0, maxLength));\n      return;\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const cursorAtStart = input.selectionStart === 0;\n    const cursorAtEnd = input.selectionStart === value.length;\n    const isEmpty = value.length === 0;\n\n    if (e.key === 'Backspace' && isEmpty && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowLeft' && cursorAtStart && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowRight' && cursorAtEnd && onAutoAdvance) {\n      e.preventDefault();\n      onAutoAdvance();\n      return;\n    }\n\n    onKeyDown?.(e);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    onFocus?.();\n  };\n\n  const handleBlur = () => {\n    onBlur?.();\n  };\n\n  return (\n    <input\n      readOnly={isReadOnly}\n      ref={segmentRef}\n      tabIndex={isReadOnly ? -1 : 0}\n      type='text'\n      value={value}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      placeholder={placeholder}\n      maxLength={maxLength}\n      className={className}\n      disabled={effectiveIsDisabled}\n      style={dynamicWidth ? { width: `${dynamicWidth}ch` } : undefined}\n      aria-label={\n        ariaLabel ||\n        `Coordinate segment ${segmentIndex !== undefined ? segmentIndex + 1 : ''}`\n      }\n      aria-disabled={effectiveIsDisabled}\n      autoComplete='off'\n      inputMode={\n        allowedChars?.includes('0-9')\n          ? allowedChars.includes('\\\\-\\\\.')\n            ? 'decimal'\n            : 'numeric'\n          : 'text'\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAgB,kBAAkB,EAChC,OACA,UACA,SACA,QACA,WACA,aACA,WACA,WACA,YACA,YACA,cACA,YACA,cACA,eAAe,gBACf,eACA,eACA,KACA,aACyB;CACzB,MAAM,eAAe,gCAAgC;CAErD,MAAM,sBAAsB,aAAa,cAAc;CAGvD,MAAM,eAAe,cAAc;AACjC,MAAI,cAAc,OAChB;EAIF,MAAM,UAAU,OAAO;AAIvB,UADsB,MAAM,SAAS,IAAI,MAAM,SAAS,aACjC;IACtB;EAAC;EAAW;EAAK,MAAM;EAAO,CAAC;CAElC,MAAM,gBAAgB,MAAqC;EACzD,MAAM,WAAW,EAAE,OAAO;AAE1B,MAAI,cAEF;OAAI,kBADU,IAAI,OAAO,IAAI,aAAa,IAAI,EACnC,KAAK,SAAS,CACvB;;AAIJ,MAAI,aAAa,SAAS,SAAS,UACjC;AAGF,WAAS,SAAS;AAElB,MAAI,aAAa,SAAS,WAAW,aAAa,eAAe;GAC/D,MAAM,YAAY,iBAAiB;AACjC,mBAAe;MACd,EAAE;AACL,gBAAa,gBAAgB,UAAU;;;CAI3C,MAAM,eAAe,MAA8C;EACjE,MAAM,aAAa,EAAE,cAAc,QAAQ,OAAO;AAElD,MAAI,cAEF;OAAI,kBADU,IAAI,OAAO,IAAI,aAAa,IAAI,EACnC,KAAK,WAAW,EAAE;AAC3B,MAAE,gBAAgB;AAClB;;;AAIJ,MAAI,aAAa,WAAW,SAAS,WAAW;AAC9C,KAAE,gBAAgB;AAClB,YAAS,WAAW,MAAM,GAAG,UAAU,CAAC;AACxC;;;CAIJ,MAAM,iBAAiB,MAAuC;EAC5D,MAAM,QAAQ,EAAE;EAChB,MAAM,gBAAgB,MAAM,mBAAmB;EAC/C,MAAM,cAAc,MAAM,mBAAmB,MAAM;EACnD,MAAM,UAAU,MAAM,WAAW;AAEjC,MAAI,EAAE,QAAQ,eAAe,WAAW,eAAe;AACrD,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,eAAe,iBAAiB,eAAe;AAC3D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,gBAAgB,eAAe,eAAe;AAC1D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,cAAY,EAAE;;CAGhB,MAAM,eAAe,MAAoC;AACvD,IAAE,OAAO,QAAQ;AACjB,aAAW;;CAGb,MAAM,mBAAmB;AACvB,YAAU;;AAGZ,QACE,oBAAC;EACC,UAAU;EACV,KAAK;EACL,UAAU,aAAa,KAAK;EAC5B,MAAK;EACE;EACP,UAAU;EACV,SAAS;EACT,WAAW;EACX,SAAS;EACT,QAAQ;EACK;EACF;EACA;EACX,UAAU;EACV,OAAO,eAAe,EAAE,OAAO,GAAG,aAAa,KAAK,GAAG;EACvD,cACE,aACA,sBAAsB,iBAAiB,SAAY,eAAe,IAAI;EAExE,iBAAe;EACf,cAAa;EACb,WACE,cAAc,SAAS,MAAM,GACzB,aAAa,SAAS,SAAS,GAC7B,YACA,YACF;GAEN"}
+{"version":3,"file":"segment.js","names":[],"sources":["../../../src/components/coordinate-field/segment.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useMemo } from 'react';\nimport { useCoordinateFieldStateContext } from './context';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { CoordinateSegmentProps } from './types';\n\n/**\n * CoordinateSegment - A controlled input component for a single coordinate segment\n *\n * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).\n * It handles character filtering, focus management, and keyboard navigation.\n *\n * Segment Types (determined by allowedChars):\n * - Numeric: \"[0-9\\\\-\\\\.]\" - for DD degrees, DDM/DMS degrees/minutes/seconds\n * - Directional: \"[NSEW]\" - for DDM/DMS direction indicators\n * - Alphanumeric: \"[0-9A-Z]\" - for MGRS/UTM zone identifiers\n *\n * @param props - The coordinate segment props.\n * @param props.value - Current value of the segment.\n * @param props.onChange - Callback when the segment value changes.\n * @param props.onFocus - Callback when the segment gains focus.\n * @param props.onBlur - Callback when the segment loses focus.\n * @param props.onKeyDown - Callback for key down events.\n * @param props.placeholder - Placeholder text for the segment.\n * @param props.maxLength - Maximum character length for the segment.\n * @param props.className - Additional CSS class name.\n * @param props.isDisabled - Whether the segment is disabled.\n * @param props.isReadOnly - Whether the segment is read-only.\n * @param props.allowedChars - Regex pattern for allowed characters.\n * @param props.segmentRef - Ref for the segment input element.\n * @param props.segmentIndex - Index of this segment within the coordinate field.\n * @param props.totalSegments - Total number of segments in the coordinate field.\n * @param props.onAutoAdvance - Callback to advance focus to the next segment.\n * @param props.onAutoRetreat - Callback to retreat focus to the previous segment.\n * @param props.pad - Padding value for width calculation.\n * @param props.ariaLabel - Accessible label for the segment.\n * @returns The coordinate segment input component.\n *\n * @example\n * ```tsx\n * // Numeric segment (latitude degrees)\n * <CoordinateSegment\n *   value={latDegrees}\n *   onChange={setLatDegrees}\n *   allowedChars=\"[0-9\\\\-\\\\.]\"\n *   maxLength={10}\n *   placeholder=\"00.00000\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Directional segment (latitude direction)\n * <CoordinateSegment\n *   value={latDir}\n *   onChange={setLatDir}\n *   allowedChars=\"[NS]\"\n *   maxLength={1}\n *   placeholder=\"N\"\n * />\n * ```\n */\nexport function CoordinateSegment({\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  placeholder,\n  maxLength,\n  className,\n  isDisabled,\n  isReadOnly,\n  allowedChars,\n  segmentRef,\n  segmentIndex,\n  totalSegments: _totalSegments,\n  onAutoAdvance,\n  onAutoRetreat,\n  pad,\n  ariaLabel,\n}: CoordinateSegmentProps) {\n  const contextState = useCoordinateFieldStateContext();\n\n  const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;\n\n  const allowedCharsRegex = useMemo(() => {\n    if (!allowedChars) return null;\n    return new RegExp(`^${allowedChars}*$`, 'i');\n  }, [allowedChars]);\n\n  // Calculate dynamic width based on focus state\n  const dynamicWidth = useMemo(() => {\n    if (maxLength === undefined) {\n      return undefined;\n    }\n\n    // Default padding to 0.5 if not specified\n    const padding = pad ?? 0.5;\n\n    // When blurred, use value length (or maxLength if empty) + padding\n    const contentLength = value.length > 0 ? value.length : maxLength;\n    return contentLength + padding;\n  }, [maxLength, pad, value.length]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n\n    if (allowedCharsRegex && !allowedCharsRegex.test(newValue)) {\n      return;\n    }\n\n    if (maxLength && newValue.length > maxLength) {\n      return;\n    }\n\n    onChange(newValue);\n\n    if (maxLength && newValue.length === maxLength && onAutoAdvance) {\n      const timeoutId = setTimeout(() => {\n        onAutoAdvance();\n      }, 0);\n      contextState.registerTimeout(timeoutId);\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedText = e.clipboardData.getData('text');\n\n    if (allowedCharsRegex && !allowedCharsRegex.test(pastedText)) {\n      e.preventDefault();\n      return;\n    }\n\n    if (maxLength && pastedText.length > maxLength) {\n      e.preventDefault();\n      onChange(pastedText.slice(0, maxLength));\n      return;\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const cursorAtStart = input.selectionStart === 0;\n    const cursorAtEnd = input.selectionStart === value.length;\n    const isEmpty = value.length === 0;\n\n    if (e.key === 'Backspace' && isEmpty && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowLeft' && cursorAtStart && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowRight' && cursorAtEnd && onAutoAdvance) {\n      e.preventDefault();\n      onAutoAdvance();\n      return;\n    }\n\n    onKeyDown?.(e);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    onFocus?.();\n  };\n\n  const handleBlur = () => {\n    onBlur?.();\n  };\n\n  return (\n    <input\n      readOnly={isReadOnly}\n      ref={segmentRef}\n      tabIndex={isReadOnly ? -1 : 0}\n      type='text'\n      value={value}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      placeholder={placeholder}\n      maxLength={maxLength}\n      className={className}\n      disabled={effectiveIsDisabled}\n      style={dynamicWidth ? { width: `${dynamicWidth}ch` } : undefined}\n      aria-label={\n        ariaLabel ||\n        `Coordinate segment ${segmentIndex !== undefined ? segmentIndex + 1 : ''}`\n      }\n      aria-disabled={effectiveIsDisabled}\n      autoComplete='off'\n      inputMode={\n        allowedChars?.includes('0-9')\n          ? allowedChars.includes('\\\\-\\\\.')\n            ? 'decimal'\n            : 'numeric'\n          : 'text'\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAgB,kBAAkB,EAChC,OACA,UACA,SACA,QACA,WACA,aACA,WACA,WACA,YACA,YACA,cACA,YACA,cACA,eAAe,gBACf,eACA,eACA,KACA,aACyB;CACzB,MAAM,eAAe,gCAAgC;CAErD,MAAM,sBAAsB,aAAa,cAAc;CAEvD,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,aAAc,QAAO;AAC1B,SAAO,IAAI,OAAO,IAAI,aAAa,KAAK,IAAI;IAC3C,CAAC,aAAa,CAAC;CAGlB,MAAM,eAAe,cAAc;AACjC,MAAI,cAAc,OAChB;EAIF,MAAM,UAAU,OAAO;AAIvB,UADsB,MAAM,SAAS,IAAI,MAAM,SAAS,aACjC;IACtB;EAAC;EAAW;EAAK,MAAM;EAAO,CAAC;CAElC,MAAM,gBAAgB,MAAqC;EACzD,MAAM,WAAW,EAAE,OAAO;AAE1B,MAAI,qBAAqB,CAAC,kBAAkB,KAAK,SAAS,CACxD;AAGF,MAAI,aAAa,SAAS,SAAS,UACjC;AAGF,WAAS,SAAS;AAElB,MAAI,aAAa,SAAS,WAAW,aAAa,eAAe;GAC/D,MAAM,YAAY,iBAAiB;AACjC,mBAAe;MACd,EAAE;AACL,gBAAa,gBAAgB,UAAU;;;CAI3C,MAAM,eAAe,MAA8C;EACjE,MAAM,aAAa,EAAE,cAAc,QAAQ,OAAO;AAElD,MAAI,qBAAqB,CAAC,kBAAkB,KAAK,WAAW,EAAE;AAC5D,KAAE,gBAAgB;AAClB;;AAGF,MAAI,aAAa,WAAW,SAAS,WAAW;AAC9C,KAAE,gBAAgB;AAClB,YAAS,WAAW,MAAM,GAAG,UAAU,CAAC;AACxC;;;CAIJ,MAAM,iBAAiB,MAAuC;EAC5D,MAAM,QAAQ,EAAE;EAChB,MAAM,gBAAgB,MAAM,mBAAmB;EAC/C,MAAM,cAAc,MAAM,mBAAmB,MAAM;EACnD,MAAM,UAAU,MAAM,WAAW;AAEjC,MAAI,EAAE,QAAQ,eAAe,WAAW,eAAe;AACrD,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,eAAe,iBAAiB,eAAe;AAC3D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,gBAAgB,eAAe,eAAe;AAC1D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,cAAY,EAAE;;CAGhB,MAAM,eAAe,MAAoC;AACvD,IAAE,OAAO,QAAQ;AACjB,aAAW;;CAGb,MAAM,mBAAmB;AACvB,YAAU;;AAGZ,QACE,oBAAC;EACC,UAAU;EACV,KAAK;EACL,UAAU,aAAa,KAAK;EAC5B,MAAK;EACE;EACP,UAAU;EACV,SAAS;EACT,WAAW;EACX,SAAS;EACT,QAAQ;EACK;EACF;EACA;EACX,UAAU;EACV,OAAO,eAAe,EAAE,OAAO,GAAG,aAAa,KAAK,GAAG;EACvD,cACE,aACA,sBAAsB,iBAAiB,SAAY,eAAe,IAAI;EAExE,iBAAe;EACf,cAAa;EACb,WACE,cAAc,SAAS,MAAM,GACzB,aAAa,SAAS,SAAS,GAC7B,YACA,YACF;GAEN"}

package/dist/components/coordinate-field/styles.module.css

@@ -23,11 +23,11 @@
     min-width: var(--min-width, unset);
 
     @variant group-size-medium/coordinate-field {
-      @apply text-body-m;
+      @apply text-body-s;
     }
 
     @variant group-size-small/coordinate-field {
-      @apply text-body-s;
+      @apply text-body-xs;
     }
 
     @variant group-disabled/coordinate-field {
@@ -64,7 +64,7 @@
   }
 
   .segment {
-    @apply shrink-0 text-right transition-[width] duration-150 ease-in-out outline-none;
+    @apply shrink-0 text-right uppercase transition-[width] duration-150 ease-in-out outline-none;
 
     @variant placeholder-shown {
       @apply fg-primary-muted;
@@ -143,6 +143,10 @@
 }
 
 @layer components.l2 {
+  .formatButton {
+    @apply py-0;
+  }
+
   .formatOptions {
     @apply mb-m gap-xs flex flex-col;
   }

package/dist/components/date-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DateFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
 
 //#region src/components/date-field/index.d.ts
@@ -100,7 +100,7 @@ declare function DateField<T extends DateValue>({
   isRequired,
   isReadOnly,
   ...rest
-}: DateFieldProps<T>): react_jsx_runtime40.JSX.Element;
+}: DateFieldProps<T>): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/deferred-collection/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DeferredCollectionProps } from "./types.js";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/components/deferred-collection/index.d.ts
 
@@ -45,7 +45,7 @@ declare function DeferredCollection({
   children,
   fallback,
   deferFrames
-}: DeferredCollectionProps): react_jsx_runtime42.JSX.Element;
+}: DeferredCollectionProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { DeferredCollection, type DeferredCollectionProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/details-list/context.d.ts

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { DetailsListProps } from "./types.js";
 import "client-only";
-import * as react17 from "react";
+import * as react0 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/components/details-list/context.d.ts
 /**
  * Context for sharing DetailsList props across component tree.
  */
-declare const DetailsListContext: react17.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
+declare const DetailsListContext: react0.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
 /**
  * DetailsListProvider - Context provider for setting default DetailsList props.
  *
@@ -43,7 +43,7 @@ declare const DetailsListContext: react17.Context<ContextValue<DetailsListProps,
 declare function DetailsListProvider({
   children,
   ...props
-}: ProviderProps<DetailsListProps>): react_jsx_runtime44.JSX.Element;
+}: ProviderProps<DetailsListProps>): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { DetailsListContext, DetailsListProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/details-list/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DetailsListProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime45 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/components/details-list/index.d.ts
 
@@ -55,7 +55,7 @@ import * as react_jsx_runtime45 from "react/jsx-runtime";
 declare function DetailsList({
   ref,
   ...props
-}: DetailsListProps): react_jsx_runtime45.JSX.Element;
+}: DetailsListProps): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { DetailsList };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/details-list/label.d.ts

@@ -12,7 +12,7 @@
 
 import { DetailsListLabelProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime46 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/components/details-list/label.d.ts
 /**
@@ -31,7 +31,7 @@ import * as react_jsx_runtime46 from "react/jsx-runtime";
  * </DetailsList>
  * ```
  */
-declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime46.JSX.Element;
+declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { DetailsListLabel };
 //# sourceMappingURL=label.d.ts.map

package/dist/components/details-list/value.d.ts

@@ -12,7 +12,7 @@
 
 import { DetailsListValueProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/components/details-list/value.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime27 from "react/jsx-runtime";
  * </DetailsList>
  * ```
  */
-declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime27.JSX.Element;
+declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { DetailsListValue };
 //# sourceMappingURL=value.d.ts.map

package/dist/components/dialog/content.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/dialog/content.d.ts
 
@@ -39,7 +39,7 @@ import * as react_jsx_runtime29 from "react/jsx-runtime";
 declare function DialogContent({
   children,
   className
-}: ComponentProps<'div'>): react_jsx_runtime29.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { DialogContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/dialog/context.d.ts

@@ -12,14 +12,14 @@
 
 import { DialogProps as DialogProps$1 } from "./types.js";
 import "client-only";
-import * as react12 from "react";
+import * as react1 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/dialog/context.d.ts
 /**
  * Context for sharing Dialog props across component tree.
  */
-declare const DialogContext: react12.Context<ContextValue<DialogProps$1, HTMLDivElement>>;
+declare const DialogContext: react1.Context<ContextValue<DialogProps$1, HTMLDivElement>>;
 //#endregion
 export { DialogContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/dialog/footer.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/components/dialog/footer.d.ts
 
@@ -42,7 +42,7 @@ import * as react_jsx_runtime33 from "react/jsx-runtime";
 declare function DialogFooter({
   children,
   className
-}: ComponentProps<'footer'>): react_jsx_runtime33.JSX.Element;
+}: ComponentProps<'footer'>): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { DialogFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/dialog/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DialogProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/dialog/index.d.ts
 
@@ -53,7 +53,7 @@ import * as react_jsx_runtime36 from "react/jsx-runtime";
 declare function Dialog({
   ref,
   ...props
-}: DialogProps): react_jsx_runtime36.JSX.Element;
+}: DialogProps): react_jsx_runtime17.JSX.Element;
 //#endregion
 export { Dialog };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/title.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { HeadingProps } from "react-aria-components";
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/components/dialog/title.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime39 from "react/jsx-runtime";
 declare function DialogTitle({
   children,
   className
-}: HeadingProps): react_jsx_runtime39.JSX.Element;
+}: HeadingProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { DialogTitle };
 //# sourceMappingURL=title.d.ts.map

package/dist/components/divider/context.d.ts

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { DividerProps } from "./types.js";
 import "client-only";
-import * as react16 from "react";
+import * as react2 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/divider/context.d.ts
 /**
  * Context for sharing Divider props across component tree.
  */
-declare const DividerContext: react16.Context<ContextValue<DividerProps, HTMLHRElement>>;
+declare const DividerContext: react2.Context<ContextValue<DividerProps, HTMLHRElement>>;
 /**
  * DividerProvider - Context provider for setting default Divider props.
  *
@@ -42,7 +42,7 @@ declare const DividerContext: react16.Context<ContextValue<DividerProps, HTMLHRE
 declare function DividerProvider({
   children,
   ...props
-}: ProviderProps<DividerProps>): react_jsx_runtime41.JSX.Element;
+}: ProviderProps<DividerProps>): react_jsx_runtime18.JSX.Element;
 //#endregion
 export { DividerContext, DividerProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/divider/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DividerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime43 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/components/divider/index.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime43 from "react/jsx-runtime";
 declare function Divider({
   ref,
   ...props
-}: DividerProps): react_jsx_runtime43.JSX.Element;
+}: DividerProps): react_jsx_runtime19.JSX.Element;
 //#endregion
 export { Divider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/back.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime48 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/drawer/back.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime48 from "react/jsx-runtime";
  * </DrawerView>
  * ```
  */
-declare function DrawerBack(): react_jsx_runtime48.JSX.Element | null;
+declare function DrawerBack(): react_jsx_runtime21.JSX.Element | null;
 //#endregion
 export { DrawerBack };
 //# sourceMappingURL=back.d.ts.map

package/dist/components/drawer/close.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerCloseProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime49 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/drawer/close.d.ts
 
@@ -34,7 +34,7 @@ import * as react_jsx_runtime49 from "react/jsx-runtime";
  * </DrawerHeader>
  * ```
  */
-declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime49.JSX.Element;
+declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime22.JSX.Element;
 declare namespace DrawerClose {
   var displayName: string;
 }

package/dist/components/drawer/content.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime94 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/drawer/content.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime94 from "react/jsx-runtime";
 declare function DrawerContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime94.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime23.JSX.Element;
 //#endregion
 export { DrawerContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/drawer/context.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerContextValue, DrawerEvent } from "./types.js";
 import "client-only";
-import * as react28 from "react";
+import * as react6 from "react";
 import { Broadcast } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
 
@@ -25,7 +25,7 @@ import { UniqueId } from "@accelint/core";
  * const { register, unregister, placement } = useContext(DrawerContext);
  * ```
  */
-declare const DrawerContext: react28.Context<DrawerContextValue>;
+declare const DrawerContext: react6.Context<DrawerContextValue>;
 /**
  * Event bus instance for drawer-related events.
  *

package/dist/components/drawer/footer.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime100 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/components/drawer/footer.d.ts
 
@@ -39,7 +39,7 @@ import * as react_jsx_runtime100 from "react/jsx-runtime";
 declare function DrawerFooter({
   className,
   ...rest
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime100.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime33.JSX.Element;
 //#endregion
 export { DrawerFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/drawer/header-title.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerTitleProps } from "./types.js";
-import * as react_jsx_runtime47 from "react/jsx-runtime";
+import * as react_jsx_runtime49 from "react/jsx-runtime";
 
 //#region src/components/drawer/header-title.d.ts
 
@@ -41,7 +41,7 @@ declare function DrawerHeaderTitle({
   className,
   level,
   ...rest
-}: DrawerTitleProps): react_jsx_runtime47.JSX.Element;
+}: DrawerTitleProps): react_jsx_runtime49.JSX.Element;
 //#endregion
 export { DrawerHeaderTitle };
 //# sourceMappingURL=header-title.d.ts.map

package/dist/components/drawer/header.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime50 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/drawer/header.d.ts
 
@@ -52,7 +52,7 @@ declare function DrawerHeader({
   title,
   children,
   ...rest
-}: ComponentPropsWithRef<'header'>): react_jsx_runtime50.JSX.Element;
+}: ComponentPropsWithRef<'header'>): react_jsx_runtime34.JSX.Element;
 //#endregion
 export { DrawerHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/drawer/header.js

@@ -24,8 +24,8 @@ import { useContext } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Header } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.css";
 import { Cancel } from "@accelint/icons";
+import styles from "./styles.module.css";
 
 //#region src/components/drawer/header.tsx
 /**

package/dist/components/drawer/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
 //#region src/components/drawer/index.d.ts
 
@@ -63,7 +63,7 @@ declare function Drawer({
   size,
   onChange,
   ...rest
-}: DrawerProps): react_jsx_runtime51.JSX.Element;
+}: DrawerProps): react_jsx_runtime36.JSX.Element;
 //#endregion
 export { Drawer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/layout-main.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime54 from "react/jsx-runtime";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout-main.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime54 from "react/jsx-runtime";
 declare function DrawerLayoutMain({
   className,
   ...rest
-}: ComponentPropsWithRef<'main'>): react_jsx_runtime54.JSX.Element;
+}: ComponentPropsWithRef<'main'>): react_jsx_runtime37.JSX.Element;
 //#endregion
 export { DrawerLayoutMain };
 //# sourceMappingURL=layout-main.d.ts.map

package/dist/components/drawer/layout.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerLayoutProps } from "./types.js";
-import * as react_jsx_runtime66 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout.d.ts
 
@@ -42,7 +42,7 @@ declare function DrawerLayout({
   extend,
   push,
   ...rest
-}: DrawerLayoutProps): react_jsx_runtime66.JSX.Element;
+}: DrawerLayoutProps): react_jsx_runtime42.JSX.Element;
 //#endregion
 export { DrawerLayout };
 //# sourceMappingURL=layout.d.ts.map

package/dist/components/drawer/menu-item.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerMenuItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime67 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu-item.d.ts
 
@@ -45,7 +45,7 @@ declare function DrawerMenuItem({
   toggle,
   textValue,
   ...rest
-}: DrawerMenuItemProps): react_jsx_runtime67.JSX.Element | null;
+}: DrawerMenuItemProps): react_jsx_runtime43.JSX.Element | null;
 //#endregion
 export { DrawerMenuItem };
 //# sourceMappingURL=menu-item.d.ts.map

package/dist/components/drawer/menu.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerMenuProps } from "./types.js";
-import * as react_jsx_runtime82 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu.d.ts
 
@@ -39,7 +39,7 @@ declare function DrawerMenu({
   position,
   children,
   ...rest
-}: DrawerMenuProps): react_jsx_runtime82.JSX.Element;
+}: DrawerMenuProps): react_jsx_runtime44.JSX.Element;
 //#endregion
 export { DrawerMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/drawer/panel.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime69 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 
 //#region src/components/drawer/panel.d.ts
 
@@ -36,7 +36,7 @@ import * as react_jsx_runtime69 from "react/jsx-runtime";
 declare function DrawerPanel({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime69.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime45.JSX.Element;
 //#endregion
 export { DrawerPanel };
 //# sourceMappingURL=panel.d.ts.map