@accelint/design-toolkit 7.0.1 → 8.0.0

package/dist/hooks/coordinate-field/use-coordinate-field.d.ts

@@ -0,0 +1,49 @@
+import { useCoordinateCopy } from './use-coordinate-copy.js';
+import { useCoordinateFieldState } from './use-coordinate-field-state.js';
+import { useCoordinateFocus } from './use-coordinate-focus.js';
+import { useCoordinatePaste } from './use-coordinate-paste.js';
+import { ValidationResult } from 'react-aria-components';
+import { CoordinateFieldProps } from '../../components/coordinate-field/types.js';
+import './use-timeout-cleanup.js';
+import 'react';
+
+interface UseCoordinateFieldResult {
+    state: ReturnType<typeof useCoordinateFieldState>;
+    focus: ReturnType<typeof useCoordinateFocus>;
+    paste: ReturnType<typeof useCoordinatePaste>;
+    copy: ReturnType<typeof useCoordinateCopy>;
+    registerTimeout: (timeoutId: NodeJS.Timeout) => void;
+    fieldProps: {
+        id: string;
+        role: 'group';
+        'aria-labelledby': string | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        'aria-details': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-disabled': boolean | undefined;
+    };
+    labelProps: {
+        id: string;
+        htmlFor: string;
+    };
+    descriptionProps: {
+        id: string;
+    };
+    errorProps: {
+        id: string;
+    };
+    validation: ValidationResult;
+    ids: {
+        fieldId: string;
+        labelId: string;
+        descriptionId: string;
+        errorId: string;
+    };
+    effectiveErrorMessage: string | null;
+    isInvalid: boolean;
+}
+declare function useCoordinateField(props: CoordinateFieldProps, customAriaLabel?: string, customAriaDescribedby?: string, customAriaDetails?: string): UseCoordinateFieldResult;
+
+export { type UseCoordinateFieldResult, useCoordinateField };

package/dist/hooks/coordinate-field/use-coordinate-field.js

@@ -0,0 +1,2 @@
+import {useId}from'@react-aria/utils';import {useMemo}from'react';import {useCoordinateCopy}from'./use-coordinate-copy.js';import {useCoordinateFieldState}from'./use-coordinate-field-state.js';import {useCoordinateFocus}from'./use-coordinate-focus.js';import {useCoordinatePaste}from'./use-coordinate-paste.js';import {useTimeoutCleanup}from'./use-timeout-cleanup.js';const O=0;function X(y,l,b,C){const{description:v,errorMessage:u,format:P="dd",value:I,defaultValue:F,onChange:V,onError:p,isDisabled:f=false,isInvalid:S=false,isRequired:R=false,id:E}=y,n=useId(E),a=useId(),d=useId(),s=useId(),{registerTimeout:o}=useTimeoutCleanup(),e=useCoordinateFieldState({value:I,defaultValue:F,format:P,onChange:V,onError:p,registerTimeout:o}),c=useCoordinateFocus({editableSegmentConfigs:e.editableSegmentConfigs}),T=useCoordinatePaste({onValueApplied:x=>{e.applyPastedCoordinate(x),o(setTimeout(()=>{c.focusFirstSegment();},O));},onError:p}),M=useCoordinateCopy({currentValue:e.currentValue,validationErrors:e.validationErrors,isDisabled:f,registerTimeout:o}),i=useMemo(()=>u||e.effectiveErrorMessage,[u,e.effectiveErrorMessage]),r=S||i!==null,g=[v&&d,i&&s,b].filter(Boolean),h=g.length>0?g.join(" "):void 0,B={id:a,htmlFor:n},q={id:n,role:"group","aria-labelledby":l?void 0:a,"aria-describedby":h,"aria-label":l||void 0,"aria-details":C||void 0,"aria-invalid":r||void 0,"aria-required":R||void 0,"aria-disabled":f||void 0},A={id:d},D={id:s},U=useMemo(()=>({isInvalid:r,validationErrors:i?[i]:[],validationDetails:{}}),[r,i]);return {state:e,focus:c,paste:T,copy:M,registerTimeout:o,fieldProps:q,labelProps:B,descriptionProps:A,errorProps:D,validation:U,ids:{fieldId:n,labelId:a,descriptionId:d,errorId:s},effectiveErrorMessage:i,isInvalid:r}}export{X as useCoordinateField};//# sourceMappingURL=use-coordinate-field.js.map
+//# sourceMappingURL=use-coordinate-field.js.map

package/dist/hooks/coordinate-field/use-coordinate-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/coordinate-field/use-coordinate-field.ts"],"names":["useCoordinateField","customAriaDescribedby","customAriaDetails","description","value","onError","idProp","labelId","useId","descriptionId","errorId","t","registerTimeout","useTimeoutCleanup","N","_","onChange","focus","pastedValue","state","copy","useCoordinateCopy","L","effectiveErrorMessage","m","describedBy","describedByIds","labelProps","fieldProps","fieldId","customAriaLabel","errorProps","validation","useMemo","isInvalid","descriptionProps"],"mappings":"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","file":"use-coordinate-field.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\nimport { useId } from '@react-aria/utils';\nimport { useMemo } from 'react';\nimport { useCoordinateCopy } from './use-coordinate-copy';\nimport { useCoordinateFieldState } from './use-coordinate-field-state';\nimport { useCoordinateFocus } from './use-coordinate-focus';\nimport { useCoordinatePaste } from './use-coordinate-paste';\nimport { useTimeoutCleanup } from './use-timeout-cleanup';\nimport type { ValidationResult } from 'react-aria-components';\nimport type {\n  CoordinateFieldProps,\n  CoordinateSystem,\n  CoordinateValue,\n} from '../../components/coordinate-field/types';\n\nconst FOCUS_DELAY_MS = 0;\n\nexport interface UseCoordinateFieldResult {\n  state: ReturnType<typeof useCoordinateFieldState>;\n  focus: ReturnType<typeof useCoordinateFocus>;\n  paste: ReturnType<typeof useCoordinatePaste>;\n  copy: ReturnType<typeof useCoordinateCopy>;\n  registerTimeout: (timeoutId: NodeJS.Timeout) => void;\n  fieldProps: {\n    id: string;\n    role: 'group';\n    'aria-labelledby': string | undefined;\n    'aria-describedby': string | undefined;\n    'aria-label': string | undefined;\n    'aria-details': string | undefined;\n    'aria-invalid': boolean | undefined;\n    'aria-required': boolean | undefined;\n    'aria-disabled': boolean | undefined;\n  };\n  labelProps: {\n    id: string;\n    htmlFor: string;\n  };\n  descriptionProps: {\n    id: string;\n  };\n  errorProps: {\n    id: string;\n  };\n  validation: ValidationResult;\n  ids: {\n    fieldId: string;\n    labelId: string;\n    descriptionId: string;\n    errorId: string;\n  };\n  effectiveErrorMessage: string | null;\n  isInvalid: boolean;\n}\n\nexport function useCoordinateField(\n  props: CoordinateFieldProps,\n  customAriaLabel?: string,\n  customAriaDescribedby?: string,\n  customAriaDetails?: string,\n): UseCoordinateFieldResult {\n  const {\n    description,\n    errorMessage: errorMessageProp,\n    format = 'dd' as CoordinateSystem,\n    value,\n    defaultValue,\n    onChange,\n    onError,\n    isDisabled = false,\n    isInvalid: isInvalidProp = false,\n    isRequired = false,\n    id: idProp,\n  } = props;\n\n  const fieldId = useId(idProp);\n  const labelId = useId();\n  const descriptionId = useId();\n  const errorId = useId();\n\n  const { registerTimeout } = useTimeoutCleanup();\n\n  const state = useCoordinateFieldState({\n    value,\n    defaultValue,\n    format,\n    onChange,\n    onError,\n    registerTimeout,\n  });\n\n  const focus = useCoordinateFocus({\n    editableSegmentConfigs: state.editableSegmentConfigs,\n  });\n\n  const handlePasteValueApplied = (pastedValue: CoordinateValue) => {\n    state.applyPastedCoordinate(pastedValue);\n\n    // Defer focus until after React commits state updates to the DOM.\n    // applyPastedCoordinate triggers setSegmentValues which updates the input\n    // elements, and we need those updates to complete before focusing.\n    registerTimeout(\n      setTimeout(() => {\n        focus.focusFirstSegment();\n      }, FOCUS_DELAY_MS),\n    );\n  };\n\n  const paste = useCoordinatePaste({\n    onValueApplied: handlePasteValueApplied,\n    onError,\n  });\n\n  const copy = useCoordinateCopy({\n    currentValue: state.currentValue,\n    validationErrors: state.validationErrors,\n    isDisabled,\n    registerTimeout,\n  });\n\n  const effectiveErrorMessage = useMemo(\n    () => errorMessageProp || state.effectiveErrorMessage,\n    [errorMessageProp, state.effectiveErrorMessage],\n  );\n\n  const isInvalid = isInvalidProp || effectiveErrorMessage !== null;\n\n  const describedByIds = [\n    description && descriptionId,\n    effectiveErrorMessage && errorId,\n    customAriaDescribedby,\n  ].filter(Boolean);\n  const describedBy =\n    describedByIds.length > 0 ? describedByIds.join(' ') : undefined;\n\n  const labelProps = {\n    id: labelId,\n    htmlFor: fieldId,\n  };\n\n  // Only use aria-labelledby when we have a visible label (not using aria-label)\n  // When aria-label is provided (e.g., in small size), it takes precedence\n  const ariaLabelledBy = customAriaLabel ? undefined : labelId;\n\n  const fieldProps = {\n    id: fieldId,\n    role: 'group' as const,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': describedBy,\n    'aria-label': customAriaLabel || undefined,\n    'aria-details': customAriaDetails || undefined,\n    'aria-invalid': isInvalid || undefined,\n    'aria-required': isRequired || undefined,\n    'aria-disabled': isDisabled || undefined,\n  };\n\n  const descriptionProps = {\n    id: descriptionId,\n  };\n\n  const errorProps = {\n    id: errorId,\n  };\n\n  const validation: ValidationResult = useMemo(\n    () => ({\n      isInvalid,\n      validationErrors: effectiveErrorMessage ? [effectiveErrorMessage] : [],\n      validationDetails: {} as ValidityState,\n    }),\n    [isInvalid, effectiveErrorMessage],\n  );\n\n  return {\n    state,\n    focus,\n    paste,\n    copy,\n    registerTimeout,\n    fieldProps,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    validation,\n    ids: {\n      fieldId,\n      labelId,\n      descriptionId,\n      errorId,\n    },\n    effectiveErrorMessage,\n    isInvalid,\n  };\n}\n"]}

package/dist/hooks/coordinate-field/use-coordinate-focus.d.ts

@@ -0,0 +1,21 @@
+import { KeyboardEvent } from 'react';
+import { SegmentConfig } from '../../components/coordinate-field/types.js';
+import 'react-aria-components';
+
+interface UseCoordinateFocusOptions {
+    editableSegmentConfigs: SegmentConfig[];
+}
+interface UseCoordinateFocusResult {
+    segmentRefs: React.RefObject<HTMLInputElement>[];
+    focusedSegmentIndex: number;
+    focusSegment: (index: number) => void;
+    focusNextSegment: (currentIndex: number) => void;
+    focusPreviousSegment: (currentIndex: number) => void;
+    focusFirstSegment: () => void;
+    focusLastSegment: () => void;
+    handleSegmentKeyDown: (index: number, e: KeyboardEvent<HTMLInputElement>) => void;
+    setFocusedSegmentIndex: (index: number) => void;
+}
+declare function useCoordinateFocus({ editableSegmentConfigs, }: UseCoordinateFocusOptions): UseCoordinateFocusResult;
+
+export { type UseCoordinateFocusOptions, type UseCoordinateFocusResult, useCoordinateFocus };

package/dist/hooks/coordinate-field/use-coordinate-focus.js

@@ -0,0 +1,2 @@
+import {useRef,useState,useEffect,createRef}from'react';function v({editableSegmentConfigs:r}){const t=useRef([]),[m,f]=useState(-1);useEffect(()=>{t.current=r.map((e,n)=>{const c=t.current[n];return c||createRef()});},[r]);const o=e=>{e>=0&&e<t.current.length&&t.current[e]?.current?.focus();},i=e=>{o(e+1);},d=e=>{o(e-1);},s=()=>{o(0);},u=()=>{o(t.current.length-1);},g=(e,n)=>{n.key==="Home"?(n.preventDefault(),s()):n.key==="End"&&(n.preventDefault(),u());};return {segmentRefs:t.current,focusedSegmentIndex:m,focusSegment:o,focusNextSegment:i,focusPreviousSegment:d,focusFirstSegment:s,focusLastSegment:u,handleSegmentKeyDown:g,setFocusedSegmentIndex:f}}export{v as useCoordinateFocus};//# sourceMappingURL=use-coordinate-focus.js.map
+//# sourceMappingURL=use-coordinate-focus.js.map

package/dist/hooks/coordinate-field/use-coordinate-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/coordinate-field/use-coordinate-focus.ts"],"names":["useCoordinateFocus","editableSegmentConfigs","segmentRefsInternal","useRef","focusedSegmentIndex","setFocusedSegmentIndex","useState","useEffect","_","i","existingRef","createRef","focusSegment","index","focusNextSegment","currentIndex","focusPreviousSegment","focusFirstSegment","focusLastSegment","handleSegmentKeyDown","_index","e"],"mappings":"wDAwCO,SAASA,CAAAA,CAAmB,CACjC,sBAAA,CAAAC,CACF,EAAwD,CACtD,MAAMC,CAAAA,CAAsBC,MAAAA,CAA4C,EAAE,CAAA,CACpE,CAACC,EAAqBC,CAAsB,CAAA,CAAIC,QAAAA,CAAiB,EAAE,EAEzEC,SAAAA,CAAU,IAAM,CACdL,CAAAA,CAAoB,QAAUD,CAAAA,CAAuB,GAAA,CAAI,CAACO,CAAAA,CAAGC,CAAAA,GAAM,CACjE,MAAMC,CAAAA,CAAcR,EAAoB,OAAA,CAAQO,CAAC,CAAA,CACjD,OAAIC,GAGGC,SAAAA,EACT,CAAC,EACH,EAAG,CAACV,CAAsB,CAAC,CAAA,CAE3B,MAAMW,CAAAA,CAAgBC,CAAAA,EAAkB,CAClCA,CAAAA,EAAS,GAAKA,CAAAA,CAAQX,CAAAA,CAAoB,OAAA,CAAQ,MAAA,EACpDA,EAAoB,OAAA,CAAQW,CAAK,CAAA,EAAG,OAAA,EAAS,QAEjD,CAAA,CAEMC,CAAAA,CAAoBC,CAAAA,EAAyB,CACjDH,CAAAA,CAAaG,CAAAA,CAAe,CAAC,EAC/B,CAAA,CAEMC,CAAAA,CAAwBD,CAAAA,EAAyB,CACrDH,EAAaG,CAAAA,CAAe,CAAC,EAC/B,CAAA,CAEME,EAAoB,IAAM,CAC9BL,CAAAA,CAAa,CAAC,EAChB,CAAA,CAEMM,CAAAA,CAAmB,IAAM,CAC7BN,EAAaV,CAAAA,CAAoB,OAAA,CAAQ,MAAA,CAAS,CAAC,EACrD,CAAA,CAEMiB,CAAAA,CAAuB,CAC3BC,CAAAA,CACAC,IACG,CACCA,CAAAA,CAAE,GAAA,GAAQ,MAAA,EACZA,CAAAA,CAAE,cAAA,EAAe,CACjBJ,CAAAA,IACSI,CAAAA,CAAE,GAAA,GAAQ,KAAA,GACnBA,CAAAA,CAAE,gBAAe,CACjBH,CAAAA,EAAiB,EAErB,CAAA,CAEA,OAAO,CACL,WAAA,CAAahB,CAAAA,CAAoB,OAAA,CACjC,oBAAAE,CAAAA,CACA,YAAA,CAAAQ,CAAAA,CACA,gBAAA,CAAAE,EACA,oBAAA,CAAAE,CAAAA,CACA,iBAAA,CAAAC,CAAAA,CACA,iBAAAC,CAAAA,CACA,oBAAA,CAAAC,CAAAA,CACA,sBAAA,CAAAd,CACF,CACF","file":"use-coordinate-focus.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\nimport {\n  createRef,\n  type KeyboardEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { SegmentConfig } from '../../components/coordinate-field/types';\n\nexport interface UseCoordinateFocusOptions {\n  editableSegmentConfigs: SegmentConfig[];\n}\n\nexport interface UseCoordinateFocusResult {\n  segmentRefs: React.RefObject<HTMLInputElement>[];\n  focusedSegmentIndex: number;\n  focusSegment: (index: number) => void;\n  focusNextSegment: (currentIndex: number) => void;\n  focusPreviousSegment: (currentIndex: number) => void;\n  focusFirstSegment: () => void;\n  focusLastSegment: () => void;\n  handleSegmentKeyDown: (\n    index: number,\n    e: KeyboardEvent<HTMLInputElement>,\n  ) => void;\n  setFocusedSegmentIndex: (index: number) => void;\n}\n\nexport function useCoordinateFocus({\n  editableSegmentConfigs,\n}: UseCoordinateFocusOptions): UseCoordinateFocusResult {\n  const segmentRefsInternal = useRef<React.RefObject<HTMLInputElement>[]>([]);\n  const [focusedSegmentIndex, setFocusedSegmentIndex] = useState<number>(-1);\n\n  useEffect(() => {\n    segmentRefsInternal.current = editableSegmentConfigs.map((_, i) => {\n      const existingRef = segmentRefsInternal.current[i];\n      if (existingRef) {\n        return existingRef;\n      }\n      return createRef<HTMLInputElement>() as React.RefObject<HTMLInputElement>;\n    });\n  }, [editableSegmentConfigs]);\n\n  const focusSegment = (index: number) => {\n    if (index >= 0 && index < segmentRefsInternal.current.length) {\n      segmentRefsInternal.current[index]?.current?.focus();\n    }\n  };\n\n  const focusNextSegment = (currentIndex: number) => {\n    focusSegment(currentIndex + 1);\n  };\n\n  const focusPreviousSegment = (currentIndex: number) => {\n    focusSegment(currentIndex - 1);\n  };\n\n  const focusFirstSegment = () => {\n    focusSegment(0);\n  };\n\n  const focusLastSegment = () => {\n    focusSegment(segmentRefsInternal.current.length - 1);\n  };\n\n  const handleSegmentKeyDown = (\n    _index: number,\n    e: KeyboardEvent<HTMLInputElement>,\n  ) => {\n    if (e.key === 'Home') {\n      e.preventDefault();\n      focusFirstSegment();\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      focusLastSegment();\n    }\n  };\n\n  return {\n    segmentRefs: segmentRefsInternal.current,\n    focusedSegmentIndex,\n    focusSegment,\n    focusNextSegment,\n    focusPreviousSegment,\n    focusFirstSegment,\n    focusLastSegment,\n    handleSegmentKeyDown,\n    setFocusedSegmentIndex,\n  };\n}\n"]}

package/dist/hooks/coordinate-field/use-coordinate-paste.d.ts

@@ -0,0 +1,21 @@
+import { CoordinateValue, ParsedCoordinateMatch, CoordinateSystem } from '../../components/coordinate-field/types.js';
+import 'react';
+import 'react-aria-components';
+
+interface UseCoordinatePasteOptions {
+    onValueApplied: (value: CoordinateValue) => void;
+    onError?: (message: string, context?: Record<string, unknown>) => void;
+}
+interface UseCoordinatePasteResult {
+    disambiguationMatches: ParsedCoordinateMatch[];
+    showDisambiguationModal: boolean;
+    selectedDisambiguationFormat: CoordinateSystem | null;
+    handleInputPaste: (e: React.ClipboardEvent<HTMLDivElement>) => void;
+    handleDisambiguationSelect: () => void;
+    setShowDisambiguationModal: (show: boolean) => void;
+    setSelectedDisambiguationFormat: (format: CoordinateSystem | null) => void;
+    cleanupDisambiguationModal: () => void;
+}
+declare function useCoordinatePaste({ onValueApplied, onError, }: UseCoordinatePasteOptions): UseCoordinatePasteResult;
+
+export { type UseCoordinatePasteOptions, type UseCoordinatePasteResult, useCoordinatePaste };

package/dist/hooks/coordinate-field/use-coordinate-paste.js

@@ -0,0 +1,2 @@
+import {useState}from'react';import {isCompleteCoordinate,parseCoordinatePaste,deduplicateMatchesByLocation}from'../../components/coordinate-field/coordinate-utils.js';function y({onValueApplied:r,onError:u}){const[d,l]=useState([]),[m,a]=useState(false),[o,i]=useState(null),h=t=>{u?.("Invalid coordinate format",{pastedText:t});},g=t=>{t&&r(t.value);},M=t=>{l(t);const e=t[0];e&&i(e.format),a(true);},f=t=>{const e=parseCoordinatePaste(t);if(e.length===0){h(t);return}const n=deduplicateMatchesByLocation(e);n.length===1?g(n[0]):M(n);},p=t=>{const e=t.clipboardData?.getData("text/plain");e&&isCompleteCoordinate(e)&&(t.preventDefault(),f(e));},c=()=>{a(false),l([]),i(null);};return {disambiguationMatches:d,showDisambiguationModal:m,selectedDisambiguationFormat:o,handleInputPaste:p,handleDisambiguationSelect:()=>{if(o){const t=d.find(e=>e.format===o);t&&r(t.value);}c();},setShowDisambiguationModal:a,setSelectedDisambiguationFormat:i,cleanupDisambiguationModal:c}}export{y as useCoordinatePaste};//# sourceMappingURL=use-coordinate-paste.js.map
+//# sourceMappingURL=use-coordinate-paste.js.map

package/dist/hooks/coordinate-field/use-coordinate-paste.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/coordinate-field/use-coordinate-paste.ts"],"names":["useState","s","showDisambiguationModal","setShowDisambiguationModal","setSelectedDisambiguationFormat","pastedText","onError","handlePasteSingleMatch","match","onValueApplied","handlePasteMultipleMatches","matches","setDisambiguationMatches","firstMatch","D","allMatches","handleInputPaste","e","isCompleteCoordinate","b","cleanupDisambiguationModal","selectedDisambiguationFormat","m"],"mappings":"wKAwCO,SACL,CAAA,CAAA,CAAA,wBAEsD,CACtD,CAAA,CAAA,CAAA,CAAA,KAAsD,CAAA,CAAIA,EAExD,CAAC,CAACC,SACE,EAACC,CAAyBC,CAA0B,CAAA,CAAIH,CAAAA,CAAS,EAAKC,QAAA,CACtE,MAA+BG,CAA+B,CAAA,CAClEJ,EAAkC,CAAA,CAAAC,QAAA,CAAI,IAMVI,CAAAA,CAAAA,CAAuB,CAEnDC,CAAAA,EAAAA,CADiB,+BACK,CAAA,CAAA,UACxB,EAEMC,CAAAA,EAA0BC,CAAAA,CAAAA,CAA6C,CACvEA,CAAAA,EACFC,CAAAA,CAAeD,EAAM,CAAA,CAAA,CAAA,CAAA,KAInBE,EAA8BC,CAAAA,CAAAA,CAAqC,CACvEC,CAAAA,EAAgC,EAChC,CAAA,CAAA,CAAA,CAAA,MAA2B,CAAC,CAAA,CACxBC,GACFT,CAAAA,CAAgCS,EAAW,UAElB,EAAI,CACjC,CAAA,MAE+BR,CAAAA,CAAAA,CAAuB,CACpD,UAAwCA,CAAU,CAAAS,oBAElD,CAAA,CAAA,CAAIC,CAAAA,GAAW,CAAA,CAAA,MAAW,IACHV,CAAU,CAAA,CAC/B,UAIF,CAAA,MAA6CU,CAAU,6BAEnDJ,CAAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,SACaA,CAAAA,CAAQ,CAAC,CAAC,CAAA,CAEjCD,EAA2BC,CAAO,CAEtC,EAEMK,CAAAA,EAAoBC,CAAAA,CAAAA,CAA4C,CACpE,CAAA,EAAA,CAAA,MAAqB,CAAA,CAAA,CAAA,CAAA,aAAe,EAAA,oBAChCZ,CAAca,EAAqBb,EAAUc,oBAAA,CAAA,CAC/CF,IAAE,CAAA,CAAA,gBAC8B,CAAA,CAEpC,EAEMG,CAAAA,EAA6B,CAAA,CAAA,CAAA,CAAM,IACZ,CAAK,CAAA,CAChCR,KAAyB,CAAC,CAAC,EAC3BR,EAAgC,CAAA,CAAA,CAAA,CAAI,IAetC,EAAA,CAAA,CAAA,OACE,CAAA,+CAEA,CAAA,CAAA,CAAA,4BACA,CAAA,CAAA,CAAA,6CAhBiC,CAAM,IACnCiB,CAAAA,GACF,CAAA,CAAA,CAAA,MAAoC,CAAA,CAAA,CAAA,CAAA,IAC3BC,CAAAA,CAAE,EAAA,CAAA,CAAA,MACX,GACId,CAAAA,CACFC,EAAeD,EAAM,CAAA,CAAA,CAAA,CAAA,KAGE,EAC7B,CAAA,CAQE,GAAA,CAAA,CAAA,0BACA,CAAA,CAAA,CAAA,+BACA,CAAA,CAAA,CAAA,0BAEJ,CAAA,CAAA,CAAA","file":"use-coordinate-paste.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\nimport { useState } from 'react';\nimport {\n  deduplicateMatchesByLocation,\n  isCompleteCoordinate,\n  parseCoordinatePaste,\n} from '../../components/coordinate-field/coordinate-utils';\nimport type {\n  CoordinateSystem,\n  CoordinateValue,\n  ParsedCoordinateMatch,\n} from '../../components/coordinate-field/types';\n\nexport interface UseCoordinatePasteOptions {\n  onValueApplied: (value: CoordinateValue) => void;\n  onError?: (message: string, context?: Record<string, unknown>) => void;\n}\n\nexport interface UseCoordinatePasteResult {\n  disambiguationMatches: ParsedCoordinateMatch[];\n  showDisambiguationModal: boolean;\n  selectedDisambiguationFormat: CoordinateSystem | null;\n  handleInputPaste: (e: React.ClipboardEvent<HTMLDivElement>) => void;\n  handleDisambiguationSelect: () => void;\n  setShowDisambiguationModal: (show: boolean) => void;\n  setSelectedDisambiguationFormat: (format: CoordinateSystem | null) => void;\n  cleanupDisambiguationModal: () => void;\n}\n\nexport function useCoordinatePaste({\n  onValueApplied,\n  onError,\n}: UseCoordinatePasteOptions): UseCoordinatePasteResult {\n  const [disambiguationMatches, setDisambiguationMatches] = useState<\n    ParsedCoordinateMatch[]\n  >([]);\n  const [showDisambiguationModal, setShowDisambiguationModal] = useState(false);\n  const [selectedDisambiguationFormat, setSelectedDisambiguationFormat] =\n    useState<CoordinateSystem | null>(null);\n\n  /**\n   * Handles paste failure when no coordinate formats match\n   * Calls onError with \"Invalid coordinate format\" message\n   */\n  const handlePasteNoMatches = (pastedText: string) => {\n    const errorMsg = 'Invalid coordinate format';\n    onError?.(errorMsg, { pastedText });\n  };\n\n  const handlePasteSingleMatch = (match: ParsedCoordinateMatch | undefined) => {\n    if (match) {\n      onValueApplied(match.value);\n    }\n  };\n\n  const handlePasteMultipleMatches = (matches: ParsedCoordinateMatch[]) => {\n    setDisambiguationMatches(matches);\n    const firstMatch = matches[0];\n    if (firstMatch) {\n      setSelectedDisambiguationFormat(firstMatch.format);\n    }\n    setShowDisambiguationModal(true);\n  };\n\n  const handleCoordinatePaste = (pastedText: string) => {\n    const allMatches = parseCoordinatePaste(pastedText);\n\n    if (allMatches.length === 0) {\n      handlePasteNoMatches(pastedText);\n      return;\n    }\n\n    // Deduplicate matches by location - only show modal for different locations\n    const matches = deduplicateMatchesByLocation(allMatches);\n\n    if (matches.length === 1) {\n      handlePasteSingleMatch(matches[0]);\n    } else {\n      handlePasteMultipleMatches(matches);\n    }\n  };\n\n  const handleInputPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {\n    const pastedText = e.clipboardData?.getData('text/plain');\n    if (pastedText && isCompleteCoordinate(pastedText)) {\n      e.preventDefault();\n      handleCoordinatePaste(pastedText);\n    }\n  };\n\n  const cleanupDisambiguationModal = () => {\n    setShowDisambiguationModal(false);\n    setDisambiguationMatches([]);\n    setSelectedDisambiguationFormat(null);\n  };\n\n  const handleDisambiguationSelect = () => {\n    if (selectedDisambiguationFormat) {\n      const match = disambiguationMatches.find(\n        (m) => m.format === selectedDisambiguationFormat,\n      );\n      if (match) {\n        onValueApplied(match.value);\n      }\n    }\n    cleanupDisambiguationModal();\n  };\n\n  return {\n    disambiguationMatches,\n    showDisambiguationModal,\n    selectedDisambiguationFormat,\n    handleInputPaste,\n    handleDisambiguationSelect,\n    setShowDisambiguationModal,\n    setSelectedDisambiguationFormat,\n    cleanupDisambiguationModal,\n  };\n}\n"]}

package/dist/hooks/coordinate-field/use-timeout-cleanup.d.ts

@@ -0,0 +1,6 @@
+interface UseTimeoutCleanupResult {
+    registerTimeout: (timeoutId: NodeJS.Timeout) => void;
+}
+declare function useTimeoutCleanup(): UseTimeoutCleanupResult;
+
+export { type UseTimeoutCleanupResult, useTimeoutCleanup };

package/dist/hooks/coordinate-field/use-timeout-cleanup.js

@@ -0,0 +1,2 @@
+import {useRef,useEffect}from'react';function n(){const e=useRef(new Set),t=u=>{e.current.add(u);};return useEffect(()=>()=>{e.current.forEach(clearTimeout),e.current.clear();},[]),{registerTimeout:t}}export{n as useTimeoutCleanup};//# sourceMappingURL=use-timeout-cleanup.js.map
+//# sourceMappingURL=use-timeout-cleanup.js.map

package/dist/hooks/coordinate-field/use-timeout-cleanup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/coordinate-field/use-timeout-cleanup.ts"],"names":["useTimeoutCleanup","timeoutIdsRef","useRef","registerTimeout","timeoutId","useEffect"],"mappings":"qCAkBO,SAASA,CAAAA,EAA6C,CAC3D,MAAMC,CAAAA,CAAgBC,OAA4B,IAAI,GAAK,EAErDC,CAAAA,CAAmBC,CAAAA,EAA8B,CACrDH,CAAAA,CAAc,OAAA,CAAQ,IAAIG,CAAS,EACrC,EAEA,OAAAC,SAAAA,CAAU,IACD,IAAM,CACXJ,EAAc,OAAA,CAAQ,OAAA,CAAQ,YAAY,CAAA,CAC1CA,CAAAA,CAAc,QAAQ,KAAA,GACxB,EACC,EAAE,EAEE,CAAE,eAAA,CAAAE,CAAgB,CAC3B","file":"use-timeout-cleanup.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\nimport { useEffect, useRef } from 'react';\n\nexport interface UseTimeoutCleanupResult {\n  registerTimeout: (timeoutId: NodeJS.Timeout) => void;\n}\n\nexport function useTimeoutCleanup(): UseTimeoutCleanupResult {\n  const timeoutIdsRef = useRef<Set<NodeJS.Timeout>>(new Set());\n\n  const registerTimeout = (timeoutId: NodeJS.Timeout) => {\n    timeoutIdsRef.current.add(timeoutId);\n  };\n\n  useEffect(() => {\n    return () => {\n      timeoutIdsRef.current.forEach(clearTimeout);\n      timeoutIdsRef.current.clear();\n    };\n  }, []);\n\n  return { registerTimeout };\n}\n"]}

package/dist/hooks/kanban/index.d.ts

@@ -0,0 +1,93 @@
+import * as _dnd_kit_core_dist_hooks_utilities from '@dnd-kit/core/dist/hooks/utilities';
+import * as _dnd_kit_core from '@dnd-kit/core';
+import { KanbanCardData, KanbanColumnData } from '../../components/kanban/types.js';
+import 'react';
+import '../../components/search-field/types.js';
+import 'react-aria-components';
+import '../../components/button/types.js';
+import '../../lib/types.js';
+import '../../components/icon/types.js';
+
+/**
+ * Hook that provides drag-and-drop interactions for a kanban column.
+ *
+ * This hook integrates with `@dnd-kit/core` to enable dropping cards into columns.
+ * It tracks hover states, validates drop targets based on the column's `canDrop` property,
+ * and provides visual feedback states for both the column itself and cards within it.
+ *
+ * @param column - The kanban column data object containing the column's id, canDrop status, and other properties
+ *
+ * @returns An object containing:
+ * - `ref` - Ref callback to attach to the droppable column DOM element
+ * - `isHighlighted` - Boolean indicating if the column should be visually highlighted (when a card from another column is being dragged)
+ * - `isActive` - Boolean indicating if the column is actively being hovered over and can accept the drop
+ *
+ * @example
+ * ```tsx
+ * function KanbanColumn({ column }: { column: KanbanColumnData }) {
+ *   const { ref, isHighlighted, isActive } = useColumnInteractions(column);
+ *
+ *   return (
+ *     <div
+ *       ref={ref}
+ *       className={cn({
+ *         'ring-2 ring-blue-300': isHighlighted && !isActive, // Potential drop target
+ *         'ring-2 ring-blue-500 bg-blue-50': isActive,        // Active drop target
+ *       })}
+ *     >
+ *       <h2>{column.title}</h2>
+ *       {column.cards.map(card => <Card key={card.id} card={card} />)}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useColumnInteractions(column: KanbanColumnData): {
+    ref: (element: HTMLElement | null) => void;
+    isHighlighted: boolean;
+    isActive: boolean;
+};
+/**
+ * Hook that provides drag-and-drop interactions for a kanban card.
+ *
+ * This hook integrates with `@dnd-kit/sortable` to enable dragging, dropping, and reordering
+ * of cards within and between columns. It handles transform animations, drag state tracking,
+ * and edge detection for insertion positioning.
+ *
+ * @param card - The kanban card data object containing the card's id and other properties
+ *
+ * @returns An object containing:
+ * - `ref` - Ref callback to attach to the draggable card DOM element
+ * - `isDragging` - Boolean indicating if this card is currently being dragged
+ * - `closestEdge` - The closest edge ('top' or 'bottom') when another card is hovering over this card, or null if not hovering
+ * - `style` - CSS style object with transform and transition properties for drag animations
+ * - `attributes` - Accessibility and drag attributes to spread on the card element
+ * - `listeners` - Event listeners to spread on the drag handle element
+ *
+ * @example
+ * ```tsx
+ * function KanbanCard({ card }: { card: KanbanCardData }) {
+ *   const { ref, isDragging, closestEdge, style, attributes, listeners } = useCardInteractions(card);
+ *
+ *   return (
+ *     <div ref={ref} style={style} {...attributes} {...listeners}>
+ *       {card.title}
+ *       {closestEdge && <DropIndicator edge={closestEdge} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCardInteractions(card: KanbanCardData): {
+    ref: (node: HTMLElement | null) => void;
+    isDragging: boolean;
+    closestEdge: "top" | "bottom" | undefined;
+    style: {
+        transform: string | undefined;
+        transition: string | undefined;
+    };
+    attributes: _dnd_kit_core.DraggableAttributes;
+    listeners: _dnd_kit_core_dist_hooks_utilities.SyntheticListenerMap | undefined;
+};
+
+export { useCardInteractions, useColumnInteractions };

package/dist/hooks/kanban/index.js

@@ -0,0 +1,2 @@
+import {useDroppable,useDndContext}from'@dnd-kit/core';import {useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';import {calculateClosestEdge}from'./../../components/kanban/context.js';function I(t){const{setNodeRef:a,isOver:r,active:n}=useDroppable({id:t.id,data:t}),{over:s}=useDndContext(),o=r||s?.data?.current?.columnId===t.id,i=!!(o||n&&n.data.current?.columnId!==t.id&&t.canDrop!==false),e=o&&t.canDrop!==false;return {ref:a,isHighlighted:i,isActive:e}}function K(t){const{attributes:a,listeners:r,setNodeRef:n,transform:s,transition:o,isDragging:i,over:e,active:d}=useSortable({id:t.id,data:t}),c={transform:CSS.Transform.toString(s),transition:o};let f;return e&&e.id===t.id&&d&&(f=calculateClosestEdge(e,d)),{ref:n,isDragging:i,closestEdge:f,style:c,attributes:a,listeners:r}}export{K as useCardInteractions,I as useColumnInteractions};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/hooks/kanban/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/kanban/index.ts"],"names":["useColumnInteractions","isOver","active","useDroppable","column","p","over","useDndContext","isOverColumn","isActive","useCardInteractions","listeners","transform","useSortable","card","u","style","CSS","l","closestEdge","calculateClosestEdge","C","setNodeRef"],"mappings":"gNAuDgBA,SACR,CAAE,oBAAYC,CAAAA,CAAQ,CAAA,MAAAC,CAAO,CAAA,CAAIC,MACjCC,EAAO,CAAA,CAAAC,YACX,CAAA,CAAA,EAAA,CAAMD,CACR,CAAC,EAGK,CAAE,IAAA,CAAAE,CAAK,EAAIC,CAAAA,CAAc,IAGVN,CAAAA,CAAAA,CAAUK,gBAAM,CAAA,CAAA,CAAA,CAAA,EAAM,CAAA,EAAA,IAAA,EAAS,OAAA,EAAA,QAE9B,GACpBE,CAAAA,CAAAA,EACGN,CAAAA,CACCA,EAAO,EAAA,CAAA,EAAK,CAAA,EAAA,CAAA,CAAA,IAAS,CAAA,OAAA,EAAA,QACrBE,GAAO,CAAA,CAAA,EAAA,EAAA,CAAA,CAAY,UAGQA,KAAO,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAY,OAEpD,GACE,KAAA,CAAA,OACA,CAAA,GAAA,CAAA,CAAA,CAAA,aACA,CAAA,CAAAK,CACF,WAkCcC,CAAAA,SACR,CACJ,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,UACA,CAAA,CAAA,CAAAC,sBAEA,CAAA,CAAA,CAAAC,SACA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,UAEA,OAAAV,CACF,CAAA,CAAIW,MACEC,CAAAA,CAAK,CAAA,CAAAC,WACT,CAAA,CAAA,EAAA,CAAMD,CACR,CAAC,EAEKE,CAAAA,IACJ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAWC,SAAI,CAAAC,GAAA,CAAU,SAASN,CAAS,QAC3C,CAAA,CAAA,CAAA,CAAA,UAMF,CAAA,CAAA,CAAA,CAAA,IAAIN,CAAAA,CAAQA,OAAYQ,GAAK,CAAA,CAAA,EAAMZ,GACjCiB,CAAAA,CAAcC,EAAqBd,EAAMJ,CAAM,GAG1C,CACL,CAAAmB,oBAAA,CAAA,CAAKC,EACL,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,WACAN,CACA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAAL,SAEJ,CAAA,CAAA,CAAA","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\nimport { useDndContext, useDroppable } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { calculateClosestEdge } from '@/components/kanban/context';\nimport type {\n  KanbanCardData,\n  KanbanColumnData,\n} from '@/components/kanban/types';\n\n/**\n * Hook that provides drag-and-drop interactions for a kanban column.\n *\n * This hook integrates with `@dnd-kit/core` to enable dropping cards into columns.\n * It tracks hover states, validates drop targets based on the column's `canDrop` property,\n * and provides visual feedback states for both the column itself and cards within it.\n *\n * @param column - The kanban column data object containing the column's id, canDrop status, and other properties\n *\n * @returns An object containing:\n * - `ref` - Ref callback to attach to the droppable column DOM element\n * - `isHighlighted` - Boolean indicating if the column should be visually highlighted (when a card from another column is being dragged)\n * - `isActive` - Boolean indicating if the column is actively being hovered over and can accept the drop\n *\n * @example\n * ```tsx\n * function KanbanColumn({ column }: { column: KanbanColumnData }) {\n *   const { ref, isHighlighted, isActive } = useColumnInteractions(column);\n *\n *   return (\n *     <div\n *       ref={ref}\n *       className={cn({\n *         'ring-2 ring-blue-300': isHighlighted && !isActive, // Potential drop target\n *         'ring-2 ring-blue-500 bg-blue-50': isActive,        // Active drop target\n *       })}\n *     >\n *       <h2>{column.title}</h2>\n *       {column.cards.map(card => <Card key={card.id} card={card} />)}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useColumnInteractions(column: KanbanColumnData) {\n  const { setNodeRef, isOver, active } = useDroppable({\n    id: column.id,\n    data: column,\n  });\n\n  // Get the global over state to detect when hovering over cards in this column\n  const { over } = useDndContext();\n\n  // Check if we're over the column itself OR over a card that belongs to this column\n  const isOverColumn = isOver || over?.data?.current?.columnId === column.id;\n\n  const isHighlighted = Boolean(\n    isOverColumn ||\n      (active &&\n        active.data.current?.columnId !== column.id &&\n        column.canDrop !== false),\n  );\n\n  const isActive = isOverColumn && column.canDrop !== false;\n\n  return {\n    ref: setNodeRef,\n    isHighlighted,\n    isActive,\n  };\n}\n\n/**\n * Hook that provides drag-and-drop interactions for a kanban card.\n *\n * This hook integrates with `@dnd-kit/sortable` to enable dragging, dropping, and reordering\n * of cards within and between columns. It handles transform animations, drag state tracking,\n * and edge detection for insertion positioning.\n *\n * @param card - The kanban card data object containing the card's id and other properties\n *\n * @returns An object containing:\n * - `ref` - Ref callback to attach to the draggable card DOM element\n * - `isDragging` - Boolean indicating if this card is currently being dragged\n * - `closestEdge` - The closest edge ('top' or 'bottom') when another card is hovering over this card, or null if not hovering\n * - `style` - CSS style object with transform and transition properties for drag animations\n * - `attributes` - Accessibility and drag attributes to spread on the card element\n * - `listeners` - Event listeners to spread on the drag handle element\n *\n * @example\n * ```tsx\n * function KanbanCard({ card }: { card: KanbanCardData }) {\n *   const { ref, isDragging, closestEdge, style, attributes, listeners } = useCardInteractions(card);\n *\n *   return (\n *     <div ref={ref} style={style} {...attributes} {...listeners}>\n *       {card.title}\n *       {closestEdge && <DropIndicator edge={closestEdge} />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCardInteractions(card: KanbanCardData) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n    over,\n    active,\n  } = useSortable({\n    id: card.id,\n    data: card,\n  });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  // Determine closest edge based on over position\n  let closestEdge: 'top' | 'bottom' | undefined;\n\n  if (over && over.id === card.id && active) {\n    closestEdge = calculateClosestEdge(over, active);\n  }\n\n  return {\n    ref: setNodeRef,\n    isDragging,\n    closestEdge,\n    style,\n    attributes,\n    listeners,\n  };\n}\n"]}