@servicetitan/anvil2 1.48.1 → 1.49.1

package/dist/components/DateFieldYearless/internal/YearlessDateInput.d.ts

@@ -0,0 +1,51 @@
+import { InputHTMLAttributes } from 'react';
+import { YearlessDateMode, YearlessDate } from '../types';
+import { PassThroughPropsWithRef, Size } from '../../../types';
+export type YearlessDateInputChange = {
+    event: React.ChangeEvent<HTMLInputElement> | null;
+    value: YearlessDate | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+export type YearlessDateInputChangeHandler = (change: YearlessDateInputChange) => void;
+export type YearlessDateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "ref" | "size"> & {
+    onChange: YearlessDateInputChangeHandler;
+    mode?: YearlessDateMode;
+    value?: YearlessDate | null;
+    error?: boolean;
+    size?: Extract<Size, "small" | "medium" | "large">;
+    wrapperProps?: PassThroughPropsWithRef<"div">;
+    rootProps?: PassThroughPropsWithRef<"div">;
+    loading?: boolean;
+    enableStepping?: boolean;
+};
+export type YearlessDateInputRef = HTMLInputElement & {
+    setValue: (value: YearlessDate | null) => {
+        value: YearlessDate | null;
+        isInputValid: boolean;
+        isInputEmpty: boolean;
+    };
+    removePlaceholder: (value: string) => string;
+};
+/**
+ * A masked date input component that allows for the input of a date in a specific format.
+ *
+ * Provides a `setDate` method that can be used to set the date from outside the component (e.g from a calendar).
+ *
+ * @internal This component is not intended to be used directly in consumer code.
+ *
+ * @param props - The props for the MaskedDateInput component.
+ * @param props.onChange - The function to call when the date changes.
+ * @param props.mode - The mode of the date input.
+ */
+export declare const YearlessDateInput: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ref" | "value" | "onChange"> & {
+    onChange: YearlessDateInputChangeHandler;
+    mode?: YearlessDateMode;
+    value?: YearlessDate | null;
+    error?: boolean;
+    size?: Extract<Size, "small" | "medium" | "large">;
+    wrapperProps?: PassThroughPropsWithRef<"div">;
+    rootProps?: PassThroughPropsWithRef<"div">;
+    loading?: boolean;
+    enableStepping?: boolean;
+} & import('react').RefAttributes<YearlessDateInputRef>>;

package/dist/components/DateFieldYearless/internal/YearlessDateInputWithPicker.d.ts

@@ -0,0 +1,134 @@
+import { InputHTMLAttributes } from 'react';
+import { YearlessDateMode, YearlessDate } from '../types';
+import { DateFieldYearlessChangeHandler } from '../DateFieldYearless';
+import { Size } from '../../../types';
+export type YearlessDateInputWithPickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "ref" | "size" | "defaultValue" | "onFocus" | "onBlur"> & {
+    /**
+     * The controlled value of the date field
+     */
+    value?: YearlessDate | null;
+    /**
+     * The default value for uncontrolled usage
+     */
+    defaultValue?: YearlessDate | null;
+    /**
+     * The function to call when the date value changes
+     */
+    onChange?: DateFieldYearlessChangeHandler;
+    /**
+     * The date format mode (mm/dd or dd/mm)
+     */
+    mode?: YearlessDateMode;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * The minimum allowed date
+     */
+    minDate?: YearlessDate | null;
+    /**
+     * The maximum allowed date
+     */
+    maxDate?: YearlessDate | null;
+    /**
+     * Configuration for unavailable dates
+     */
+    unavailable?: {
+        /**
+         * Array of dates that are not selectable
+         */
+        dates?: YearlessDate[];
+    };
+    /**
+     * Whether the picker is disabled
+     */
+    disablePicker?: boolean;
+    /**
+     * The size of the input
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * Whether the input has an error
+     */
+    error?: boolean;
+    /**
+     * Whether the input is in loading state
+     */
+    loading?: boolean;
+    /**
+     * Function to call when the input is focused
+     */
+    onFocus?: (event: React.FocusEvent) => void;
+    /**
+     * Function to call when the input is blurred
+     */
+    onBlur?: (event: React.FocusEvent) => void;
+};
+export type YearlessDateInputWithPickerRef = {
+    focus: () => void;
+    setValue: (value: YearlessDate | null) => void;
+};
+export declare const YearlessDateInputWithPicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ref" | "value" | "onBlur" | "onFocus" | "onChange" | "defaultValue"> & {
+    /**
+     * The controlled value of the date field
+     */
+    value?: YearlessDate | null;
+    /**
+     * The default value for uncontrolled usage
+     */
+    defaultValue?: YearlessDate | null;
+    /**
+     * The function to call when the date value changes
+     */
+    onChange?: DateFieldYearlessChangeHandler;
+    /**
+     * The date format mode (mm/dd or dd/mm)
+     */
+    mode?: YearlessDateMode;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * The minimum allowed date
+     */
+    minDate?: YearlessDate | null;
+    /**
+     * The maximum allowed date
+     */
+    maxDate?: YearlessDate | null;
+    /**
+     * Configuration for unavailable dates
+     */
+    unavailable?: {
+        /**
+         * Array of dates that are not selectable
+         */
+        dates?: YearlessDate[];
+    };
+    /**
+     * Whether the picker is disabled
+     */
+    disablePicker?: boolean;
+    /**
+     * The size of the input
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * Whether the input has an error
+     */
+    error?: boolean;
+    /**
+     * Whether the input is in loading state
+     */
+    loading?: boolean;
+    /**
+     * Function to call when the input is focused
+     */
+    onFocus?: (event: React.FocusEvent) => void;
+    /**
+     * Function to call when the input is blurred
+     */
+    onBlur?: (event: React.FocusEvent) => void;
+} & import('react').RefAttributes<YearlessDateInputWithPickerRef>>;

package/dist/components/DateFieldYearless/internal/YearlessDateSelectionPopover.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { YearlessDateMode } from '..';
+import { PopoverTriggerProps } from '../../Popover/PopoverTrigger';
+/**
+ * Props for the YearlessDateSelectionPopover component
+ */
+export type YearlessDateSelectionPopoverProps = {
+    popoverRef: RefObject<{
+        openPopover: () => void;
+        closePopover: () => void;
+    }>;
+    popoverContentRef: RefObject<HTMLDivElement>;
+    month: number | null;
+    day: number | null;
+    onMonthChange: (month: number | null) => void;
+    onDayChange: (day: number | null) => void;
+    onClose: () => void;
+    mode: YearlessDateMode;
+    onFocus?: (event: React.FocusEvent) => void;
+    onBlur?: (event: React.FocusEvent) => void;
+} & PopoverTriggerProps;
+/**
+ * A yearless date selection tool built into a popover.
+ * @param param0
+ * @returns
+ */
+export declare function YearlessDateSelectionPopover({ children, popoverRef, popoverContentRef, month, day, onMonthChange, onDayChange, onClose, mode, onFocus, onBlur, }: YearlessDateSelectionPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateFieldYearless/internal/maskito/yearlessDatePlaceholderMask.d.ts

@@ -1,6 +1,7 @@
 import { YearlessDateMode } from '../../types';
-declare const yearlessDatePlaceholderMask: ({ mode, separator, placeholder, }: {
+declare const yearlessDatePlaceholderMask: ({ mode, separator, placeholder, enableStepping, }: {
     mode: YearlessDateMode;
+    enableStepping: boolean;
     separator?: string;
     placeholder: string;
 }) => {
@@ -12,5 +13,6 @@ declare const yearlessDatePlaceholderMask: ({ mode, separator, placeholder, }: {
         overwriteMode: "replace" | "shift" | ((elementState: import('@maskito/core/src/lib/types').ElementState) => "replace" | "shift");
     };
     removePlaceholder: (value: string) => string;
+    transform: (value: string) => string;
 };
 export default yearlessDatePlaceholderMask;

package/dist/components/DateFieldYearless/internal/maskito/yearlessDateSegmentsStepping.d.ts

@@ -0,0 +1,12 @@
+import { MaskitoPlugin } from '@maskito/core';
+import { YearlessDateMode } from '../../types';
+/**
+ * Creates a Maskito plugin for yearless date segment stepping
+ * @param mode - The date format mode (mm/dd or dd/mm)
+ * @returns MaskitoPlugin that handles arrow key navigation
+ * @example
+ * const plugin = createYearlessDateSegmentsSteppingPlugin({ mode: "mm/dd" });
+ */
+export declare function createYearlessDateSegmentsSteppingPlugin({ mode, }: {
+    mode: YearlessDateMode;
+}): MaskitoPlugin;

package/dist/components/DateFieldYearless/internal/utils.d.ts

@@ -1,4 +1,4 @@
-import { YearlessDate } from '../types';
+import { YearlessDate, YearlessDateMode } from '../types';
 export declare function validateYearlessDate({ value, constraints, }: {
     value: YearlessDate | null;
     constraints: {
@@ -10,3 +10,52 @@ export declare function validateYearlessDate({ value, constraints, }: {
         maxDate?: YearlessDate | null;
     };
 }): boolean;
+/**
+ * Return list of months
+ * 🌍 localeName: name of local,
+ *  ✅ monthFormat: short, numeric, long (Default)
+ */
+export declare function getMonthNames({ locale, format, }: {
+    locale: string;
+    format: Intl.DateTimeFormatOptions["month"];
+}): string[];
+/**
+ * Given a text value, parse it into a YearlessDate object and validate it.
+ * @param value - The text value to parse.
+ * @param mode - The mode of the date input.
+ * @param removePlaceholder - The function to remove the placeholder from the text value.
+ * @returns An object containing the parsed YearlessDate object, the input validity, and the input emptiness.
+ */
+export declare function parseInputValue(value: string, mode: YearlessDateMode, removePlaceholder: (value: string) => string): {
+    value: YearlessDate | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+/**
+ * Swap the mode of a date input.
+ * @param inputString - The text value to swap the mode of.
+ * @param previousMode - The previous mode of the date input.
+ * @param mode - The new mode of the date input.
+ * @returns The text value with the new mode.
+ */
+export declare function swapMode(inputString: string, previousMode: YearlessDateMode, mode: YearlessDateMode): string;
+/**
+ * Convert a YearlessDate object into a text value.
+ * @param day - The day of the date.
+ * @param month - The month of the date.
+ * @param mode - The mode of the date input.
+ * @returns The stringified date.
+ */
+export declare function stringifyYearlessDate(day: number | string | null, month: number | string | null, mode: YearlessDateMode): string;
+/**
+ * Get the number of days in a given month.
+ * @param month - The month number (1-12)
+ * @returns The number of days in the month
+ */
+export declare function getDaysInMonth(month: number): number;
+/**
+ * Get months that don't have enough days for the given day.
+ * @param day - The day number (1-31)
+ * @returns Array of month numbers that don't have enough days for the given day
+ */
+export declare function getInvalidMonthsForDay(day: number): number[];

package/dist/components/DateFieldYearlessRange/DateFieldYearlessRange.d.ts

@@ -0,0 +1,59 @@
+import { ReactElement } from 'react';
+import { HelperProps } from '../../internal/components';
+import { LayoutUtilProps, Size } from '../../types';
+import { FieldLabelProps } from '../FieldLabel';
+import { YearlessDate, YearlessDateMode } from '../DateFieldYearless/types';
+export type DateFieldYearlessRangeValue = {
+    startDate: YearlessDate | null;
+    endDate: YearlessDate | null;
+};
+export type DateFieldYearlessRangeChange = {
+    startDate: YearlessDate | null;
+    endDate: YearlessDate | null;
+};
+export type DateFieldYearlessRangeChangeHandler = (change: DateFieldYearlessRangeChange) => void;
+export type DateFieldYearlessRangeProps = {
+    /**
+     * The controlled value of the date field
+     */
+    value?: DateFieldYearlessRangeValue;
+    /**
+     * The default value for uncontrolled usage
+     */
+    defaultValue?: DateFieldYearlessRangeValue;
+    /**
+     * The function to call when the date value changes
+     */
+    onChange?: DateFieldYearlessRangeChangeHandler;
+    /**
+     * The date format mode (mm/dd or dd/mm)
+     */
+    mode?: YearlessDateMode;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disablePicker?: boolean;
+    /**
+     * Whether to disable the hint
+     */
+    disableHint?: boolean;
+    error?: ReactElement | string | boolean;
+    label: string;
+    hideLabel?: boolean;
+    size?: Extract<Size, "small" | "medium" | "large">;
+    description?: HelperProps["description"];
+    errorAriaLive?: HelperProps["errorAriaLive"];
+    disabled?: boolean;
+    onFocus?: (event: React.FocusEvent) => void;
+    onBlur?: (event: React.FocusEvent) => void;
+    id?: string;
+    startLabel?: string;
+    endLabel?: string;
+    legendProps?: Omit<FieldLabelProps, "el">;
+    moreInfo?: FieldLabelProps["moreInfo"];
+} & LayoutUtilProps;
+export declare const DateFieldYearlessRange: (props: DateFieldYearlessRangeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateFieldYearlessRange/index.d.ts

@@ -0,0 +1 @@
+export * from './DateFieldYearlessRange';

package/dist/components/Dnd/DndHandleButton.d.ts

@@ -16,7 +16,7 @@ export interface DndHandleButtonProps extends React.ComponentPropsWithoutRef<typ
  * Features:
  * - Interactive button with drag handle icon
  * - Visual feedback for active drag state
- * - Accessible with proper ARIA attributes
+ * - Accessible with proper ARIA attributes (defaults to "Drag handle")
  * - Extends ButtonCompound functionality
  * - Customizable styling through className prop
  * - Supports all standard button props
@@ -25,6 +25,7 @@ export interface DndHandleButtonProps extends React.ComponentPropsWithoutRef<typ
  * @example
  * <DndHandleButton
  *   isActive={isDragging}
+ *   aria-label="Drag task item"
  *   className="custom-handle-button"
  *   onClick={handleClick}
  * />

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ElementType, JSX, JSXElementConstructor } from 'react';
 import { TooltipProps } from '../Tooltip';
-/**
- * Props for the FieldLabel component.
- */
-export type FieldLabelProps = Omit<ComponentPropsWithoutRef<"label">, "id"> & {
+type IntrinsicAttributes<E extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown>> = JSX.LibraryManagedAttributes<E, ComponentPropsWithoutRef<E>>;
+type FieldLabelOwnProps<E extends ElementType = ElementType> = {
+    /** The HTML element to render */
+    el?: E;
     /** Unique identifier for the label element */
     id?: string;
     /**
@@ -20,47 +20,8 @@ export type FieldLabelProps = Omit<ComponentPropsWithoutRef<"label">, "id"> & {
     openMoreInfo?: TooltipProps["open"];
 };
 /**
- * FieldLabel component for form field labels with optional required indicator and help tooltip.
- *
- * Features:
- * - Accessible form label with proper semantic HTML
- * - Optional required field indicator with red asterisk
- * - Help tooltip with info icon for additional context
- * - Screen reader support for required field announcement
- * - Controlled and uncontrolled tooltip state management
- * - Flexible content support for label text and help information
- * - Proper ARIA attributes and semantic structure
- * - Responsive design with consistent typography
- *
- * @example
- * <FieldLabel htmlFor="email" required>
- *   Email Address
- * </FieldLabel>
- * <input id="email" type="email" />
- *
- * @example
- * <FieldLabel
- *   htmlFor="password"
- *   required
- *   moreInfo="Password must be at least 8 characters long"
- * >
- *   Password
- * </FieldLabel>
- * <input id="password" type="password" />
+ * Props for the FieldLabel component.
  */
-export declare const FieldLabel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "id"> & {
-    /** Unique identifier for the label element */
-    id?: string;
-    /**
-     * Whether the field is required. Shows a red asterisk (*) when true.
-     * @default false
-     */
-    required?: boolean;
-    /** Additional information to display in a tooltip */
-    moreInfo?: ReactNode;
-    /**
-     * Controls the open state of the more info tooltip.
-     * @default false
-     */
-    openMoreInfo?: TooltipProps["open"];
-} & import('react').RefAttributes<HTMLLabelElement>>;
+export type FieldLabelProps<E extends ElementType = ElementType> = FieldLabelOwnProps<E> & Omit<IntrinsicAttributes<E>, keyof FieldLabelOwnProps>;
+export declare const FieldLabel: <E extends ElementType = "label">(props: FieldLabelProps<E>) => JSX.Element;
+export {};

package/dist/components/FieldLabel/internal/FieldLabelMoreInfoIcon.d.ts

@@ -5,8 +5,10 @@ import { FieldLabelProps } from '../FieldLabel';
  * @param props - Component props
  * @param props.moreInfo - The content to display in the tooltip
  * @param props.openMoreInfo - Controls the tooltip open state
+ * @param props.listenForHover - Whether to listen for hover events
  */
-export declare const FieldLabelMoreInfoIcon: ({ moreInfo, openMoreInfo, }: {
+export declare const FieldLabelMoreInfoIcon: ({ moreInfo, openMoreInfo, listenForHover, }: {
     moreInfo: FieldLabelProps["moreInfo"];
     openMoreInfo: FieldLabelProps["openMoreInfo"];
+    listenForHover?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -397,6 +397,7 @@ export declare const Popover: import('react').ForwardRefExoticComponent<{
      */
     Content: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "popover"> & {
         scrollerRef?: import('react').RefObject<HTMLDivElement>;
+        hideWhileClosed?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * PopoverClose component for closing the popover.

package/dist/components/Popover/PopoverContent.d.ts

@@ -8,6 +8,10 @@ export type PopoverContentProps = Omit<ComponentPropsWithoutRef<"div">, "popover
      * Reference to the scrollable content area
      */
     scrollerRef?: RefObject<HTMLDivElement>;
+    /**
+     * Whether to remove the content from the DOM while the popover is closed
+     */
+    hideWhileClosed?: boolean;
 };
 /**
  * PopoverContent component for the main popover content area.
@@ -43,4 +47,8 @@ export declare const PopoverContent: import('react').ForwardRefExoticComponent<O
      * Reference to the scrollable content area
      */
     scrollerRef?: RefObject<HTMLDivElement>;
+    /**
+     * Whether to remove the content from the DOM while the popover is closed
+     */
+    hideWhileClosed?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './DateField';
 export * from './DateFieldRange';
 export * from './DateFieldSingle';
 export * from './DateFieldYearless';
+export * from './DateFieldYearlessRange';
 export * from './DaysOfTheWeek';
 export * from './Details';
 export * from './Dialog';

package/dist/{index-CUVkL0hr.js → index-ByS9WvPk.js}

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { I as Icon } from './Icon-TcJbUdTz.js';
+import { I as Icon } from './Icon-BSuTVNaa.js';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { B as ButtonCompound } from './ButtonCompound-Dvr3Fres.js';
+import { B as ButtonCompound } from './ButtonCompound-COdSELhh.js';
 
 import './index.css';const SvgDragIndicator = (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: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
 
@@ -31,6 +31,7 @@ const DndHandleButton = forwardRef(({ isActive = false, className, ...props }, r
       className: handleButtonClasses,
       type: "button",
       shape: "rounded",
+      "aria-label": "Drag handle",
       ...props,
       children: /* @__PURE__ */ jsx(DndHandle, {})
     }
@@ -103,4 +104,4 @@ const Dnd = {
 };
 
 export { Dnd as D, DndSortLine as a, DndHandleButton as b, DndHandle as c, styles as s };
-//# sourceMappingURL=index-CUVkL0hr.js.map
+//# sourceMappingURL=index-ByS9WvPk.js.map

package/dist/index-ByS9WvPk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-ByS9WvPk.js","sources":["../../hammer-icon/mdi/round/drag_indicator.svg","../src/components/Dnd/DndHandle.tsx","../src/components/Dnd/DndHandleButton.tsx","../src/components/Dnd/DndSortLine.tsx","../src/components/Dnd/DndZone.tsx","../src/components/Dnd/index.ts"],"sourcesContent":["import * as React from \"react\";\nconst SvgDragIndicator = (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: \"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" }));\nexport default SvgDragIndicator;\n","import { Icon } from \"../Icon\";\nimport DragIndicator from \"@servicetitan/hammer-icon/mdi/round/drag_indicator.svg\";\nimport styles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DndHandle component\n */\nexport type DndHandleProps = {\n  /**\n   * Additional CSS class names to apply to the drag handle.\n   */\n  className?: string;\n};\n\n/**\n * A reusable drag handle icon component for drag and drop interactions.\n *\n * Features:\n * - Standardized drag indicator icon\n * - Accessible with proper ARIA attributes\n * - Customizable styling through className prop\n * - Consistent visual appearance across applications\n * - Lightweight and performant\n * - Supports all standard HTML element props\n *\n * @example\n * <DndHandle className=\"custom-drag-handle\" />\n */\nexport function DndHandle({ className }: { className?: string }) {\n  const handleClasses = cx(styles.handle, className);\n  return (\n    <Icon svg={DragIndicator} className={handleClasses} role=\"presentation\" />\n  );\n}\n","import { ButtonCompound } from \"../ButtonCompound\";\nimport handleStyles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { DndHandle } from \"./DndHandle\";\n\n/**\n * Props for the DndHandleButton component\n * @extends React.ComponentPropsWithoutRef<typeof ButtonCompound>\n */\nexport interface DndHandleButtonProps\n  extends React.ComponentPropsWithoutRef<typeof ButtonCompound> {\n  /**\n   * Indicates whether the handle is currently being dragged.\n   * @default false\n   */\n  isActive?: boolean;\n}\n\n/**\n * A reusable drag handle button component for drag and drop functionality.\n *\n * Features:\n * - Interactive button with drag handle icon\n * - Visual feedback for active drag state\n * - Accessible with proper ARIA attributes (defaults to \"Drag handle\")\n * - Extends ButtonCompound functionality\n * - Customizable styling through className prop\n * - Supports all standard button props\n * - Consistent visual appearance across applications\n *\n * @example\n * <DndHandleButton\n *   isActive={isDragging}\n *   aria-label=\"Drag task item\"\n *   className=\"custom-handle-button\"\n *   onClick={handleClick}\n * />\n */\nexport const DndHandleButton = forwardRef<\n  HTMLButtonElement,\n  DndHandleButtonProps\n>(({ isActive = false, className, ...props }, ref) => {\n  const handleButtonClasses = cx(className, handleStyles[\"handle-button\"], {\n    [handleStyles[\"active\"]]: isActive,\n  });\n\n  return (\n    <ButtonCompound\n      ref={ref}\n      className={handleButtonClasses}\n      type=\"button\"\n      shape=\"rounded\"\n      aria-label=\"Drag handle\"\n      {...props}\n    >\n      <DndHandle />\n    </ButtonCompound>\n  );\n});\n\nDndHandleButton.displayName = \"DndHandleButton\";\n","import cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\nimport { CSSProperties } from \"react\";\n\n/**\n * Props for the DndSortLine component\n * @extends React.ComponentPropsWithoutRef<\"div\">\n */\nexport type SortLineProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /**\n   * The offset of the line from the item. This is a CSS value, typically negative.\n   */\n  offset: string;\n  /**\n   * The orientation of the sort - Note this may be counterintuitive, as the line is rendered perpendicular to the sort.\n   */\n  orientation: \"horizontal\" | \"vertical\";\n  /**\n   * The position of the line relative to a target item.\n   */\n  position: \"before\" | \"after\";\n};\n\n/**\n * A visual indicator line that shows where an item will be dropped during drag and drop operations.\n *\n * Features:\n * - Visual feedback for drop positioning\n * - Configurable orientation (horizontal/vertical)\n * - Adjustable positioning (before/after)\n * - Customizable offset for precise placement\n * - Accessible with proper ARIA attributes\n * - Automatic CSS class management\n * - Supports all standard HTML div props\n *\n * @example\n * <DndSortLine\n *   offset=\"-10px\"\n *   orientation=\"vertical\"\n *   position=\"after\"\n *   className=\"custom-drop-line\"\n * />\n */\nexport const DndSortLine = ({\n  offset,\n  orientation,\n  position,\n  ...rest\n}: SortLineProps) => {\n  const classes = cx(\n    styles[\"drop-line\"],\n    styles[`orientation-${orientation}`],\n    styles[`position-${position}`],\n  );\n\n  return (\n    <div\n      aria-hidden\n      className={classes}\n      style={{ \"--drop-line-offset\": offset } as CSSProperties}\n      {...rest}\n    />\n  );\n};\n","import { ElementType, forwardRef, ReactNode } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\n\n/**\n * Props for the DndZone component\n * @extends Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">\n */\nexport type DndZoneProps<T extends ElementType = \"div\"> = {\n  /**\n   * The HTML element type to render. Can be any valid HTML element or React component.\n   * @default \"div\"\n   */\n  el?: T;\n  /**\n   * The content to be rendered inside the drop zone.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names to apply to the drop zone.\n   */\n  className?: string;\n  /**\n   * Indicates whether a draggable item is currently over this drop zone.\n   */\n  isOver: boolean;\n  /**\n   * Indicates whether the current drag operation is valid for this drop zone.\n   */\n  isValid: boolean;\n  /**\n   * Indicates whether any item is currently being dragged.\n   */\n  isDragging: boolean;\n} & Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">;\n\n/**\n * Base styling component for drop zones that handles visual states and styling.\n *\n * Features:\n * - Configurable HTML element rendering with the 'el' prop\n * - Visual feedback for drag states (over, valid, dragging)\n * - Automatic CSS class management based on drag state\n * - Supports all standard HTML element props\n * - Accessible with proper ARIA attributes\n * - Flexible styling through className prop\n * - Responsive design that adapts to container\n *\n * @example\n * <DndZone\n *   isOver={isOver}\n *   isValid={isValid}\n *   isDragging={isDragging}\n *   className=\"custom-drop-zone\"\n * >\n *   Drop items here\n * </DndZone>\n */\nexport const DndZone = forwardRef<HTMLDivElement, DndZoneProps<ElementType>>(\n  (\n    {\n      el: Component = \"div\" as ElementType,\n      children,\n      className,\n      isDragging,\n      isOver,\n      isValid,\n      ...rest\n    },\n    ref,\n  ) => {\n    const classes = cx(className, {\n      [styles[\"drop-zone\"]]: true,\n      [styles[\"over-valid\"]]: isDragging && isOver && isValid,\n      [styles[\"over-invalid\"]]: isDragging && isOver && !isValid,\n      [styles[\"active-not-over\"]]: isDragging && !isOver,\n    });\n\n    return (\n      <Component ref={ref} className={classes} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nDndZone.displayName = \"DndZoneBase\";\n","import { DndHandle } from \"./DndHandle\";\nimport { DndHandleButton } from \"./DndHandleButton\";\nimport { DndSortLine } from \"./DndSortLine\";\nimport { DndZone } from \"./DndZone\";\n\nexport const Dnd = {\n  Handle: DndHandle,\n  HandleButton: DndHandleButton,\n  SortLine: DndSortLine,\n  Zone: DndZone,\n};\n"],"names":["styles","DragIndicator"],"mappings":"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"}

package/dist/{index.esm-BwMVvxTV.js → index.esm-C2ZhC_8d.js}

@@ -3008,5 +3008,5 @@ function maskitoNumberOptionsGenerator({ max = Number.MAX_SAFE_INTEGER, min = Nu
             : 'shift' });
 }
 
-export { maskitoWithPlaceholder as a, maskitoParseDate as b, maskitoDateRangeOptionsGenerator as c, maskitoNumberOptionsGenerator as d, maskitoParseNumber as e, maskitoStringifyNumber as f, maskitoTimeOptionsGenerator as g, maskitoDateOptionsGenerator as m, useMaskito as u };
-//# sourceMappingURL=index.esm-BwMVvxTV.js.map
+export { maskitoWithPlaceholder as a, maskitoParseDate as b, maskitoDateRangeOptionsGenerator as c, maskitoNumberOptionsGenerator as d, maskitoParseNumber as e, maskitoStringifyNumber as f, maskitoUpdateElement as g, maskitoTransform as h, maskitoTimeOptionsGenerator as i, maskitoDateOptionsGenerator as m, useMaskito as u };
+//# sourceMappingURL=index.esm-C2ZhC_8d.js.map