@servicetitan/anvil2 3.0.0 → 3.0.2

package/dist/index-DtsM4pjR.js

@@ -0,0 +1,71 @@
+import { D as DndHandleButton, a as DndHandle } from './DndHandleButton-Dgt9G-dF.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as cx } from './index-De1g9FRV.js';
+import { forwardRef } from 'react';
+
+import './index.css';const styles = {
+	"drag-preview": "_drag-preview_1uufp_2",
+	"drop-line": "_drop-line_1uufp_12",
+	"orientation-horizontal": "_orientation-horizontal_1uufp_44",
+	"orientation-vertical": "_orientation-vertical_1uufp_53",
+	"drop-zone": "_drop-zone_1uufp_62",
+	"position-before": "_position-before_1uufp_69",
+	"position-after": "_position-after_1uufp_74",
+	"can-be-dropped": "_can-be-dropped_1uufp_88",
+	"active-not-over": "_active-not-over_1uufp_95",
+	"over-valid": "_over-valid_1uufp_101",
+	"over-invalid": "_over-invalid_1uufp_106"
+};
+
+const DndSortLine = ({
+  offset,
+  orientation,
+  position,
+  ...rest
+}) => {
+  const classes = cx(
+    styles["drop-line"],
+    styles[`orientation-${orientation}`],
+    styles[`position-${position}`]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: classes,
+      style: { "--a2-inline-drop-line-offset": offset },
+      ...rest
+    }
+  );
+};
+
+const DndZone = forwardRef(
+  ({
+    el: Component = "div",
+    children,
+    className,
+    isDragging,
+    isOver,
+    isValid,
+    ...rest
+  }, ref) => {
+    const classes = cx(className, {
+      [styles["drop-zone"]]: true,
+      [styles["over-valid"]]: isDragging && isOver && isValid,
+      [styles["over-invalid"]]: isDragging && isOver && !isValid,
+      [styles["active-not-over"]]: isDragging && !isOver
+    });
+    return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...rest, children });
+  }
+);
+DndZone.displayName = "DndZoneBase";
+
+const Dnd = {
+  Handle: DndHandle,
+  HandleButton: DndHandleButton,
+  SortLine: DndSortLine,
+  Zone: DndZone
+};
+
+export { Dnd as D, DndSortLine as a, styles as s };
+//# sourceMappingURL=index-DtsM4pjR.js.map

package/dist/index-DtsM4pjR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DtsM4pjR.js","sources":["../src/components/Dnd/DndSortLine.tsx","../src/components/Dnd/DndZone.tsx","../src/components/Dnd/index.ts"],"sourcesContent":["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={{ \"--a2-inline-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":[],"mappings":";;;;;;;;;;;;;;;;;;;AA4CO,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,8BAAA,EAAgC,MAAA,EAAO;AAAA,MAC/C,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;;;;"}

package/dist/index.css

@@ -1,25 +1,4 @@
-.anvil2{@layer starter, reset, base, state, application;/* Base */._handle_1e7c4_2 {
-  align-items: center;
-  all: unset;
-  display: inline-flex;
-  justify-content: center;
-  padding: var(--a2-size-2, 0.5rem);
-}._handle-button_1e7c4_10 {
-  --a2-mod-button-background-color: transparent;
-  --a2-mod-button-border-width: 0;
-  --a2-mod-button-cursor: var(--a2-mod-dnd-handle-cursor, grab);
-  --a2-mod-button-height: auto;
-  --a2-mod-button-min-width: auto;
-  --a2-mod-button-padding-block-end: 0;
-  --a2-mod-button-padding-block-start: 0;
-  --a2-mod-button-padding-inline-end: 0;
-  --a2-mod-button-padding-inline-start: 0;
-  --a2-mod-button-width: auto;
-  touch-action: none;
-}/* State */._active_1e7c4_25 {
-  --a2-mod-dnd-handle-cursor: grabbing;
-}
-}.anvil2{@layer starter, reset, base, state, application;/* Base */._drag-preview_1uufp_2 {
+.anvil2 {/* Base */._drag-preview_1uufp_2 {
   --a2-mod-dnd-drag-preview-cursor: no-drop;
   --a2-mod-dnd-drag-preview-shadow-color: var(--a2-dnd-drag-preview-shadow-color, var(--a2-shadow-color-default, light-dark(rgba(26, 26, 26, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
   cursor: var(--a2-mod-dnd-drag-preview-cursor);