@servicetitan/anvil2 2.0.2 → 2.0.4

package/dist/{useInitialFocus-DfFGsgjO.js → useInitialFocus-nOW12jQ5.js}

@@ -1,26 +1,29 @@
+import { useCallback, useState, useRef, useEffect } from 'react';
 import { u as useOpenCloseTransitionStates } from './useOpenCloseTransitionStates-CiTYrLGi.js';
-import { useState, useRef, useEffect, useCallback } from 'react';
 import { t as tabbable } from './useOnClickOutside-Cyqbe1n3.js';
 
 const useDialogTransitionStates = (ref, openProp, options = {}) => {
   const { onOpenAnimationStart, onCloseAnimationComplete } = options;
+  const getDurationMs = useCallback(() => {
+    if (!ref.current || !window) return 0;
+    const duration = window.getComputedStyle(ref.current).animationDuration;
+    return parseFloat(duration) * 1e3;
+  }, [ref]);
+  const handleOpenAnimationStart = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.showModal();
+    onOpenAnimationStart?.();
+  }, [ref, onOpenAnimationStart]);
+  const handleCloseAnimationComplete = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.close();
+    onCloseAnimationComplete?.();
+  }, [ref, onCloseAnimationComplete]);
   return useOpenCloseTransitionStates(openProp, {
     ...options,
-    onOpenAnimationStart: () => {
-      if (!ref.current) return;
-      ref.current.showModal();
-      onOpenAnimationStart?.();
-    },
-    onCloseAnimationComplete: () => {
-      if (!ref.current) return;
-      ref.current.close();
-      onCloseAnimationComplete?.();
-    },
-    durationMs: () => {
-      if (!ref.current || !window) return 0;
-      const duration = window.getComputedStyle(ref.current).animationDuration;
-      return parseFloat(duration) * 1e3;
-    }
+    onOpenAnimationStart: handleOpenAnimationStart,
+    onCloseAnimationComplete: handleCloseAnimationComplete,
+    durationMs: getDurationMs
   });
 };
 
@@ -184,4 +187,4 @@ const useInitialFocus = (dialogRef, { computeFocus }) => {
 };
 
 export { useDialogTransitionStates as a, useKeyboardFocusables as b, useInitialFocus as c, useDrillDownContextState as u };
-//# sourceMappingURL=useInitialFocus-DfFGsgjO.js.map
+//# sourceMappingURL=useInitialFocus-nOW12jQ5.js.map

package/dist/useInitialFocus-nOW12jQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInitialFocus-nOW12jQ5.js","sources":["../src/internal/hooks/useDialogTransitionStates/useDialogTransitionStates.ts","../src/internal/hooks/useKeyboardFocusables/useKeyboardFocusables.ts","../src/components/DrillDown/internal/useDrillDownContextState.ts","../src/components/Dialog/internal/useInitialFocus.ts"],"sourcesContent":["import { RefObject, useCallback } from \"react\";\nimport {\n  useOpenCloseTransitionStates,\n  type OpenCloseTransitionStateEffects,\n} from \"../useOpenCloseTransitionStates\";\n\n/**\n * Effects configuration for dialog transition states\n * @property {() => void} [onOpenAnimationStart] - Callback when opening animation starts\n * @property {() => void} [onCloseAnimationStart] - Callback when closing animation starts\n * @property {() => void} [onOpenAnimationComplete] - Callback when opening animation completes\n * @property {() => void} [onCloseAnimationComplete] - Callback when closing animation completes\n */\n\n/**\n * Custom hook for managing dialog transition states and animations.\n *\n * Features:\n * - Manages dialog open/close transition states\n * - Handles animation timing based on CSS animation duration\n * - Provides callbacks for animation lifecycle events\n * - Supports controlled dialog state management\n * - Automatically handles showModal() and close() calls\n * - Provides utility flags for open/closed states\n *\n * @param ref - The ref to the dialog element\n * @param openProp - The open prop controlling dialog visibility\n * @param options - Additional, optional options including callbacks for animation start, complete, and initialization\n * @returns Object containing dialog state, control functions, and utility flags\n */\n\n/**\n * Effects configuration for dialog transition states\n * @param openProp - The open prop controlling dialog visibility\n * @param options - The effects configuration\n * @returns The dialog transition state\n */\nexport const useDialogTransitionStates = (\n  ref: RefObject<HTMLDialogElement>,\n  openProp: boolean | undefined,\n  options: OpenCloseTransitionStateEffects = {},\n) => {\n  const { onOpenAnimationStart, onCloseAnimationComplete } = options;\n\n  const getDurationMs = useCallback(() => {\n    if (!ref.current || !window) return 0;\n    const duration = window.getComputedStyle(ref.current).animationDuration;\n    return parseFloat(duration) * 1000;\n  }, [ref]);\n\n  const handleOpenAnimationStart = useCallback(() => {\n    if (!ref.current) return;\n    ref.current.showModal();\n    onOpenAnimationStart?.();\n  }, [ref, onOpenAnimationStart]);\n\n  const handleCloseAnimationComplete = useCallback(() => {\n    if (!ref.current) return;\n    ref.current.close();\n    onCloseAnimationComplete?.();\n  }, [ref, onCloseAnimationComplete]);\n\n  return useOpenCloseTransitionStates(openProp, {\n    ...options,\n    onOpenAnimationStart: handleOpenAnimationStart,\n    onCloseAnimationComplete: handleCloseAnimationComplete,\n    durationMs: getDurationMs,\n  });\n};\n","import { RefObject, useEffect, useRef, useState } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\n/**\n * Options for the useKeyboardFocusables hook\n */\ntype OptionProps =\n  | {\n      /**\n       * Disable mutation observer\n       */\n      observeChange: false;\n    }\n  | {\n      /**\n       * Enable mutation observer with optional configuration\n       */\n      observeChange: true;\n      /**\n       * Observe attribute changes\n       */\n      attributes?: boolean;\n      /**\n       * Observe text content changes\n       */\n      characterData?: boolean;\n      /**\n       * Observe child element changes\n       */\n      childList?: boolean;\n      /**\n       * Observe descendant changes\n       */\n      subtree?: boolean;\n    };\n\n/**\n * Custom hook for tracking keyboard focusable elements within a container.\n *\n * Features:\n * - Tracks all keyboard focusable elements within a target container\n * - Supports both ref objects and direct element references\n * - Optional mutation observer for real-time updates\n * - Debounced updates to prevent excessive re-renders\n * - Configurable mutation observer options\n * - Manual update function for immediate refresh\n * - Uses tabbable library for accurate focusable detection\n * - Automatically cleans up mutation observer\n *\n * @param element - Target element or ref to monitor for focusable elements\n * @param options - Configuration options for mutation observer behavior\n * @returns Object containing current focusable elements and update function\n */\nexport const useKeyboardFocusables = (\n  element: RefObject<HTMLElement> | HTMLElement | undefined,\n  options: OptionProps = {\n    observeChange: true,\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  const [focusables, setFocusables] = useState<FocusableElement[] | null>(null);\n  const observerRef = useRef<MutationObserver>();\n\n  useEffect(() => {\n    const target = element instanceof HTMLElement ? element : element?.current;\n    if (!target) return;\n    if (!options.observeChange && !focusables) {\n      setFocusables(tabbable(target as Element));\n      return;\n    }\n\n    const mutationCallback = () => {\n      const targetArr = tabbable(target as Element);\n      if (targetArr.length === 0) return;\n      setFocusables(targetArr);\n    };\n\n    const observer = new MutationObserver(mutationCallback);\n    observerRef.current = observer;\n    observer.observe(target, {\n      childList: true, // Observe changes to child elements\n      subtree: true, // Observe changes to descendants of the target\n      attributes: true, // Observe changes to attributes\n      characterData: true, // Observe changes to text content\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [element, options, focusables]);\n\n  return { focusables };\n};\n","import { useState, useCallback, useRef } from \"react\";\nimport { DrillDownContextProps } from \"./DrillDownContext\";\n\ntype useDrillDownContextStateParams = {\n  defaultDrillDownIndex?: number;\n};\n\nexport function useDrillDownContextState({\n  defaultDrillDownIndex = 0,\n}: useDrillDownContextStateParams) {\n  const [drillDownIndex, setDrillDownIndex] =\n    useState<DrillDownContextProps[\"index\"]>(undefined);\n  const [registeredIndices, setRegisteredIndices] = useState<\n    DrillDownContextProps[\"registeredIndices\"]\n  >([]);\n  // Track the drilldown path for back navigation\n  const drillDownPath = useRef<number[]>([]);\n  const [onClose, setOnClose] = useState<(() => void)[]>([]);\n  // focus ref for the action that called the Drilldown to open\n  const triggerFocusRef = useRef<HTMLElement | null>(null);\n\n  const restoreFocus = useCallback(() => {\n    requestAnimationFrame(() => {\n      triggerFocusRef.current?.focus();\n      triggerFocusRef.current = null;\n    });\n  }, [triggerFocusRef]);\n\n  const back = useCallback(() => {\n    const newIndex = drillDownPath.current.pop();\n    // Return focus to the trigger element if we're closing the Drilldown\n    if (newIndex == null && triggerFocusRef.current) {\n      setDrillDownIndex(undefined);\n      restoreFocus();\n      return;\n    }\n    setDrillDownIndex(newIndex);\n  }, [setDrillDownIndex, drillDownPath, restoreFocus]);\n\n  const next = useCallback(() => {\n    if (drillDownIndex == null) {\n      // Set focus ref if the Drilldown is opening for the first time\n      triggerFocusRef.current = document.activeElement as HTMLElement;\n      drillDownPath.current = [];\n      setDrillDownIndex(defaultDrillDownIndex);\n      return;\n    }\n    if (registeredIndices && registeredIndices[drillDownIndex + 1] == null) {\n      // Closes the Drilldown if there is no next index\n      drillDownPath.current = [];\n      setDrillDownIndex(undefined);\n      restoreFocus();\n      return;\n    }\n    drillDownPath.current.push(drillDownIndex);\n    setDrillDownIndex(drillDownIndex + 1);\n  }, [\n    drillDownIndex,\n    setDrillDownIndex,\n    defaultDrillDownIndex,\n    drillDownPath,\n    registeredIndices,\n    restoreFocus,\n  ]);\n\n  const setIndexWithinBounds = useCallback(\n    (index: number | undefined) => {\n      // Invalid index, close the Drilldown\n      if (\n        index == null ||\n        index < 0 ||\n        (registeredIndices && registeredIndices[index] == null)\n      ) {\n        setDrillDownIndex(undefined);\n        restoreFocus();\n        return;\n      }\n      // Update the drilldown path for back navigation\n      if (drillDownIndex === undefined) {\n        triggerFocusRef.current = document.activeElement as HTMLElement;\n        drillDownPath.current = [];\n      } else {\n        drillDownPath.current.push(drillDownIndex);\n      }\n      setDrillDownIndex(index);\n    },\n    [\n      drillDownIndex,\n      setDrillDownIndex,\n      drillDownPath,\n      registeredIndices,\n      restoreFocus,\n    ],\n  );\n\n  const setOnCloseForIndex = useCallback(\n    (fn: () => void, index: number) => {\n      setOnClose((arr) => {\n        arr[index] = () => {\n          fn();\n          setDrillDownIndex(undefined);\n          restoreFocus();\n        };\n        return arr;\n      });\n    },\n    [restoreFocus],\n  );\n\n  return {\n    index: drillDownIndex,\n    setIndex: setIndexWithinBounds,\n    back,\n    next,\n    registeredIndices,\n    setRegisteredIndices,\n    onClose,\n    setOnClose: setOnCloseForIndex,\n  };\n}\n","import { RefObject, useEffect } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\nexport type InitialFocusOptions = {\n  /**\n   * Function to pick the initial focus target, given an array of focusable elements\n   */\n  computeFocus?: (focusables: FocusableElement[]) => FocusableElement;\n};\n\n/**\n * Hook to set initial focus for a dialog (e.g. Dialog, Drawer) when it is opened.\n * @param dialogRef - Ref to the dialog element\n * @param options - Options for the hook\n * @param options.computeFocus - Function to pick the initial focus target, given an array of focusable elements\n */\nexport const useInitialFocus = (\n  /**\n   * Ref to the dialog element\n   */\n  dialogRef: RefObject<HTMLDialogElement>,\n  { computeFocus }: InitialFocusOptions,\n) => {\n  useEffect(() => {\n    if (!dialogRef.current) {\n      return () => {};\n    }\n    // Create a MutationObserver to check if dialogRef.current is open or closed\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.attributeName === \"open\" &&\n          mutation.target === dialogRef.current &&\n          mutation.target instanceof HTMLDialogElement &&\n          mutation.target.open === true\n        ) {\n          const focusables = tabbable(dialogRef.current);\n          const target = computeFocus?.(focusables) || focusables[0];\n          target?.focus();\n        }\n      });\n    });\n    observer.observe(dialogRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [dialogRef, computeFocus]);\n};\n"],"names":[],"mappings":"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"}

package/dist/{useLayoutPropsUtil-BlIWftBb.js → useLayoutPropsUtil-loxbyklF.js}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { u as useBreakpoint } from './useBreakpoint-BGCsBhQ7.js';
-import { p as primitive } from './primitive-BByug0kD.js';
+import { u as useBreakpoint } from './useBreakpoint-BP3HZXmh.js';
+import { p as primitive } from './primitive-C3RFDRA8.js';
 
 const sizeToToken = (value) => {
   if (typeof value === "undefined") return void 0;
@@ -90,4 +90,4 @@ function useLayoutPropsUtil(props) {
 }
 
 export { sizeToToken as s, useLayoutPropsUtil as u };
-//# sourceMappingURL=useLayoutPropsUtil-BlIWftBb.js.map
+//# sourceMappingURL=useLayoutPropsUtil-loxbyklF.js.map

package/dist/{useLayoutPropsUtil-BlIWftBb.js.map → useLayoutPropsUtil-loxbyklF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useLayoutPropsUtil-BlIWftBb.js","sources":["../src/internal/functions/sizeToToken.ts","../src/internal/hooks/useLayoutPropsUtil/useLayoutPropsUtil.ts"],"sourcesContent":["import { core } from \"@servicetitan/hammer-token\";\nimport { GapSize } from \"../../types\";\n\ntype PrimitiveSizes =\n  | \"Size0\"\n  | \"SizeHalf\"\n  | \"Size1\"\n  | \"Size2\"\n  | \"Size3\"\n  | \"Size4\"\n  | \"Size5\"\n  | \"Size6\"\n  | \"Size7\"\n  | \"Size8\"\n  | \"Size9\"\n  | \"Size10\"\n  | \"Size11\"\n  | \"Size12\"\n  | \"Size13\"\n  | \"Size14\";\n\nexport const sizeToToken = (value?: GapSize) => {\n  if (typeof value === \"undefined\") return undefined;\n  let gap = value;\n  const stringifiedValue = String(value);\n  if (stringifiedValue === \"half\") {\n    gap =\n      `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}` as GapSize;\n  }\n\n  return core.primitive?.[`Size${gap}` as PrimitiveSizes]?.value;\n};\n","import { CSSProperties, useMemo } from \"react\";\nimport { GapSize, LayoutUtilProps } from \"../../../types\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { sizeToToken } from \"../../functions/sizeToToken\";\n\nconst LAYOUT_PROP_ARR = [\n  \"gridTemplateColumns\",\n  \"gridTemplateRows\",\n  \"gridTemplateAreas\",\n  \"gridAutoColumns\",\n  \"gridAutoRows\",\n  \"gridArea\",\n  \"gridColumn\",\n  \"gridRow\",\n  \"gridColumnStart\",\n  \"gridColumnEnd\",\n  \"gridRowStart\",\n  \"gridRowEnd\",\n  \"flex\",\n  \"flexDirection\",\n  \"flexGrow\",\n  \"flexShrink\",\n  \"flexBasis\",\n  \"flexWrap\",\n  \"order\",\n  \"justifySelf\",\n  \"justifyItems\",\n  \"justifyContent\",\n  \"alignSelf\",\n  \"alignItems\",\n  \"alignContent\",\n  \"placeItems\",\n  \"placeContent\",\n  \"placeSelf\",\n  \"wrap\",\n  \"gap\",\n  \"rowGap\",\n  \"columnGap\",\n];\n\nconst RESPONSIVE_SIZES_ARR = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"];\n\n/**\n * Layout CSS variables type excluding responsive properties\n */\ntype LayoutCSSVariables = Omit<LayoutUtilProps, keyof ResponsiveLayout>;\n\n/**\n * Responsive layout configuration type\n */\ntype ResponsiveLayout = {\n  /**\n   * Base layout properties\n   */\n  base?: LayoutUtilProps;\n  /**\n   * Extra small breakpoint layout properties\n   */\n  xs?: LayoutUtilProps;\n  /**\n   * Small breakpoint layout properties\n   */\n  sm?: LayoutUtilProps;\n  /**\n   * Medium breakpoint layout properties\n   */\n  md?: LayoutUtilProps;\n  /**\n   * Large breakpoint layout properties\n   */\n  lg?: LayoutUtilProps;\n  /**\n   * Extra large breakpoint layout properties\n   */\n  xl?: LayoutUtilProps;\n  /**\n   * Extra extra large breakpoint layout properties\n   */\n  xxl?: LayoutUtilProps;\n};\n\n/**\n * Custom hook for managing responsive layout properties and CSS styles.\n *\n * Features:\n * - Separates layout properties from component properties\n * - Provides responsive breakpoint support for all layout properties\n * - Automatically converts gap sizes to CSS tokens\n * - Uses breakpoint cascade for responsive values\n * - Optimized with useMemo for performance\n * - Supports all CSS Grid and Flexbox properties\n * - Handles responsive size inheritance (larger breakpoints inherit from smaller ones)\n * - Returns both layout styles and filtered component props\n *\n * @param props - Object containing layout and component properties\n * @returns Object containing layout styles and filtered component props\n */\nexport function useLayoutPropsUtil<T extends ResponsiveLayout>(\n  props: T,\n): { layoutStyles?: CSSProperties; componentProps: T } {\n  const baseSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const responsiveSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      RESPONSIVE_SIZES_ARR.includes(key),\n    ),\n  );\n\n  const sizeProps: ResponsiveLayout = useMemo(\n    () => ({\n      ...responsiveSizeProps,\n      base: baseSizeProps,\n    }),\n    [baseSizeProps, responsiveSizeProps],\n  );\n\n  const componentProps = Object.fromEntries(\n    Object.entries(props).filter(\n      ([key, _val]) =>\n        !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const breakpoint = useBreakpoint();\n\n  const getValue = (style: keyof LayoutCSSVariables) => {\n    const value =\n      (breakpoint?.xxl ? sizeProps.xxl?.[style] : undefined) ??\n      (breakpoint?.xl ? sizeProps.xl?.[style] : undefined) ??\n      (breakpoint?.lg ? sizeProps.lg?.[style] : undefined) ??\n      (breakpoint?.md ? sizeProps.md?.[style] : undefined) ??\n      (breakpoint?.sm ? sizeProps.sm?.[style] : undefined) ??\n      (breakpoint?.xs ? sizeProps.xs?.[style] : undefined) ??\n      sizeProps.base?.[style];\n\n    // Convert gap sizes to design tokens\n    if (style.toLowerCase().endsWith(\"gap\")) {\n      return sizeToToken(value as GapSize);\n    }\n\n    return value;\n  };\n\n  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {\n    const value = getValue(key as keyof LayoutCSSVariables);\n\n    if (typeof value === \"undefined\") return o;\n    return { ...o, [key]: value };\n  }, {});\n\n  return {\n    layoutStyles: layoutStyleObject,\n    componentProps: componentProps as T,\n  };\n}\n"],"names":["core.primitive"],"mappings":"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"}
+{"version":3,"file":"useLayoutPropsUtil-loxbyklF.js","sources":["../src/internal/functions/sizeToToken.ts","../src/internal/hooks/useLayoutPropsUtil/useLayoutPropsUtil.ts"],"sourcesContent":["import { core } from \"@servicetitan/hammer-token\";\nimport { GapSize } from \"../../types\";\n\ntype PrimitiveSizes =\n  | \"Size0\"\n  | \"SizeHalf\"\n  | \"Size1\"\n  | \"Size2\"\n  | \"Size3\"\n  | \"Size4\"\n  | \"Size5\"\n  | \"Size6\"\n  | \"Size7\"\n  | \"Size8\"\n  | \"Size9\"\n  | \"Size10\"\n  | \"Size11\"\n  | \"Size12\"\n  | \"Size13\"\n  | \"Size14\";\n\nexport const sizeToToken = (value?: GapSize) => {\n  if (typeof value === \"undefined\") return undefined;\n  let gap = value;\n  const stringifiedValue = String(value);\n  if (stringifiedValue === \"half\") {\n    gap =\n      `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}` as GapSize;\n  }\n\n  return core.primitive?.[`Size${gap}` as PrimitiveSizes]?.value;\n};\n","import { CSSProperties, useMemo } from \"react\";\nimport { GapSize, LayoutUtilProps } from \"../../../types\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { sizeToToken } from \"../../functions/sizeToToken\";\n\nconst LAYOUT_PROP_ARR = [\n  \"gridTemplateColumns\",\n  \"gridTemplateRows\",\n  \"gridTemplateAreas\",\n  \"gridAutoColumns\",\n  \"gridAutoRows\",\n  \"gridArea\",\n  \"gridColumn\",\n  \"gridRow\",\n  \"gridColumnStart\",\n  \"gridColumnEnd\",\n  \"gridRowStart\",\n  \"gridRowEnd\",\n  \"flex\",\n  \"flexDirection\",\n  \"flexGrow\",\n  \"flexShrink\",\n  \"flexBasis\",\n  \"flexWrap\",\n  \"order\",\n  \"justifySelf\",\n  \"justifyItems\",\n  \"justifyContent\",\n  \"alignSelf\",\n  \"alignItems\",\n  \"alignContent\",\n  \"placeItems\",\n  \"placeContent\",\n  \"placeSelf\",\n  \"wrap\",\n  \"gap\",\n  \"rowGap\",\n  \"columnGap\",\n];\n\nconst RESPONSIVE_SIZES_ARR = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"];\n\n/**\n * Layout CSS variables type excluding responsive properties\n */\ntype LayoutCSSVariables = Omit<LayoutUtilProps, keyof ResponsiveLayout>;\n\n/**\n * Responsive layout configuration type\n */\ntype ResponsiveLayout = {\n  /**\n   * Base layout properties\n   */\n  base?: LayoutUtilProps;\n  /**\n   * Extra small breakpoint layout properties\n   */\n  xs?: LayoutUtilProps;\n  /**\n   * Small breakpoint layout properties\n   */\n  sm?: LayoutUtilProps;\n  /**\n   * Medium breakpoint layout properties\n   */\n  md?: LayoutUtilProps;\n  /**\n   * Large breakpoint layout properties\n   */\n  lg?: LayoutUtilProps;\n  /**\n   * Extra large breakpoint layout properties\n   */\n  xl?: LayoutUtilProps;\n  /**\n   * Extra extra large breakpoint layout properties\n   */\n  xxl?: LayoutUtilProps;\n};\n\n/**\n * Custom hook for managing responsive layout properties and CSS styles.\n *\n * Features:\n * - Separates layout properties from component properties\n * - Provides responsive breakpoint support for all layout properties\n * - Automatically converts gap sizes to CSS tokens\n * - Uses breakpoint cascade for responsive values\n * - Optimized with useMemo for performance\n * - Supports all CSS Grid and Flexbox properties\n * - Handles responsive size inheritance (larger breakpoints inherit from smaller ones)\n * - Returns both layout styles and filtered component props\n *\n * @param props - Object containing layout and component properties\n * @returns Object containing layout styles and filtered component props\n */\nexport function useLayoutPropsUtil<T extends ResponsiveLayout>(\n  props: T,\n): { layoutStyles?: CSSProperties; componentProps: T } {\n  const baseSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const responsiveSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      RESPONSIVE_SIZES_ARR.includes(key),\n    ),\n  );\n\n  const sizeProps: ResponsiveLayout = useMemo(\n    () => ({\n      ...responsiveSizeProps,\n      base: baseSizeProps,\n    }),\n    [baseSizeProps, responsiveSizeProps],\n  );\n\n  const componentProps = Object.fromEntries(\n    Object.entries(props).filter(\n      ([key, _val]) =>\n        !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const breakpoint = useBreakpoint();\n\n  const getValue = (style: keyof LayoutCSSVariables) => {\n    const value =\n      (breakpoint?.xxl ? sizeProps.xxl?.[style] : undefined) ??\n      (breakpoint?.xl ? sizeProps.xl?.[style] : undefined) ??\n      (breakpoint?.lg ? sizeProps.lg?.[style] : undefined) ??\n      (breakpoint?.md ? sizeProps.md?.[style] : undefined) ??\n      (breakpoint?.sm ? sizeProps.sm?.[style] : undefined) ??\n      (breakpoint?.xs ? sizeProps.xs?.[style] : undefined) ??\n      sizeProps.base?.[style];\n\n    // Convert gap sizes to design tokens\n    if (style.toLowerCase().endsWith(\"gap\")) {\n      return sizeToToken(value as GapSize);\n    }\n\n    return value;\n  };\n\n  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {\n    const value = getValue(key as keyof LayoutCSSVariables);\n\n    if (typeof value === \"undefined\") return o;\n    return { ...o, [key]: value };\n  }, {});\n\n  return {\n    layoutStyles: layoutStyleObject,\n    componentProps: componentProps as T,\n  };\n}\n"],"names":["core.primitive"],"mappings":"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"}

package/dist/{utils-Cj6v6CZ-.js → utils-BHKRoLps.js}

@@ -14,6 +14,13 @@ const DateModeToPlaceholderMap = {
   "yyyy/mm/dd": "____/__/__"
 };
 
+function jsDateToUtcDateTime(jsDate) {
+  return DateTime.utc(
+    jsDate.getFullYear(),
+    jsDate.getMonth() + 1,
+    jsDate.getDate()
+  );
+}
 function convertStringToDate(v) {
   if (v === void 0 || v === null) {
     return v;
@@ -49,5 +56,5 @@ function validateDate({
   return true;
 }
 
-export { DateModeToPlaceholderMap as D, SvgEvent as S, DateModeToFormatMap as a, convertStringToDate as c, validateDate as v };
-//# sourceMappingURL=utils-Cj6v6CZ-.js.map
+export { DateModeToPlaceholderMap as D, SvgEvent as S, DateModeToFormatMap as a, convertStringToDate as c, jsDateToUtcDateTime as j, validateDate as v };
+//# sourceMappingURL=utils-BHKRoLps.js.map

package/dist/utils-BHKRoLps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-BHKRoLps.js","sources":["../../hammer-icon/mdi/round/event.svg","../src/components/DateFieldSingle/internal/constants.ts","../src/components/DateFieldSingle/internal/utils.ts"],"sourcesContent":["import * as React from \"react\";\nconst SvgEvent = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M16 13h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1zm0-10v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1zm2 17H6c-.55 0-1-.45-1-1V9h14v10c0 .55-.45 1-1 1z\" }));\nexport default SvgEvent;\n","import { DateMode } from \"../types\";\n\nexport const DateModeToFormatMap: Record<DateMode, string> = {\n  \"mm/dd/yyyy\": \"MM/dd/yyyy\",\n  \"dd/mm/yyyy\": \"dd/MM/yyyy\",\n  \"yyyy/mm/dd\": \"yyyy/MM/dd\",\n};\n\nexport const DateModeToPlaceholderMap: Record<DateMode, string> = {\n  \"dd/mm/yyyy\": \"__/__/____\",\n  \"mm/dd/yyyy\": \"__/__/____\",\n  \"yyyy/mm/dd\": \"____/__/__\",\n};\n","import { DateTime } from \"luxon\";\n\n/**\n * Converts a JS Date (created with local timezone midnight) to a UTC Luxon DateTime\n * preserving the local date components (year, month, day).\n *\n * This is necessary because maskitoParseDate creates Date objects using\n * `new Date(year, month, day)` which produces midnight in the local timezone.\n * Directly using DateTime.fromJSDate with zone: \"utc\" can shift the *calendar day*\n * for timezones where local midnight falls on a different UTC date (typically\n * positive-offset zones), which would change the intended date.\n */\nexport function jsDateToUtcDateTime(jsDate: Date): DateTime {\n  return DateTime.utc(\n    jsDate.getFullYear(),\n    jsDate.getMonth() + 1,\n    jsDate.getDate(),\n  );\n}\n\nexport function convertStringToDate(\n  v: string | null | undefined,\n): DateTime | null | undefined {\n  if (v === undefined || v === null) {\n    return v;\n  }\n  const date = DateTime.fromISO(v, { setZone: true, zone: \"utc\" }).startOf(\n    \"day\",\n  );\n  if (date.isValid) {\n    return date;\n  }\n  return null;\n}\nexport function validateDate({\n  date,\n  constraints,\n}: {\n  date: DateTime | null;\n  constraints: {\n    required?: boolean;\n    unavailable?: {\n      dates?: DateTime[];\n      daysOfWeek?: number[];\n    };\n    minDate?: DateTime;\n    maxDate?: DateTime;\n  };\n}) {\n  const { required, unavailable, minDate, maxDate } = constraints;\n  if (!date) {\n    return required ? false : true;\n  }\n  if (unavailable?.dates?.some((d) => d.equals(date))) {\n    return false;\n  }\n  if (unavailable?.daysOfWeek?.includes(date.weekday)) {\n    return false;\n  }\n  if (minDate && date < minDate) {\n    return false;\n  }\n  if (maxDate && date > maxDate) {\n    return false;\n  }\n  return true;\n}\n"],"names":[],"mappings":";;;AACK,MAAC,QAAQ,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,2RAA2R,EAAE,CAAC;;ACCrf,MAAM,mBAAA,GAAgD;AAAA,EAC3D,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc;AAChB;AAEO,MAAM,wBAAA,GAAqD;AAAA,EAChE,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc;AAChB;;ACAO,SAAS,oBAAoB,MAAA,EAAwB;AAC1D,EAAA,OAAO,QAAA,CAAS,GAAA;AAAA,IACd,OAAO,WAAA,EAAY;AAAA,IACnB,MAAA,CAAO,UAAS,GAAI,CAAA;AAAA,IACpB,OAAO,OAAA;AAAQ,GACjB;AACF;AAEO,SAAS,oBACd,CAAA,EAC6B;AAC7B,EAAA,IAAI,CAAA,KAAM,MAAA,IAAa,CAAA,KAAM,IAAA,EAAM;AACjC,IAAA,OAAO,CAAA;AAAA,EACT;AACA,EAAA,MAAM,IAAA,GAAO,QAAA,CAAS,OAAA,CAAQ,CAAA,EAAG,EAAE,SAAS,IAAA,EAAM,IAAA,EAAM,KAAA,EAAO,CAAA,CAAE,OAAA;AAAA,IAC/D;AAAA,GACF;AACA,EAAA,IAAI,KAAK,OAAA,EAAS;AAChB,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,OAAO,IAAA;AACT;AACO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA;AACF,CAAA,EAWG;AACD,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAa,OAAA,EAAS,SAAQ,GAAI,WAAA;AACpD,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,WAAW,KAAA,GAAQ,IAAA;AAAA,EAC5B;AACA,EAAA,IAAI,WAAA,EAAa,OAAO,IAAA,CAAK,CAAC,MAAM,CAAA,CAAE,MAAA,CAAO,IAAI,CAAC,CAAA,EAAG;AACnD,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,IAAI,WAAA,EAAa,UAAA,EAAY,QAAA,CAAS,IAAA,CAAK,OAAO,CAAA,EAAG;AACnD,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,IAAI,OAAA,IAAW,OAAO,OAAA,EAAS;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,IAAI,OAAA,IAAW,OAAO,OAAA,EAAS;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,OAAO,IAAA;AACT;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/anvil2",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -62,10 +62,10 @@
     "@servicetitan/hammer-token": "2.5.1"
   },
   "peerDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18"
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",