@servicetitan/anvil2 2.2.0 → 2.4.0

package/dist/components/SearchField/internal/SearchField.d.ts

@@ -0,0 +1,73 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { DataTrackingId, LayoutUtilProps, Size } from '../../../types';
+/**
+ * Props for the SearchField component
+ * @extends Omit<ComponentPropsWithoutRef<"input">, "size" | "prefix" | "required" | "children">
+ * @extends LayoutUtilProps
+ */
+export type SearchFieldProps = Omit<ComponentPropsWithoutRef<"input">, "size" | "prefix" | "required" | "children"> & LayoutUtilProps & {
+    /**
+     * Size of the search field
+     * @default "medium"
+     */
+    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
+    /**
+     * Whether the search field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)
+     */
+    onClear?: () => void;
+} & DataTrackingId;
+/**
+ * SearchField component for text input with search functionality.
+ *
+ * Features:
+ * - Search icon prefix for visual clarity
+ * - Clear button that appears when input has value
+ * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)
+ * - Clear button activated with Enter/Space keys
+ * - Focus returns to input after clearing
+ * - Multiple size variants (xsmall, small, medium, large)
+ * - Controlled and uncontrolled modes
+ * - Disabled and read-only states
+ * - Accessibility support with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Automatic value detection for clear button visibility
+ * - Search-specific input type and autocomplete settings
+ * - Screen reader support with placeholder announcements
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SearchField
+ *   placeholder="Search users..."
+ *   onChange={(e) => setSearchTerm(e.target.value)}
+ *   onClear={() => setSearchTerm("")}
+ * />
+ *
+ * @example
+ * <SearchField
+ *   size="large"
+ *   value={searchValue}
+ *   onChange={(e) => setSearchValue(e.target.value)}
+ *   disabled={isLoading}
+ * />
+ */
+export declare const SearchField: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "children" | "prefix" | "required"> & LayoutUtilProps & {
+    /**
+     * Size of the search field
+     * @default "medium"
+     */
+    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
+    /**
+     * Whether the search field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)
+     */
+    onClear?: () => void;
+} & DataTrackingId & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Tab/Tab.d.ts

@@ -8,8 +8,21 @@ import { LayoutUtilProps } from '../../types';
 export type TabProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & LayoutUtilProps & {
     /**
      * The index of the tab that should be active by default.
+     * Use for uncontrolled usage. For controlled usage, use `index` instead.
+     * @default 0
      */
-    defaultIndex: number;
+    defaultIndex?: number;
+    /**
+     * The index of the currently active tab.
+     * Use for controlled usage. For uncontrolled usage, use `defaultIndex` instead.
+     */
+    index?: number;
+    /**
+     * Callback fired when the active tab changes.
+     * Use with `index` for controlled usage.
+     * @param index The index of the newly active tab
+     */
+    onIndexChange?: (index: number) => void;
     /**
      * Whether the tabs should fill the available width.
      * @default false
@@ -27,9 +40,11 @@ export type TabProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart"
  * - Automatic focus management
  * - Scroll behavior for overflow tabs
  * - Compound component pattern with Tab.Button, Tab.List, and Tab.Panel
+ * - Supports controlled state via `index` and `onIndexChange` props
  * - Supports layout utilities for positioning and spacing
  *
  * @example
+ * // Uncontrolled
  * <Tab defaultIndex={0}>
  *   <Tab.List>
  *     <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
@@ -38,12 +53,36 @@ export type TabProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart"
  *   <Tab.Panel id="panel1">Content for first tab</Tab.Panel>
  *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
  * </Tab>
+ *
+ * @example
+ * // Controlled
+ * <Tab index={activeIndex} onIndexChange={setActiveIndex}>
+ *   <Tab.List>
+ *     <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+ *     <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+ *   </Tab.List>
+ *   <Tab.Panel id="panel1">Content for first tab</Tab.Panel>
+ *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
+ * </Tab>
  */
 export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
     /**
      * The index of the tab that should be active by default.
+     * Use for uncontrolled usage. For controlled usage, use `index` instead.
+     * @default 0
+     */
+    defaultIndex?: number;
+    /**
+     * The index of the currently active tab.
+     * Use for controlled usage. For uncontrolled usage, use `defaultIndex` instead.
+     */
+    index?: number;
+    /**
+     * Callback fired when the active tab changes.
+     * Use with `index` for controlled usage.
+     * @param index The index of the newly active tab
      */
-    defaultIndex: number;
+    onIndexChange?: (index: number) => void;
     /**
      * Whether the tabs should fill the available width.
      * @default false

package/dist/components/Tab/internal/TabContext.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, KeyboardEvent, SetStateAction } from 'react';
 type TabContextProps = {
     current: number;
-    setCurrent?: Dispatch<SetStateAction<number>>;
+    setCurrent?: Dispatch<SetStateAction<number | undefined>>;
     focus: number;
     setFocus?: Dispatch<SetStateAction<number>>;
     items?: NodeListOf<HTMLElement>;

package/dist/components/Toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import { ToolbarOverflowTypes } from './types';
+import { ToolbarOverflowTypes, ToolbarSize } from './types';
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { LayoutUtilProps } from '../../types';
 /**
@@ -25,6 +25,11 @@ export type ToolbarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
      * Additional items to display in the overflow menu
      */
     additionalItems?: ReactElement[];
+    /**
+     * Size of toolbar items
+     * @default xsmall
+     */
+    size?: ToolbarSize;
 };
 /**
  * Toolbar component for grouping related interactive elements.
@@ -69,6 +74,11 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      * Additional items to display in the overflow menu
      */
     additionalItems?: ReactElement[];
+    /**
+     * Size of toolbar items
+     * @default xsmall
+     */
+    size?: ToolbarSize;
 } & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
@@ -79,7 +89,6 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      * - Automatic tooltip for icon-only buttons
      * - Overflow menu support
      * - Accessibility enforcement for aria-labels
-     * - Small size optimized for toolbar layout
      * - Ghost and primary appearance options
      * - Automatic tracking ID generation for analytics
      *
@@ -101,7 +110,6 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      * - Consistent styling with other toolbar items
      * - Overflow menu support
      * - Accessibility enforcement for aria-labels
-     * - Small size optimized for toolbar layout
      * - Ghost and primary appearance options
      * - Automatic tracking ID generation for analytics
      *
@@ -118,7 +126,6 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      * - Consistent styling with other toolbar items
      * - Overflow menu support
      * - Accessibility enforcement for aria-labels
-     * - Small size optimized for toolbar layout
      * - Ghost and primary appearance options
      * - Automatic tracking ID generation for analytics
      *
@@ -136,7 +143,6 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      * - Controlled and uncontrolled usage patterns
      * - Automatic overflow menu integration
      * - Accessibility support with proper ARIA labels
-     * - Small size optimized for toolbar layout
      * - Ghost and primary appearance options
      * - Dropdown arrow icon indicator
      * - Listbox integration for keyboard navigation

package/dist/components/Toolbar/ToolbarButton.d.ts

@@ -30,7 +30,6 @@ export type ToolbarButtonProps = WithAriaLabelEnforcement<ToolbarButtonBaseProps
  * - Automatic tooltip for icon-only buttons
  * - Overflow menu support
  * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
  * - Ghost and primary appearance options
  *
  * @example

package/dist/components/Toolbar/ToolbarButtonLink.d.ts

@@ -27,7 +27,6 @@ export type ToolbarButtonLinkProps = WithAriaLabelEnforcement<ToolbarButtonLinkB
  * - Automatic tooltip for icon-only links
  * - Overflow menu support
  * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
  * - Ghost and primary appearance options
  * - Proper anchor element semantics
  *

package/dist/components/Toolbar/ToolbarButtonToggle.d.ts

@@ -21,7 +21,6 @@ export type ToolbarButtonToggleProps = WithAriaLabelEnforcement<ToolbarButtonTog
  * - Automatic tooltip for icon-only toggles
  * - Overflow menu support
  * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
  * - Visual feedback for toggle state
  * - Proper ARIA attributes for toggle semantics
  *

package/dist/components/Toolbar/ToolbarSelect.d.ts

@@ -44,7 +44,6 @@ export type ToolbarSelectProps<T = Record<string, unknown>> = Omit<React.Compone
  * - Controlled and uncontrolled usage patterns
  * - Automatic overflow menu integration
  * - Accessibility support with proper ARIA labels
- * - Small size optimized for toolbar layout
  * - Ghost and primary appearance options
  * - Dropdown arrow icon indicator
  * - Listbox integration for keyboard navigation

package/dist/components/Toolbar/internal/{ToolbarOverflowContext.d.ts → ToolbarContext.d.ts}

@@ -1,9 +1,9 @@
 import { RefObject } from 'react';
-import { ToolbarItemProps, ToolbarOverflowTypes } from '../types';
+import { ToolbarItemProps, ToolbarOverflowTypes, ToolbarSize } from '../types';
 /**
- * Context for sharing toolbar state with child components for overflow handling
+ * Context for sharing toolbar state with child components
  */
-export type ToolbarOverFlowContextProps = {
+export type ToolbarContextProps = {
     /**
      * Array of toolbar items that should appear in the overflow menu
      */
@@ -28,8 +28,17 @@ export type ToolbarOverFlowContextProps = {
      * Overflow behavior type (wrap or collapse)
      */
     overflow: ToolbarOverflowTypes;
+    /**
+     * Size of toolbar child components
+     */
+    size: ToolbarSize;
 };
 /**
- * Context for managing toolbar overflow state and operations
+ * Context for managing toolbar state including overflow and size
+ */
+export declare const ToolbarContext: import('react').Context<ToolbarContextProps>;
+/**
+ * Hook to access the toolbar size from context
+ * @returns The current toolbar size
  */
-export declare const ToolbarOverflowContext: import('react').Context<ToolbarOverFlowContextProps>;
+export declare const useToolbarSize: () => ToolbarSize;

package/dist/components/Toolbar/internal/utils/test.d.ts

@@ -3,7 +3,7 @@ import { ToolbarOverflowTypes } from '../../types';
 export declare const withOverflowItemContext: (children: ReactNode, isInOverflowMenu?: boolean) => import('react').FunctionComponentElement<import('react').ProviderProps<{
     isInOverflowMenu: boolean;
 }>>;
-export declare const createMockOverflowContext: (overrides?: {}) => {
+export declare const createMockToolbarContext: (overrides?: {}) => {
     overflowItems: never[];
     orderedIds: never[];
     addItem: import('vitest').Mock<(...args: any[]) => any>;
@@ -12,8 +12,9 @@ export declare const createMockOverflowContext: (overrides?: {}) => {
         current: HTMLDivElement;
     };
     overflow: ToolbarOverflowTypes;
+    size: "xsmall";
 };
-export declare const withToolbarOverflowContext: (children: ReactNode, contextValue?: {
+export declare const withToolbarContext: (children: ReactNode, contextValue?: {
     overflowItems: never[];
     orderedIds: never[];
     addItem: import('vitest').Mock<(...args: any[]) => any>;
@@ -22,7 +23,8 @@ export declare const withToolbarOverflowContext: (children: ReactNode, contextVa
         current: HTMLDivElement;
     };
     overflow: ToolbarOverflowTypes;
-}) => import('react').FunctionComponentElement<import('react').ProviderProps<import('../ToolbarOverflowContext').ToolbarOverFlowContextProps>>;
+    size: "xsmall";
+}) => import('react').FunctionComponentElement<import('react').ProviderProps<import('../ToolbarContext').ToolbarContextProps>>;
 export declare const mockIntersectionObserver: import('vitest').Mock<(...args: any[]) => any>;
 export declare const observerMap: Map<any, any>;
 export declare const createIntersectionEntry: (element: Element, isIntersecting: boolean) => IntersectionObserverEntry;

package/dist/components/Toolbar/types.d.ts

@@ -1,9 +1,13 @@
-import { ButtonAppearance } from '../../types';
+import { ButtonAppearance, Size } from '../../types';
 import { IconProps } from '../Icon';
 import { ToolbarButtonProps } from './ToolbarButton';
 import { ToolbarButtonLinkProps } from './ToolbarButtonLink';
 import { ToolbarButtonToggleProps } from './ToolbarButtonToggle';
 import { ToolbarSelectProps } from './ToolbarSelect';
+/**
+ * Toolbar size options
+ */
+export type ToolbarSize = Extract<Size, "xsmall" | "small" | "medium" | "large">;
 /**
  * Toolbar overflow options
  */

package/dist/{index-DFvIVS57.js → index-ClUtwV8V.js}

@@ -3,7 +3,7 @@ import { I as Icon } from './Icon-Bcil6aBo.js';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { c as cx } from './index-SvGbrGuT.js';
-import { B as ButtonCompound } from './ButtonCompound-CX2kHgWe.js';
+import { B as ButtonCompound } from './ButtonCompound-D9VTKcL4.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" }));
 
@@ -104,4 +104,4 @@ const Dnd = {
 };
 
 export { Dnd as D, DndSortLine as a, DndHandleButton as b, DndHandle as c, styles as s };
-//# sourceMappingURL=index-DFvIVS57.js.map
+//# sourceMappingURL=index-ClUtwV8V.js.map

package/dist/{index-DFvIVS57.js.map → index-ClUtwV8V.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-DFvIVS57.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":";;;;;;;AACA,MAAM,gBAAgB,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,qSAAqS,EAAE,CAAC,CAAC;;;;;;;;;;AC4BxgB,SAAS,SAAA,CAAU,EAAE,SAAA,EAAU,EAA2B;AAC/D,EAAA,MAAM,aAAA,GAAgB,EAAA,CAAGA,YAAA,CAAO,MAAA,EAAQ,SAAS,CAAA;AACjD,EAAA,2BACG,IAAA,EAAA,EAAK,GAAA,EAAKC,kBAAe,SAAA,EAAW,aAAA,EAAe,MAAK,cAAA,EAAe,CAAA;AAE5E;;ACKO,MAAM,eAAA,GAAkB,UAAA,CAG7B,CAAC,EAAE,QAAA,GAAW,OAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACpD,EAAA,MAAM,mBAAA,GAAsB,EAAA,CAAG,SAAA,EAAW,YAAA,CAAa,eAAe,CAAA,EAAG;AAAA,IACvE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,GAC3B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,mBAAA;AAAA,MACX,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAM,SAAA;AAAA,MACN,YAAA,EAAW,aAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,GACb;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;;;;;;;;;;;;;ACjBvB,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAqB;AACnB,EAAA,MAAM,OAAA,GAAU,EAAA;AAAA,IACd,OAAO,WAAW,CAAA;AAAA,IAClB,MAAA,CAAO,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAA;AAAA,IACnC,MAAA,CAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE;AAAA,GAC/B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EAAO,EAAE,oBAAA,EAAsB,MAAA,EAAO;AAAA,MACrC,GAAG;AAAA;AAAA,GACN;AAEJ;;ACLO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CACE;AAAA,IACE,IAAI,SAAA,GAAY,KAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,GAAG,SAAA,EAAW;AAAA,MAC5B,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,IAAA;AAAA,MACvB,CAAC,MAAA,CAAO,YAAY,CAAC,GAAG,cAAc,MAAA,IAAU,OAAA;AAAA,MAChD,CAAC,MAAA,CAAO,cAAc,CAAC,GAAG,UAAA,IAAc,UAAU,CAAC,OAAA;AAAA,MACnD,CAAC,MAAA,CAAO,iBAAiB,CAAC,GAAG,cAAc,CAAC;AAAA,KAC7C,CAAA;AAED,IAAA,2BACG,SAAA,EAAA,EAAU,GAAA,EAAU,WAAW,OAAA,EAAU,GAAG,MAC1C,QAAA,EACH,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,OAAA,CAAQ,WAAA,GAAc,aAAA;;AClFf,MAAM,GAAA,GAAM;AAAA,EACjB,MAAA,EAAQ,SAAA;AAAA,EACR,YAAA,EAAc,eAAA;AAAA,EACd,QAAA,EAAU,WAAA;AAAA,EACV,IAAA,EAAM;AACR;;;;"}
+{"version":3,"file":"index-ClUtwV8V.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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"}