@elliemae/ds-swipe-card 3.53.0-alpha.2

package/dist/cjs/styled.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledScrollContainer: () => StyledScrollContainer,
+  StyledSlide: () => StyledSlide,
+  StyledWrapper: () => StyledWrapper
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_constants = require("./constants/index.js");
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSSwipeCardName,
+  slot: import_constants.SWIPE_CARD_SLOTS.ROOT
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+`;
+const StyledScrollContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSSwipeCardName,
+  slot: import_constants.SWIPE_CARD_SLOTS.SCROLL_CONTAINER
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+
+  ${({ $disabled = false }) => $disabled && `
+    pointer-events: none;
+    touch-action: none;
+  `}
+`;
+const StyledSlide = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSSwipeCardName,
+  slot: import_constants.SWIPE_CARD_SLOTS.SLIDE
+})`
+  @keyframes slide {
+    100% {
+      left: 0;
+    }
+  }
+
+  position: relative;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  min-height: 0;
+  min-width: 0;
+
+  ${({ $isFirstRender, $enableAnimation, $animationDuration }) => {
+  if ($isFirstRender || !$enableAnimation)
+    return import_ds_system.css`
+        left: 0;
+      `;
+  return import_ds_system.css`
+      left: 100%;
+      animation: slide ${$animationDuration}ms forwards;
+    `;
+}}
+
+  ${({ $isActive }) => {
+  if ($isActive)
+    return import_ds_system.css`
+        pointer-events: auto;
+      `;
+  return import_ds_system.css`
+      pointer-events: none;
+      display: none;
+    `;
+}}
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSwipeCardName, SWIPE_CARD_SLOTS } from './constants/index.js';\n\n/**\n * Root wrapper of the Swipe Card component.\n */\nexport const StyledWrapper = styled(Grid, {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.ROOT,\n})`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n`;\n\n/**\n * Props applied to the scroll container styled component.\n */\nexport interface StyledScrollContainerProps {\n  $disabled?: boolean;\n  $enableTouch?: boolean;\n}\n/**\n * Container that holds the active slide and manages touch behavior.\n */\nexport const StyledScrollContainer = styled('div', {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.SCROLL_CONTAINER,\n})<StyledScrollContainerProps>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    `\n    pointer-events: none;\n    touch-action: none;\n  `}\n`;\n\n/**\n * Props that dictate the slide animation\n */\nexport interface StyledSlideProps {\n  $isFirstRender: boolean;\n  $isActive: boolean;\n  $enableAnimation: boolean;\n  $animationDuration: number;\n}\n/**\n * Single slide element. Positioned absolutely and animated in.\n */\nexport const StyledSlide = styled('div', {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.SLIDE,\n})<StyledSlideProps>`\n  @keyframes slide {\n    100% {\n      left: 0;\n    }\n  }\n\n  position: relative;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n\n  ${({ $isFirstRender, $enableAnimation, $animationDuration }) => {\n    // scenarios that requires no animation at all:\n    //  - it's the first render\n    //  - the app side developer said they don't want the animation ($enableAnimation === false)\n    // we check those condition and just do left: 0 in those scenarios\n    if ($isFirstRender || !$enableAnimation)\n      return css`\n        left: 0;\n      `;\n    // now we know that the animation must happen, so we just configure the animation duration and the starting left position\n    return css`\n      left: 100%;\n      animation: slide ${$animationDuration}ms forwards;\n    `;\n  }}\n\n  ${({ $isActive }) => {\n    if ($isActive)\n      return css`\n        pointer-events: auto;\n      `;\n    return css`\n      pointer-events: none;\n      display: none;\n    `;\n  }}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAAkD;AAK3C,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBM,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,CAAC,EAAE,YAAY,MAAM,MACrB,aACA;AAAA;AAAA;AAAA,GAGD;AAAA;AAeI,MAAM,kBAAc,yBAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBG,CAAC,EAAE,gBAAgB,kBAAkB,mBAAmB,MAAM;AAK9D,MAAI,kBAAkB,CAAC;AACrB,WAAO;AAAA;AAAA;AAIT,SAAO;AAAA;AAAA,yBAEc,kBAAkB;AAAA;AAEzC,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,UAAU,MAAM;AACnB,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAAA;AAIT,CAAC;AAAA;",
+  "names": []
+}

package/dist/esm/DSSwipeCard.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
+import { uid } from "uid";
+import { useSwipeCard } from "./config/useSwipeCard.js";
+import { DSSwipeCardName } from "./constants/index.js";
+import { DSSwipeCardPropTypesSchema } from "./react-desc-prop-types.js";
+import { StyledScrollContainer, StyledSlide, StyledWrapper } from "./styled.js";
+const DSSwipeCard = (props) => {
+  const {
+    propsWithDefault,
+    xstyledProps,
+    instanceUid,
+    isFirstRender,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    globalAttributes
+  } = useSwipeCard(props);
+  const { wrap, ...restGlobalAttributes } = globalAttributes;
+  const { disabled, animationDuration, enableTouch, CardRender, slidesProps, enableAnimation } = propsWithDefault;
+  const ownerPropsConfig = useOwnerProps(propsWithDefault);
+  const [renderKey, setRenderKey] = React2.useState(`render-key-${uid(5)}`);
+  const handleAnimationStart = React2.useCallback(() => {
+    requestAnimationFrame(() => setRenderKey(`render-key-${uid(5)}`));
+  }, [setRenderKey]);
+  return /* @__PURE__ */ jsx(StyledWrapper, { ...ownerPropsConfig, ...xstyledProps, ...restGlobalAttributes, children: /* @__PURE__ */ jsx(
+    StyledScrollContainer,
+    {
+      $disabled: disabled,
+      $enableTouch: enableTouch,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      ...ownerPropsConfig,
+      children: slidesProps.map((slide, i) => /* @__PURE__ */ jsx(
+        StyledSlide,
+        {
+          ...ownerPropsConfig,
+          $animationDuration: animationDuration,
+          $isFirstRender: isFirstRender,
+          $enableAnimation: enableAnimation,
+          $isActive: i === propsWithDefault.activeSlide,
+          "aria-hidden": i !== propsWithDefault.activeSlide,
+          onAnimationStart: isFirstRender ? void 0 : handleAnimationStart,
+          children: /* @__PURE__ */ jsx(
+            CardRender,
+            {
+              dsIndex: i,
+              ...slide,
+              renderKey
+            },
+            `slide-${instanceUid}-${i === propsWithDefault.activeSlide}`
+          )
+        },
+        `slide-${instanceUid}-${i}`
+      ))
+    }
+  ) });
+};
+DSSwipeCard.displayName = DSSwipeCardName;
+const DSSwipeCardWithSchema = describe(DSSwipeCard);
+DSSwipeCardWithSchema.propTypes = DSSwipeCardPropTypesSchema;
+export {
+  DSSwipeCard,
+  DSSwipeCardWithSchema
+};
+//# sourceMappingURL=DSSwipeCard.js.map

package/dist/esm/DSSwipeCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSwipeCard.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { useSwipeCard } from './config/useSwipeCard.js';\nimport { DSSwipeCardName } from './constants/index.js';\nimport { type DSSwipeCardT, DSSwipeCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledScrollContainer, StyledSlide, StyledWrapper } from './styled.js';\n\nconst DSSwipeCard = <T extends DSSwipeCardT.CustomInterface>(props: DSSwipeCardT.Props<T>) => {\n  const {\n    propsWithDefault,\n    xstyledProps,\n    instanceUid,\n    isFirstRender,\n    onTouchStart,\n    onTouchMove,\n    onTouchEnd,\n    globalAttributes,\n  } = useSwipeCard(props);\n\n  const { wrap, ...restGlobalAttributes } = globalAttributes;\n  const { disabled, animationDuration, enableTouch, CardRender, slidesProps, enableAnimation } = propsWithDefault;\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  const [renderKey, setRenderKey] = React.useState(`render-key-${uid(5)}`);\n  const handleAnimationStart = React.useCallback(() => {\n    // we change the key to force RENDERING of slides, to avoid wrong calculations of width/height on virtualization\n    requestAnimationFrame(() => setRenderKey(`render-key-${uid(5)}`));\n  }, [setRenderKey]);\n  return (\n    <StyledWrapper {...ownerPropsConfig} {...xstyledProps} {...restGlobalAttributes}>\n      <StyledScrollContainer\n        $disabled={disabled}\n        $enableTouch={enableTouch}\n        onTouchStart={onTouchStart}\n        onTouchMove={onTouchMove}\n        onTouchEnd={onTouchEnd}\n        {...ownerPropsConfig}\n      >\n        {slidesProps.map((slide, i) => (\n          <StyledSlide\n            // we can use the i as a key BECAUSE WE ALSO ADD THE ${instanceUid}\n            //  the eslint rule is to avoid repeated keys in the VDOM, but we are not repeating it thanks to UID\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slide-${instanceUid}-${i}`}\n            {...ownerPropsConfig}\n            $animationDuration={animationDuration}\n            $isFirstRender={isFirstRender}\n            $enableAnimation={enableAnimation}\n            $isActive={i === propsWithDefault.activeSlide}\n            aria-hidden={i !== propsWithDefault.activeSlide}\n            onAnimationStart={isFirstRender ? undefined : handleAnimationStart}\n          >\n            <CardRender\n              key={`slide-${instanceUid}-${i === propsWithDefault.activeSlide}`}\n              dsIndex={i}\n              {...slide}\n              renderKey={renderKey}\n            />\n          </StyledSlide>\n        ))}\n      </StyledScrollContainer>\n    </StyledWrapper>\n  );\n};\n\nDSSwipeCard.displayName = DSSwipeCardName;\nconst DSSwipeCardWithSchema = describe(DSSwipeCard);\nDSSwipeCardWithSchema.propTypes = DSSwipeCardPropTypesSchema;\n\nexport { DSSwipeCard, DSSwipeCardWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDX;AApDZ,OAAOA,YAAW;AAClB,SAAS,UAAU,qBAAqB;AACxC,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAA4B,kCAAkC;AAC9D,SAAS,uBAAuB,aAAa,qBAAqB;AAElE,MAAM,cAAc,CAAyC,UAAiC;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM,EAAE,MAAM,GAAG,qBAAqB,IAAI;AAC1C,QAAM,EAAE,UAAU,mBAAmB,aAAa,YAAY,aAAa,gBAAgB,IAAI;AAC/F,QAAM,mBAAmB,cAAc,gBAAgB;AACvD,QAAM,CAAC,WAAW,YAAY,IAAIA,OAAM,SAAS,cAAc,IAAI,CAAC,CAAC,EAAE;AACvE,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AAEnD,0BAAsB,MAAM,aAAa,cAAc,IAAI,CAAC,CAAC,EAAE,CAAC;AAAA,EAClE,GAAG,CAAC,YAAY,CAAC;AACjB,SACE,oBAAC,iBAAe,GAAG,kBAAmB,GAAG,cAAe,GAAG,sBACzD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,IAAI,CAAC,OAAO,MACvB;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,oBAAoB;AAAA,UACpB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,WAAW,MAAM,iBAAiB;AAAA,UAClC,eAAa,MAAM,iBAAiB;AAAA,UACpC,kBAAkB,gBAAgB,SAAY;AAAA,UAE9C;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS;AAAA,cACR,GAAG;AAAA,cACJ;AAAA;AAAA,YAHK,SAAS,WAAW,IAAI,MAAM,iBAAiB,WAAW;AAAA,UAIjE;AAAA;AAAA,QAdK,SAAS,WAAW,IAAI,CAAC;AAAA,MAehC,CACD;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "names": ["React"]
+}

package/dist/esm/config/slidePositionHelpers.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const calculateSwipeTarget = (deltaX, currentSlide, totalSlides) => {
+  if (deltaX > 0 && currentSlide > 0) {
+    return { targetSlide: currentSlide - 1, direction: "right" };
+  }
+  if (deltaX < 0 && currentSlide < totalSlides - 1) {
+    return { targetSlide: currentSlide + 1, direction: "left" };
+  }
+  return null;
+};
+export {
+  calculateSwipeTarget
+};
+//# sourceMappingURL=slidePositionHelpers.js.map

package/dist/esm/config/slidePositionHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/slidePositionHelpers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export interface SwipeTarget {\n  targetSlide: number;\n  direction: 'left' | 'right';\n}\n\n/**\n * Calculate swipe target slide based on gesture\n */\nexport const calculateSwipeTarget = (deltaX: number, currentSlide: number, totalSlides: number): SwipeTarget | null => {\n  if (deltaX > 0 && currentSlide > 0) {\n    return { targetSlide: currentSlide - 1, direction: 'right' };\n  }\n  if (deltaX < 0 && currentSlide < totalSlides - 1) {\n    return { targetSlide: currentSlide + 1, direction: 'left' };\n  }\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACQhB,MAAM,uBAAuB,CAAC,QAAgB,cAAsB,gBAA4C;AACrH,MAAI,SAAS,KAAK,eAAe,GAAG;AAClC,WAAO,EAAE,aAAa,eAAe,GAAG,WAAW,QAAQ;AAAA,EAC7D;AACA,MAAI,SAAS,KAAK,eAAe,cAAc,GAAG;AAChD,WAAO,EAAE,aAAa,eAAe,GAAG,WAAW,OAAO;AAAA,EAC5D;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/config/touchHandlers.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import React2 from "react";
+import { calculateSwipeTarget } from "./slidePositionHelpers.js";
+const useTouchHandlers = (options) => {
+  const { enableTouch, disabled, activeSlide, totalSlides, onSwipe } = options;
+  const startXRef = React2.useRef(0);
+  const startYRef = React2.useRef(0);
+  const isDraggingRef = React2.useRef(false);
+  const onTouchStart = React2.useCallback((e) => {
+    const touch = e.touches[0];
+    startXRef.current = touch.clientX;
+    startYRef.current = touch.clientY;
+    isDraggingRef.current = true;
+  }, []);
+  const onTouchMove = React2.useCallback(() => {
+  }, []);
+  const onTouchEnd = React2.useCallback(
+    (e) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      const touch = e.changedTouches[0];
+      const deltaX = touch.clientX - startXRef.current;
+      const deltaY = touch.clientY - startYRef.current;
+      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+        const swipeResult = calculateSwipeTarget(deltaX, activeSlide, totalSlides);
+        if (swipeResult) {
+          onSwipe(swipeResult.targetSlide, swipeResult.direction);
+        }
+      }
+      isDraggingRef.current = false;
+    },
+    [activeSlide, totalSlides, onSwipe]
+  );
+  if (!enableTouch || disabled) {
+    return {
+      onTouchStart: void 0,
+      onTouchMove: void 0,
+      onTouchEnd: void 0
+    };
+  }
+  return { onTouchStart, onTouchMove, onTouchEnd };
+};
+export {
+  useTouchHandlers
+};
+//# sourceMappingURL=touchHandlers.js.map

package/dist/esm/config/touchHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/touchHandlers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { calculateSwipeTarget } from './slidePositionHelpers.js';\n\nexport interface TouchHandlerOptions {\n  enableTouch: boolean;\n  disabled: boolean;\n  activeSlide: number;\n  totalSlides: number;\n  onSwipe: (targetSlide: number, direction: 'left' | 'right') => void;\n}\n\n/**\n * useTouchHandlers\n *\n * Provides touch event handlers for swipe detection using React refs for mutable state\n * and React.useCallback for stable handler identities.\n */\nexport const useTouchHandlers = (options: TouchHandlerOptions) => {\n  const { enableTouch, disabled, activeSlide, totalSlides, onSwipe } = options;\n\n  // Mutable refs for gesture tracking to avoid re-renders\n  const startXRef = React.useRef<number>(0);\n  const startYRef = React.useRef<number>(0);\n  const isDraggingRef = React.useRef<boolean>(false);\n\n  const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\n    const touch = e.touches[0];\n    startXRef.current = touch.clientX;\n    startYRef.current = touch.clientY;\n    isDraggingRef.current = true;\n  }, []);\n\n  const onTouchMove = React.useCallback(() => {\n    // We don't need to handle move for swipe detection\n  }, []);\n\n  const onTouchEnd = React.useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      if (!isDraggingRef.current) {\n        return;\n      }\n      const touch = e.changedTouches[0];\n      const deltaX = touch.clientX - startXRef.current;\n      const deltaY = touch.clientY - startYRef.current;\n\n      // Trigger swipe only for significant horizontal movement\n      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {\n        const swipeResult = calculateSwipeTarget(deltaX, activeSlide, totalSlides);\n        if (swipeResult) {\n          onSwipe(swipeResult.targetSlide, swipeResult.direction);\n        }\n      }\n\n      isDraggingRef.current = false;\n    },\n    [activeSlide, totalSlides, onSwipe],\n  );\n\n  // If touch is disabled, expose null so consumers can skip attaching handlers\n  if (!enableTouch || disabled) {\n    return {\n      onTouchStart: undefined,\n      onTouchMove: undefined,\n      onTouchEnd: undefined,\n    };\n  }\n\n  return { onTouchStart, onTouchMove, onTouchEnd };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,4BAA4B;AAgB9B,MAAM,mBAAmB,CAAC,YAAiC;AAChE,QAAM,EAAE,aAAa,UAAU,aAAa,aAAa,QAAQ,IAAI;AAGrE,QAAM,YAAYA,OAAM,OAAe,CAAC;AACxC,QAAM,YAAYA,OAAM,OAAe,CAAC;AACxC,QAAM,gBAAgBA,OAAM,OAAgB,KAAK;AAEjD,QAAM,eAAeA,OAAM,YAAY,CAAC,MAAwC;AAC9E,UAAM,QAAQ,EAAE,QAAQ,CAAC;AACzB,cAAU,UAAU,MAAM;AAC1B,cAAU,UAAU,MAAM;AAC1B,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,cAAcA,OAAM,YAAY,MAAM;AAAA,EAE5C,GAAG,CAAC,CAAC;AAEL,QAAM,aAAaA,OAAM;AAAA,IACvB,CAAC,MAAwC;AACvC,UAAI,CAAC,cAAc,SAAS;AAC1B;AAAA,MACF;AACA,YAAM,QAAQ,EAAE,eAAe,CAAC;AAChC,YAAM,SAAS,MAAM,UAAU,UAAU;AACzC,YAAM,SAAS,MAAM,UAAU,UAAU;AAGzC,UAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,IAAI,IAAI;AAChE,cAAM,cAAc,qBAAqB,QAAQ,aAAa,WAAW;AACzE,YAAI,aAAa;AACf,kBAAQ,YAAY,aAAa,YAAY,SAAS;AAAA,QACxD;AAAA,MACF;AAEA,oBAAc,UAAU;AAAA,IAC1B;AAAA,IACA,CAAC,aAAa,aAAa,OAAO;AAAA,EACpC;AAGA,MAAI,CAAC,eAAe,UAAU;AAC5B,WAAO;AAAA,MACL,cAAc;AAAA,MACd,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,EAAE,cAAc,aAAa,WAAW;AACjD;",
+  "names": ["React"]
+}

package/dist/esm/config/useSwipeCard.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2 from "react";
+import { uid } from "uid";
+import { DSSwipeCardPropTypes, DSSwipeCardDefaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { useTouchHandlers } from "./touchHandlers.js";
+const useFirstRender = () => {
+  const ref = React2.useRef(true);
+  const firstRender = ref.current;
+  ref.current = false;
+  return firstRender;
+};
+const useSwipeCard = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    propsFromUser,
+    DSSwipeCardDefaultProps
+  );
+  useValidateProps(propsWithDefault, DSSwipeCardPropTypes);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const instanceUid = React2.useMemo(() => `swipe-card-${uid(5)}`, []);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const { activeSlide, slidesProps, enableTouch, disabled, onSwipe } = propsWithDefault;
+  const isFirstRender = useFirstRender();
+  const totalSlides = slidesProps.length;
+  const touchHandlers = useTouchHandlers({
+    enableTouch,
+    disabled: disabled ?? false,
+    activeSlide,
+    totalSlides,
+    onSwipe
+  });
+  const { onTouchStart, onTouchMove, onTouchEnd } = touchHandlers;
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      instanceUid,
+      isFirstRender,
+      // handlers to attach directly to the element to avoid extra effects
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      instanceUid,
+      isFirstRender,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      globalAttributes
+    ]
+  );
+};
+export {
+  useSwipeCard
+};
+//# sourceMappingURL=useSwipeCard.js.map

package/dist/esm/config/useSwipeCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSwipeCard.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSSwipeCardPropTypes, DSSwipeCardDefaultProps, type DSSwipeCardT } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTouchHandlers } from './touchHandlers.js';\n\nconst useFirstRender = () => {\n  const ref = React.useRef(true);\n  const firstRender = ref.current;\n  ref.current = false;\n  return firstRender;\n};\n\ninterface SwipeCardCTX<T extends DSSwipeCardT.CustomInterface> {\n  propsWithDefault: DSSwipeCardT.InternalProps<T>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n  instanceUid: string;\n  isFirstRender: boolean;\n  // React touch handlers (no effects needed)\n  onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;\n  onTouchMove?: (e: React.TouchEvent<HTMLDivElement>) => void;\n  onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;\n}\n/**\n * useSwipeCard\n *\n * Orchestrates the controlled carousel behavior:\n * - It validates and merges props with defaults\n * - exposes touch handlers\n */\nexport const useSwipeCard = <T extends DSSwipeCardT.CustomInterface>(\n  propsFromUser: DSSwipeCardT.Props<T>,\n): SwipeCardCTX<T> => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSwipeCardT.InternalProps<T>>(\n    propsFromUser,\n    DSSwipeCardDefaultProps,\n  );\n  useValidateProps(propsWithDefault, DSSwipeCardPropTypes);\n\n  // =============================================================================\n  // XSTYLED PROPS AND INSTANCE UID\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const instanceUid = React.useMemo(() => `swipe-card-${uid(5)}`, []);\n  // =============================================================================\n  //          GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { activeSlide, slidesProps, enableTouch, disabled, onSwipe } = propsWithDefault;\n\n  const isFirstRender = useFirstRender();\n  const totalSlides = slidesProps.length;\n\n  // =============================================================================\n  //          TOUCH/SWIPE DETECTION\n  // =============================================================================\n  const touchHandlers = useTouchHandlers({\n    enableTouch,\n    disabled: disabled ?? false,\n    activeSlide,\n    totalSlides,\n    onSwipe,\n  });\n  const { onTouchStart, onTouchMove, onTouchEnd } = touchHandlers;\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      instanceUid,\n      isFirstRender,\n      // handlers to attach directly to the element to avoid extra effects\n      onTouchStart,\n      onTouchMove,\n      onTouchEnd,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      isFirstRender,\n      onTouchStart,\n      onTouchMove,\n      onTouchEnd,\n      globalAttributes,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB,+BAAkD;AACjF,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,MAAM,iBAAiB,MAAM;AAC3B,QAAM,MAAMA,OAAM,OAAO,IAAI;AAC7B,QAAM,cAAc,IAAI;AACxB,MAAI,UAAU;AACd,SAAO;AACT;AAoBO,MAAM,eAAe,CAC1B,kBACoB;AAIpB,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,oBAAoB;AAKvD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAIlE,QAAM,mBAAmB,uBAAuB,gBAAgB;AAKhE,QAAM,EAAE,aAAa,aAAa,aAAa,UAAU,QAAQ,IAAI;AAErE,QAAM,gBAAgB,eAAe;AACrC,QAAM,cAAc,YAAY;AAKhC,QAAM,gBAAgB,iBAAiB;AAAA,IACrC;AAAA,IACA,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,cAAc,aAAa,WAAW,IAAI;AAElD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSSwipeCardName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSSwipeCardName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSSwipeCardT } from '../react-desc-prop-types.js';\nimport { DSSwipeCardName } from '../constants/index.js';\n\nexport const useValidateProps = <T extends DSSwipeCardT.CustomInterface>(\n  props: DSSwipeCardT.InternalProps<T>,\n  propTypes: ValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSSwipeCardName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSSwipeCardName = "DSSwipecard";
+const SWIPE_CARD_SLOTS = {
+  ROOT: "root",
+  SCROLL_CONTAINER: "scroll-container",
+  SLIDE: "slide"
+};
+const SWIPE_CARD_DATA_TESTID = slotObjectToDataTestIds(DSSwipeCardName, SWIPE_CARD_SLOTS);
+export {
+  DSSwipeCardName,
+  SWIPE_CARD_DATA_TESTID,
+  SWIPE_CARD_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSwipeCardName = 'DSSwipecard';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SWIPE_CARD_SLOTS = {\n  ROOT: 'root',\n  SCROLL_CONTAINER: 'scroll-container',\n  SLIDE: 'slide',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SWIPE_CARD_DATA_TESTID = slotObjectToDataTestIds(DSSwipeCardName, SWIPE_CARD_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,OAAO;AACT;AAGO,MAAM,yBAAyB,wBAAwB,iBAAiB,gBAAgB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { DSSwipeCard, DSSwipeCardWithSchema } from "./DSSwipeCard.js";
+import { DSSwipeCardPropTypes } from "./react-desc-prop-types.js";
+import { SWIPE_CARD_SLOTS, SWIPE_CARD_DATA_TESTID } from "./constants/index.js";
+export {
+  DSSwipeCard,
+  DSSwipeCardPropTypes,
+  DSSwipeCardWithSchema,
+  SWIPE_CARD_DATA_TESTID,
+  SWIPE_CARD_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSSwipeCard, DSSwipeCardWithSchema } from './DSSwipeCard.js';\nexport { type DSSwipeCardT, DSSwipeCardPropTypes } from './react-desc-prop-types.js';\nexport { SWIPE_CARD_SLOTS, SWIPE_CARD_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,aAAa,6BAA6B;AACnD,SAA4B,4BAA4B;AACxD,SAAS,kBAAkB,8BAA8B;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSSwipeCardName, SWIPE_CARD_SLOTS } from "./constants/index.js";
+const noop = () => {
+};
+const DSSwipeCardDefaultProps = {
+  enableAnimation: true,
+  enableTouch: true,
+  animationDuration: 300,
+  onSwipe: noop
+};
+const DSSwipeCardPropTypes = {
+  ...getPropsPerSlotPropTypes(DSSwipeCardName, SWIPE_CARD_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  slidesProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      userRenderProps: PropTypes.object
+    })
+  ).description("An array of props that your CardRender will receive, one object per slide").isRequired,
+  CardRender: PropTypes.func.description(
+    "The react component that will be used to render slides, receiving your slide props + dsIndex that indicates the position of the slide in the array"
+  ).isRequired,
+  activeSlide: PropTypes.number.description(
+    "Controlled props that allows application to declare which slide needs to be displayed right now"
+  ).isRequired,
+  onSwipe: PropTypes.func.description("When in touch screens and enabling touch/swipe gestures, this callback is fired on swipe").defaultValue("(()=>{})"),
+  enableAnimation: PropTypes.bool.description("When the the active slide changes, should an animation happens?").defaultValue(true),
+  enableTouch: PropTypes.bool.description("Should touch/swipe gestures be enabled?").defaultValue(true),
+  animationDuration: PropTypes.number.description("If an animation is enabled, this prop controls the duration in milliseconds").defaultValue(300),
+  disabled: PropTypes.bool.description("Whether the swipe card is disabled")
+};
+const DSSwipeCardPropTypesSchema = DSSwipeCardPropTypes;
+export {
+  DSSwipeCardDefaultProps,
+  DSSwipeCardPropTypes,
+  DSSwipeCardPropTypesSchema
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { DSSwipeCardName, SWIPE_CARD_SLOTS } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSSwipeCardT {\n  export type CustomInterface<T extends Record<string, unknown> = Record<string, unknown>> = T;\n  export type CardRenderProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {\n    dsIndex: number;\n    renderKey: string;\n  };\n\n  export interface RequiredProps<T extends Record<string, unknown> = Record<string, unknown>> {\n    slidesProps: CustomInterface<T>[];\n    CardRender: React.ComponentType<CardRenderProps<T>>;\n    activeSlide: number;\n  }\n\n  export interface DefaultProps {\n    onSwipe: (newActiveSlide: number, direction: 'left' | 'right') => void;\n    enableTouch: boolean;\n    animationDuration: number;\n    enableAnimation: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSwipeCardName, typeof SWIPE_CARD_SLOTS> {}\n\n  export interface Props<T extends CustomInterface = CustomInterface>\n    extends RequiredProps<T>,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps<T extends CustomInterface = CustomInterface>\n    extends RequiredProps<T>,\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport const DSSwipeCardDefaultProps: DSSwipeCardT.DefaultProps = {\n  enableAnimation: true,\n  enableTouch: true,\n  animationDuration: 300,\n  onSwipe: noop,\n};\n\nexport const DSSwipeCardPropTypes: DSPropTypesSchema<DSSwipeCardT.Props> = {\n  ...getPropsPerSlotPropTypes(DSSwipeCardName, SWIPE_CARD_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  slidesProps: PropTypes.arrayOf(\n    PropTypes.shape({\n      userRenderProps: PropTypes.object,\n    }),\n  ).description('An array of props that your CardRender will receive, one object per slide').isRequired,\n  CardRender: PropTypes.func.description(\n    'The react component that will be used to render slides, receiving your slide props + dsIndex that indicates the position of the slide in the array',\n  ).isRequired,\n  activeSlide: PropTypes.number.description(\n    'Controlled props that allows application to declare which slide needs to be displayed right now',\n  ).isRequired,\n  onSwipe: PropTypes.func\n    .description('When in touch screens and enabling touch/swipe gestures, this callback is fired on swipe')\n    .defaultValue('(()=>{})'),\n  enableAnimation: PropTypes.bool\n    .description('When the the active slide changes, should an animation happens?')\n    .defaultValue(true),\n  enableTouch: PropTypes.bool.description('Should touch/swipe gestures be enabled?').defaultValue(true),\n  animationDuration: PropTypes.number\n    .description('If an animation is enabled, this prop controls the duration in milliseconds')\n    .defaultValue(300),\n  disabled: PropTypes.bool.description('Whether the swipe card is disabled'),\n};\n\nexport const DSSwipeCardPropTypesSchema = DSSwipeCardPropTypes as unknown as ValidationMap<DSSwipeCardT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,OAAO,MAAY;AAAC;AAwCnB,MAAM,0BAAqD;AAAA,EAChE,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,SAAS;AACX;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,iBAAiB,gBAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,aAAa,UAAU;AAAA,IACrB,UAAU,MAAM;AAAA,MACd,iBAAiB,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,EAAE,YAAY,2EAA2E,EAAE;AAAA,EAC3F,YAAY,UAAU,KAAK;AAAA,IACzB;AAAA,EACF,EAAE;AAAA,EACF,aAAa,UAAU,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE;AAAA,EACF,SAAS,UAAU,KAChB,YAAY,0FAA0F,EACtG,aAAa,UAAU;AAAA,EAC1B,iBAAiB,UAAU,KACxB,YAAY,iEAAiE,EAC7E,aAAa,IAAI;AAAA,EACpB,aAAa,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,IAAI;AAAA,EACpG,mBAAmB,UAAU,OAC1B,YAAY,6EAA6E,EACzF,aAAa,GAAG;AAAA,EACnB,UAAU,UAAU,KAAK,YAAY,oCAAoC;AAC3E;AAEO,MAAM,6BAA6B;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { css, styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSSwipeCardName, SWIPE_CARD_SLOTS } from "./constants/index.js";
+const StyledWrapper = styled(Grid, {
+  name: DSSwipeCardName,
+  slot: SWIPE_CARD_SLOTS.ROOT
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+`;
+const StyledScrollContainer = styled("div", {
+  name: DSSwipeCardName,
+  slot: SWIPE_CARD_SLOTS.SCROLL_CONTAINER
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+
+  ${({ $disabled = false }) => $disabled && `
+    pointer-events: none;
+    touch-action: none;
+  `}
+`;
+const StyledSlide = styled("div", {
+  name: DSSwipeCardName,
+  slot: SWIPE_CARD_SLOTS.SLIDE
+})`
+  @keyframes slide {
+    100% {
+      left: 0;
+    }
+  }
+
+  position: relative;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  min-height: 0;
+  min-width: 0;
+
+  ${({ $isFirstRender, $enableAnimation, $animationDuration }) => {
+  if ($isFirstRender || !$enableAnimation)
+    return css`
+        left: 0;
+      `;
+  return css`
+      left: 100%;
+      animation: slide ${$animationDuration}ms forwards;
+    `;
+}}
+
+  ${({ $isActive }) => {
+  if ($isActive)
+    return css`
+        pointer-events: auto;
+      `;
+  return css`
+      pointer-events: none;
+      display: none;
+    `;
+}}
+`;
+export {
+  StyledScrollContainer,
+  StyledSlide,
+  StyledWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSwipeCardName, SWIPE_CARD_SLOTS } from './constants/index.js';\n\n/**\n * Root wrapper of the Swipe Card component.\n */\nexport const StyledWrapper = styled(Grid, {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.ROOT,\n})`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n`;\n\n/**\n * Props applied to the scroll container styled component.\n */\nexport interface StyledScrollContainerProps {\n  $disabled?: boolean;\n  $enableTouch?: boolean;\n}\n/**\n * Container that holds the active slide and manages touch behavior.\n */\nexport const StyledScrollContainer = styled('div', {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.SCROLL_CONTAINER,\n})<StyledScrollContainerProps>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    `\n    pointer-events: none;\n    touch-action: none;\n  `}\n`;\n\n/**\n * Props that dictate the slide animation\n */\nexport interface StyledSlideProps {\n  $isFirstRender: boolean;\n  $isActive: boolean;\n  $enableAnimation: boolean;\n  $animationDuration: number;\n}\n/**\n * Single slide element. Positioned absolutely and animated in.\n */\nexport const StyledSlide = styled('div', {\n  name: DSSwipeCardName,\n  slot: SWIPE_CARD_SLOTS.SLIDE,\n})<StyledSlideProps>`\n  @keyframes slide {\n    100% {\n      left: 0;\n    }\n  }\n\n  position: relative;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n\n  ${({ $isFirstRender, $enableAnimation, $animationDuration }) => {\n    // scenarios that requires no animation at all:\n    //  - it's the first render\n    //  - the app side developer said they don't want the animation ($enableAnimation === false)\n    // we check those condition and just do left: 0 in those scenarios\n    if ($isFirstRender || !$enableAnimation)\n      return css`\n        left: 0;\n      `;\n    // now we know that the animation must happen, so we just configure the animation duration and the starting left position\n    return css`\n      left: 100%;\n      animation: slide ${$animationDuration}ms forwards;\n    `;\n  }}\n\n  ${({ $isActive }) => {\n    if ($isActive)\n      return css`\n        pointer-events: auto;\n      `;\n    return css`\n      pointer-events: none;\n      display: none;\n    `;\n  }}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B,SAAS,YAAY;AACrB,SAAS,iBAAiB,wBAAwB;AAK3C,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBM,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,CAAC,EAAE,YAAY,MAAM,MACrB,aACA;AAAA;AAAA;AAAA,GAGD;AAAA;AAeI,MAAM,cAAc,OAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBG,CAAC,EAAE,gBAAgB,kBAAkB,mBAAmB,MAAM;AAK9D,MAAI,kBAAkB,CAAC;AACrB,WAAO;AAAA;AAAA;AAIT,SAAO;AAAA;AAAA,yBAEc,kBAAkB;AAAA;AAEzC,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,UAAU,MAAM;AACnB,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAAA;AAIT,CAAC;AAAA;",
+  "names": []
+}

package/dist/types/DSSwipeCard.d.ts

@@ -0,0 +1,7 @@
+import { type DSSwipeCardT } from './react-desc-prop-types.js';
+declare const DSSwipeCard: {
+    <T extends DSSwipeCardT.CustomInterface>(props: DSSwipeCardT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};
+declare const DSSwipeCardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSwipeCardT.Props<Record<string, unknown>>>;
+export { DSSwipeCard, DSSwipeCardWithSchema };

package/dist/types/config/slidePositionHelpers.d.ts

@@ -0,0 +1,8 @@
+export interface SwipeTarget {
+    targetSlide: number;
+    direction: 'left' | 'right';
+}
+/**
+ * Calculate swipe target slide based on gesture
+ */
+export declare const calculateSwipeTarget: (deltaX: number, currentSlide: number, totalSlides: number) => SwipeTarget | null;