@accelint/design-toolkit 9.3.0 → 9.4.0

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

@@ -12,7 +12,7 @@
 
 import { CoordinateFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime82 from "react/jsx-runtime";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 
 //#region src/components/coordinate-field/index.d.ts
 
@@ -23,11 +23,29 @@ import * as react_jsx_runtime82 from "react/jsx-runtime";
  * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally
  * for consistency.
  *
+ * @param props - The coordinate field props.
+ * @param props.ref - Reference to the coordinate field element.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.description - Description text displayed below the field.
+ * @param props.label - Label text for the coordinate field.
+ * @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).
+ * @param props.size - Size variant of the field.
+ * @param props.variant - Layout variant (inline or stacked).
+ * @param props.showFormatButton - Whether to show the format conversion button.
+ * @param props.isDisabled - Whether the field is disabled.
+ * @param props.isInvalid - Whether the field is in an invalid state.
+ * @param props.isRequired - Whether the field is required.
+ * @param props.isReadOnly - Whether the field is read-only.
+ * @returns The coordinate field component.
+ *
  * @example
+ * ```tsx
  * // Basic coordinate field
  * <CoordinateField label="Location" />
+ * ```
  *
  * @example
+ * ```tsx
  * // Coordinate field with validation
  * <CoordinateField
  *   label="Target Coordinates"
@@ -35,32 +53,40 @@ import * as react_jsx_runtime82 from "react/jsx-runtime";
  *   isInvalid={hasError}
  *   errorMessage="Please enter a valid coordinate"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Coordinate field with specific format
  * <CoordinateField
  *   label="Position"
  *   format="dms"
  *   description="Enter coordinates in Degrees Minutes Seconds format"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Compact coordinate field
  * <CoordinateField
  *   label="Coordinates"
  *   size="small"
  *   format="dd"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Controlled coordinate field
  * <CoordinateField
  *   label="Selected Location"
  *   value={coordinates}
  *   onChange={setCoordinates}
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Coordinate field with error handling
  * <CoordinateField
  *   label="Target Coordinates"
@@ -73,11 +99,12 @@ import * as react_jsx_runtime82 from "react/jsx-runtime";
  *   isInvalid={!!errorMessage}
  *   errorMessage={errorMessage}
  * />
+ * ```
  */
 declare function CoordinateField({
   ref,
   ...props
-}: CoordinateFieldProps): react_jsx_runtime82.JSX.Element;
+}: CoordinateFieldProps): react_jsx_runtime37.JSX.Element;
 //#endregion
 export { CoordinateField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -30,7 +30,6 @@ import { DialogTrigger as DialogTrigger$1 } from "../dialog/trigger.js";
 import { Popover as Popover$1 } from "../popover/index.js";
 import { PopoverContent } from "../popover/content.js";
 import { PopoverTitle } from "../popover/title.js";
-import { PopoverTrigger } from "../popover/trigger.js";
 import { Radio as Radio$1 } from "../radio/index.js";
 import { RadioGroup as RadioGroup$1 } from "../radio/group.js";
 import { CoordinateSegment } from "./segment.js";
@@ -54,11 +53,29 @@ import styles from "./styles.module.css";
 * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally
 * for consistency.
 *
+* @param props - The coordinate field props.
+* @param props.ref - Reference to the coordinate field element.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.description - Description text displayed below the field.
+* @param props.label - Label text for the coordinate field.
+* @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).
+* @param props.size - Size variant of the field.
+* @param props.variant - Layout variant (inline or stacked).
+* @param props.showFormatButton - Whether to show the format conversion button.
+* @param props.isDisabled - Whether the field is disabled.
+* @param props.isInvalid - Whether the field is in an invalid state.
+* @param props.isRequired - Whether the field is required.
+* @param props.isReadOnly - Whether the field is read-only.
+* @returns The coordinate field component.
+*
 * @example
+* ```tsx
 * // Basic coordinate field
 * <CoordinateField label="Location" />
+* ```
 *
 * @example
+* ```tsx
 * // Coordinate field with validation
 * <CoordinateField
 *   label="Target Coordinates"
@@ -66,32 +83,40 @@ import styles from "./styles.module.css";
 *   isInvalid={hasError}
 *   errorMessage="Please enter a valid coordinate"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Coordinate field with specific format
 * <CoordinateField
 *   label="Position"
 *   format="dms"
 *   description="Enter coordinates in Degrees Minutes Seconds format"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Compact coordinate field
 * <CoordinateField
 *   label="Coordinates"
 *   size="small"
 *   format="dd"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Controlled coordinate field
 * <CoordinateField
 *   label="Selected Location"
 *   value={coordinates}
 *   onChange={setCoordinates}
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Coordinate field with error handling
 * <CoordinateField
 *   label="Target Coordinates"
@@ -104,6 +129,7 @@ import styles from "./styles.module.css";
 *   isInvalid={!!errorMessage}
 *   errorMessage={errorMessage}
 * />
+* ```
 */
 function CoordinateField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref, CoordinateFieldContext);
@@ -210,7 +236,7 @@ function CoordinateField({ ref, ...props }) {
 							className: clsx(styles.segmentGroup, styles[variant]),
 							children: group
 						}, `${format}-group-${groupIndex}`))
-					}), showFormatButton && /* @__PURE__ */ jsxs(PopoverTrigger, {
+					}), showFormatButton && /* @__PURE__ */ jsxs(DialogTrigger$1, {
 						onOpenChange: handlePopoverOpenChange,
 						children: [/* @__PURE__ */ jsx(Button$1, {
 							variant: "icon",
@@ -266,7 +292,7 @@ function CoordinateField({ ref, ...props }) {
 					isOpen: paste.showDisambiguationModal,
 					onOpenChange: paste.setShowDisambiguationModal,
 					children: [/* @__PURE__ */ jsx(Button$1, {
-						className: "hidden",
+						className: styles.hiddenTrigger,
 						children: "Hidden Trigger"
 					}), /* @__PURE__ */ jsxs(Dialog$1, {
 						size: "small",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label","Button","Popover","AriaText","DialogTrigger","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 { 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 { 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 * @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    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            <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"],"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={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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"}

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

@@ -12,7 +12,7 @@
 
 import { CoordinateSegmentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime69 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/coordinate-field/segment.d.ts
 
@@ -27,7 +27,29 @@ import * as react_jsx_runtime69 from "react/jsx-runtime";
  * - Directional: "[NSEW]" - for DDM/DMS direction indicators
  * - Alphanumeric: "[0-9A-Z]" - for MGRS/UTM zone identifiers
  *
+ * @param props - The coordinate segment props.
+ * @param props.value - Current value of the segment.
+ * @param props.onChange - Callback when the segment value changes.
+ * @param props.onFocus - Callback when the segment gains focus.
+ * @param props.onBlur - Callback when the segment loses focus.
+ * @param props.onKeyDown - Callback for key down events.
+ * @param props.placeholder - Placeholder text for the segment.
+ * @param props.maxLength - Maximum character length for the segment.
+ * @param props.className - Additional CSS class name.
+ * @param props.isDisabled - Whether the segment is disabled.
+ * @param props.isReadOnly - Whether the segment is read-only.
+ * @param props.allowedChars - Regex pattern for allowed characters.
+ * @param props.segmentRef - Ref for the segment input element.
+ * @param props.segmentIndex - Index of this segment within the coordinate field.
+ * @param props.totalSegments - Total number of segments in the coordinate field.
+ * @param props.onAutoAdvance - Callback to advance focus to the next segment.
+ * @param props.onAutoRetreat - Callback to retreat focus to the previous segment.
+ * @param props.pad - Padding value for width calculation.
+ * @param props.ariaLabel - Accessible label for the segment.
+ * @returns The coordinate segment input component.
+ *
  * @example
+ * ```tsx
  * // Numeric segment (latitude degrees)
  * <CoordinateSegment
  *   value={latDegrees}
@@ -36,8 +58,10 @@ import * as react_jsx_runtime69 from "react/jsx-runtime";
  *   maxLength={10}
  *   placeholder="00.00000"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Directional segment (latitude direction)
  * <CoordinateSegment
  *   value={latDir}
@@ -46,6 +70,7 @@ import * as react_jsx_runtime69 from "react/jsx-runtime";
  *   maxLength={1}
  *   placeholder="N"
  * />
+ * ```
  */
 declare function CoordinateSegment({
   value,
@@ -66,7 +91,7 @@ declare function CoordinateSegment({
   onAutoRetreat,
   pad,
   ariaLabel
-}: CoordinateSegmentProps): react_jsx_runtime69.JSX.Element;
+}: CoordinateSegmentProps): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { CoordinateSegment };
 //# sourceMappingURL=segment.d.ts.map

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

@@ -30,7 +30,29 @@ import { jsx } from "react/jsx-runtime";
 * - Directional: "[NSEW]" - for DDM/DMS direction indicators
 * - Alphanumeric: "[0-9A-Z]" - for MGRS/UTM zone identifiers
 *
+* @param props - The coordinate segment props.
+* @param props.value - Current value of the segment.
+* @param props.onChange - Callback when the segment value changes.
+* @param props.onFocus - Callback when the segment gains focus.
+* @param props.onBlur - Callback when the segment loses focus.
+* @param props.onKeyDown - Callback for key down events.
+* @param props.placeholder - Placeholder text for the segment.
+* @param props.maxLength - Maximum character length for the segment.
+* @param props.className - Additional CSS class name.
+* @param props.isDisabled - Whether the segment is disabled.
+* @param props.isReadOnly - Whether the segment is read-only.
+* @param props.allowedChars - Regex pattern for allowed characters.
+* @param props.segmentRef - Ref for the segment input element.
+* @param props.segmentIndex - Index of this segment within the coordinate field.
+* @param props.totalSegments - Total number of segments in the coordinate field.
+* @param props.onAutoAdvance - Callback to advance focus to the next segment.
+* @param props.onAutoRetreat - Callback to retreat focus to the previous segment.
+* @param props.pad - Padding value for width calculation.
+* @param props.ariaLabel - Accessible label for the segment.
+* @returns The coordinate segment input component.
+*
 * @example
+* ```tsx
 * // Numeric segment (latitude degrees)
 * <CoordinateSegment
 *   value={latDegrees}
@@ -39,8 +61,10 @@ import { jsx } from "react/jsx-runtime";
 *   maxLength={10}
 *   placeholder="00.00000"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Directional segment (latitude direction)
 * <CoordinateSegment
 *   value={latDir}
@@ -49,6 +73,7 @@ import { jsx } from "react/jsx-runtime";
 *   maxLength={1}
 *   placeholder="N"
 * />
+* ```
 */
 function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeholder, maxLength, className, isDisabled, isReadOnly, allowedChars, segmentRef, segmentIndex, totalSegments: _totalSegments, onAutoAdvance, onAutoRetreat, pad, ariaLabel }) {
 	const contextState = useCoordinateFieldStateContext();

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

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

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

@@ -18,7 +18,7 @@
   }
 
   .control {
-    @apply fg-primary-bold gap-m rounded-medium px-s py-xs font-display outline-interactive flex w-full items-center outline;
+    @apply fg-primary-bold gap-m rounded-medium pl-s pr-xs py-xs font-display outline-interactive flex w-full items-center outline;
 
     min-width: var(--min-width, unset);
 
@@ -162,4 +162,8 @@
   .popoverTitle {
     @apply fg-primary-muted text-header-s;
   }
+
+  .hiddenTrigger {
+    @apply hidden;
+  }
 }

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

@@ -12,7 +12,7 @@
 
 import { DateFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime71 from "react/jsx-runtime";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
 
 //#region src/components/date-field/index.d.ts
@@ -24,11 +24,29 @@ import { DateValue } from "@internationalized/date";
  * month, and year. Includes calendar icon, validation states, and international
  * date format support with keyboard navigation between segments.
  *
+ * @param props - The date field props.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.description - Helper text displayed below the field.
+ * @param props.errorMessage - Error message displayed when invalid.
+ * @param props.inputProps - Additional props for the date input element.
+ * @param props.label - Label text displayed above the field.
+ * @param props.size - Size variant of the field.
+ * @param props.shortMonth - When true, displays 3-letter month abbreviation when not editing.
+ * @param props.shouldForceLeadingZeros - Whether to force leading zeros in segments.
+ * @param props.isDisabled - Whether the field is disabled.
+ * @param props.isInvalid - Whether the field is in an invalid state.
+ * @param props.isRequired - Whether the field is required.
+ * @param props.isReadOnly - Whether the field is read-only.
+ * @returns The date field component.
+ *
  * @example
+ * ```tsx
  * // Basic date field
  * <DateField label="Birth Date" />
+ * ```
  *
  * @example
+ * ```tsx
  * // Date field with validation
  * <DateField
  *   label="Event Date"
@@ -36,30 +54,37 @@ import { DateValue } from "@internationalized/date";
  *   isInvalid={hasError}
  *   errorMessage="Please select a valid date"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Date field with custom formatting
  * <DateField
  *   label="Meeting Date"
  *   shortMonth={false}
  *   placeholder="Select meeting date"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Compact date field
  * <DateField
  *   label="Due Date"
  *   size="small"
  *   description="When is this task due?"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Controlled date field
  * <DateField
  *   label="Selected Date"
  *   value={selectedDate}
  *   onChange={setSelectedDate}
  * />
+ * ```
  */
 declare function DateField<T extends DateValue>({
   classNames,
@@ -75,7 +100,7 @@ declare function DateField<T extends DateValue>({
   isRequired,
   isReadOnly,
   ...rest
-}: DateFieldProps<T>): react_jsx_runtime71.JSX.Element;
+}: DateFieldProps<T>): react_jsx_runtime40.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -44,11 +44,29 @@ const months = [
 * month, and year. Includes calendar icon, validation states, and international
 * date format support with keyboard navigation between segments.
 *
+* @param props - The date field props.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.description - Helper text displayed below the field.
+* @param props.errorMessage - Error message displayed when invalid.
+* @param props.inputProps - Additional props for the date input element.
+* @param props.label - Label text displayed above the field.
+* @param props.size - Size variant of the field.
+* @param props.shortMonth - When true, displays 3-letter month abbreviation when not editing.
+* @param props.shouldForceLeadingZeros - Whether to force leading zeros in segments.
+* @param props.isDisabled - Whether the field is disabled.
+* @param props.isInvalid - Whether the field is in an invalid state.
+* @param props.isRequired - Whether the field is required.
+* @param props.isReadOnly - Whether the field is read-only.
+* @returns The date field component.
+*
 * @example
+* ```tsx
 * // Basic date field
 * <DateField label="Birth Date" />
+* ```
 *
 * @example
+* ```tsx
 * // Date field with validation
 * <DateField
 *   label="Event Date"
@@ -56,30 +74,37 @@ const months = [
 *   isInvalid={hasError}
 *   errorMessage="Please select a valid date"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Date field with custom formatting
 * <DateField
 *   label="Meeting Date"
 *   shortMonth={false}
 *   placeholder="Select meeting date"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Compact date field
 * <DateField
 *   label="Due Date"
 *   size="small"
 *   description="When is this task due?"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Controlled date field
 * <DateField
 *   label="Selected Date"
 *   value={selectedDate}
 *   onChange={setSelectedDate}
 * />
+* ```
 */
 function DateField({ classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, label: labelProp, size = "medium", shortMonth = true, shouldForceLeadingZeros = true, isDisabled, isInvalid: isInvalidProp, isRequired, isReadOnly = false, ...rest }) {
 	const errorMessage = errorMessageProp || null;