@accelint/design-toolkit 9.4.0 → 9.5.0

package/dist/components/clock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/clock/index.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'use client';\n\nimport { setClockInterval } from '@accelint/temporal';\nimport 'client-only';\nimport { useCallback, useEffect, useState } from 'react';\nimport type { ClockProps } from './types';\n\nconst DEFAULT_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  timeStyle: 'long',\n  timeZone: 'UTC',\n  hour12: false,\n});\n\n/**\n * Clock - An auto-updating UTC time component.\n *\n * Uses a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat|DateTimeFormat} configured with `'en-US', { timeStyle: 'long, timeZone: 'UTC', hour12: false }` by default,\n * but can be overridden with the `formatter` prop.\n *\n * NOTE: This component comes **unstyled by default**.\n *\n * @param props - The clock props.\n * @param props.formatter - Custom DateTimeFormat for time display.\n * @returns The clock component displaying current time.\n *\n * @example\n * ```tsx\n * // Standard Clock\n * <Clock /> // <time>15:54:14 UTC</time>\n * ```\n *\n * @example\n * ```tsx\n * // Styled\n * <Clock className=\"fg-accent-primary-bold\" />\n * ```\n *\n * @example\n * ```tsx\n * // Custom Format\n * const formatter = new Intl.DateTimeFormat('en-US', {\n *   dateStyle: \"short\",\n *   timeStyle: 'long',\n *   timeZone: 'UTC',\n *   hour12: false\n * });\n *\n * <Clock formatter={formatter} /> // <time>9/30/25, 15:54:14 UTC</time>\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat| DateTimeFormat MDN}\n */\nexport function Clock({ formatter = DEFAULT_FORMATTER, ...rest }: ClockProps) {\n  const now = useCallback(() => formatter.format(Date.now()), [formatter]);\n\n  const [time, setTime] = useState<string>(now());\n\n  useEffect(() => setClockInterval(() => setTime(now()), 1000), [now]);\n\n  return <time {...rest}>{time}</time>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,oBAAoB,IAAI,KAAK,eAAe,SAAS;CACzD,WAAW;CACX,UAAU;CACV,QAAQ;CACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,SAAgB,MAAM,EAAE,YAAY,mBAAmB,GAAG,QAAoB;CAC5E,MAAM,MAAM,kBAAkB,UAAU,OAAO,KAAK,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC;CAExE,MAAM,CAAC,MAAM,WAAW,SAAiB,KAAK,CAAC;AAE/C,iBAAgB,uBAAuB,QAAQ,KAAK,CAAC,EAAE,IAAK,EAAE,CAAC,IAAI,CAAC;AAEpE,QAAO,oBAAC;EAAK,GAAI;YAAO;GAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/clock/index.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'use client';\n\nimport { setClockInterval } from '@accelint/temporal';\nimport 'client-only';\nimport { useCallback, useEffect, useState } from 'react';\nimport type { ClockProps } from './types';\n\nconst DEFAULT_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  timeStyle: 'long',\n  timeZone: 'UTC',\n  hour12: false,\n});\n\n/**\n * Clock - An auto-updating UTC time component.\n *\n * Uses a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat|DateTimeFormat} configured with `'en-US', { timeStyle: 'long, timeZone: 'UTC', hour12: false }` by default,\n * but can be overridden with the `formatter` prop.\n *\n * NOTE: This component comes **unstyled by default**.\n *\n * @param props - The clock props.\n * @param props.formatter - Custom DateTimeFormat for time display.\n * @returns The clock component displaying current time.\n *\n * @example\n * ```tsx\n * // Standard Clock\n * <Clock /> // <time>15:54:14 UTC</time>\n * ```\n *\n * @example\n * ```tsx\n * // Styled\n * <Clock className=\"fg-accent-primary-bold\" />\n * ```\n *\n * @example\n * ```tsx\n * // Custom Format\n * const formatter = new Intl.DateTimeFormat('en-US', {\n *   dateStyle: \"short\",\n *   timeStyle: 'long',\n *   timeZone: 'UTC',\n *   hour12: false\n * });\n *\n * <Clock formatter={formatter} /> // <time>9/30/25, 15:54:14 UTC</time>\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat| DateTimeFormat MDN}\n */\nexport function Clock({ formatter = DEFAULT_FORMATTER, ...rest }: ClockProps) {\n  const now = useCallback(() => formatter.format(Date.now()), [formatter]);\n\n  const [time, setTime] = useState<string>(now());\n\n  useEffect(() => setClockInterval(() => setTime(now()), 1000), [now]);\n\n  return (\n    <time suppressHydrationWarning {...rest}>\n      {time}\n    </time>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,oBAAoB,IAAI,KAAK,eAAe,SAAS;CACzD,WAAW;CACX,UAAU;CACV,QAAQ;CACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,SAAgB,MAAM,EAAE,YAAY,mBAAmB,GAAG,QAAoB;CAC5E,MAAM,MAAM,kBAAkB,UAAU,OAAO,KAAK,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC;CAExE,MAAM,CAAC,MAAM,WAAW,SAAiB,KAAK,CAAC;AAE/C,iBAAgB,uBAAuB,QAAQ,KAAK,CAAC,EAAE,IAAK,EAAE,CAAC,IAAI,CAAC;AAEpE,QACE,oBAAC;EAAK;EAAyB,GAAI;YAChC;GACI"}

package/dist/components/color-picker/index.d.ts

@@ -12,7 +12,7 @@
 
 import { ColorPickerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime89 from "react/jsx-runtime";
 
 //#region src/components/color-picker/index.d.ts
 
@@ -62,7 +62,7 @@ declare function ColorPicker({
   classNames,
   items,
   ...rest
-}: ColorPickerProps): react_jsx_runtime30.JSX.Element;
+}: ColorPickerProps): react_jsx_runtime89.JSX.Element;
 //#endregion
 export { ColorPicker };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/combobox-field/context.d.ts

@@ -14,13 +14,13 @@ import { ProviderProps } from "../../lib/types.js";
 import { OptionsDataItem } from "../options/types.js";
 import { ComboBoxFieldProps } from "./types.js";
 import "client-only";
-import * as react13 from "react";
+import * as react19 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime90 from "react/jsx-runtime";
 
 //#region src/components/combobox-field/context.d.ts
 /** React context for sharing ComboBoxField configuration across components. */
-declare const ComboBoxFieldContext: react13.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
+declare const ComboBoxFieldContext: react19.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
 /**
  * Context provider for setting default props across multiple ComboBoxField components.
  *
@@ -39,7 +39,7 @@ declare const ComboBoxFieldContext: react13.Context<ContextValue<ComboBoxFieldPr
 declare function ComboBoxFieldProvider<T extends OptionsDataItem>({
   children,
   ...props
-}: ProviderProps<ComboBoxFieldProps<T>>): react_jsx_runtime31.JSX.Element;
+}: ProviderProps<ComboBoxFieldProps<T>>): react_jsx_runtime90.JSX.Element;
 //#endregion
 export { ComboBoxFieldContext, ComboBoxFieldProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -13,7 +13,7 @@
 import { OptionsDataItem } from "../options/types.js";
 import { ComboBoxFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime92 from "react/jsx-runtime";
 
 //#region src/components/combobox-field/index.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime32 from "react/jsx-runtime";
 declare function ComboBoxField<T extends OptionsDataItem>({
   ref,
   ...props
-}: ComboBoxFieldProps<T>): react_jsx_runtime32.JSX.Element;
+}: ComboBoxFieldProps<T>): react_jsx_runtime92.JSX.Element;
 //#endregion
 export { ComboBoxField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/combobox-field/index.js

@@ -16,12 +16,15 @@
 import { Icon } from "../icon/index.js";
 import { Label as Label$1 } from "../label/index.js";
 import { ComboBoxFieldContext } from "./context.js";
+import { ClearButton } from "../button/__internal__/clear.js";
 import { Options } from "../options/index.js";
 import "client-only";
+import { useCallback } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Button, ComboBox, FieldError, Input, ListLayout, Popover, Text, Virtualizer, composeRenderProps, useContextProps } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import ChevronDown from "@accelint/icons/chevron-down";
+import { useControlledState } from "@react-stately/utils";
 import styles from "./styles.module.css";
 
 //#region src/components/combobox-field/index.tsx
@@ -50,9 +53,22 @@ import styles from "./styles.module.css";
 */
 function ComboBoxField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);
-	const { children, classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, label: labelProp, layoutOptions, menuTrigger = "focus", size = "medium", isInvalid: isInvalidProp, isReadOnly = false, ...rest } = props;
+	const { children, classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, inputValue: inputValueProp, defaultInputValue = "", label: labelProp, layoutOptions, menuTrigger = "focus", size = "medium", isInvalid: isInvalidProp, isReadOnly = false, isClearable = true, onInputChange, onKeyDown, ...rest } = props;
+	const [inputValue, setInputValue] = useControlledState(inputValueProp, defaultInputValue, onInputChange);
 	const errorMessage = errorMessageProp || null;
 	const isSmall = size === "small";
+	const handleClear = useCallback(() => {
+		setInputValue("");
+	}, [setInputValue]);
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (isClearable && event.key === "Escape" && inputValue) handleClear();
+	}, [
+		onKeyDown,
+		isClearable,
+		handleClear,
+		inputValue
+	]);
 	return /* @__PURE__ */ jsx(ComboBox, {
 		...rest,
 		ref,
@@ -60,10 +76,14 @@ function ComboBoxField({ ref, ...props }) {
 		menuTrigger,
 		isInvalid: isInvalidProp || (errorMessage ? true : void 0),
 		isReadOnly,
+		inputValue,
+		onInputChange: setInputValue,
+		onKeyDown: handleKeyDown,
 		"data-size": size,
+		"data-empty": !inputValue || null,
 		children: ({ isDisabled, isInvalid, isRequired }) => {
 			const shouldShowDescription = !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);
-			return /* @__PURE__ */ jsxs(Fragment, { children: [
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				!!labelProp && !isSmall && /* @__PURE__ */ jsx(Label$1, {
 					className: clsx(styles.label, classNames?.label),
 					isDisabled,
@@ -73,18 +93,26 @@ function ComboBoxField({ ref, ...props }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: clsx(styles.control, classNames?.control),
 					"data-readonly": isReadOnly || null,
-					children: [/* @__PURE__ */ jsx(Input, {
-						...inputProps,
-						tabIndex: isReadOnly ? -1 : 0,
-						className: composeRenderProps(classNames?.input, (className) => clsx(styles.input, className)),
-						title: inputProps?.value ? String(inputProps?.value) : ""
-					}), !isReadOnly && /* @__PURE__ */ jsx(Button, {
-						className: composeRenderProps(classNames?.trigger, (className) => clsx(styles.trigger, className)),
-						children: /* @__PURE__ */ jsx(Icon, {
-							size: "small",
-							children: /* @__PURE__ */ jsx(ChevronDown, {})
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							...inputProps,
+							tabIndex: isReadOnly ? -1 : 0,
+							className: composeRenderProps(classNames?.input, (className) => clsx(styles.input, className)),
+							title: inputProps?.value ? String(inputProps?.value) : ""
+						}),
+						!isReadOnly && isClearable && /* @__PURE__ */ jsx(ClearButton, {
+							className: composeRenderProps(classNames?.clear, (className) => clsx(styles.clear, className)),
+							isDisabled,
+							onPress: handleClear
+						}),
+						!isReadOnly && /* @__PURE__ */ jsx(Button, {
+							className: composeRenderProps(classNames?.trigger, (className) => clsx(styles.trigger, className)),
+							children: /* @__PURE__ */ jsx(Icon, {
+								size: "small",
+								children: /* @__PURE__ */ jsx(ChevronDown, {})
+							})
 						})
-					})]
+					]
 				}),
 				shouldShowDescription && /* @__PURE__ */ jsx(Text, {
 					className: clsx(styles.description, classNames?.description),

package/dist/components/combobox-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/combobox-field/index.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'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport {\n  Button,\n  ComboBox,\n  composeRenderProps,\n  FieldError,\n  Input,\n  ListLayout,\n  Popover,\n  Text,\n  useContextProps,\n  Virtualizer,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { ComboBoxFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem } from '../options/types';\nimport type { ComboBoxFieldProps } from './types';\n\n/**\n * ComboBoxField - Accessible searchable combobox with dropdown options\n *\n * A combobox field that provides a searchable input with virtualized dropdown\n * options and support for sections, icons, and rich content.\n *\n * @param props - The combobox field props.\n * @param props.ref - Reference to the field element.\n * @param props.children - Render function for options.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.label - Label text displayed above the field.\n * @param props.description - Helper text displayed below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.size - Size variant of the field.\n * @returns The combobox field component.\n *\n * @example\n * ```tsx\n * <ComboBoxField defaultItems={items}>\n *   {(item) => <OptionsItem key={item.id} textValue={item.name}>{item.name}</OptionsItem>}\n * </ComboBoxField>\n * ```\n */\nexport function ComboBoxField<T extends OptionsDataItem>({\n  ref,\n  ...props\n}: ComboBoxFieldProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n  const {\n    children,\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    layoutOptions,\n    menuTrigger = 'focus',\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    isReadOnly = false,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <ComboBox<T>\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/combobox-field', styles.field, className),\n      )}\n      menuTrigger={menuTrigger}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isReadOnly={isReadOnly}\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => {\n        const shouldShowDescription =\n          !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n        return (\n          <>\n            {!!labelProp && !isSmall && (\n              <Label\n                className={clsx(styles.label, classNames?.label)}\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n              >\n                {labelProp}\n              </Label>\n            )}\n            <div\n              className={clsx(styles.control, classNames?.control)}\n              data-readonly={isReadOnly || null}\n            >\n              <Input\n                {...inputProps}\n                tabIndex={isReadOnly ? -1 : 0}\n                className={composeRenderProps(classNames?.input, (className) =>\n                  clsx(styles.input, className),\n                )}\n                title={inputProps?.value ? String(inputProps?.value) : ''}\n              />\n              {!isReadOnly && (\n                <Button\n                  className={composeRenderProps(\n                    classNames?.trigger,\n                    (className) => clsx(styles.trigger, className),\n                  )}\n                >\n                  <Icon size='small'>\n                    <ChevronDown />\n                  </Icon>\n                </Button>\n              )}\n            </div>\n            {shouldShowDescription && (\n              <Text\n                className={clsx(styles.description, classNames?.description)}\n                slot='description'\n              >\n                {descriptionProp}\n              </Text>\n            )}\n            <FieldError\n              className={composeRenderProps(classNames?.error, (className) =>\n                clsx(styles.error, className),\n              )}\n            >\n              {errorMessage}\n            </FieldError>\n            <Popover\n              className={composeRenderProps(classNames?.popover, (className) =>\n                clsx(styles.popover, className),\n              )}\n            >\n              <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n                <Options>{children}</Options>\n              </Virtualizer>\n            </Popover>\n          </>\n        );\n      }}\n    </ComboBox>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,cAAyC,EACvD,KACA,GAAG,SACqB;AACxB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,UACA,YACA,aAAa,iBACb,cAAc,kBACd,YACA,OAAO,WACP,eACA,cAAc,SACd,OAAO,UACP,WAAW,eACX,aAAa,OACb,GAAG,SACD;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,wBAAwB,OAAO,OAAO,UAAU,CACtD;EACY;EACb,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACZ,aAAW;aAGT,EAAE,YAAY,WAAW,iBACtB;GACH,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,UACE;IACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACA;KACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;KACpC;KACA;eAEX;MACK;IAEV,qBAAC;KACC,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;KACpD,iBAAe,cAAc;gBAE7B,oBAAC;MACC,GAAI;MACJ,UAAU,aAAa,KAAK;MAC5B,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;MACD,OAAO,YAAY,QAAQ,OAAO,YAAY,MAAM,GAAG;OACvD,EACD,CAAC,cACA,oBAAC;MACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;gBAED,oBAAC;OAAK,MAAK;iBACT,oBAAC,gBAAc;QACV;OACA;MAEP;IACL,yBACC,oBAAC;KACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;KAC5D,MAAK;eAEJ;MACI;IAET,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAEA;MACU;IACb,oBAAC;KACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;eAED,oBAAC;MAAY,QAAQ;MAA2B;gBAC9C,oBAAC,WAAS,WAAmB;OACjB;MACN;OACT;;GAGE"}
+{"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/combobox-field/index.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'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport { useControlledState } from '@react-stately/utils';\nimport { useCallback } from 'react';\nimport {\n  Button,\n  ComboBox,\n  type ComboBoxProps,\n  composeRenderProps,\n  FieldError,\n  Input,\n  ListLayout,\n  Popover,\n  Text,\n  useContextProps,\n  Virtualizer,\n} from 'react-aria-components';\nimport { ClearButton } from '../button/__internal__/clear';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { ComboBoxFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem } from '../options/types';\nimport type { ComboBoxFieldProps } from './types';\n\n/**\n * ComboBoxField - Accessible searchable combobox with dropdown options\n *\n * A combobox field that provides a searchable input with virtualized dropdown\n * options and support for sections, icons, and rich content.\n *\n * @param props - The combobox field props.\n * @param props.ref - Reference to the field element.\n * @param props.children - Render function for options.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.label - Label text displayed above the field.\n * @param props.description - Helper text displayed below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.size - Size variant of the field.\n * @returns The combobox field component.\n *\n * @example\n * ```tsx\n * <ComboBoxField defaultItems={items}>\n *   {(item) => <OptionsItem key={item.id} textValue={item.name}>{item.name}</OptionsItem>}\n * </ComboBoxField>\n * ```\n */\nexport function ComboBoxField<T extends OptionsDataItem>({\n  ref,\n  ...props\n}: ComboBoxFieldProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n  const {\n    children,\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    inputValue: inputValueProp,\n    defaultInputValue = '',\n    label: labelProp,\n    layoutOptions,\n    menuTrigger = 'focus',\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    isReadOnly = false,\n    isClearable = true,\n    onInputChange,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const [inputValue, setInputValue] = useControlledState(\n    inputValueProp,\n    defaultInputValue,\n    onInputChange,\n  );\n\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  const handleClear = useCallback(() => {\n    setInputValue('');\n  }, [setInputValue]);\n\n  const handleKeyDown = useCallback<Required<ComboBoxProps<T>>['onKeyDown']>(\n    (event) => {\n      onKeyDown?.(event);\n      if (isClearable && event.key === 'Escape' && inputValue) {\n        handleClear();\n      }\n    },\n    [onKeyDown, isClearable, handleClear, inputValue],\n  );\n\n  return (\n    <ComboBox<T>\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/combobox-field', styles.field, className),\n      )}\n      menuTrigger={menuTrigger}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isReadOnly={isReadOnly}\n      inputValue={inputValue}\n      onInputChange={setInputValue}\n      onKeyDown={handleKeyDown}\n      data-size={size}\n      data-empty={!inputValue || null}\n    >\n      {({ isDisabled, isInvalid, isRequired }) => {\n        const shouldShowDescription =\n          !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n        return (\n          <>\n            {!!labelProp && !isSmall && (\n              <Label\n                className={clsx(styles.label, classNames?.label)}\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n              >\n                {labelProp}\n              </Label>\n            )}\n            <div\n              className={clsx(styles.control, classNames?.control)}\n              data-readonly={isReadOnly || null}\n            >\n              <Input\n                {...inputProps}\n                tabIndex={isReadOnly ? -1 : 0}\n                className={composeRenderProps(classNames?.input, (className) =>\n                  clsx(styles.input, className),\n                )}\n                title={inputProps?.value ? String(inputProps?.value) : ''}\n              />\n              {!isReadOnly && isClearable && (\n                <ClearButton\n                  className={composeRenderProps(\n                    classNames?.clear,\n                    (className) => clsx(styles.clear, className),\n                  )}\n                  isDisabled={isDisabled}\n                  onPress={handleClear}\n                />\n              )}\n              {!isReadOnly && (\n                <Button\n                  className={composeRenderProps(\n                    classNames?.trigger,\n                    (className) => clsx(styles.trigger, className),\n                  )}\n                >\n                  <Icon size='small'>\n                    <ChevronDown />\n                  </Icon>\n                </Button>\n              )}\n            </div>\n            {shouldShowDescription && (\n              <Text\n                className={clsx(styles.description, classNames?.description)}\n                slot='description'\n              >\n                {descriptionProp}\n              </Text>\n            )}\n            <FieldError\n              className={composeRenderProps(classNames?.error, (className) =>\n                clsx(styles.error, className),\n              )}\n            >\n              {errorMessage}\n            </FieldError>\n            <Popover\n              className={composeRenderProps(classNames?.popover, (className) =>\n                clsx(styles.popover, className),\n              )}\n            >\n              <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n                <Options>{children}</Options>\n              </Virtualizer>\n            </Popover>\n          </>\n        );\n      }}\n    </ComboBox>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,cAAyC,EACvD,KACA,GAAG,SACqB;AACxB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,UACA,YACA,aAAa,iBACb,cAAc,kBACd,YACA,YAAY,gBACZ,oBAAoB,IACpB,OAAO,WACP,eACA,cAAc,SACd,OAAO,UACP,WAAW,eACX,aAAa,OACb,cAAc,MACd,eACA,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,iBAAiB,mBAClC,gBACA,mBACA,cACD;CAED,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;CAEzB,MAAM,cAAc,kBAAkB;AACpC,gBAAc,GAAG;IAChB,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB,aACnB,UAAU;AACT,cAAY,MAAM;AAClB,MAAI,eAAe,MAAM,QAAQ,YAAY,WAC3C,cAAa;IAGjB;EAAC;EAAW;EAAa;EAAa;EAAW,CAClD;AAED,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,wBAAwB,OAAO,OAAO,UAAU,CACtD;EACY;EACb,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACA;EACZ,eAAe;EACf,WAAW;EACX,aAAW;EACX,cAAY,CAAC,cAAc;aAEzB,EAAE,YAAY,WAAW,iBAAiB;GAC1C,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,UACE;IACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACA;KACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;KACpC;KACA;eAEX;MACK;IAEV,qBAAC;KACC,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;KACpD,iBAAe,cAAc;;MAE7B,oBAAC;OACC,GAAI;OACJ,UAAU,aAAa,KAAK;OAC5B,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;OACD,OAAO,YAAY,QAAQ,OAAO,YAAY,MAAM,GAAG;QACvD;MACD,CAAC,cAAc,eACd,oBAAC;OACC,WAAW,mBACT,YAAY,QACX,cAAc,KAAK,OAAO,OAAO,UAAU,CAC7C;OACW;OACZ,SAAS;QACT;MAEH,CAAC,cACA,oBAAC;OACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;iBAED,oBAAC;QAAK,MAAK;kBACT,oBAAC,gBAAc;SACV;QACA;;MAEP;IACL,yBACC,oBAAC;KACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;KAC5D,MAAK;eAEJ;MACI;IAET,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAEA;MACU;IACb,oBAAC;KACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;eAED,oBAAC;MAAY,QAAQ;MAA2B;gBAC9C,oBAAC,WAAS,WAAmB;OACjB;MACN;OACT;;GAGE"}

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

@@ -14,11 +14,11 @@
 
 @layer components.l1 {
   .field {
-    @apply gap-xs flex flex-col;
+    @apply gap-xs flex flex-col select-none;
   }
 
   .control {
-    @apply rounded-medium px-s py-xs fg-primary-bold outline-interactive flex items-center outline;
+    @apply rounded-medium px-s py-xs fg-primary-bold outline-interactive gap-xs flex items-center outline;
 
     @variant placeholder {
       @apply fg-primary-muted;
@@ -99,7 +99,19 @@
 
   .popover {
     --trigger-width: initial; /* is inlined by react aria components on render */
-    @apply -ml-s;
+    @apply -ml-s select-none;
     min-width: calc(var(--trigger-width) + (var(--spacing-s) * 2));
   }
 }
+
+@layer components.l2 {
+  .clear {
+    @apply invisible;
+
+    @variant group-focus-within/combobox-field {
+      @variant group-not-data-empty/combobox-field {
+        @apply visible;
+      }
+    }
+  }
+}

package/dist/components/combobox-field/types.d.ts

@@ -32,6 +32,8 @@ type ComboBoxFieldProps<T extends OptionsDataItem> = Omit<ComboBoxProps<T>, 'chi
     control?: string;
     /** Class name for the input element. */
     input?: InputProps['className'];
+    /** Class name for the clear button. */
+    clear?: ButtonProps$1['className'];
     /** Class name for the trigger button. */
     trigger?: ButtonProps$1['className'];
     /** Class name for the description text. */
@@ -51,6 +53,8 @@ type ComboBoxFieldProps<T extends OptionsDataItem> = Omit<ComboBoxProps<T>, 'chi
   errorMessage?: string;
   /** Size variant of the field. */
   size?: 'small' | 'medium';
+  /** Whether the field shows a clear button. Will not show if the field is read-only. */
+  isClearable?: boolean;
 };
 //#endregion
 export { ComboBoxFieldProps };

package/dist/components/coordinate-field/context.d.ts

@@ -12,9 +12,9 @@
 
 import { ProviderProps } from "../../lib/types.js";
 import { CoordinateFieldProps, CoordinateFieldState } from "./types.js";
-import * as react14 from "react";
+import * as react21 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime94 from "react/jsx-runtime";
 
 //#region src/components/coordinate-field/context.d.ts
 
@@ -48,7 +48,7 @@ import * as react_jsx_runtime34 from "react/jsx-runtime";
  *
  * @see CoordinateFieldStateContext for internal runtime state
  */
-declare const CoordinateFieldContext: react14.Context<ContextValue<CoordinateFieldProps, HTMLDivElement>>;
+declare const CoordinateFieldContext: react21.Context<ContextValue<CoordinateFieldProps, HTMLDivElement>>;
 /**
  * State Context for CoordinateField component.
  *
@@ -66,7 +66,7 @@ declare const CoordinateFieldContext: react14.Context<ContextValue<CoordinateFie
  * const state = useCoordinateFieldStateContext();
  * const { segmentValues, isDisabled, registerTimeout } = state;
  */
-declare const CoordinateFieldStateContext: react14.Context<CoordinateFieldState | null>;
+declare const CoordinateFieldStateContext: react21.Context<CoordinateFieldState | null>;
 /**
  * Provider component for CoordinateField context
  * Wraps children with CoordinateFieldContext
@@ -78,7 +78,7 @@ declare const CoordinateFieldStateContext: react14.Context<CoordinateFieldState
 declare function CoordinateFieldProvider({
   children,
   ...props
-}: ProviderProps<CoordinateFieldProps>): react_jsx_runtime34.JSX.Element;
+}: ProviderProps<CoordinateFieldProps>): react_jsx_runtime94.JSX.Element;
 /**
  * Provider component for CoordinateField state context
  * Wraps children with CoordinateFieldStateContext
@@ -94,7 +94,7 @@ declare function CoordinateFieldStateProvider({
 }: {
   children: React.ReactNode;
   value: CoordinateFieldState;
-}): react_jsx_runtime34.JSX.Element;
+}): react_jsx_runtime94.JSX.Element;
 /**
  * Hook to access CoordinateField state context
  * Must be used within a CoordinateField component

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

@@ -12,7 +12,7 @@
 
 import { CoordinateFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/components/coordinate-field/index.d.ts
 
@@ -104,7 +104,7 @@ import * as react_jsx_runtime37 from "react/jsx-runtime";
 declare function CoordinateField({
   ref,
   ...props
-}: CoordinateFieldProps): react_jsx_runtime37.JSX.Element;
+}: CoordinateFieldProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { CoordinateField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -240,9 +240,9 @@ function CoordinateField({ ref, ...props }) {
 						onOpenChange: handlePopoverOpenChange,
 						children: [/* @__PURE__ */ jsx(Button$1, {
 							variant: "icon",
-							size,
+							size: "small",
 							color: "mono-bold",
-							className: classNames?.formatButton,
+							className: clsx(styles.formatButton, classNames?.formatButton),
 							"aria-label": "View coordinate in all formats",
 							isDisabled: !copy.isFormatButtonEnabled,
 							children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(GlobalShare, {}) })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label","DialogTrigger","Button","Popover","AriaText","Dialog","RadioGroup","Radio"],"sources":["../../../src/components/coordinate-field/index.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport Check from '@accelint/icons/check';\nimport CopyToClipboard from '@accelint/icons/copy-to-clipboard';\nimport GlobalShare from '@accelint/icons/global-share';\nimport { filterDOMProps } from '@react-aria/utils';\nimport 'client-only';\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  Text as AriaText,\n  composeRenderProps,\n  FieldError,\n  FieldErrorContext,\n  GroupContext,\n  LabelContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { useCoordinateField } from '../../hooks/coordinate-field';\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport { DialogContent } from '../dialog/content';\nimport { DialogFooter } from '../dialog/footer';\nimport { DialogTitle } from '../dialog/title';\nimport { DialogTrigger } from '../dialog/trigger';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Popover } from '../popover';\nimport { PopoverContent } from '../popover/content';\nimport { PopoverTitle } from '../popover/title';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { CoordinateFieldContext, CoordinateFieldStateContext } from './context';\nimport {\n  type CoordinateFormatResult,\n  getAllCoordinateFormats,\n} from './coordinate-utils';\nimport { CoordinateSegment } from './segment';\nimport { GROUP_SEPARATOR, getSegmentLabel } from './segment-configs';\nimport styles from './styles.module.css';\nimport {\n  COORDINATE_FORMAT_LABELS,\n  COORDINATE_FORMAT_NAMES,\n  COORDINATE_SYSTEMS,\n  type CoordinateSystem,\n} from './types';\nimport { calculateMinControlWidth } from './width-utils';\nimport type { CoordinateFieldProps } from './types';\n\n/**\n * CoordinateField - A comprehensive coordinate input component with multiple format support\n *\n * Provides accessible coordinate input functionality with support for multiple coordinate\n * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally\n * for consistency.\n *\n * @param props - The coordinate field props.\n * @param props.ref - Reference to the coordinate field element.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.description - Description text displayed below the field.\n * @param props.label - Label text for the coordinate field.\n * @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).\n * @param props.size - Size variant of the field.\n * @param props.variant - Layout variant (inline or stacked).\n * @param props.showFormatButton - Whether to show the format conversion button.\n * @param props.isDisabled - Whether the field is disabled.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @param props.isRequired - Whether the field is required.\n * @param props.isReadOnly - Whether the field is read-only.\n * @returns The coordinate field component.\n *\n * @example\n * ```tsx\n * // Basic coordinate field\n * <CoordinateField label=\"Location\" />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with validation\n * <CoordinateField\n *   label=\"Target Coordinates\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please enter a valid coordinate\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with specific format\n * <CoordinateField\n *   label=\"Position\"\n *   format=\"dms\"\n *   description=\"Enter coordinates in Degrees Minutes Seconds format\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Compact coordinate field\n * <CoordinateField\n *   label=\"Coordinates\"\n *   size=\"small\"\n *   format=\"dd\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled coordinate field\n * <CoordinateField\n *   label=\"Selected Location\"\n *   value={coordinates}\n *   onChange={setCoordinates}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with error handling\n * <CoordinateField\n *   label=\"Target Coordinates\"\n *   onError={(message, context) => {\n *     // message will be \"Invalid coordinate value\" for validation errors\n *     // or \"Invalid coordinate format\" for paste errors\n *     setErrorMessage(message);\n *     console.error(message, context);\n *   }}\n *   isInvalid={!!errorMessage}\n *   errorMessage={errorMessage}\n * />\n * ```\n */\nexport function CoordinateField({ ref, ...props }: CoordinateFieldProps) {\n  [props, ref] = useContextProps(props, ref, CoordinateFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    label: labelProp,\n    format = 'dd',\n    size = 'medium',\n    variant = 'inline',\n    showFormatButton = true,\n    isDisabled = false,\n    isInvalid: isInvalidProp = false,\n    isRequired = false,\n    isReadOnly = false,\n    ...rest\n  } = props;\n\n  const isSmall = size === 'small';\n\n  const DOMProps = filterDOMProps(rest, { global: true });\n\n  // When size is small and label is hidden, use aria-label instead of aria-labelledby\n  // to ensure screen readers have an accessible name\n  const ariaLabelForSmallSize =\n    isSmall && labelProp ? labelProp : rest['aria-label'];\n\n  const {\n    state,\n    focus,\n    paste,\n    copy,\n    registerTimeout,\n    fieldProps,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    validation,\n    effectiveErrorMessage,\n    isInvalid,\n  } = useCoordinateField(\n    props,\n    ariaLabelForSmallSize,\n    rest['aria-describedby'],\n    rest['aria-details'],\n  );\n\n  const componentState = {\n    segmentValues: state.segmentValues,\n    format,\n    currentValue: state.currentValue,\n    validationErrors: state.validationErrors,\n    isDisabled,\n    isInvalid,\n    isRequired,\n    size,\n    variant,\n    registerTimeout,\n  };\n\n  // Store all coordinate formats, calculated only when popover opens\n  const [allCoordinateFormats, setAllCoordinateFormats] = useState<Record<\n    CoordinateSystem,\n    CoordinateFormatResult\n  > | null>(null);\n\n  const handlePopoverOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        setAllCoordinateFormats(getAllCoordinateFormats(state.currentValue));\n      }\n    },\n    [state.currentValue],\n  );\n\n  // Calculate the minimum width needed for the control container\n  // This keeps the outlined container at a fixed width while segments animate\n  const minControlWidth = useMemo(\n    () =>\n      calculateMinControlWidth(\n        state.editableSegmentConfigs,\n        state.segmentConfigs,\n        showFormatButton,\n      ),\n    [state.editableSegmentConfigs, state.segmentConfigs, showFormatButton],\n  );\n\n  return (\n    <Provider\n      values={[\n        [CoordinateFieldContext, props],\n        [CoordinateFieldStateContext, componentState],\n        [GroupContext, fieldProps],\n        [LabelContext, labelProps],\n        [\n          TextContext,\n          {\n            slots: {\n              description: descriptionProps,\n              errorMessage: errorProps,\n            },\n          },\n        ],\n        [FieldErrorContext, validation],\n      ]}\n    >\n      <div\n        {...DOMProps}\n        {...fieldProps}\n        ref={ref}\n        className={clsx(\n          'group/coordinate-field',\n          styles.field,\n          classNames?.field,\n        )}\n        data-size={size}\n        data-disabled={isDisabled || null}\n        data-invalid={isInvalid || null}\n      >\n        {!isSmall && labelProp && (\n          <Label\n            className={classNames?.label}\n            isDisabled={isDisabled}\n            isRequired={isRequired}\n          >\n            {labelProp}\n          </Label>\n        )}\n\n        <div\n          style={\n            {\n              '--min-width': variant === 'stacked' ? 'unset' : minControlWidth,\n            } as CSSProperties\n          }\n          className={clsx(styles.control, classNames?.control)}\n          data-readonly={isReadOnly || null}\n        >\n          <div\n            className={clsx(styles.input, styles[variant], classNames?.input)}\n            onPasteCapture={paste.handleInputPaste}\n            data-input-container\n          >\n            {state.segmentConfigs\n              .reduce<ReactNode[][]>(\n                (acc, config, configIndex) => {\n                  const currentGroupIndex = acc.length - 1;\n\n                  if (\n                    config.value === GROUP_SEPARATOR &&\n                    variant === 'stacked'\n                  ) {\n                    acc.push([]);\n\n                    return acc;\n                  }\n\n                  if (config.type === 'literal') {\n                    acc[currentGroupIndex]?.push(\n                      <span\n                        key={`${format}-literal-${configIndex}-${config.value}`}\n                        className={styles.literal}\n                      >\n                        {config.value}\n                      </span>,\n                    );\n\n                    return acc;\n                  }\n\n                  const editableIndex = state.segmentConfigs\n                    .slice(0, configIndex)\n                    .filter((c) => c.type !== 'literal').length;\n\n                  acc[currentGroupIndex]?.push(\n                    <CoordinateSegment\n                      key={`${format}-segment-${editableIndex}`}\n                      value={state.segmentValues[editableIndex] || ''}\n                      onChange={(newValue) =>\n                        state.handleSegmentChange(editableIndex, newValue)\n                      }\n                      onFocus={() =>\n                        focus.setFocusedSegmentIndex(editableIndex)\n                      }\n                      onBlur={() => {\n                        focus.setFocusedSegmentIndex(-1);\n                        state.flushPendingValidation();\n                      }}\n                      onKeyDown={(e) =>\n                        focus.handleSegmentKeyDown(editableIndex, e)\n                      }\n                      onAutoAdvance={() =>\n                        focus.focusNextSegment(editableIndex)\n                      }\n                      onAutoRetreat={() =>\n                        focus.focusPreviousSegment(editableIndex)\n                      }\n                      placeholder={config.placeholder}\n                      maxLength={config.maxLength}\n                      pad={config.pad}\n                      className={clsx(styles.segment, classNames?.segment)}\n                      isDisabled={isDisabled}\n                      isReadOnly={isReadOnly}\n                      allowedChars={config.allowedChars}\n                      segmentRef={focus.segmentRefs[editableIndex]}\n                      segmentIndex={editableIndex}\n                      totalSegments={state.editableSegmentConfigs.length}\n                      ariaLabel={getSegmentLabel(format, editableIndex)}\n                    />,\n                  );\n\n                  return acc;\n                },\n                [[]],\n              )\n              .map((group, groupIndex) => (\n                <div\n                  className={clsx(styles.segmentGroup, styles[variant])}\n                  key={`${format}-group-${\n                    // biome-ignore lint/suspicious/noArrayIndexKey: intentional\n                    groupIndex\n                  }`}\n                >\n                  {group}\n                </div>\n              ))}\n          </div>\n\n          {showFormatButton && (\n            <DialogTrigger onOpenChange={handlePopoverOpenChange}>\n              <Button\n                variant='icon'\n                size={size}\n                color='mono-bold'\n                className={classNames?.formatButton}\n                aria-label='View coordinate in all formats'\n                isDisabled={!copy.isFormatButtonEnabled}\n              >\n                <Icon>\n                  <GlobalShare />\n                </Icon>\n              </Button>\n              <Popover classNames={{ popover: styles.popover }}>\n                <PopoverTitle className={styles.popoverTitle}>\n                  Copy Coordinates\n                </PopoverTitle>\n                <PopoverContent>\n                  {allCoordinateFormats &&\n                    COORDINATE_SYSTEMS.map((formatKey) => {\n                      const formatResult = allCoordinateFormats[formatKey];\n                      const isCopied = copy.copiedFormat === formatKey;\n\n                      return (\n                        <div key={formatKey} className={styles.formatRow}>\n                          <div className={styles.formatLabels}>\n                            <span className={styles.formatLabel}>\n                              {COORDINATE_FORMAT_LABELS[formatKey]}\n                            </span>\n                            <span\n                              className={styles.formatValue}\n                              title={formatResult.value}\n                            >\n                              {formatResult.value}\n                            </span>\n                          </div>\n                          <Button\n                            variant='icon'\n                            color='mono-bold'\n                            aria-label={`Copy ${COORDINATE_FORMAT_LABELS[formatKey]} format`}\n                            onClick={() => copy.handleCopyFormat(formatKey)}\n                            isDisabled={!formatResult.isValid}\n                          >\n                            <Icon>\n                              {isCopied ? <Check /> : <CopyToClipboard />}\n                            </Icon>\n                          </Button>\n                        </div>\n                      );\n                    })}\n                </PopoverContent>\n              </Popover>\n            </DialogTrigger>\n          )}\n        </div>\n\n        {/* Description is hidden when field is invalid (unless disabled) to make room for error message */}\n        {descriptionProp && !isSmall && (!isInvalid || isDisabled) && (\n          <AriaText\n            className={clsx(styles.description, classNames?.description)}\n            slot='description'\n          >\n            {descriptionProp}\n          </AriaText>\n        )}\n\n        <FieldError\n          className={composeRenderProps(classNames?.error, (className) =>\n            clsx(styles.error, className),\n          )}\n        >\n          {effectiveErrorMessage}\n        </FieldError>\n\n        <DialogTrigger\n          isOpen={paste.showDisambiguationModal}\n          onOpenChange={paste.setShowDisambiguationModal}\n        >\n          <Button className={styles.hiddenTrigger}>Hidden Trigger</Button>\n          <Dialog size='small'>\n            <DialogTitle className={styles.modalTitle}>\n              Select Coordinate Format\n            </DialogTitle>\n            <DialogContent>\n              <p className={styles.modalDescription}>\n                The pasted value matches multiple coordinate formats. Please\n                select the correct interpretation:\n              </p>\n\n              <RadioGroup\n                classNames={{ group: styles.formatOptions }}\n                value={paste.selectedDisambiguationFormat}\n                onChange={(value) =>\n                  paste.setSelectedDisambiguationFormat(\n                    value as CoordinateSystem,\n                  )\n                }\n              >\n                {paste.disambiguationMatches.map((match) => (\n                  <Radio key={match.format} value={match.format}>\n                    <div className={styles.modalOptionContent}>\n                      <span className={styles.formatOptionLabel}>\n                        {COORDINATE_FORMAT_NAMES[match.format]}\n                      </span>\n                      <span className={styles.formatOptionValue}>\n                        {match.displayString}\n                      </span>\n                    </div>\n                  </Radio>\n                ))}\n              </RadioGroup>\n            </DialogContent>\n            <DialogFooter className={styles.modalActions}>\n              <Button\n                variant='flat'\n                onPress={() => paste.setShowDisambiguationModal(false)}\n              >\n                Cancel\n              </Button>\n              <Button onPress={paste.handleDisambiguationSelect}>\n                Apply Selected\n              </Button>\n            </DialogFooter>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Label","DialogTrigger","Button","Popover","AriaText","Dialog","RadioGroup","Radio"],"sources":["../../../src/components/coordinate-field/index.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport Check from '@accelint/icons/check';\nimport CopyToClipboard from '@accelint/icons/copy-to-clipboard';\nimport GlobalShare from '@accelint/icons/global-share';\nimport { filterDOMProps } from '@react-aria/utils';\nimport 'client-only';\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  Text as AriaText,\n  composeRenderProps,\n  FieldError,\n  FieldErrorContext,\n  GroupContext,\n  LabelContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { useCoordinateField } from '../../hooks/coordinate-field';\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport { DialogContent } from '../dialog/content';\nimport { DialogFooter } from '../dialog/footer';\nimport { DialogTitle } from '../dialog/title';\nimport { DialogTrigger } from '../dialog/trigger';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Popover } from '../popover';\nimport { PopoverContent } from '../popover/content';\nimport { PopoverTitle } from '../popover/title';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { CoordinateFieldContext, CoordinateFieldStateContext } from './context';\nimport {\n  type CoordinateFormatResult,\n  getAllCoordinateFormats,\n} from './coordinate-utils';\nimport { CoordinateSegment } from './segment';\nimport { GROUP_SEPARATOR, getSegmentLabel } from './segment-configs';\nimport styles from './styles.module.css';\nimport {\n  COORDINATE_FORMAT_LABELS,\n  COORDINATE_FORMAT_NAMES,\n  COORDINATE_SYSTEMS,\n  type CoordinateSystem,\n} from './types';\nimport { calculateMinControlWidth } from './width-utils';\nimport type { CoordinateFieldProps } from './types';\n\n/**\n * CoordinateField - A comprehensive coordinate input component with multiple format support\n *\n * Provides accessible coordinate input functionality with support for multiple coordinate\n * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally\n * for consistency.\n *\n * @param props - The coordinate field props.\n * @param props.ref - Reference to the coordinate field element.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.description - Description text displayed below the field.\n * @param props.label - Label text for the coordinate field.\n * @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).\n * @param props.size - Size variant of the field.\n * @param props.variant - Layout variant (inline or stacked).\n * @param props.showFormatButton - Whether to show the format conversion button.\n * @param props.isDisabled - Whether the field is disabled.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @param props.isRequired - Whether the field is required.\n * @param props.isReadOnly - Whether the field is read-only.\n * @returns The coordinate field component.\n *\n * @example\n * ```tsx\n * // Basic coordinate field\n * <CoordinateField label=\"Location\" />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with validation\n * <CoordinateField\n *   label=\"Target Coordinates\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please enter a valid coordinate\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with specific format\n * <CoordinateField\n *   label=\"Position\"\n *   format=\"dms\"\n *   description=\"Enter coordinates in Degrees Minutes Seconds format\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Compact coordinate field\n * <CoordinateField\n *   label=\"Coordinates\"\n *   size=\"small\"\n *   format=\"dd\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled coordinate field\n * <CoordinateField\n *   label=\"Selected Location\"\n *   value={coordinates}\n *   onChange={setCoordinates}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with error handling\n * <CoordinateField\n *   label=\"Target Coordinates\"\n *   onError={(message, context) => {\n *     // message will be \"Invalid coordinate value\" for validation errors\n *     // or \"Invalid coordinate format\" for paste errors\n *     setErrorMessage(message);\n *     console.error(message, context);\n *   }}\n *   isInvalid={!!errorMessage}\n *   errorMessage={errorMessage}\n * />\n * ```\n */\nexport function CoordinateField({ ref, ...props }: CoordinateFieldProps) {\n  [props, ref] = useContextProps(props, ref, CoordinateFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    label: labelProp,\n    format = 'dd',\n    size = 'medium',\n    variant = 'inline',\n    showFormatButton = true,\n    isDisabled = false,\n    isInvalid: isInvalidProp = false,\n    isRequired = false,\n    isReadOnly = false,\n    ...rest\n  } = props;\n\n  const isSmall = size === 'small';\n\n  const DOMProps = filterDOMProps(rest, { global: true });\n\n  // When size is small and label is hidden, use aria-label instead of aria-labelledby\n  // to ensure screen readers have an accessible name\n  const ariaLabelForSmallSize =\n    isSmall && labelProp ? labelProp : rest['aria-label'];\n\n  const {\n    state,\n    focus,\n    paste,\n    copy,\n    registerTimeout,\n    fieldProps,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    validation,\n    effectiveErrorMessage,\n    isInvalid,\n  } = useCoordinateField(\n    props,\n    ariaLabelForSmallSize,\n    rest['aria-describedby'],\n    rest['aria-details'],\n  );\n\n  const componentState = {\n    segmentValues: state.segmentValues,\n    format,\n    currentValue: state.currentValue,\n    validationErrors: state.validationErrors,\n    isDisabled,\n    isInvalid,\n    isRequired,\n    size,\n    variant,\n    registerTimeout,\n  };\n\n  // Store all coordinate formats, calculated only when popover opens\n  const [allCoordinateFormats, setAllCoordinateFormats] = useState<Record<\n    CoordinateSystem,\n    CoordinateFormatResult\n  > | null>(null);\n\n  const handlePopoverOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        setAllCoordinateFormats(getAllCoordinateFormats(state.currentValue));\n      }\n    },\n    [state.currentValue],\n  );\n\n  // Calculate the minimum width needed for the control container\n  // This keeps the outlined container at a fixed width while segments animate\n  const minControlWidth = useMemo(\n    () =>\n      calculateMinControlWidth(\n        state.editableSegmentConfigs,\n        state.segmentConfigs,\n        showFormatButton,\n      ),\n    [state.editableSegmentConfigs, state.segmentConfigs, showFormatButton],\n  );\n\n  return (\n    <Provider\n      values={[\n        [CoordinateFieldContext, props],\n        [CoordinateFieldStateContext, componentState],\n        [GroupContext, fieldProps],\n        [LabelContext, labelProps],\n        [\n          TextContext,\n          {\n            slots: {\n              description: descriptionProps,\n              errorMessage: errorProps,\n            },\n          },\n        ],\n        [FieldErrorContext, validation],\n      ]}\n    >\n      <div\n        {...DOMProps}\n        {...fieldProps}\n        ref={ref}\n        className={clsx(\n          'group/coordinate-field',\n          styles.field,\n          classNames?.field,\n        )}\n        data-size={size}\n        data-disabled={isDisabled || null}\n        data-invalid={isInvalid || null}\n      >\n        {!isSmall && labelProp && (\n          <Label\n            className={classNames?.label}\n            isDisabled={isDisabled}\n            isRequired={isRequired}\n          >\n            {labelProp}\n          </Label>\n        )}\n\n        <div\n          style={\n            {\n              '--min-width': variant === 'stacked' ? 'unset' : minControlWidth,\n            } as CSSProperties\n          }\n          className={clsx(styles.control, classNames?.control)}\n          data-readonly={isReadOnly || null}\n        >\n          <div\n            className={clsx(styles.input, styles[variant], classNames?.input)}\n            onPasteCapture={paste.handleInputPaste}\n            data-input-container\n          >\n            {state.segmentConfigs\n              .reduce<ReactNode[][]>(\n                (acc, config, configIndex) => {\n                  const currentGroupIndex = acc.length - 1;\n\n                  if (\n                    config.value === GROUP_SEPARATOR &&\n                    variant === 'stacked'\n                  ) {\n                    acc.push([]);\n\n                    return acc;\n                  }\n\n                  if (config.type === 'literal') {\n                    acc[currentGroupIndex]?.push(\n                      <span\n                        key={`${format}-literal-${configIndex}-${config.value}`}\n                        className={styles.literal}\n                      >\n                        {config.value}\n                      </span>,\n                    );\n\n                    return acc;\n                  }\n\n                  const editableIndex = state.segmentConfigs\n                    .slice(0, configIndex)\n                    .filter((c) => c.type !== 'literal').length;\n\n                  acc[currentGroupIndex]?.push(\n                    <CoordinateSegment\n                      key={`${format}-segment-${editableIndex}`}\n                      value={state.segmentValues[editableIndex] || ''}\n                      onChange={(newValue) =>\n                        state.handleSegmentChange(editableIndex, newValue)\n                      }\n                      onFocus={() =>\n                        focus.setFocusedSegmentIndex(editableIndex)\n                      }\n                      onBlur={() => {\n                        focus.setFocusedSegmentIndex(-1);\n                        state.flushPendingValidation();\n                      }}\n                      onKeyDown={(e) =>\n                        focus.handleSegmentKeyDown(editableIndex, e)\n                      }\n                      onAutoAdvance={() =>\n                        focus.focusNextSegment(editableIndex)\n                      }\n                      onAutoRetreat={() =>\n                        focus.focusPreviousSegment(editableIndex)\n                      }\n                      placeholder={config.placeholder}\n                      maxLength={config.maxLength}\n                      pad={config.pad}\n                      className={clsx(styles.segment, classNames?.segment)}\n                      isDisabled={isDisabled}\n                      isReadOnly={isReadOnly}\n                      allowedChars={config.allowedChars}\n                      segmentRef={focus.segmentRefs[editableIndex]}\n                      segmentIndex={editableIndex}\n                      totalSegments={state.editableSegmentConfigs.length}\n                      ariaLabel={getSegmentLabel(format, editableIndex)}\n                    />,\n                  );\n\n                  return acc;\n                },\n                [[]],\n              )\n              .map((group, groupIndex) => (\n                <div\n                  className={clsx(styles.segmentGroup, styles[variant])}\n                  key={`${format}-group-${\n                    // biome-ignore lint/suspicious/noArrayIndexKey: intentional\n                    groupIndex\n                  }`}\n                >\n                  {group}\n                </div>\n              ))}\n          </div>\n\n          {showFormatButton && (\n            <DialogTrigger onOpenChange={handlePopoverOpenChange}>\n              <Button\n                variant='icon'\n                size='small'\n                color='mono-bold'\n                className={clsx(styles.formatButton, classNames?.formatButton)}\n                aria-label='View coordinate in all formats'\n                isDisabled={!copy.isFormatButtonEnabled}\n              >\n                <Icon>\n                  <GlobalShare />\n                </Icon>\n              </Button>\n              <Popover classNames={{ popover: styles.popover }}>\n                <PopoverTitle className={styles.popoverTitle}>\n                  Copy Coordinates\n                </PopoverTitle>\n                <PopoverContent>\n                  {allCoordinateFormats &&\n                    COORDINATE_SYSTEMS.map((formatKey) => {\n                      const formatResult = allCoordinateFormats[formatKey];\n                      const isCopied = copy.copiedFormat === formatKey;\n\n                      return (\n                        <div key={formatKey} className={styles.formatRow}>\n                          <div className={styles.formatLabels}>\n                            <span className={styles.formatLabel}>\n                              {COORDINATE_FORMAT_LABELS[formatKey]}\n                            </span>\n                            <span\n                              className={styles.formatValue}\n                              title={formatResult.value}\n                            >\n                              {formatResult.value}\n                            </span>\n                          </div>\n                          <Button\n                            variant='icon'\n                            color='mono-bold'\n                            aria-label={`Copy ${COORDINATE_FORMAT_LABELS[formatKey]} format`}\n                            onClick={() => copy.handleCopyFormat(formatKey)}\n                            isDisabled={!formatResult.isValid}\n                          >\n                            <Icon>\n                              {isCopied ? <Check /> : <CopyToClipboard />}\n                            </Icon>\n                          </Button>\n                        </div>\n                      );\n                    })}\n                </PopoverContent>\n              </Popover>\n            </DialogTrigger>\n          )}\n        </div>\n\n        {/* Description is hidden when field is invalid (unless disabled) to make room for error message */}\n        {descriptionProp && !isSmall && (!isInvalid || isDisabled) && (\n          <AriaText\n            className={clsx(styles.description, classNames?.description)}\n            slot='description'\n          >\n            {descriptionProp}\n          </AriaText>\n        )}\n\n        <FieldError\n          className={composeRenderProps(classNames?.error, (className) =>\n            clsx(styles.error, className),\n          )}\n        >\n          {effectiveErrorMessage}\n        </FieldError>\n\n        <DialogTrigger\n          isOpen={paste.showDisambiguationModal}\n          onOpenChange={paste.setShowDisambiguationModal}\n        >\n          <Button className={styles.hiddenTrigger}>Hidden Trigger</Button>\n          <Dialog size='small'>\n            <DialogTitle className={styles.modalTitle}>\n              Select Coordinate Format\n            </DialogTitle>\n            <DialogContent>\n              <p className={styles.modalDescription}>\n                The pasted value matches multiple coordinate formats. Please\n                select the correct interpretation:\n              </p>\n\n              <RadioGroup\n                classNames={{ group: styles.formatOptions }}\n                value={paste.selectedDisambiguationFormat}\n                onChange={(value) =>\n                  paste.setSelectedDisambiguationFormat(\n                    value as CoordinateSystem,\n                  )\n                }\n              >\n                {paste.disambiguationMatches.map((match) => (\n                  <Radio key={match.format} value={match.format}>\n                    <div className={styles.modalOptionContent}>\n                      <span className={styles.formatOptionLabel}>\n                        {COORDINATE_FORMAT_NAMES[match.format]}\n                      </span>\n                      <span className={styles.formatOptionValue}>\n                        {match.displayString}\n                      </span>\n                    </div>\n                  </Radio>\n                ))}\n              </RadioGroup>\n            </DialogContent>\n            <DialogFooter className={styles.modalActions}>\n              <Button\n                variant='flat'\n                onPress={() => paste.setShowDisambiguationModal(false)}\n              >\n                Cancel\n              </Button>\n              <Button onPress={paste.handleDisambiguationSelect}>\n                Apply Selected\n              </Button>\n            </DialogFooter>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Provider>\n  );\n}\n"],"mappings":"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"}

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

@@ -15,7 +15,7 @@
 /** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */
 const NUMERIC_PAD = .25;
 /** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */
-const LAST_PAD = .5;
+const LAST_PAD = .8;
 /** The separator used for the logical field groups. */
 const GROUP_SEPARATOR = ", ";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"segment-configs.js","names":["ddSegmentConfigs: SegmentConfig[]","ddmSegmentConfigs: SegmentConfig[]","dmsSegmentConfigs: SegmentConfig[]","mgrsSegmentConfigs: SegmentConfig[]","utmSegmentConfigs: SegmentConfig[]","EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number>"],"sources":["../../../src/components/coordinate-field/segment-configs.ts"],"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/**\n * Coordinate Field Segment Configurations\n *\n * This file defines the segment layouts for each supported coordinate system format.\n * Each configuration specifies the editable segments and literal separators that make up\n * the coordinate input for that format.\n *\n * Supported formats:\n * - DD (Decimal Degrees) - 2 editable segments\n * - DDM (Degrees Decimal Minutes) - 6 editable segments\n * - DMS (Degrees Minutes Seconds) - 8 editable segments\n * - MGRS (Military Grid Reference System) - 5 editable segments\n * - UTM (Universal Transverse Mercator) - 4 editable segments\n *\n * References:\n * - DD parser: /packages/geo/src/coordinates/latlon/decimal-degrees/parser.ts\n * - DDM parser: /packages/geo/src/coordinates/latlon/degrees-decimal-minutes/parser.ts\n * - DMS parser: /packages/geo/src/coordinates/latlon/degrees-minutes-seconds/parser.ts\n * - MGRS parser: /packages/geo/src/coordinates/mgrs/parser.ts\n * - UTM parser: /packages/geo/src/coordinates/utm/parser.ts\n */\n\nimport type { CoordinateSystem, SegmentConfig } from './types';\n\n/** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */\nconst NUMERIC_PAD = 0.25;\n\n/** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */\nconst LAST_PAD = 0.5;\n\n/** The separator used for the logical field groups. */\nexport const GROUP_SEPARATOR = ', ';\n\n/**\n * DD (Decimal Degrees) Segment Configuration\n *\n * Format: [lat_deg], [lon_deg]\n * Example: 89.765432, -123.456789\n *\n * Segments:\n * - Latitude degrees: -90 to 90, allows negative sign, decimals, 0-9\n * - Longitude degrees: -180 to 180, allows negative sign, decimals, 0-9\n *\n * Total segments: 2 editable\n */\nexport const ddSegmentConfigs: SegmentConfig[] = [\n  {\n    type: 'numeric',\n    placeholder: '00.000000',\n    allowedChars: '[0-9\\\\-\\\\.]',\n    maxLength: 10, // Max: -90.123456\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  {\n    type: 'numeric',\n    placeholder: '-000.000000',\n    allowedChars: '[0-9\\\\-\\\\.]',\n    maxLength: 11, // Max: -180.123456\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * DDM (Degrees Decimal Minutes) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_dir], [lon_deg]° [lon_min]' [lon_dir]\n * Example: 89° 45.9259' N, 123° 27.4073' W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59.9999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59.9999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 6 editable\n */\nexport const ddmSegmentConfigs: SegmentConfig[] = [\n  // Latitude degrees\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 90\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Latitude minutes (decimal minutes)\n  {\n    type: 'numeric',\n    placeholder: '00.0000',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 7, // Max: 59.9999\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Latitude direction\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  // Longitude degrees\n  {\n    type: 'numeric',\n    placeholder: '000',\n    allowedChars: '[0-9]',\n    maxLength: 3, // Max: 180\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Longitude minutes (decimal minutes)\n  {\n    type: 'numeric',\n    placeholder: '00.0000',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 7, // Max: 59.9999\n    pad: LAST_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Longitude direction\n  {\n    type: 'directional',\n    placeholder: 'W',\n    allowedChars: '[EW]',\n    maxLength: 1,\n    pad: 0,\n  },\n];\n\n/**\n * DMS (Degrees Minutes Seconds) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_sec]\" [lat_dir], [lon_deg]° [lon_min]' [lon_sec]\" [lon_dir]\n * Example: 89° 45' 55.56\" N, 123° 27' 24.44\" W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59, whole number only (no decimals)\n * - Latitude seconds: 0-59.999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59, whole number only (no decimals)\n * - Longitude seconds: 0-59.999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 8 editable\n */\nexport const dmsSegmentConfigs: SegmentConfig[] = [\n  // Latitude degrees\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 90\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Latitude minutes (whole number)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 59\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Latitude seconds (decimal seconds)\n  {\n    type: 'numeric',\n    placeholder: '00.00',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 5, // Max: 59.99\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '\"',\n  },\n  // Latitude direction\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  // Longitude degrees\n  {\n    type: 'numeric',\n    placeholder: '000',\n    allowedChars: '[0-9]',\n    maxLength: 3, // Max: 180\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Longitude minutes (whole number)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 59\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Longitude seconds (decimal seconds)\n  {\n    type: 'numeric',\n    placeholder: '00.00',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 5, // Max: 59.99\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '\"',\n  },\n  // Longitude direction\n  {\n    type: 'directional',\n    placeholder: 'W',\n    allowedChars: '[EW]',\n    maxLength: 1,\n    pad: 0,\n  },\n];\n\n/**\n * MGRS (Military Grid Reference System) Segment Configuration\n *\n * Format: [zone][band] [grid_100km] [easting] [northing]\n * Example: 18T WM 12345 67890\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Band: C-X (excluding I and O), 1 letter\n * - Grid 100km: 2 letters (A-Z excluding I and O)\n * - Easting: 5 digits (can be 1-5 based on precision)\n * - Northing: 5 digits (can be 1-5 based on precision)\n *\n * Total segments: 5 editable\n *\n * Reference: /packages/geo/src/coordinates/mgrs/parser.ts\n * Pattern: /^((?:..?)?)(\\w?)\\s*((?:\\w{2})?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const mgrsSegmentConfigs: SegmentConfig[] = [\n  // Zone (1-60)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 60\n    pad: NUMERIC_PAD,\n  },\n  // Band (C-X, excluding I and O)\n  {\n    type: 'alphanumeric',\n    placeholder: 'T',\n    allowedChars: '[C-HJ-NP-X]', // Excludes I and O\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Grid 100km identifier (2 letters, A-Z excluding I and O)\n  {\n    type: 'alphanumeric',\n    placeholder: 'WM',\n    allowedChars: '[A-HJ-NP-Z]', // Excludes I and O\n    maxLength: 2,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Easting (5 digits, can be 1-5 based on precision)\n  {\n    type: 'numeric',\n    placeholder: '00000',\n    allowedChars: '[0-9]',\n    maxLength: 5,\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Northing (5 digits, can be 1-5 based on precision)\n  {\n    type: 'numeric',\n    placeholder: '00000',\n    allowedChars: '[0-9]',\n    maxLength: 5,\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * UTM (Universal Transverse Mercator) Segment Configuration\n *\n * Format: [zone][hemisphere] [easting] [northing]\n * Example: 18N 585628 4511644\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Hemisphere: N or S, 1 letter\n * - Easting: 6-7 digits\n * - Northing: 7 digits\n *\n * Total segments: 4 editable\n *\n * Reference: /packages/geo/src/coordinates/utm/parser.ts\n * Pattern: /^((?:..)?)\\s*(\\w?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const utmSegmentConfigs: SegmentConfig[] = [\n  // Zone (1-60)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 60\n    pad: NUMERIC_PAD,\n  },\n  // Hemisphere (N or S)\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Easting (6-7 digits)\n  {\n    type: 'numeric',\n    placeholder: '000000',\n    allowedChars: '[0-9]',\n    maxLength: 7,\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Northing (7 digits)\n  {\n    type: 'numeric',\n    placeholder: '0000000',\n    allowedChars: '[0-9]',\n    maxLength: 7,\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * Get segment configurations for a specific coordinate system\n *\n * @param format - The coordinate system format\n * @returns Array of segment configurations for the specified format\n */\nexport function getSegmentConfigs(format: CoordinateSystem): SegmentConfig[] {\n  switch (format) {\n    case 'dd':\n      return ddSegmentConfigs;\n    case 'ddm':\n      return ddmSegmentConfigs;\n    case 'dms':\n      return dmsSegmentConfigs;\n    case 'mgrs':\n      return mgrsSegmentConfigs;\n    case 'utm':\n      return utmSegmentConfigs;\n    default:\n      // Default to DD format if unknown format provided\n      return ddSegmentConfigs;\n  }\n}\n\n/**\n * Get format description with example\n *\n * Provides a user-friendly description of the coordinate format with an example value.\n * These descriptions can be used as helper text to guide users on the expected format.\n *\n * @param format - The coordinate system format\n * @returns Description string with format example\n */\nexport function getFormatDescription(format: CoordinateSystem): string {\n  switch (format) {\n    case 'dd':\n      return 'Example: 40.7128, -74.0060 (New York City)';\n    case 'ddm':\n      return \"Example: 40° 42.768' N, 74° 0.360' W (New York City)\";\n    case 'dms':\n      return 'Example: 40° 42\\' 46.08\" N, 74° 0\\' 21.60\" W (New York City)';\n    case 'mgrs':\n      return 'Example: 18T WL 80654 06346 (New York City)';\n    case 'utm':\n      return 'Example: 18N 585628 4511644 (New York City)';\n    default:\n      return '';\n  }\n}\n\n/**\n * Get editable segment count for a format\n *\n * Returns the number of editable segments (excluding literal separators) for each format.\n * This is useful for initializing segment values and validation.\n *\n * @param format - The coordinate system format\n * @returns Number of editable segments\n */\nexport function getEditableSegmentCount(format: CoordinateSystem): number {\n  const configs = getSegmentConfigs(format);\n  return configs.filter((config) => config.type !== 'literal').length;\n}\n\n/**\n * Validate segment count for each format\n *\n * Expected editable segment counts:\n * - DD: 2 segments (lat, lon)\n * - DDM: 6 segments (lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir)\n * - DMS: 8 segments (lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir)\n * - MGRS: 5 segments (zone, band, grid, easting, northing)\n * - UTM: 4 segments (zone, hemisphere, easting, northing)\n */\nexport const EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number> = {\n  dd: 2,\n  ddm: 6,\n  dms: 8,\n  mgrs: 5,\n  utm: 4,\n};\n\n/**\n * Get semantic accessibility label for a segment based on format and editable index\n *\n * Provides descriptive labels for screen readers (e.g., \"Latitude degrees\", \"Longitude minutes\")\n * to improve accessibility beyond generic \"Coordinate segment 1\" announcements.\n *\n * @param format - The coordinate system format\n * @param editableIndex - The index of the editable segment (0-based, excluding literals)\n * @returns Semantic label string for the segment\n */\nexport function getSegmentLabel(\n  format: CoordinateSystem,\n  editableIndex: number,\n): string {\n  switch (format) {\n    case 'dd':\n      // DD: [lat, lon]\n      return editableIndex === 0 ? 'Latitude' : 'Longitude';\n\n    case 'ddm':\n      // DDM: [lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir]\n      switch (editableIndex) {\n        case 0:\n          return 'Latitude degrees';\n        case 1:\n          return 'Latitude minutes';\n        case 2:\n          return 'Latitude direction';\n        case 3:\n          return 'Longitude degrees';\n        case 4:\n          return 'Longitude minutes';\n        case 5:\n          return 'Longitude direction';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'dms':\n      // DMS: [lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir]\n      switch (editableIndex) {\n        case 0:\n          return 'Latitude degrees';\n        case 1:\n          return 'Latitude minutes';\n        case 2:\n          return 'Latitude seconds';\n        case 3:\n          return 'Latitude direction';\n        case 4:\n          return 'Longitude degrees';\n        case 5:\n          return 'Longitude minutes';\n        case 6:\n          return 'Longitude seconds';\n        case 7:\n          return 'Longitude direction';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'mgrs':\n      // MGRS: [zone, band, grid, easting, northing]\n      switch (editableIndex) {\n        case 0:\n          return 'MGRS zone';\n        case 1:\n          return 'MGRS band';\n        case 2:\n          return 'MGRS grid square';\n        case 3:\n          return 'MGRS easting';\n        case 4:\n          return 'MGRS northing';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'utm':\n      // UTM: [zone, hemisphere, easting, northing]\n      switch (editableIndex) {\n        case 0:\n          return 'UTM zone';\n        case 1:\n          return 'UTM hemisphere';\n        case 2:\n          return 'UTM easting';\n        case 3:\n          return 'UTM northing';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    default:\n      return `Coordinate segment ${editableIndex + 1}`;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,cAAc;;AAGpB,MAAM,WAAW;;AAGjB,MAAa,kBAAkB;;;;;;;;;;;;;AAc/B,MAAaA,mBAAoC;CAC/C;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CACD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;AAkBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,qBAAsC;CAEjD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;AAQD,SAAgB,kBAAkB,QAA2C;AAC3E,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QAEE,QAAO;;;;;;;;;;;;AAab,SAAgB,qBAAqB,QAAkC;AACrE,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,QAAO;;;;;;;;;;;;AAab,SAAgB,wBAAwB,QAAkC;AAExE,QADgB,kBAAkB,OAAO,CAC1B,QAAQ,WAAW,OAAO,SAAS,UAAU,CAAC;;;;;;;;;;;;AAa/D,MAAaC,0BAA4D;CACvE,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACN;;;;;;;;;;;AAYD,SAAgB,gBACd,QACA,eACQ;AACR,SAAQ,QAAR;EACE,KAAK,KAEH,QAAO,kBAAkB,IAAI,aAAa;EAE5C,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,OAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,QACE,QAAO,sBAAsB,gBAAgB"}
+{"version":3,"file":"segment-configs.js","names":["ddSegmentConfigs: SegmentConfig[]","ddmSegmentConfigs: SegmentConfig[]","dmsSegmentConfigs: SegmentConfig[]","mgrsSegmentConfigs: SegmentConfig[]","utmSegmentConfigs: SegmentConfig[]","EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number>"],"sources":["../../../src/components/coordinate-field/segment-configs.ts"],"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/**\n * Coordinate Field Segment Configurations\n *\n * This file defines the segment layouts for each supported coordinate system format.\n * Each configuration specifies the editable segments and literal separators that make up\n * the coordinate input for that format.\n *\n * Supported formats:\n * - DD (Decimal Degrees) - 2 editable segments\n * - DDM (Degrees Decimal Minutes) - 6 editable segments\n * - DMS (Degrees Minutes Seconds) - 8 editable segments\n * - MGRS (Military Grid Reference System) - 5 editable segments\n * - UTM (Universal Transverse Mercator) - 4 editable segments\n *\n * References:\n * - DD parser: /packages/geo/src/coordinates/latlon/decimal-degrees/parser.ts\n * - DDM parser: /packages/geo/src/coordinates/latlon/degrees-decimal-minutes/parser.ts\n * - DMS parser: /packages/geo/src/coordinates/latlon/degrees-minutes-seconds/parser.ts\n * - MGRS parser: /packages/geo/src/coordinates/mgrs/parser.ts\n * - UTM parser: /packages/geo/src/coordinates/utm/parser.ts\n */\n\nimport type { CoordinateSystem, SegmentConfig } from './types';\n\n/** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */\nconst NUMERIC_PAD = 0.25;\n\n/** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */\nconst LAST_PAD = 0.8;\n\n/** The separator used for the logical field groups. */\nexport const GROUP_SEPARATOR = ', ';\n\n/**\n * DD (Decimal Degrees) Segment Configuration\n *\n * Format: [lat_deg], [lon_deg]\n * Example: 89.765432, -123.456789\n *\n * Segments:\n * - Latitude degrees: -90 to 90, allows negative sign, decimals, 0-9\n * - Longitude degrees: -180 to 180, allows negative sign, decimals, 0-9\n *\n * Total segments: 2 editable\n */\nexport const ddSegmentConfigs: SegmentConfig[] = [\n  {\n    type: 'numeric',\n    placeholder: '00.000000',\n    allowedChars: '[0-9\\\\-\\\\.]',\n    maxLength: 10, // Max: -90.123456\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  {\n    type: 'numeric',\n    placeholder: '-000.000000',\n    allowedChars: '[0-9\\\\-\\\\.]',\n    maxLength: 11, // Max: -180.123456\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * DDM (Degrees Decimal Minutes) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_dir], [lon_deg]° [lon_min]' [lon_dir]\n * Example: 89° 45.9259' N, 123° 27.4073' W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59.9999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59.9999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 6 editable\n */\nexport const ddmSegmentConfigs: SegmentConfig[] = [\n  // Latitude degrees\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 90\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Latitude minutes (decimal minutes)\n  {\n    type: 'numeric',\n    placeholder: '00.0000',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 7, // Max: 59.9999\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Latitude direction\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  // Longitude degrees\n  {\n    type: 'numeric',\n    placeholder: '000',\n    allowedChars: '[0-9]',\n    maxLength: 3, // Max: 180\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Longitude minutes (decimal minutes)\n  {\n    type: 'numeric',\n    placeholder: '00.0000',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 7, // Max: 59.9999\n    pad: LAST_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Longitude direction\n  {\n    type: 'directional',\n    placeholder: 'W',\n    allowedChars: '[EW]',\n    maxLength: 1,\n    pad: 0,\n  },\n];\n\n/**\n * DMS (Degrees Minutes Seconds) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_sec]\" [lat_dir], [lon_deg]° [lon_min]' [lon_sec]\" [lon_dir]\n * Example: 89° 45' 55.56\" N, 123° 27' 24.44\" W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59, whole number only (no decimals)\n * - Latitude seconds: 0-59.999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59, whole number only (no decimals)\n * - Longitude seconds: 0-59.999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 8 editable\n */\nexport const dmsSegmentConfigs: SegmentConfig[] = [\n  // Latitude degrees\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 90\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Latitude minutes (whole number)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 59\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Latitude seconds (decimal seconds)\n  {\n    type: 'numeric',\n    placeholder: '00.00',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 5, // Max: 59.99\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '\"',\n  },\n  // Latitude direction\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: GROUP_SEPARATOR,\n  },\n  // Longitude degrees\n  {\n    type: 'numeric',\n    placeholder: '000',\n    allowedChars: '[0-9]',\n    maxLength: 3, // Max: 180\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '°',\n  },\n  // Longitude minutes (whole number)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 59\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: \"'\",\n  },\n  // Longitude seconds (decimal seconds)\n  {\n    type: 'numeric',\n    placeholder: '00.00',\n    allowedChars: '[0-9\\\\.]',\n    maxLength: 5, // Max: 59.99\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: '\"',\n  },\n  // Longitude direction\n  {\n    type: 'directional',\n    placeholder: 'W',\n    allowedChars: '[EW]',\n    maxLength: 1,\n    pad: 0,\n  },\n];\n\n/**\n * MGRS (Military Grid Reference System) Segment Configuration\n *\n * Format: [zone][band] [grid_100km] [easting] [northing]\n * Example: 18T WM 12345 67890\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Band: C-X (excluding I and O), 1 letter\n * - Grid 100km: 2 letters (A-Z excluding I and O)\n * - Easting: 5 digits (can be 1-5 based on precision)\n * - Northing: 5 digits (can be 1-5 based on precision)\n *\n * Total segments: 5 editable\n *\n * Reference: /packages/geo/src/coordinates/mgrs/parser.ts\n * Pattern: /^((?:..?)?)(\\w?)\\s*((?:\\w{2})?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const mgrsSegmentConfigs: SegmentConfig[] = [\n  // Zone (1-60)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 60\n    pad: NUMERIC_PAD,\n  },\n  // Band (C-X, excluding I and O)\n  {\n    type: 'alphanumeric',\n    placeholder: 'T',\n    allowedChars: '[C-HJ-NP-X]', // Excludes I and O\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Grid 100km identifier (2 letters, A-Z excluding I and O)\n  {\n    type: 'alphanumeric',\n    placeholder: 'WM',\n    allowedChars: '[A-HJ-NP-Z]', // Excludes I and O\n    maxLength: 2,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Easting (5 digits, can be 1-5 based on precision)\n  {\n    type: 'numeric',\n    placeholder: '00000',\n    allowedChars: '[0-9]',\n    maxLength: 5,\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Northing (5 digits, can be 1-5 based on precision)\n  {\n    type: 'numeric',\n    placeholder: '00000',\n    allowedChars: '[0-9]',\n    maxLength: 5,\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * UTM (Universal Transverse Mercator) Segment Configuration\n *\n * Format: [zone][hemisphere] [easting] [northing]\n * Example: 18N 585628 4511644\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Hemisphere: N or S, 1 letter\n * - Easting: 6-7 digits\n * - Northing: 7 digits\n *\n * Total segments: 4 editable\n *\n * Reference: /packages/geo/src/coordinates/utm/parser.ts\n * Pattern: /^((?:..)?)\\s*(\\w?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const utmSegmentConfigs: SegmentConfig[] = [\n  // Zone (1-60)\n  {\n    type: 'numeric',\n    placeholder: '00',\n    allowedChars: '[0-9]',\n    maxLength: 2, // Max: 60\n    pad: NUMERIC_PAD,\n  },\n  // Hemisphere (N or S)\n  {\n    type: 'directional',\n    placeholder: 'N',\n    allowedChars: '[NS]',\n    maxLength: 1,\n    pad: 0,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Easting (6-7 digits)\n  {\n    type: 'numeric',\n    placeholder: '000000',\n    allowedChars: '[0-9]',\n    maxLength: 7,\n    pad: NUMERIC_PAD,\n  },\n  {\n    type: 'literal',\n    value: ' ',\n  },\n  // Northing (7 digits)\n  {\n    type: 'numeric',\n    placeholder: '0000000',\n    allowedChars: '[0-9]',\n    maxLength: 7,\n    pad: LAST_PAD,\n  },\n];\n\n/**\n * Get segment configurations for a specific coordinate system\n *\n * @param format - The coordinate system format\n * @returns Array of segment configurations for the specified format\n */\nexport function getSegmentConfigs(format: CoordinateSystem): SegmentConfig[] {\n  switch (format) {\n    case 'dd':\n      return ddSegmentConfigs;\n    case 'ddm':\n      return ddmSegmentConfigs;\n    case 'dms':\n      return dmsSegmentConfigs;\n    case 'mgrs':\n      return mgrsSegmentConfigs;\n    case 'utm':\n      return utmSegmentConfigs;\n    default:\n      // Default to DD format if unknown format provided\n      return ddSegmentConfigs;\n  }\n}\n\n/**\n * Get format description with example\n *\n * Provides a user-friendly description of the coordinate format with an example value.\n * These descriptions can be used as helper text to guide users on the expected format.\n *\n * @param format - The coordinate system format\n * @returns Description string with format example\n */\nexport function getFormatDescription(format: CoordinateSystem): string {\n  switch (format) {\n    case 'dd':\n      return 'Example: 40.7128, -74.0060 (New York City)';\n    case 'ddm':\n      return \"Example: 40° 42.768' N, 74° 0.360' W (New York City)\";\n    case 'dms':\n      return 'Example: 40° 42\\' 46.08\" N, 74° 0\\' 21.60\" W (New York City)';\n    case 'mgrs':\n      return 'Example: 18T WL 80654 06346 (New York City)';\n    case 'utm':\n      return 'Example: 18N 585628 4511644 (New York City)';\n    default:\n      return '';\n  }\n}\n\n/**\n * Get editable segment count for a format\n *\n * Returns the number of editable segments (excluding literal separators) for each format.\n * This is useful for initializing segment values and validation.\n *\n * @param format - The coordinate system format\n * @returns Number of editable segments\n */\nexport function getEditableSegmentCount(format: CoordinateSystem): number {\n  const configs = getSegmentConfigs(format);\n  return configs.filter((config) => config.type !== 'literal').length;\n}\n\n/**\n * Validate segment count for each format\n *\n * Expected editable segment counts:\n * - DD: 2 segments (lat, lon)\n * - DDM: 6 segments (lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir)\n * - DMS: 8 segments (lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir)\n * - MGRS: 5 segments (zone, band, grid, easting, northing)\n * - UTM: 4 segments (zone, hemisphere, easting, northing)\n */\nexport const EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number> = {\n  dd: 2,\n  ddm: 6,\n  dms: 8,\n  mgrs: 5,\n  utm: 4,\n};\n\n/**\n * Get semantic accessibility label for a segment based on format and editable index\n *\n * Provides descriptive labels for screen readers (e.g., \"Latitude degrees\", \"Longitude minutes\")\n * to improve accessibility beyond generic \"Coordinate segment 1\" announcements.\n *\n * @param format - The coordinate system format\n * @param editableIndex - The index of the editable segment (0-based, excluding literals)\n * @returns Semantic label string for the segment\n */\nexport function getSegmentLabel(\n  format: CoordinateSystem,\n  editableIndex: number,\n): string {\n  switch (format) {\n    case 'dd':\n      // DD: [lat, lon]\n      return editableIndex === 0 ? 'Latitude' : 'Longitude';\n\n    case 'ddm':\n      // DDM: [lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir]\n      switch (editableIndex) {\n        case 0:\n          return 'Latitude degrees';\n        case 1:\n          return 'Latitude minutes';\n        case 2:\n          return 'Latitude direction';\n        case 3:\n          return 'Longitude degrees';\n        case 4:\n          return 'Longitude minutes';\n        case 5:\n          return 'Longitude direction';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'dms':\n      // DMS: [lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir]\n      switch (editableIndex) {\n        case 0:\n          return 'Latitude degrees';\n        case 1:\n          return 'Latitude minutes';\n        case 2:\n          return 'Latitude seconds';\n        case 3:\n          return 'Latitude direction';\n        case 4:\n          return 'Longitude degrees';\n        case 5:\n          return 'Longitude minutes';\n        case 6:\n          return 'Longitude seconds';\n        case 7:\n          return 'Longitude direction';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'mgrs':\n      // MGRS: [zone, band, grid, easting, northing]\n      switch (editableIndex) {\n        case 0:\n          return 'MGRS zone';\n        case 1:\n          return 'MGRS band';\n        case 2:\n          return 'MGRS grid square';\n        case 3:\n          return 'MGRS easting';\n        case 4:\n          return 'MGRS northing';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    case 'utm':\n      // UTM: [zone, hemisphere, easting, northing]\n      switch (editableIndex) {\n        case 0:\n          return 'UTM zone';\n        case 1:\n          return 'UTM hemisphere';\n        case 2:\n          return 'UTM easting';\n        case 3:\n          return 'UTM northing';\n        default:\n          return `Coordinate segment ${editableIndex + 1}`;\n      }\n\n    default:\n      return `Coordinate segment ${editableIndex + 1}`;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,cAAc;;AAGpB,MAAM,WAAW;;AAGjB,MAAa,kBAAkB;;;;;;;;;;;;;AAc/B,MAAaA,mBAAoC;CAC/C;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CACD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;AAkBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,qBAAsC;CAEjD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;AAQD,SAAgB,kBAAkB,QAA2C;AAC3E,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QAEE,QAAO;;;;;;;;;;;;AAab,SAAgB,qBAAqB,QAAkC;AACrE,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,QAAO;;;;;;;;;;;;AAab,SAAgB,wBAAwB,QAAkC;AAExE,QADgB,kBAAkB,OAAO,CAC1B,QAAQ,WAAW,OAAO,SAAS,UAAU,CAAC;;;;;;;;;;;;AAa/D,MAAaC,0BAA4D;CACvE,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACN;;;;;;;;;;;AAYD,SAAgB,gBACd,QACA,eACQ;AACR,SAAQ,QAAR;EACE,KAAK,KAEH,QAAO,kBAAkB,IAAI,aAAa;EAE5C,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,OAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,QACE,QAAO,sBAAsB,gBAAgB"}

package/dist/components/coordinate-field/segment.d.ts

@@ -12,7 +12,7 @@
 
 import { CoordinateSegmentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/coordinate-field/segment.d.ts
 
@@ -91,7 +91,7 @@ declare function CoordinateSegment({
   onAutoRetreat,
   pad,
   ariaLabel
-}: CoordinateSegmentProps): react_jsx_runtime38.JSX.Element;
+}: CoordinateSegmentProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { CoordinateSegment };
 //# sourceMappingURL=segment.d.ts.map