@accelint/design-toolkit 7.0.0 → 8.0.0

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

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CoordinateFieldProps } from './types.js';
+import 'react';
+import 'react-aria-components';
+
+/**
+ * CoordinateField - A comprehensive coordinate input component with multiple format support
+ *
+ * Provides accessible coordinate input functionality with support for multiple coordinate
+ * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally
+ * for consistency.
+ *
+ * @example
+ * // Basic coordinate field
+ * <CoordinateField label="Location" />
+ *
+ * @example
+ * // Coordinate field with validation
+ * <CoordinateField
+ *   label="Target Coordinates"
+ *   isRequired
+ *   isInvalid={hasError}
+ *   errorMessage="Please enter a valid coordinate"
+ * />
+ *
+ * @example
+ * // Coordinate field with specific format
+ * <CoordinateField
+ *   label="Position"
+ *   format="dms"
+ *   description="Enter coordinates in Degrees Minutes Seconds format"
+ * />
+ *
+ * @example
+ * // Compact coordinate field
+ * <CoordinateField
+ *   label="Coordinates"
+ *   size="small"
+ *   format="dd"
+ * />
+ *
+ * @example
+ * // Controlled coordinate field
+ * <CoordinateField
+ *   label="Selected Location"
+ *   value={coordinates}
+ *   onChange={setCoordinates}
+ * />
+ *
+ * @example
+ * // Coordinate field with error handling
+ * <CoordinateField
+ *   label="Target Coordinates"
+ *   onError={(message, context) => {
+ *     // message will be "Invalid coordinate value" for validation errors
+ *     // or "Invalid coordinate format" for paste errors
+ *     setErrorMessage(message);
+ *     console.error(message, context);
+ *   }}
+ *   isInvalid={!!errorMessage}
+ *   errorMessage={errorMessage}
+ * />
+ */
+declare function CoordinateField({ ref, ...props }: CoordinateFieldProps): react_jsx_runtime.JSX.Element;
+
+export { CoordinateField };

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

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx,jsxs}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import q from'@accelint/icons/check';import W from'@accelint/icons/copy-to-clipboard';import H from'@accelint/icons/global-share';import {filterDOMProps}from'@react-aria/utils';import {useState,useCallback,useMemo}from'react';import {useContextProps,Provider,GroupContext,LabelContext,TextContext,FieldErrorContext,Text,FieldError,composeRenderProps}from'react-aria-components';import {useCoordinateField}from'../../hooks/coordinate-field/index.js';import {Button}from'../button/index.js';import {Dialog}from'../dialog/index.js';import {DialogContent}from'../dialog/content.js';import {DialogFooter}from'../dialog/footer.js';import {DialogTitle}from'../dialog/title.js';import {DialogTrigger}from'../dialog/trigger.js';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Popover}from'../popover/index.js';import {PopoverContent}from'../popover/content.js';import {PopoverTitle}from'../popover/title.js';import {PopoverTrigger}from'../popover/trigger.js';import {Radio}from'../radio/index.js';import {RadioGroup}from'../radio/group.js';import {CoordinateFieldContext,CoordinateFieldStateContext}from'./context.js';import {getAllCoordinateFormats}from'./coordinate-utils.js';import {CoordinateSegment}from'./segment.js';import {getSegmentLabel}from'./segment-configs.js';import t from'./styles.module.css';import {COORDINATE_SYSTEMS,COORDINATE_FORMAT_LABELS,COORDINATE_FORMAT_NAMES}from'./types.js';import {calculateMaxControlWidth}from'./width-utils.js';function to({ref:S,...p}){[p,S]=useContextProps(p,S,CoordinateFieldContext);const{classNames:s,description:N,label:f,format:C="dd",size:v="medium",showFormatButton:h=true,isDisabled:c=false,isInvalid:Te=false,isRequired:T=false,...b}=p,P=v==="small",M=filterDOMProps(b,{global:true}),E=P&&f?f:b["aria-label"],{state:a,focus:n,paste:l,copy:D,registerTimeout:I,fieldProps:y,labelProps:L,descriptionProps:V,errorProps:w,validation:B,effectiveErrorMessage:k,isInvalid:F}=useCoordinateField(p,E,b["aria-describedby"],b["aria-details"]),$={segmentValues:a.segmentValues,format:C,currentValue:a.currentValue,validationErrors:a.validationErrors,isDisabled:c,isInvalid:F,isRequired:T,size:v,registerTimeout:I},[x,z]=useState(null),_=useCallback(o=>{o&&z(getAllCoordinateFormats(a.currentValue));},[a.currentValue]),G=useMemo(()=>calculateMaxControlWidth(a.editableSegmentConfigs,a.segmentConfigs,h),[a.editableSegmentConfigs,a.segmentConfigs,h]);return jsx(Provider,{values:[[CoordinateFieldContext,p],[CoordinateFieldStateContext,$],[GroupContext,y],[LabelContext,L],[TextContext,{slots:{description:V,errorMessage:w}}],[FieldErrorContext,B]],children:jsxs("div",{...M,...y,ref:S,className:clsx("group/coordinate-field",t.field,s?.field),"data-size":v,"data-disabled":c||null,"data-invalid":F||null,children:[!P&&f&&jsx(Label,{className:s?.label,isDisabled:c,isRequired:T,children:f}),jsxs("div",{className:clsx(t.control,s?.control),style:{width:G},children:[jsx("div",{className:clsx(t.input,s?.input),onPasteCapture:l.handleInputPaste,"data-input-container":true,children:a.segmentConfigs.map((o,m)=>{if(o.type==="literal")return jsx("span",{className:"fg-primary-muted",children:o.value},`${C}-literal-${m}-${o.value}`);const r=a.segmentConfigs.slice(0,m).filter(u=>u.type!=="literal").length;return jsx(CoordinateSegment,{value:a.segmentValues[r]||"",onChange:u=>a.handleSegmentChange(r,u),onFocus:()=>n.setFocusedSegmentIndex(r),onBlur:()=>{n.setFocusedSegmentIndex(-1),a.flushPendingValidation();},onKeyDown:u=>n.handleSegmentKeyDown(r,u),onAutoAdvance:()=>n.focusNextSegment(r),onAutoRetreat:()=>n.focusPreviousSegment(r),placeholder:o.placeholder,maxLength:o.maxLength,pad:o.pad,className:clsx(t.segment,s?.segment),isDisabled:c,allowedChars:o.allowedChars,segmentRef:n.segmentRefs[r],segmentIndex:r,totalSegments:a.editableSegmentConfigs.length,ariaLabel:getSegmentLabel(C,r)},`${C}-segment-${r}`)})}),h&&jsxs(PopoverTrigger,{onOpenChange:_,children:[jsx(Button,{variant:"icon",size:v,color:"mono-bold",className:s?.formatButton,"aria-label":"View coordinate in all formats",isDisabled:!D.isFormatButtonEnabled,children:jsx(Icon,{children:jsx(H,{})})}),jsxs(Popover,{classNames:{popover:t.popover},children:[jsx(PopoverTitle,{className:t.popoverTitle,children:"Copy Coordinates"}),jsx(PopoverContent,{children:x&&COORDINATE_SYSTEMS.map(o=>{const m=x[o],r=D.copiedFormat===o;return jsxs("div",{className:t.formatRow,children:[jsxs("div",{className:t.formatLabels,children:[jsx("span",{className:t.formatLabel,children:COORDINATE_FORMAT_LABELS[o]}),jsx("span",{className:t.formatValue,title:m.value,children:m.value})]}),jsx(Button,{variant:"icon",color:"mono-bold","aria-label":`Copy ${COORDINATE_FORMAT_LABELS[o]} format`,onClick:()=>D.handleCopyFormat(o),isDisabled:!m.isValid,children:jsx(Icon,{children:r?jsx(q,{}):jsx(W,{})})})]},o)})})]})]})]}),N&&!P&&(!F||c)&&jsx(Text,{className:clsx(t.description,s?.description),slot:"description",children:N}),jsx(FieldError,{className:composeRenderProps(s?.error,o=>clsx(t.error,o)),children:k}),jsxs(DialogTrigger,{isOpen:l.showDisambiguationModal,onOpenChange:l.setShowDisambiguationModal,children:[jsx(Button,{className:"hidden",children:"Hidden Trigger"}),jsxs(Dialog,{size:"small",children:[jsx(DialogTitle,{className:t.modalTitle,children:"Select Coordinate Format"}),jsxs(DialogContent,{children:[jsx("p",{className:t.modalDescription,children:"The pasted value matches multiple coordinate formats. Please select the correct interpretation:"}),jsx(RadioGroup,{classNames:{group:t.formatOptions},value:l.selectedDisambiguationFormat,onChange:o=>l.setSelectedDisambiguationFormat(o),children:l.disambiguationMatches.map(o=>jsx(Radio,{value:o.format,children:jsxs("div",{className:t.modalOptionContent,children:[jsx("span",{className:t.formatOptionLabel,children:COORDINATE_FORMAT_NAMES[o.format]}),jsx("span",{className:t.formatOptionValue,children:o.displayString})]})},o.format))})]}),jsxs(DialogFooter,{className:t.modalActions,children:[jsx(Button,{variant:"flat",onPress:()=>l.setShowDisambiguationModal(false),children:"Cancel"}),jsx(Button,{onPress:l.handleDisambiguationSelect,children:"Apply Selected"})]})]})]})]})})}export{to as CoordinateField};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/coordinate-field/index.tsx"],"names":["isDisabled","re","isInvalidProp","O","rest","filterDOMProps","ariaLabelForSmallSize","isSmall","labelProp","state","paste","fieldProps","labelProps","Y","errorProps","effectiveErrorMessage","useCoordinateField","format","ie","isInvalid","registerTimeout","handlePopoverOpenChange","setAllCoordinateFormats","getAllCoordinateFormats","calculateMaxControlWidth","Se","jsx","Provider","CoordinateFieldContext","props","Q","CoordinateFieldStateContext","Ne","GroupContext","jsxs","e","te","styles","ae","classNames","size","i","Label","isRequired","maxControlWidth","pe","clsx","d","configIndex","c","newValue","editableIndex","focus","he","config","getSegmentLabel","PopoverTrigger","Button","Pe","fe","copy","R","allCoordinateFormats","COORDINATE_SYSTEMS","ce","formatKey","formatResult","ue","Fe","COORDINATE_FORMAT_LABELS","A","g","Icon","isCopied","CopyToClipboard","descriptionProp","FieldError","composeRenderProps","className","X","j","Z","de","DialogContent","value","ve","match","COORDINATE_FORMAT_NAMES"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { 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 { useCallback, useMemo, useState } 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 { PopoverTrigger } from '../popover/trigger';\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 { 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 { calculateMaxControlWidth } 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 * @example\n * // Basic coordinate field\n * <CoordinateField label=\"Location\" />\n *\n * @example\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 * @example\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 * @example\n * // Compact coordinate field\n * <CoordinateField\n *   label=\"Coordinates\"\n *   size=\"small\"\n *   format=\"dd\"\n * />\n *\n * @example\n * // Controlled coordinate field\n * <CoordinateField\n *   label=\"Selected Location\"\n *   value={coordinates}\n *   onChange={setCoordinates}\n * />\n *\n * @example\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 */\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    showFormatButton = true,\n    isDisabled = false,\n    isInvalid: isInvalidProp = false,\n    isRequired = 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    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 maximum width needed for the control container\n  // This keeps the outlined container at a fixed width while segments animate\n  const maxControlWidth = useMemo(\n    () =>\n      calculateMaxControlWidth(\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          className={clsx(styles.control, classNames?.control)}\n          style={{ width: maxControlWidth }}\n        >\n          <div\n            className={clsx(styles.input, classNames?.input)}\n            onPasteCapture={paste.handleInputPaste}\n            data-input-container\n          >\n            {state.segmentConfigs.map((config, configIndex) => {\n              if (config.type === 'literal') {\n                return (\n                  <span\n                    key={`${format}-literal-${configIndex}-${config.value}`}\n                    className='fg-primary-muted'\n                  >\n                    {config.value}\n                  </span>\n                );\n              }\n\n              const editableIndex = state.segmentConfigs\n                .slice(0, configIndex)\n                .filter((c) => c.type !== 'literal').length;\n\n              return (\n                <CoordinateSegment\n                  key={`${format}-segment-${editableIndex}`}\n                  value={state.segmentValues[editableIndex] || ''}\n                  onChange={(newValue) =>\n                    state.handleSegmentChange(editableIndex, newValue)\n                  }\n                  onFocus={() => focus.setFocusedSegmentIndex(editableIndex)}\n                  onBlur={() => {\n                    focus.setFocusedSegmentIndex(-1);\n                    state.flushPendingValidation();\n                  }}\n                  onKeyDown={(e) =>\n                    focus.handleSegmentKeyDown(editableIndex, e)\n                  }\n                  onAutoAdvance={() => focus.focusNextSegment(editableIndex)}\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                  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          </div>\n\n          {showFormatButton && (\n            <PopoverTrigger 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            </PopoverTrigger>\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='hidden'>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"]}

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

@@ -0,0 +1,163 @@
+import { CoordinateSystem, SegmentConfig } from './types.js';
+import 'react';
+import 'react-aria-components';
+
+/**
+ * Coordinate Field Segment Configurations
+ *
+ * This file defines the segment layouts for each supported coordinate system format.
+ * Each configuration specifies the editable segments and literal separators that make up
+ * the coordinate input for that format.
+ *
+ * Supported formats:
+ * - DD (Decimal Degrees) - 2 editable segments
+ * - DDM (Degrees Decimal Minutes) - 6 editable segments
+ * - DMS (Degrees Minutes Seconds) - 8 editable segments
+ * - MGRS (Military Grid Reference System) - 5 editable segments
+ * - UTM (Universal Transverse Mercator) - 4 editable segments
+ *
+ * References:
+ * - DD parser: /packages/geo/src/coordinates/latlon/decimal-degrees/parser.ts
+ * - DDM parser: /packages/geo/src/coordinates/latlon/degrees-decimal-minutes/parser.ts
+ * - DMS parser: /packages/geo/src/coordinates/latlon/degrees-minutes-seconds/parser.ts
+ * - MGRS parser: /packages/geo/src/coordinates/mgrs/parser.ts
+ * - UTM parser: /packages/geo/src/coordinates/utm/parser.ts
+ */
+
+/**
+ * DD (Decimal Degrees) Segment Configuration
+ *
+ * Format: [lat_deg], [lon_deg]
+ * Example: 89.765432, -123.456789
+ *
+ * Segments:
+ * - Latitude degrees: -90 to 90, allows negative sign, decimals, 0-9
+ * - Longitude degrees: -180 to 180, allows negative sign, decimals, 0-9
+ *
+ * Total segments: 2 editable
+ */
+declare const ddSegmentConfigs: SegmentConfig[];
+/**
+ * DDM (Degrees Decimal Minutes) Segment Configuration
+ *
+ * Format: [lat_deg]° [lat_min]' [lat_dir], [lon_deg]° [lon_min]' [lon_dir]
+ * Example: 89° 45.9259' N, 123° 27.4073' W
+ *
+ * Segments:
+ * - Latitude degrees: 0-90, whole number only (no decimals)
+ * - Latitude minutes: 0-59.9999, decimals allowed
+ * - Latitude direction: N or S
+ * - Longitude degrees: 0-180, whole number only (no decimals)
+ * - Longitude minutes: 0-59.9999, decimals allowed
+ * - Longitude direction: E or W
+ *
+ * Total segments: 6 editable
+ */
+declare const ddmSegmentConfigs: SegmentConfig[];
+/**
+ * DMS (Degrees Minutes Seconds) Segment Configuration
+ *
+ * Format: [lat_deg]° [lat_min]' [lat_sec]" [lat_dir], [lon_deg]° [lon_min]' [lon_sec]" [lon_dir]
+ * Example: 89° 45' 55.56" N, 123° 27' 24.44" W
+ *
+ * Segments:
+ * - Latitude degrees: 0-90, whole number only (no decimals)
+ * - Latitude minutes: 0-59, whole number only (no decimals)
+ * - Latitude seconds: 0-59.999, decimals allowed
+ * - Latitude direction: N or S
+ * - Longitude degrees: 0-180, whole number only (no decimals)
+ * - Longitude minutes: 0-59, whole number only (no decimals)
+ * - Longitude seconds: 0-59.999, decimals allowed
+ * - Longitude direction: E or W
+ *
+ * Total segments: 8 editable
+ */
+declare const dmsSegmentConfigs: SegmentConfig[];
+/**
+ * MGRS (Military Grid Reference System) Segment Configuration
+ *
+ * Format: [zone][band] [grid_100km] [easting] [northing]
+ * Example: 18T WM 12345 67890
+ *
+ * Segments:
+ * - Zone: 1-60, 2 digits
+ * - Band: C-X (excluding I and O), 1 letter
+ * - Grid 100km: 2 letters (A-Z excluding I and O)
+ * - Easting: 5 digits (can be 1-5 based on precision)
+ * - Northing: 5 digits (can be 1-5 based on precision)
+ *
+ * Total segments: 5 editable
+ *
+ * Reference: /packages/geo/src/coordinates/mgrs/parser.ts
+ * Pattern: /^((?:..?)?)(\w?)\s*((?:\w{2})?)\s*(?:(\d+(?:\.\d*)?)?)\s*(?:(\d+(?:\.\d*)?)?)$/i
+ */
+declare const mgrsSegmentConfigs: SegmentConfig[];
+/**
+ * UTM (Universal Transverse Mercator) Segment Configuration
+ *
+ * Format: [zone][hemisphere] [easting] [northing]
+ * Example: 18N 585628 4511644
+ *
+ * Segments:
+ * - Zone: 1-60, 2 digits
+ * - Hemisphere: N or S, 1 letter
+ * - Easting: 6-7 digits
+ * - Northing: 7 digits
+ *
+ * Total segments: 4 editable
+ *
+ * Reference: /packages/geo/src/coordinates/utm/parser.ts
+ * Pattern: /^((?:..)?)\s*(\w?)\s*(?:(\d+(?:\.\d*)?)?)\s*(?:(\d+(?:\.\d*)?)?)$/i
+ */
+declare const utmSegmentConfigs: SegmentConfig[];
+/**
+ * Get segment configurations for a specific coordinate system
+ *
+ * @param format - The coordinate system format
+ * @returns Array of segment configurations for the specified format
+ */
+declare function getSegmentConfigs(format: CoordinateSystem): SegmentConfig[];
+/**
+ * Get format description with example
+ *
+ * Provides a user-friendly description of the coordinate format with an example value.
+ * These descriptions can be used as helper text to guide users on the expected format.
+ *
+ * @param format - The coordinate system format
+ * @returns Description string with format example
+ */
+declare function getFormatDescription(format: CoordinateSystem): string;
+/**
+ * Get editable segment count for a format
+ *
+ * Returns the number of editable segments (excluding literal separators) for each format.
+ * This is useful for initializing segment values and validation.
+ *
+ * @param format - The coordinate system format
+ * @returns Number of editable segments
+ */
+declare function getEditableSegmentCount(format: CoordinateSystem): number;
+/**
+ * Validate segment count for each format
+ *
+ * Expected editable segment counts:
+ * - DD: 2 segments (lat, lon)
+ * - DDM: 6 segments (lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir)
+ * - DMS: 8 segments (lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir)
+ * - MGRS: 5 segments (zone, band, grid, easting, northing)
+ * - UTM: 4 segments (zone, hemisphere, easting, northing)
+ */
+declare const EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number>;
+/**
+ * Get semantic accessibility label for a segment based on format and editable index
+ *
+ * Provides descriptive labels for screen readers (e.g., "Latitude degrees", "Longitude minutes")
+ * to improve accessibility beyond generic "Coordinate segment 1" announcements.
+ *
+ * @param format - The coordinate system format
+ * @param editableIndex - The index of the editable segment (0-based, excluding literals)
+ * @returns Semantic label string for the segment
+ */
+declare function getSegmentLabel(format: CoordinateSystem, editableIndex: number): string;
+
+export { EXPECTED_SEGMENT_COUNTS, ddSegmentConfigs, ddmSegmentConfigs, dmsSegmentConfigs, getEditableSegmentCount, getFormatDescription, getSegmentConfigs, getSegmentLabel, mgrsSegmentConfigs, utmSegmentConfigs };

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

@@ -0,0 +1,2 @@
+const a=[{type:"numeric",placeholder:"00.000000",allowedChars:"[0-9\\-\\.]",maxLength:10,pad:.25},{type:"literal",value:", "},{type:"numeric",placeholder:"-000.000000",allowedChars:"[0-9\\-\\.]",maxLength:11,pad:.5}],n=[{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"literal",value:"\xB0 "},{type:"numeric",placeholder:"00.0000",allowedChars:"[0-9\\.]",maxLength:7,pad:.25},{type:"literal",value:"' "},{type:"directional",placeholder:"N",allowedChars:"[NS]",maxLength:1,pad:0},{type:"literal",value:", "},{type:"numeric",placeholder:"000",allowedChars:"[0-9]",maxLength:3,pad:.25},{type:"literal",value:"\xB0 "},{type:"numeric",placeholder:"00.0000",allowedChars:"[0-9\\.]",maxLength:7,pad:.5},{type:"literal",value:"' "},{type:"directional",placeholder:"W",allowedChars:"[EW]",maxLength:1,pad:0}],l=[{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"literal",value:"\xB0 "},{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"literal",value:"' "},{type:"numeric",placeholder:"00.00",allowedChars:"[0-9\\.]",maxLength:5,pad:.25},{type:"literal",value:'" '},{type:"directional",placeholder:"N",allowedChars:"[NS]",maxLength:1,pad:0},{type:"literal",value:", "},{type:"numeric",placeholder:"000",allowedChars:"[0-9]",maxLength:3,pad:.25},{type:"literal",value:"\xB0 "},{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"literal",value:"' "},{type:"numeric",placeholder:"00.00",allowedChars:"[0-9\\.]",maxLength:5,pad:.25},{type:"literal",value:'" '},{type:"directional",placeholder:"W",allowedChars:"[EW]",maxLength:1,pad:0}],o=[{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"alphanumeric",placeholder:"T",allowedChars:"[C-HJ-NP-X]",maxLength:1,pad:0},{type:"literal",value:" "},{type:"alphanumeric",placeholder:"WM",allowedChars:"[A-HJ-NP-Z]",maxLength:2,pad:0},{type:"literal",value:" "},{type:"numeric",placeholder:"00000",allowedChars:"[0-9]",maxLength:5,pad:.25},{type:"literal",value:" "},{type:"numeric",placeholder:"00000",allowedChars:"[0-9]",maxLength:5,pad:.5}],d=[{type:"numeric",placeholder:"00",allowedChars:"[0-9]",maxLength:2,pad:.25},{type:"directional",placeholder:"N",allowedChars:"[NS]",maxLength:1,pad:0},{type:"literal",value:" "},{type:"numeric",placeholder:"000000",allowedChars:"[0-9]",maxLength:7,pad:.25},{type:"literal",value:" "},{type:"numeric",placeholder:"0000000",allowedChars:"[0-9]",maxLength:7,pad:.5}];function s(t){switch(t){case "dd":return a;case "ddm":return n;case "dms":return l;case "mgrs":return o;case "utm":return d;default:return a}}function c(t){switch(t){case "dd":return "Example: 40.7128, -74.0060 (New York City)";case "ddm":return "Example: 40\xB0 42.768' N, 74\xB0 0.360' W (New York City)";case "dms":return `Example: 40\xB0 42' 46.08" N, 74\xB0 0' 21.60" W (New York City)`;case "mgrs":return "Example: 18T WL 80654 06346 (New York City)";case "utm":return "Example: 18N 585628 4511644 (New York City)";default:return ""}}function p(t){return s(t).filter(r=>r.type!=="literal").length}const m={dd:2,ddm:6,dms:8,mgrs:5,utm:4};function g(t,e){switch(t){case "dd":return e===0?"Latitude":"Longitude";case "ddm":switch(e){case 0:return "Latitude degrees";case 1:return "Latitude minutes";case 2:return "Latitude direction";case 3:return "Longitude degrees";case 4:return "Longitude minutes";case 5:return "Longitude direction";default:return `Coordinate segment ${e+1}`}case "dms":switch(e){case 0:return "Latitude degrees";case 1:return "Latitude minutes";case 2:return "Latitude seconds";case 3:return "Latitude direction";case 4:return "Longitude degrees";case 5:return "Longitude minutes";case 6:return "Longitude seconds";case 7:return "Longitude direction";default:return `Coordinate segment ${e+1}`}case "mgrs":switch(e){case 0:return "MGRS zone";case 1:return "MGRS band";case 2:return "MGRS grid square";case 3:return "MGRS easting";case 4:return "MGRS northing";default:return `Coordinate segment ${e+1}`}case "utm":switch(e){case 0:return "UTM zone";case 1:return "UTM hemisphere";case 2:return "UTM easting";case 3:return "UTM northing";default:return `Coordinate segment ${e+1}`}default:return `Coordinate segment ${e+1}`}}export{m as EXPECTED_SEGMENT_COUNTS,a as ddSegmentConfigs,n as ddmSegmentConfigs,l as dmsSegmentConfigs,p as getEditableSegmentCount,c as getFormatDescription,s as getSegmentConfigs,g as getSegmentLabel,o as mgrsSegmentConfigs,d as utmSegmentConfigs};//# sourceMappingURL=segment-configs.js.map
+//# sourceMappingURL=segment-configs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/coordinate-field/segment-configs.ts"],"names":["ddSegmentConfigs","ddmSegmentConfigs","dmsSegmentConfigs","mgrsSegmentConfigs","utmSegmentConfigs","getSegmentConfigs","format","getFormatDescription","getEditableSegmentCount","config","EXPECTED_SEGMENT_COUNTS","getSegmentLabel","editableIndex"],"mappings":"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","file":"segment-configs.js","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/**\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: ', ',\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: ', ',\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: ', ',\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"]}

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

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CoordinateSegmentProps } from './types.js';
+import 'react';
+import 'react-aria-components';
+
+/**
+ * CoordinateSegment - A controlled input component for a single coordinate segment
+ *
+ * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).
+ * It handles character filtering, focus management, and keyboard navigation.
+ *
+ * Segment Types (determined by allowedChars):
+ * - Numeric: "[0-9\\-\\.]" - for DD degrees, DDM/DMS degrees/minutes/seconds
+ * - Directional: "[NSEW]" - for DDM/DMS direction indicators
+ * - Alphanumeric: "[0-9A-Z]" - for MGRS/UTM zone identifiers
+ *
+ * @example
+ * // Numeric segment (latitude degrees)
+ * <CoordinateSegment
+ *   value={latDegrees}
+ *   onChange={setLatDegrees}
+ *   allowedChars="[0-9\\-\\.]"
+ *   maxLength={10}
+ *   placeholder="00.00000"
+ * />
+ *
+ * @example
+ * // Directional segment (latitude direction)
+ * <CoordinateSegment
+ *   value={latDir}
+ *   onChange={setLatDir}
+ *   allowedChars="[NS]"
+ *   maxLength={1}
+ *   placeholder="N"
+ * />
+ */
+declare function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeholder, maxLength, className, isDisabled, allowedChars, segmentRef, segmentIndex, totalSegments: _totalSegments, onAutoAdvance, onAutoRetreat, pad, ariaLabel, }: CoordinateSegmentProps): react_jsx_runtime.JSX.Element;
+
+export { CoordinateSegment };

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

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {useMemo}from'react';import {useCoordinateFieldStateContext}from'./context.js';function N({value:r,onChange:l,onFocus:g,onBlur:m,onKeyDown:h,placeholder:y,maxLength:n,className:E,isDisabled:D,allowedChars:o,segmentRef:S,segmentIndex:u,totalSegments:$,onAutoAdvance:s,onAutoRetreat:c,pad:a,ariaLabel:b}){const d=useCoordinateFieldStateContext(),p=d.isDisabled??D,f=useMemo(()=>{if(n===void 0)return;const e=a??.5;return (r.length>0?r.length:n)+e},[n,a,r.length]);return jsx("input",{ref:S,type:"text",value:r,onChange:e=>{const t=e.target.value;if(!(o&&!new RegExp(`^${o}*$`).test(t))&&!(n&&t.length>n)&&(l(t),n&&t.length===n&&s)){const i=setTimeout(()=>{s();},0);d.registerTimeout(i);}},onPaste:e=>{const t=e.clipboardData.getData("text");if(o&&!new RegExp(`^${o}*$`).test(t)){e.preventDefault();return}if(n&&t.length>n){e.preventDefault(),l(t.slice(0,n));return}},onKeyDown:e=>{const t=e.currentTarget,i=t.selectionStart===0,T=t.selectionStart===r.length,v=r.length===0;if(e.key==="Backspace"&&v&&c){e.preventDefault(),c();return}if(e.key==="ArrowLeft"&&i&&c){e.preventDefault(),c();return}if(e.key==="ArrowRight"&&T&&s){e.preventDefault(),s();return}h?.(e);},onFocus:e=>{e.target.select(),g?.();},onBlur:()=>{m?.();},placeholder:y,maxLength:n,className:E,disabled:p,style:f?{width:`${f}ch`}:void 0,"aria-label":b||`Coordinate segment ${u!==void 0?u+1:""}`,"aria-disabled":p,autoComplete:"off",inputMode:o?.includes("0-9")?o.includes("\\-\\.")?"decimal":"numeric":"text"})}export{N as CoordinateSegment};//# sourceMappingURL=segment.js.map
+//# sourceMappingURL=segment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/coordinate-field/segment.tsx"],"names":["pad","effectiveIsDisabled","contextState","dynamicWidth","useMemo","C","maxLength","padding","value","M","segmentRef","allowedChars","newValue","onChange","onAutoAdvance","pastedText","input","isEmpty","onAutoRetreat","cursorAtStart","onFocus","onBlur"],"mappings":"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","file":"segment.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useMemo } from 'react';\nimport { useCoordinateFieldStateContext } from './context';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { CoordinateSegmentProps } from './types';\n\n/**\n * CoordinateSegment - A controlled input component for a single coordinate segment\n *\n * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).\n * It handles character filtering, focus management, and keyboard navigation.\n *\n * Segment Types (determined by allowedChars):\n * - Numeric: \"[0-9\\\\-\\\\.]\" - for DD degrees, DDM/DMS degrees/minutes/seconds\n * - Directional: \"[NSEW]\" - for DDM/DMS direction indicators\n * - Alphanumeric: \"[0-9A-Z]\" - for MGRS/UTM zone identifiers\n *\n * @example\n * // Numeric segment (latitude degrees)\n * <CoordinateSegment\n *   value={latDegrees}\n *   onChange={setLatDegrees}\n *   allowedChars=\"[0-9\\\\-\\\\.]\"\n *   maxLength={10}\n *   placeholder=\"00.00000\"\n * />\n *\n * @example\n * // Directional segment (latitude direction)\n * <CoordinateSegment\n *   value={latDir}\n *   onChange={setLatDir}\n *   allowedChars=\"[NS]\"\n *   maxLength={1}\n *   placeholder=\"N\"\n * />\n */\nexport function CoordinateSegment({\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  placeholder,\n  maxLength,\n  className,\n  isDisabled,\n  allowedChars,\n  segmentRef,\n  segmentIndex,\n  totalSegments: _totalSegments,\n  onAutoAdvance,\n  onAutoRetreat,\n  pad,\n  ariaLabel,\n}: CoordinateSegmentProps) {\n  const contextState = useCoordinateFieldStateContext();\n\n  const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;\n\n  // Calculate dynamic width based on focus state\n  const dynamicWidth = useMemo(() => {\n    if (maxLength === undefined) {\n      return undefined;\n    }\n\n    // Default padding to 0.5 if not specified\n    const padding = pad ?? 0.5;\n\n    // When blurred, use value length (or maxLength if empty) + padding\n    const contentLength = value.length > 0 ? value.length : maxLength;\n    return contentLength + padding;\n  }, [maxLength, pad, value.length]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n\n    if (allowedChars) {\n      const regex = new RegExp(`^${allowedChars}*$`);\n      if (!regex.test(newValue)) {\n        return;\n      }\n    }\n\n    if (maxLength && newValue.length > maxLength) {\n      return;\n    }\n\n    onChange(newValue);\n\n    if (maxLength && newValue.length === maxLength && onAutoAdvance) {\n      const timeoutId = setTimeout(() => {\n        onAutoAdvance();\n      }, 0);\n      contextState.registerTimeout(timeoutId);\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedText = e.clipboardData.getData('text');\n\n    if (allowedChars) {\n      const regex = new RegExp(`^${allowedChars}*$`);\n      if (!regex.test(pastedText)) {\n        e.preventDefault();\n        return;\n      }\n    }\n\n    if (maxLength && pastedText.length > maxLength) {\n      e.preventDefault();\n      onChange(pastedText.slice(0, maxLength));\n      return;\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const cursorAtStart = input.selectionStart === 0;\n    const cursorAtEnd = input.selectionStart === value.length;\n    const isEmpty = value.length === 0;\n\n    if (e.key === 'Backspace' && isEmpty && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowLeft' && cursorAtStart && onAutoRetreat) {\n      e.preventDefault();\n      onAutoRetreat();\n      return;\n    }\n\n    if (e.key === 'ArrowRight' && cursorAtEnd && onAutoAdvance) {\n      e.preventDefault();\n      onAutoAdvance();\n      return;\n    }\n\n    onKeyDown?.(e);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    onFocus?.();\n  };\n\n  const handleBlur = () => {\n    onBlur?.();\n  };\n\n  return (\n    <input\n      ref={segmentRef}\n      type='text'\n      value={value}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      placeholder={placeholder}\n      maxLength={maxLength}\n      className={className}\n      disabled={effectiveIsDisabled}\n      style={dynamicWidth ? { width: `${dynamicWidth}ch` } : undefined}\n      aria-label={\n        ariaLabel ||\n        `Coordinate segment ${segmentIndex !== undefined ? segmentIndex + 1 : ''}`\n      }\n      aria-disabled={effectiveIsDisabled}\n      autoComplete='off'\n      inputMode={\n        allowedChars?.includes('0-9')\n          ? allowedChars.includes('\\\\-\\\\.')\n            ? 'decimal'\n            : 'numeric'\n          : 'text'\n      }\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,129 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .field {
+    @apply gap-xs flex flex-col;
+  }
+
+  .control {
+    @apply fg-primary-bold gap-m rounded-medium px-s py-xs font-display outline-interactive flex w-fit items-center outline;
+
+    @variant group-size-medium/coordinate-field {
+      @apply text-body-m;
+    }
+
+    @variant group-size-small/coordinate-field {
+      @apply text-body-s;
+    }
+
+    @variant group-disabled/coordinate-field {
+      @apply fg-disabled outline-interactive-disabled;
+    }
+
+    @variant group-invalid/coordinate-field {
+      @apply outline-serious-bold;
+    }
+
+    @variant hover {
+      @apply outline-interactive-hover;
+    }
+  }
+
+  .input {
+    @apply gap-xs flex flex-1 items-center;
+  }
+
+  .segment {
+    @apply shrink-0 text-right transition-[width] duration-150 ease-in-out outline-none;
+
+    @variant placeholder-shown {
+      @apply fg-primary-muted;
+    }
+
+    @variant focus-visible {
+      @apply fg-a11y-on-accent bg-accent-primary-bold;
+    }
+
+    @variant selection {
+      @apply fg-a11y-on-accent bg-accent-primary-bold;
+    }
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs;
+
+    @variant group-disabled/coordinate-field {
+      @apply fg-disabled;
+    }
+  }
+
+  .error {
+    @apply fg-serious-bold text-body-xs;
+  }
+
+  .formatRow {
+    @apply gap-s px-xs py-s flex items-start justify-between;
+  }
+
+  .formatLabels {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .formatLabel {
+    @apply fg-primary-bold text-body-s;
+  }
+
+  .formatValue {
+    @apply fg-primary-muted font-display text-body-s truncate;
+  }
+
+  .formatOptionContent {
+    @apply gap-xs flex flex-1 flex-col;
+  }
+
+  .formatOptionLabel {
+    @apply fg-primary-bold text-body-s font-bold;
+  }
+
+  .formatOptionValue {
+    @apply fg-primary-muted font-display text-body-xs break-all;
+  }
+
+  .modalDescription {
+    @apply fg-primary-muted mb-m text-body-s;
+  }
+}
+
+@layer components.l2 {
+  .formatOptions {
+    @apply mb-m gap-xs flex flex-col;
+  }
+
+  .modalTitle {
+    @apply fg-primary-bold mb-s text-header-s font-bold;
+  }
+
+  .modalActions {
+    @apply gap-s flex justify-end;
+  }
+
+  .popover {
+    min-height: 280px;
+  }
+
+  .popoverTitle {
+    @apply fg-primary-muted text-header-s;
+  }
+}