@brytdesigns/web-component-drawer 1.0.0

package/dist/main/components/drawer-backdrop.js

@@ -0,0 +1,60 @@
+import { createEffect, on, onCleanup } from 'solid-js';
+import { animate } from 'motion';
+import { useDrawer } from '../hooks/index.js';
+import { controlPromise, getTransitionConfig } from '../utils.js';
+
+const DrawerBackdrop = (_, { element }) => {
+  const [state, { updateAnimationQueue, close }] = useDrawer(element);
+  createEffect(
+    on(
+      () => state.isOpen,
+      (isOpen) => {
+        if (!isOpen) return;
+        const animation = enter(element);
+        updateAnimationQueue(controlPromise(animation));
+        return onCleanup(animation.complete);
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => state.isOpen,
+      (isOpen) => {
+        if (isOpen) return;
+        const animation = exit(element);
+        updateAnimationQueue(controlPromise(animation));
+        return onCleanup(animation.complete);
+      }
+    )
+  );
+  function enter(element2) {
+    const style = window.getComputedStyle(element2);
+    const options = getTransitionConfig(style);
+    return animate(
+      element2,
+      {
+        opacity: [`var(--opacity-from)`, `var(--opacity-to)`]
+      },
+      options
+    );
+  }
+  function exit(element2) {
+    const style = window.getComputedStyle(element2);
+    const options = getTransitionConfig(style);
+    return animate(
+      element2,
+      {
+        opacity: [`var(--opacity-to)`, `var(--opacity-from)`]
+      },
+      options
+    );
+  }
+  element.addEventListener("click", close);
+  onCleanup(() => {
+    element.removeEventListener("click", close);
+  });
+};
+
+export { DrawerBackdrop };
+//# sourceMappingURL=drawer-backdrop.js.map
+//# sourceMappingURL=drawer-backdrop.js.map

package/dist/main/components/drawer-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/drawer-backdrop.ts"],"names":["element"],"mappings":";;;;;AAUO,MAAM,cAA4D,GAAA,CACvE,CACA,EAAA,EAAE,SACC,KAAA;AACH,EAAM,MAAA,CAAC,OAAO,EAAE,oBAAA,EAAsB,OAAO,CAAA,GAAI,UAAU,OAAO,CAAA;AAElE,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAM,MAAA,SAAA,GAAY,MAAM,OAAO,CAAA;AAC/B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,MAAQ,EAAA;AACZ,QAAM,MAAA,SAAA,GAAY,KAAK,OAAO,CAAA;AAC9B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,SAAS,MAAMA,QAAsB,EAAA;AACnC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,mBAAA,CAAA,EAAuB,CAAmB,iBAAA,CAAA;AAAA,OACtD;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,SAAS,KAAKA,QAAsB,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,iBAAA,CAAA,EAAqB,CAAqB,mBAAA,CAAA;AAAA,OACtD;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,KAAK,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,KAAK,CAAA;AAAA,GAC3C,CAAA;AACH","file":"drawer-backdrop.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { useDrawer } from \"../hooks/index.js\";\nimport { controlPromise, getTransitionConfig } from \"../utils.js\";\n\ntype DrawerBackdropProps = {};\n\nexport const DrawerBackdrop: CorrectComponentType<DrawerBackdropProps> = (\n  _,\n  { element }\n) => {\n  const [state, { updateAnimationQueue, close }] = useDrawer(element);\n\n  createEffect(\n    on(\n      () => state.isOpen,\n      (isOpen) => {\n        if (!isOpen) return;\n        const animation = enter(element);\n        updateAnimationQueue(controlPromise(animation));\n        return onCleanup(animation.complete);\n      }\n    )\n  );\n\n  createEffect(\n    on(\n      () => state.isOpen,\n      (isOpen) => {\n        if (isOpen) return;\n        const animation = exit(element);\n        updateAnimationQueue(controlPromise(animation));\n        return onCleanup(animation.complete);\n      }\n    )\n  );\n\n  function enter(element: HTMLElement) {\n    const style = window.getComputedStyle(element);\n    const options = getTransitionConfig(style);\n    return animate(\n      element,\n      {\n        opacity: [`var(--opacity-from)`, `var(--opacity-to)`],\n      },\n      options\n    );\n  }\n\n  function exit(element: HTMLElement) {\n    const style = window.getComputedStyle(element);\n    const options = getTransitionConfig(style);\n    return animate(\n      element,\n      {\n        opacity: [`var(--opacity-to)`, `var(--opacity-from)`],\n      },\n      options\n    );\n  }\n\n  element.addEventListener(\"click\", close);\n\n  onCleanup(() => {\n    element.removeEventListener(\"click\", close);\n  });\n};\n"]}

package/dist/main/components/drawer-content.js

@@ -0,0 +1,63 @@
+import { createEffect, on, onCleanup } from 'solid-js';
+import { animate } from 'motion';
+import { useDrawer } from '../hooks/index.js';
+import { controlPromise, getTransitionConfig, convertPositionToTranslate } from '../utils.js';
+import { POSITION } from '../consts.js';
+
+const DrawerContent = (props, { element }) => {
+  const [state, { updateAnimationQueue }] = useDrawer(element);
+  createEffect(
+    on(
+      () => state.isOpen,
+      (isOpen) => {
+        if (!isOpen) return;
+        const animation = enter(element);
+        updateAnimationQueue(controlPromise(animation));
+        return onCleanup(animation.complete);
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => state.isOpen,
+      (isOpen) => {
+        if (isOpen) return;
+        const animation = exit(element);
+        updateAnimationQueue(controlPromise(animation));
+        return onCleanup(animation.complete);
+      }
+    )
+  );
+  function enter(element2) {
+    const style = window.getComputedStyle(element2);
+    const transition = getTransitionConfig(style);
+    let position = style.getPropertyValue("--d-position");
+    if (!position) position = POSITION.LEFT;
+    const transform = convertPositionToTranslate(position);
+    return animate(
+      element2,
+      {
+        transform
+      },
+      transition
+    );
+  }
+  function exit(element2) {
+    const style = window.getComputedStyle(element2);
+    const transition = getTransitionConfig(style);
+    let position = style.getPropertyValue("--d-position");
+    if (!position) position = POSITION.LEFT;
+    const transform = convertPositionToTranslate(position);
+    return animate(
+      element2,
+      {
+        transform
+      },
+      transition
+    );
+  }
+};
+
+export { DrawerContent };
+//# sourceMappingURL=drawer-content.js.map
+//# sourceMappingURL=drawer-content.js.map

package/dist/main/components/drawer-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/drawer-content.ts"],"names":["element"],"mappings":";;;;;;AAeO,MAAM,aAA0D,GAAA,CACrE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,MAAM,CAAC,KAAO,EAAA,EAAE,sBAAsB,CAAA,GAAI,UAAU,OAAO,CAAA;AAE3D,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAM,MAAA,SAAA,GAAY,MAAM,OAAO,CAAA;AAC/B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,MAAQ,EAAA;AACZ,QAAM,MAAA,SAAA,GAAY,KAAK,OAAO,CAAA;AAC9B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,SAAS,MAAMA,QAAsB,EAAA;AACnC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,UAAA,GAAa,oBAAoB,KAAK,CAAA;AAC5C,IAAI,IAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,cAAc,CAAA;AACpD,IAAI,IAAA,CAAC,QAAU,EAAA,QAAA,GAAW,QAAS,CAAA,IAAA;AACnC,IAAM,MAAA,SAAA,GAAY,2BAA2B,QAAQ,CAAA;AAErD,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE;AAAA,OACF;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,SAAS,KAAKA,QAAsB,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,UAAA,GAAa,oBAAoB,KAAK,CAAA;AAC5C,IAAI,IAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,cAAc,CAAA;AACpD,IAAI,IAAA,CAAC,QAAU,EAAA,QAAA,GAAW,QAAS,CAAA,IAAA;AACnC,IAAM,MAAA,SAAA,GAAY,2BAA2B,QAAQ,CAAA;AACrD,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE;AAAA,OACF;AAAA,MACA;AAAA,KACF;AAAA;AAEJ","file":"drawer-content.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { useDrawer } from \"../hooks/index.js\";\nimport {\n  controlPromise,\n  convertPositionToTranslate,\n  getTransitionConfig,\n} from \"../utils.js\";\nimport { POSITION, type Position } from \"../consts.js\";\n\ntype DrawerContentProps = {};\n\nexport const DrawerContent: CorrectComponentType<DrawerContentProps> = (\n  props,\n  { element },\n) => {\n  const [state, { updateAnimationQueue }] = useDrawer(element);\n\n  createEffect(\n    on(\n      () => state.isOpen,\n      (isOpen) => {\n        if (!isOpen) return;\n        const animation = enter(element);\n        updateAnimationQueue(controlPromise(animation));\n        return onCleanup(animation.complete);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => state.isOpen,\n      (isOpen) => {\n        if (isOpen) return;\n        const animation = exit(element);\n        updateAnimationQueue(controlPromise(animation));\n        return onCleanup(animation.complete);\n      },\n    ),\n  );\n\n  function enter(element: HTMLElement) {\n    const style = window.getComputedStyle(element);\n    const transition = getTransitionConfig(style);\n    let position = style.getPropertyValue(\"--d-position\") as Position;\n    if (!position) position = POSITION.LEFT;\n    const transform = convertPositionToTranslate(position);\n\n    return animate(\n      element,\n      {\n        transform,\n      },\n      transition,\n    );\n  }\n\n  function exit(element: HTMLElement) {\n    const style = window.getComputedStyle(element);\n    const transition = getTransitionConfig(style);\n    let position = style.getPropertyValue(\"--d-position\") as Position;\n    if (!position) position = POSITION.LEFT;\n    const transform = convertPositionToTranslate(position);\n    return animate(\n      element,\n      {\n        transform,\n      },\n      transition,\n    );\n  }\n};\n"]}

package/dist/main/components/drawer-context.js

@@ -0,0 +1,107 @@
+import { splitProps, createMemo, createEffect, on, onCleanup } from 'solid-js';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock-upgrade';
+import { createFocusTrap } from 'focus-trap';
+import { provideDrawerContext, useDrawerContext } from '../hooks/index.js';
+import { showElement, hideElement } from '../utils.js';
+
+const DrawerContext = (props, { element }) => {
+  const [contextProps, restProps] = splitProps(props, [
+    "isOpen",
+    "isAnimating"
+  ]);
+  const context = provideDrawerContext(contextProps, element);
+  const [state, { setElementState }] = context;
+  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);
+  element.actions = events;
+  const focusTrap = createMemo(() => {
+    return createFocusTrap(element, {
+      allowOutsideClick: true,
+      escapeDeactivates: restProps.closeOnEscape,
+      onDeactivate: () => {
+        setElementState("isOpen", false);
+      }
+    });
+  });
+  createEffect(
+    on(
+      () => state.isOpen,
+      (isOpen) => {
+        const eventName = isOpen ? "drawer:open" : "drawer:close";
+        element.dispatchEvent(
+          new CustomEvent(eventName, {
+            bubbles: true,
+            detail: { isOpen, relatedTarget: element }
+          })
+        );
+        element.dispatchEvent(
+          new CustomEvent("drawer:toggle", {
+            bubbles: true,
+            detail: { isOpen, relatedTarget: element }
+          })
+        );
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => ({
+        isOpen: state.isOpen,
+        focusTrap: focusTrap(),
+        shouldTrapFocus: restProps.shouldTrapFocus
+      }),
+      ({ isOpen, focusTrap: focusTrap2, shouldTrapFocus }) => {
+        if (!isOpen) return;
+        showElement(element);
+        if (!shouldTrapFocus) return;
+        focusTrap2.activate();
+        onCleanup(focusTrap2.deactivate);
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => ({
+        isOpen: state.isOpen,
+        isAnimating: state.isAnimating,
+        shouldTrapFocus: restProps.shouldTrapFocus
+      }),
+      ({ isOpen, isAnimating, shouldTrapFocus }) => {
+        if (isOpen && !isAnimating && shouldTrapFocus)
+          return disableBodyScroll(element, {
+            allowTouchMove: (el) => {
+              if (el instanceof HTMLElement) {
+                let element2 = el;
+                while (element2 && element2 !== document.body) {
+                  if (element2.tagName === "DRAWER-CONTENT") {
+                    return true;
+                  }
+                  element2 = element2.parentElement;
+                }
+              }
+              return false;
+            }
+          });
+        onCleanup(() => {
+          if (!shouldTrapFocus) return;
+          enableBodyScroll(element);
+        });
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),
+      ({ isOpen, animationQueue }) => {
+        if (isOpen) return;
+        return Promise.all(animationQueue).then(() => hideElement(element));
+      }
+    )
+  );
+  onCleanup(() => {
+    clearAllBodyScrollLocks();
+  });
+};
+
+export { DrawerContext };
+//# sourceMappingURL=drawer-context.js.map
+//# sourceMappingURL=drawer-context.js.map

package/dist/main/components/drawer-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/drawer-context.ts"],"names":["focusTrap","element"],"mappings":"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","file":"drawer-context.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createMemo, createEffect, on, onCleanup, splitProps } from \"solid-js\";\nimport {\n  enableBodyScroll,\n  disableBodyScroll,\n  clearAllBodyScrollLocks,\n} from \"body-scroll-lock-upgrade\";\nimport { createFocusTrap } from \"focus-trap\";\n\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\nimport { hideElement, showElement } from \"../utils.js\";\n\ntype DrawerContextProps = {\n  isOpen: boolean;\n  id: string;\n  closeOnEscape: boolean;\n  shouldTrapFocus: boolean;\n  isAnimating: boolean;\n};\n\nexport const DrawerContext: CorrectComponentType<DrawerContextProps> = (\n  props,\n  { element },\n) => {\n  const [contextProps, restProps] = splitProps(props, [\n    \"isOpen\",\n    \"isAnimating\",\n  ]);\n\n  const context = provideDrawerContext(contextProps, element);\n\n  const [state, { setElementState }] = context;\n\n  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\n\n  element.actions = events;\n\n  const focusTrap = createMemo(() => {\n    return createFocusTrap(element, {\n      allowOutsideClick: true,\n      escapeDeactivates: restProps.closeOnEscape,\n      onDeactivate: () => {\n        setElementState(\"isOpen\", false);\n      },\n    });\n  });\n\n  createEffect(\n    on(\n      () => state.isOpen,\n      (isOpen) => {\n        const eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\n        element.dispatchEvent(\n          new CustomEvent(eventName, {\n            bubbles: true,\n            detail: { isOpen, relatedTarget: element },\n          }),\n        );\n        element.dispatchEvent(\n          new CustomEvent(\"drawer:toggle\", {\n            bubbles: true,\n            detail: { isOpen, relatedTarget: element },\n          }),\n        );\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({\n        isOpen: state.isOpen,\n        focusTrap: focusTrap(),\n        shouldTrapFocus: restProps.shouldTrapFocus,\n      }),\n      ({ isOpen, focusTrap, shouldTrapFocus }) => {\n        if (!isOpen) return;\n        showElement(element);\n        if (!shouldTrapFocus) return;\n        focusTrap.activate();\n        onCleanup(focusTrap.deactivate);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({\n        isOpen: state.isOpen,\n        isAnimating: state.isAnimating,\n        shouldTrapFocus: restProps.shouldTrapFocus,\n      }),\n      ({ isOpen, isAnimating, shouldTrapFocus }) => {\n        if (isOpen && !isAnimating && shouldTrapFocus)\n          return disableBodyScroll(element, {\n            allowTouchMove: (el: EventTarget) => {\n              if (el instanceof HTMLElement) {\n                let element = el as (EventTarget & HTMLElement) | null;\n                while (element && element !== document.body) {\n                  if (element.tagName === \"DRAWER-CONTENT\") {\n                    return true;\n                  }\n\n                  element = element.parentElement;\n                }\n              }\n              return false;\n            },\n          });\n        onCleanup(() => {\n          if (!shouldTrapFocus) return;\n          enableBodyScroll(element);\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\n      ({ isOpen, animationQueue }) => {\n        if (isOpen) return;\n        return Promise.all(animationQueue).then(() => hideElement(element));\n      },\n    ),\n  );\n\n  onCleanup(() => {\n    clearAllBodyScrollLocks();\n  });\n};\n"]}

package/dist/main/components/drawer-trigger.js

@@ -0,0 +1,83 @@
+import { createEffect, on, onCleanup } from 'solid-js';
+import { observeElementInViewport } from 'observe-element-in-viewport';
+import { getDrawerContext } from '../hooks/index.js';
+
+const DrawerTrigger = (props, { element }) => {
+  if (!props.target)
+    return console.warn("DrawerTrigger: target prop is required!");
+  if (!props.action)
+    return console.warn("DrawerTrigger: action prop is required!");
+  if (props.action !== "close" && props.action !== "open" && props.action !== "toggle")
+    return console.warn(
+      "DrawerTrigger: action prop must be 'close', 'open', or 'toggle'"
+    );
+  if (!props.on) return console.warn("DrawerTrigger: on prop is required!");
+  const target = document.querySelector(props.target);
+  if (!target) return console.warn("DrawerTrigger: target element not found!");
+  const [state, { open, close, toggle }] = getDrawerContext(target);
+  function dispatchAction(action) {
+    switch (action) {
+      case "close":
+        close();
+        break;
+      case "open":
+        open();
+        break;
+      case "toggle":
+        toggle();
+        break;
+    }
+  }
+  createEffect(() => {
+    element.setAttribute("is-open", `${state.isOpen}`);
+    element.setAttribute("is-animating", `${state.isAnimating}`);
+  });
+  createEffect(
+    on(
+      () => ({
+        action: props.action,
+        on: props.on,
+        preventDefault: props.preventDefault
+      }),
+      ({ action, on: on2, preventDefault }) => {
+        if (!on2 || !action) return;
+        switch (on2) {
+          case "enter":
+            return handleOnEnter(action);
+          case "exit":
+            return handleOnExit(action);
+          default: {
+            let handleEvent2 = function(event) {
+              if (preventDefault) event.preventDefault();
+              dispatchAction(action);
+            };
+            element.addEventListener(on2, handleEvent2);
+            return onCleanup(
+              () => element.removeEventListener(on2, handleEvent2)
+            );
+          }
+        }
+      }
+    )
+  );
+  function handleOnEnter(action) {
+    let unsubscribe = null;
+    if (action === "toggle") {
+      unsubscribe = observeElementInViewport(element, open, close);
+    }
+    if (unsubscribe) onCleanup(unsubscribe);
+    return;
+  }
+  function handleOnExit(action) {
+    let unsubscribe = null;
+    if (action === "toggle") {
+      unsubscribe = observeElementInViewport(element, close, open);
+    }
+    if (unsubscribe) onCleanup(unsubscribe);
+    return;
+  }
+};
+
+export { DrawerTrigger };
+//# sourceMappingURL=drawer-trigger.js.map
+//# sourceMappingURL=drawer-trigger.js.map

package/dist/main/components/drawer-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/drawer-trigger.ts"],"names":["on","handleEvent"],"mappings":"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","file":"drawer-trigger.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, on, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { getDrawerContext } from \"../hooks/index.js\";\n\ntype DrawerTriggerProps = {\n  target?: string;\n  action?: Action | \"\";\n  on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n  preventDefault: boolean;\n};\n\nexport const DrawerTrigger: CorrectComponentType<DrawerTriggerProps> = (\n  props,\n  { element },\n) => {\n  if (!props.target)\n    return console.warn(\"DrawerTrigger: target prop is required!\");\n  if (!props.action)\n    return console.warn(\"DrawerTrigger: action prop is required!\");\n  if (\n    props.action !== \"close\" &&\n    props.action !== \"open\" &&\n    props.action !== \"toggle\"\n  )\n    return console.warn(\n      \"DrawerTrigger: action prop must be 'close', 'open', or 'toggle'\",\n    );\n  if (!props.on) return console.warn(\"DrawerTrigger: on prop is required!\");\n\n  const target = document.querySelector(props.target!);\n  if (!target) return console.warn(\"DrawerTrigger: target element not found!\");\n\n  const [state, { open, close, toggle }] = getDrawerContext(target);\n\n  function dispatchAction(action: Action) {\n    switch (action) {\n      case \"close\":\n        close();\n        break;\n      case \"open\":\n        open();\n        break;\n      case \"toggle\":\n        toggle();\n        break;\n    }\n  }\n\n  createEffect(() => {\n    element.setAttribute(\"is-open\", `${state.isOpen}`);\n    element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n  });\n\n  createEffect(\n    on(\n      () => ({\n        action: props.action!,\n        on: props.on,\n        preventDefault: props.preventDefault,\n      }),\n      ({ action, on, preventDefault }) => {\n        if (!on || !action) return;\n\n        switch (on) {\n          case \"enter\":\n            return handleOnEnter(action);\n          case \"exit\":\n            return handleOnExit(action);\n          default: {\n            function handleEvent(event: Event) {\n              if (preventDefault) event.preventDefault();\n              dispatchAction(action);\n            }\n\n            element.addEventListener(on, handleEvent);\n\n            return onCleanup(() =>\n              element.removeEventListener(on, handleEvent),\n            );\n          }\n        }\n      },\n    ),\n  );\n\n  // Handles the enter/exit events for the drawer.\n  function handleOnEnter(action: Action) {\n    let unsubscribe = null;\n    if (action === \"toggle\") {\n      unsubscribe = observeElementInViewport(element, open, close);\n    }\n\n    if (unsubscribe) onCleanup(unsubscribe);\n    return;\n  }\n\n  function handleOnExit(action: Action) {\n    let unsubscribe = null;\n    if (action === \"toggle\") {\n      unsubscribe = observeElementInViewport(element, close, open);\n    }\n\n    if (unsubscribe) onCleanup(unsubscribe);\n    return;\n  }\n};\n"]}

package/dist/main/components/index.js

@@ -0,0 +1,6 @@
+export * from './drawer-content.js';
+export * from './drawer-trigger.js';
+export * from './drawer-backdrop.js';
+export * from './drawer-context.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/consts.js

@@ -0,0 +1,16 @@
+const POSITION = {
+  TOP: "top",
+  BOTTOM: "bottom",
+  LEFT: "left",
+  RIGHT: "right"
+};
+const ACTION = {
+  OPEN: "open",
+  CLOSE: "close",
+  TOGGLE: "toggle"
+};
+const EVENT_NAMESPACE = `bryt:drawer`;
+
+export { ACTION, EVENT_NAMESPACE, POSITION };
+//# sourceMappingURL=consts.js.map
+//# sourceMappingURL=consts.js.map

package/dist/main/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/consts.ts"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA;AAAA,EACtB,GAAK,EAAA,KAAA;AAAA,EACL,MAAQ,EAAA,QAAA;AAAA,EACR,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA;AACT;AAEO,MAAM,MAAS,GAAA;AAAA,EACpB,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA;AACV;AAEO,MAAM,eAAkB,GAAA,CAAA,WAAA","file":"consts.js","sourcesContent":["export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n  TOP: \"top\",\n  BOTTOM: \"bottom\",\n  LEFT: \"left\",\n  RIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n  OPEN: \"open\",\n  CLOSE: \"close\",\n  TOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n"]}

package/dist/main/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useDrawer.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/useDrawer.js

@@ -0,0 +1,79 @@
+import { createContext, provide, consume } from 'component-register';
+import { splitProps, createEffect, on, batch, mergeProps } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
+
+function initializeDrawerContext(props) {
+  const [element, stateProps] = splitProps(props, ["root"]);
+  const [store, setStore] = createStore({ animationQueue: [] });
+  createEffect(
+    on(
+      () => store.animationQueue,
+      (animationQueue) => {
+        if (!animationQueue.length) return;
+        const animations = Promise.all(store.animationQueue);
+        setElementState("isAnimating", true);
+        animations.then(() => {
+          batch(() => {
+            setElementState("isAnimating", false);
+            setStore("animationQueue", []);
+          });
+        });
+      }
+    )
+  );
+  function setElementState(key, value) {
+    if (typeof value === "function") {
+      const currentValue = props[key];
+      const result = value(currentValue || false);
+      element.root.setAttribute(toHyphenated(key), `${result}`);
+      return;
+    }
+    return element.root.setAttribute(toHyphenated(key), `${value}`);
+  }
+  return [
+    mergeProps(store, stateProps),
+    { setElementState, setStore }
+  ];
+}
+const DrawerContextState = createContext(initializeDrawerContext);
+const provideDrawerContext = (initialState, element) => {
+  const props = mergeProps(initialState, { root: element });
+  return provide(DrawerContextState, props, element);
+};
+const useDrawerContext = (context) => {
+  const [state, { setElementState, setStore: setState }] = context;
+  function updateAnimationQueue(animation) {
+    setState("animationQueue", (state2) => [...state2, animation]);
+  }
+  function close() {
+    setElementState("isOpen", false);
+  }
+  function open() {
+    setElementState("isOpen", true);
+  }
+  function toggle() {
+    setElementState("isOpen", (open2) => !open2);
+  }
+  return [state, { updateAnimationQueue, close, open, toggle }];
+};
+const useDrawer = (element) => {
+  const context = consume(DrawerContextState, element);
+  if (!context) {
+    throw console.error(
+      "DrawerContext not found! Please ensure to wrap your custom element with drawer-context element."
+    );
+  }
+  return useDrawerContext(context);
+};
+const getDrawerContext = (element) => {
+  const context = getContextFromProvider(
+    DrawerContextState,
+    element
+  );
+  return useDrawerContext(context);
+};
+
+export { getDrawerContext, provideDrawerContext, useDrawer, useDrawerContext };
+//# sourceMappingURL=useDrawer.js.map
+//# sourceMappingURL=useDrawer.js.map

package/dist/main/hooks/useDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useDrawer.ts"],"names":["state","open"],"mappings":"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","file":"useDrawer.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport { createEffect, mergeProps, on, batch, splitProps } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n  toHyphenated,\n  getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\n\ntype StoreContext = {\n  animationQueue: Promise<unknown>[];\n};\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  isOpen: boolean;\n  isAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n  const [element, stateProps] = splitProps(props, [\"root\"]);\n  const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\n\n  createEffect(\n    on(\n      () => store.animationQueue,\n      (animationQueue) => {\n        if (!animationQueue.length) return;\n        const animations = Promise.all(store.animationQueue);\n        setElementState(\"isAnimating\", true);\n        animations.then(() => {\n          batch(() => {\n            setElementState(\"isAnimating\", false);\n            setStore(\"animationQueue\", []);\n          });\n        });\n      },\n    ),\n  );\n\n  function setElementState(\n    key: keyof Omit<CreateContextOptions, \"root\">,\n    value: boolean | ((v: boolean) => boolean),\n  ) {\n    if (typeof value === \"function\") {\n      const currentValue = props[key];\n      const result = value(currentValue || false);\n      element.root.setAttribute(toHyphenated(key), `${result}`);\n      return;\n    }\n    return element.root.setAttribute(toHyphenated(key), `${value}`);\n  }\n\n  return [\n    mergeProps(store, stateProps),\n    { setElementState, setStore },\n  ] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): DrawerContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n  const [state, { setElementState, setStore: setState }] = context;\n\n  function updateAnimationQueue(animation: Promise<unknown>) {\n    setState(\"animationQueue\", (state) => [...state, animation]);\n  }\n\n  function close() {\n    setElementState(\"isOpen\", false);\n  }\n\n  function open() {\n    setElementState(\"isOpen\", true);\n  }\n\n  function toggle() {\n    setElementState(\"isOpen\", (open) => !open);\n  }\n\n  return [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n  const context: DrawerContext = consume(DrawerContextState, element);\n\n  if (!context) {\n    throw console.error(\n      \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n    );\n  }\n\n  return useDrawerContext(context);\n};\n\nexport const getDrawerContext = (element: Element) => {\n  const context = getContextFromProvider<DrawerContext>(\n    DrawerContextState,\n    element,\n  );\n  return useDrawerContext(context);\n};\n"]}

package/dist/main/index.d.ts

@@ -0,0 +1,32 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ICustomElement } from 'component-register';
+
+export declare const useDrawer: (element: HTMLElement & ICustomElement) => readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isOpen: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly updateAnimationQueue: (animation: Promise<unknown>) => void;
+		readonly close: () => void;
+		readonly open: () => void;
+		readonly toggle: () => void;
+	}
+];
+export declare const getDrawerContext: (element: Element) => readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isOpen: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly updateAnimationQueue: (animation: Promise<unknown>) => void;
+		readonly close: () => void;
+		readonly open: () => void;
+		readonly toggle: () => void;
+	}
+];
+
+export {};

package/dist/main/index.js

@@ -0,0 +1,32 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { DrawerContext, DrawerTrigger, DrawerBackdrop, DrawerContent } from './components/index.js';
+export { getDrawerContext, useDrawer } from './hooks/index.js';
+
+customShadowlessElement(
+  "drawer-context",
+  {
+    isOpen: false,
+    id: "",
+    closeOnEscape: false,
+    shouldTrapFocus: false,
+    isAnimating: false
+  },
+  correctElementType(DrawerContext)
+);
+customShadowlessElement(
+  "drawer-trigger",
+  { target: "", action: "", on: "click", preventDefault: true },
+  correctElementType(DrawerTrigger)
+);
+customShadowlessElement(
+  "drawer-backdrop",
+  {},
+  correctElementType(DrawerBackdrop)
+);
+customShadowlessElement(
+  "drawer-content",
+  {},
+  correctElementType(DrawerContent)
+);
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAYA,uBAAA;AAAA,EACE,gBAAA;AAAA,EACA;AAAA,IACE,MAAQ,EAAA,KAAA;AAAA,IACR,EAAI,EAAA,EAAA;AAAA,IACJ,aAAe,EAAA,KAAA;AAAA,IACf,eAAiB,EAAA,KAAA;AAAA,IACjB,WAAa,EAAA;AAAA,GACf;AAAA,EACA,mBAAmB,aAAa;AAClC,CAAA;AAEA,uBAAA;AAAA,EACE,gBAAA;AAAA,EACA,EAAE,QAAQ,EAAI,EAAA,MAAA,EAAQ,IAAI,EAAI,EAAA,OAAA,EAAS,gBAAgB,IAAK,EAAA;AAAA,EAC5D,mBAAmB,aAAa;AAClC,CAAA;AAEA,uBAAA;AAAA,EACE,iBAAA;AAAA,EACA,EAAC;AAAA,EACD,mBAAmB,cAAc;AACnC,CAAA;AAEA,uBAAA;AAAA,EACE,gBAAA;AAAA,EACA,EAAC;AAAA,EACD,mBAAmB,aAAa;AAClC,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n  DrawerContent,\n  DrawerContext,\n  DrawerTrigger,\n  DrawerBackdrop,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n  \"drawer-context\",\n  {\n    isOpen: false,\n    id: \"\",\n    closeOnEscape: false,\n    shouldTrapFocus: false,\n    isAnimating: false,\n  },\n  correctElementType(DrawerContext),\n);\n\ncustomShadowlessElement(\n  \"drawer-trigger\",\n  { target: \"\", action: \"\", on: \"click\", preventDefault: true },\n  correctElementType(DrawerTrigger),\n);\n\ncustomShadowlessElement(\n  \"drawer-backdrop\",\n  {},\n  correctElementType(DrawerBackdrop),\n);\n\ncustomShadowlessElement(\n  \"drawer-content\",\n  {},\n  correctElementType(DrawerContent),\n);\n\nexport { useDrawer, getDrawerContext } from \"./hooks/index.js\";\n"]}

package/dist/main/utils.js

@@ -0,0 +1,75 @@
+import { POSITION } from './consts';
+
+function hideElement(element) {
+  element.style.display = "none";
+}
+function showElement(element) {
+  element.style.display = "block";
+}
+async function controlPromise(controls) {
+  return new Promise((resolve) => {
+    controls.then(() => resolve(null));
+  });
+}
+function convertPositionToTranslate(position) {
+  if (position === POSITION.TOP || position === POSITION.BOTTOM)
+    return ["translateY(var(--d-slide-from))", "translateY(var(--d-slide-to))"];
+  return ["translateX(var(--d-slide-from))", "translateX(var(--d-slide-to))"];
+}
+function getTransitionConfig(style) {
+  const properties = {
+    autoplay: style.getPropertyValue("--m-autoplay"),
+    bounce: style.getPropertyValue("--m-bounce"),
+    bounceDamping: style.getPropertyValue("--m-bounce-damping"),
+    bounceStiffness: style.getPropertyValue("--m-bounce-stiffness"),
+    duration: style.getPropertyValue("--m-duration"),
+    damping: style.getPropertyValue("--m-damping"),
+    delay: style.getPropertyValue("--m-delay"),
+    ease: style.getPropertyValue("--m-ease"),
+    elapsed: style.getPropertyValue("--m-elapsed"),
+    mass: style.getPropertyValue("--m-mass"),
+    max: style.getPropertyValue("--m-max"),
+    min: style.getPropertyValue("--m-min"),
+    power: style.getPropertyValue("--m-power"),
+    repeat: style.getPropertyValue("--m-repeat"),
+    repeatDelay: style.getPropertyValue("--m-repeat-delay"),
+    repeatType: style.getPropertyValue("--m-repeat-type"),
+    restDelta: style.getPropertyValue("--m-rest-delta"),
+    restSpeed: style.getPropertyValue("--m-rest-speed"),
+    startTime: style.getPropertyValue("--m-start-time"),
+    timeConstant: style.getPropertyValue("--m-time-constant"),
+    times: style.getPropertyValue("--m-times"),
+    type: style.getPropertyValue("--m-type"),
+    velocity: style.getPropertyValue("--m-velocity"),
+    visualDuration: style.getPropertyValue("--m-visual-duration")
+  };
+  return {
+    autoplay: properties.autoplay === "true",
+    bounce: properties.bounce ? parseFloat(properties.bounce) : void 0,
+    bounceDamping: properties.bounceDamping ? parseFloat(properties.bounceDamping) : void 0,
+    bounceStiffness: properties.bounceStiffness ? parseFloat(properties.bounceStiffness) : void 0,
+    duration: properties.duration ? parseFloat(properties.duration) : void 0,
+    damping: properties.damping ? parseFloat(properties.damping) : void 0,
+    delay: properties.delay ? parseFloat(properties.delay) : void 0,
+    ease: properties.ease,
+    elapsed: properties.elapsed ? parseFloat(properties.elapsed) : void 0,
+    mass: properties.mass ? parseFloat(properties.mass) : void 0,
+    max: properties.max ? parseFloat(properties.max) : void 0,
+    min: properties.min ? parseFloat(properties.min) : void 0,
+    power: properties.power ? parseFloat(properties.power) : void 0,
+    repeat: properties.repeat ? parseInt(properties.repeat) : void 0,
+    repeatDelay: properties.repeatDelay ? parseFloat(properties.repeatDelay) : void 0,
+    repeatType: properties.repeatType,
+    restDelta: properties.restDelta ? parseFloat(properties.restDelta) : void 0,
+    restSpeed: properties.restSpeed ? parseFloat(properties.restSpeed) : void 0,
+    startTime: properties.startTime ? parseFloat(properties.startTime) : void 0,
+    timeConstant: properties.timeConstant ? parseFloat(properties.timeConstant) : void 0,
+    type: properties.type,
+    velocity: properties.velocity ? parseFloat(properties.velocity) : void 0,
+    visualDuration: properties.visualDuration ? parseFloat(properties.visualDuration) : void 0
+  };
+}
+
+export { controlPromise, convertPositionToTranslate, getTransitionConfig, hideElement, showElement };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import type {\n  AnimationGeneratorType,\n  AnimationPlaybackControls,\n  Easing,\n  RepeatType,\n  Transition,\n} from \"motion\";\nimport { POSITION, type Position } from \"./consts\";\n\nexport function hideElement<T extends HTMLElement>(element: T) {\n  element.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n  element.style.display = \"block\";\n}\n\nexport async function controlPromise(controls: AnimationPlaybackControls) {\n  return new Promise((resolve) => {\n    controls.then(() => resolve(null));\n  });\n}\n\nexport function convertPositionToTranslate(position: Position) {\n  if (position === POSITION.TOP || position === POSITION.BOTTOM)\n    return [\"translateY(var(--d-slide-from))\", \"translateY(var(--d-slide-to))\"];\n\n  return [\"translateX(var(--d-slide-from))\", \"translateX(var(--d-slide-to))\"];\n}\n\nexport function getTransitionConfig(style: CSSStyleDeclaration) {\n  const properties = {\n    autoplay: style.getPropertyValue(\"--m-autoplay\"),\n    bounce: style.getPropertyValue(\"--m-bounce\"),\n    bounceDamping: style.getPropertyValue(\"--m-bounce-damping\"),\n    bounceStiffness: style.getPropertyValue(\"--m-bounce-stiffness\"),\n    duration: style.getPropertyValue(\"--m-duration\"),\n    damping: style.getPropertyValue(\"--m-damping\"),\n    delay: style.getPropertyValue(\"--m-delay\"),\n    ease: style.getPropertyValue(\"--m-ease\"),\n    elapsed: style.getPropertyValue(\"--m-elapsed\"),\n    mass: style.getPropertyValue(\"--m-mass\"),\n    max: style.getPropertyValue(\"--m-max\"),\n    min: style.getPropertyValue(\"--m-min\"),\n    power: style.getPropertyValue(\"--m-power\"),\n    repeat: style.getPropertyValue(\"--m-repeat\"),\n    repeatDelay: style.getPropertyValue(\"--m-repeat-delay\"),\n    repeatType: style.getPropertyValue(\"--m-repeat-type\"),\n    restDelta: style.getPropertyValue(\"--m-rest-delta\"),\n    restSpeed: style.getPropertyValue(\"--m-rest-speed\"),\n    startTime: style.getPropertyValue(\"--m-start-time\"),\n    timeConstant: style.getPropertyValue(\"--m-time-constant\"),\n    times: style.getPropertyValue(\"--m-times\"),\n    type: style.getPropertyValue(\"--m-type\"),\n    velocity: style.getPropertyValue(\"--m-velocity\"),\n    visualDuration: style.getPropertyValue(\"--m-visual-duration\"),\n  };\n  return {\n    autoplay: properties.autoplay === \"true\",\n    bounce: properties.bounce ? parseFloat(properties.bounce) : undefined,\n    bounceDamping: properties.bounceDamping\n      ? parseFloat(properties.bounceDamping)\n      : undefined,\n    bounceStiffness: properties.bounceStiffness\n      ? parseFloat(properties.bounceStiffness)\n      : undefined,\n    duration: properties.duration ? parseFloat(properties.duration) : undefined,\n    damping: properties.damping ? parseFloat(properties.damping) : undefined,\n    delay: properties.delay ? parseFloat(properties.delay) : undefined,\n    ease: properties.ease as Easing,\n    elapsed: properties.elapsed ? parseFloat(properties.elapsed) : undefined,\n    mass: properties.mass ? parseFloat(properties.mass) : undefined,\n    max: properties.max ? parseFloat(properties.max) : undefined,\n    min: properties.min ? parseFloat(properties.min) : undefined,\n    power: properties.power ? parseFloat(properties.power) : undefined,\n    repeat: properties.repeat ? parseInt(properties.repeat) : undefined,\n    repeatDelay: properties.repeatDelay\n      ? parseFloat(properties.repeatDelay)\n      : undefined,\n    repeatType: properties.repeatType as RepeatType,\n    restDelta: properties.restDelta\n      ? parseFloat(properties.restDelta)\n      : undefined,\n    restSpeed: properties.restSpeed\n      ? parseFloat(properties.restSpeed)\n      : undefined,\n    startTime: properties.startTime\n      ? parseFloat(properties.startTime)\n      : undefined,\n    timeConstant: properties.timeConstant\n      ? parseFloat(properties.timeConstant)\n      : undefined,\n    type: properties.type as AnimationGeneratorType,\n    velocity: properties.velocity ? parseFloat(properties.velocity) : undefined,\n    visualDuration: properties.visualDuration\n      ? parseFloat(properties.visualDuration)\n      : undefined,\n  } satisfies Transition;\n}\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@brytdesigns/web-component-drawer",
+  "version": "1.0.0",
+  "description": "Headless drawer web component",
+  "main": "./dist/main/index.js",
+  "module": "./dist/main/index.js",
+  "types": "./dist/main/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/main/index.d.ts",
+      "module": "./dist/main/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "Bryt Designs",
+  "license": "ISC",
+  "dependencies": {
+    "body-scroll-lock-upgrade": "^1.1.0",
+    "component-register": "^0.8.7",
+    "focus-trap": "^7.6.4",
+    "motion": "^12.5.0",
+    "observe-element-in-viewport": "^0.0.15",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.5",
+    "@brytdesigns/web-component-utils": "0.1.8"
+  },
+  "devDependencies": {
+    "dts-bundle-generator": "^9.5.1",
+    "tsup": "^8.4.0"
+  },
+  "scripts": {
+    "build": "tsup --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}