@brytdesigns/web-component-collapsible 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,262 @@
+import { createWithElementContext, customShadowlessElement, correctElementType, toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
+import { animate } from 'motion';
+import { splitProps, untrack, mergeProps, createEffect, on, onCleanup, batch } from 'solid-js';
+import { controlsToPromise } from '@brytdesigns/web-component-core/animation';
+import { createContext, provide, consume } from 'component-register';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/collapsible-content.ts
+var collapsible_content_exports = {};
+__export(collapsible_content_exports, {
+  Component: () => Component,
+  Name: () => Name
+});
+function initializeCollapsibleItemContext(props) {
+  const [element, _, stateProps] = splitProps(
+    props,
+    ["root"],
+    ["ariaExpanded"]
+  );
+  function setElementState(key, value) {
+    const currentValue = untrack(() => props[key]);
+    if (typeof value === "function") {
+      let result = false;
+      if (typeof currentValue === "number") {
+        result = value(currentValue || 0);
+      } else if (typeof currentValue === "boolean") {
+        result = value(currentValue || false);
+      }
+      if (`${currentValue}` === `${value}`) return;
+      element.root.setAttribute(toHyphenated(key), `${result}`);
+      return;
+    }
+    if (`${currentValue}` === `${value}`) return;
+    return element.root.setAttribute(toHyphenated(key), `${value}`);
+  }
+  return [stateProps, { setElementState }];
+}
+var CollapsibleItemContextState = createContext(
+  initializeCollapsibleItemContext
+);
+var provideCollapsibleItemContext = (initialState, element) => {
+  const props = mergeProps(initialState, { root: element });
+  return provide(CollapsibleItemContextState, props, element);
+};
+var useCollapsibleItemContext = (context) => {
+  const [state, { setElementState }] = context;
+  function expand() {
+    batch(() => {
+      setElementState("isExpanded", true);
+      setElementState("ariaExpanded", true);
+      setElementState("isAnimating", true);
+    });
+  }
+  function collapse() {
+    batch(() => {
+      setElementState("isExpanded", false);
+      setElementState("ariaExpanded", false);
+      setElementState("isAnimating", true);
+    });
+  }
+  function toggle() {
+    batch(() => {
+      setElementState("isExpanded", (v) => !v);
+      setElementState("ariaExpanded", (v) => !v);
+      setElementState("isAnimating", true);
+    });
+  }
+  function finish() {
+    setElementState("isAnimating", false);
+  }
+  return [state, { expand, collapse, toggle, finish }];
+};
+var useCollapsibleItem = (element) => {
+  const context = consume(
+    CollapsibleItemContextState,
+    element
+  );
+  if (!context) {
+    throw console.error(
+      "AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element."
+    );
+  }
+  return useCollapsibleItemContext(context);
+};
+var withCollapsibleItemElementContext = createWithElementContext(CollapsibleItemContextState);
+var getCollapsibleItemContext = (element) => {
+  const context = getContextFromProvider(
+    CollapsibleItemContextState,
+    element
+  );
+  return useCollapsibleItemContext(context);
+};
+
+// src/components/collapsible-content.ts
+var hideElement = (element) => {
+  element.style.cssText = `
+      display: none;
+      opacity: 0;
+      visibility: hidden;
+      max-height: 0px;
+    `;
+  element.style.overflow = null;
+};
+var showElement = (element) => {
+  element.style.cssText = `
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    `;
+};
+var getHeight = (el) => {
+  el.style.maxHeight = "max-content";
+  const height = el.getBoundingClientRect().height;
+  el.style.maxHeight = `${0}`;
+  return height;
+};
+var getPaddingTop = (element) => {
+  const paddingY = parseInt(getComputedStyle(element).paddingTop);
+  return paddingY;
+};
+var getPaddingBottom = (element) => {
+  const paddingY = parseInt(getComputedStyle(element).paddingBottom);
+  return paddingY;
+};
+var Name = `collapsible-content`;
+var Component = (props, { element }) => {
+  const [state, methods] = useCollapsibleItem(element);
+  let isFirstRender = true;
+  const expand = (element2) => {
+    showElement(element2);
+    const height = getHeight(element2), pt = getPaddingTop(element2), pb = getPaddingBottom(element2);
+    Array.from(element2.children).forEach((child) => {
+      child.style.opacity = "1";
+    });
+    const animation = animate(
+      element2,
+      {
+        maxHeight: ["0px", `${height}px`],
+        paddingTop: ["0px", `${pt}px`],
+        paddingBottom: ["0px", `${pb}px`]
+      },
+      {
+        duration: 0.35
+      }
+    );
+    animation.then(() => {
+      element2.style.maxHeight = "max-content";
+      element2.style.overflow = null;
+      if (props.shouldScrollIntoView)
+        element2.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest"
+        });
+      return;
+    });
+    return animation;
+  };
+  const collapse = (element2) => {
+    const height = getHeight(element2), pt = getPaddingTop(element2), pb = getPaddingBottom(element2);
+    element2.style.overflow = "hidden";
+    Array.from(element2.children).forEach((child) => {
+      child.style.opacity = "0";
+    });
+    const animation = animate(
+      element2,
+      {
+        maxHeight: [`${height}px`, "0px"],
+        paddingTop: [`${pt}px`, "0px"],
+        paddingBottom: [`${pb}px`, "0px"]
+      },
+      {
+        duration: 0.35
+      }
+    );
+    animation.then(() => hideElement(element2));
+    return animation;
+  };
+  createEffect(
+    on(
+      () => state.isExpanded,
+      (isExpanded) => {
+        if (!isExpanded) {
+          const animation2 = collapse(element);
+          controlsToPromise(animation2).finally(methods.finish);
+          return onCleanup(() => animation2.complete());
+        }
+        if (isFirstRender) {
+          isFirstRender = false;
+          showElement(element);
+        }
+        const animation = expand(element);
+        controlsToPromise(animation).finally(methods.finish);
+        return onCleanup(() => animation.complete());
+      }
+    )
+  );
+};
+
+// src/components/collapsible-trigger.ts
+var collapsible_trigger_exports = {};
+__export(collapsible_trigger_exports, {
+  Component: () => Component2,
+  Name: () => Name2
+});
+var Name2 = `collapsible-trigger`;
+var Component2 = (props, { element }) => {
+  const [state, methods] = useCollapsibleItem(element);
+  createEffect(() => {
+    const isAnimating = state.isAnimating;
+    if (isAnimating) return;
+    const controller = new AbortController(), preventDefault = props.preventDefault;
+    element.addEventListener(
+      "click",
+      (event) => {
+        if (preventDefault) event.preventDefault();
+        methods.toggle();
+      },
+      { signal: controller.signal }
+    );
+    return onCleanup(() => {
+      controller.abort();
+    });
+  });
+};
+
+// src/components/collapsible-item.ts
+var collapsible_item_exports = {};
+__export(collapsible_item_exports, {
+  Component: () => Component3,
+  Name: () => Name3
+});
+var Name3 = `collapsible-item`;
+var Component3 = (props, { element }) => {
+  provideCollapsibleItemContext(props, element);
+};
+
+// src/index.ts
+customShadowlessElement(
+  collapsible_item_exports.Name,
+  { index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },
+  correctElementType(collapsible_item_exports.Component)
+);
+customShadowlessElement(
+  collapsible_trigger_exports.Name,
+  { preventDefault: true },
+  correctElementType(collapsible_trigger_exports.Component)
+);
+customShadowlessElement(
+  collapsible_content_exports.Name,
+  { shouldScrollIntoView: false },
+  correctElementType(collapsible_content_exports.Component)
+);
+
+export { getCollapsibleItemContext, provideCollapsibleItemContext, useCollapsibleItem, useCollapsibleItemContext, withCollapsibleItemElementContext };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collapsible-content.ts","../../src/hooks/useCollapsibleItem.ts","../../src/components/collapsible-trigger.ts","../../src/components/collapsible-item.ts","../../src/index.ts"],"names":["element","animation","Component","Name","createEffect","onCleanup"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n      display: none;\n      opacity: 0;\n      visibility: hidden;\n      max-height: 0px;\n    `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n      display: block;\n      opacity: 1;\n      visibility: visible;\n    `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n","import {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport { batch, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n\ttoHyphenated,\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisExpanded: boolean;\n\tariaExpanded: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype CollapsibleItemContext = ReturnType<\n\ttypeof initializeCollapsibleItemContext\n>;\n\nfunction initializeCollapsibleItemContext(props: CreateContextOptions) {\n\tconst [element, _, stateProps] = splitProps(\n\t\tprops,\n\t\t[\"root\"],\n\t\t[\"ariaExpanded\"],\n\t);\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | number | ((v: boolean | number) => boolean | number),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tlet result: boolean | number = false;\n\t\t\tif (typeof currentValue === \"number\") {\n\t\t\t\tresult = value(currentValue || 0);\n\t\t\t} else if (typeof currentValue === \"boolean\") {\n\t\t\t\tresult = value(currentValue || false);\n\t\t\t}\n\t\t\tif (`${currentValue}` === `${value}`) return;\n\t\t\telement.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn element.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\treturn [stateProps, { setElementState }] as const;\n}\n\nconst CollapsibleItemContextState = createContext(\n\tinitializeCollapsibleItemContext,\n);\n\nexport const provideCollapsibleItemContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): CollapsibleItemContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(CollapsibleItemContextState, props, element);\n};\n\nexport const useCollapsibleItemContext = (context: CollapsibleItemContext) => {\n\tconst [state, { setElementState }] = context;\n\n\tfunction expand() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", true);\n\t\t\tsetElementState(\"ariaExpanded\", true);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction collapse() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", false);\n\t\t\tsetElementState(\"ariaExpanded\", false);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction toggle() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", (v) => !v);\n\t\t\tsetElementState(\"ariaExpanded\", (v) => !v);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction finish() {\n\t\tsetElementState(\"isAnimating\", false);\n\t}\n\n\treturn [state, { expand, collapse, toggle, finish }] as const;\n};\n\nexport const useCollapsibleItem = (element: HTMLElement & ICustomElement) => {\n\tconst context: CollapsibleItemContext = consume(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n\t\t);\n\t}\n\n\treturn useCollapsibleItemContext(context);\n};\n\nexport const withCollapsibleItemElementContext = createWithElementContext<\n\ttypeof CollapsibleItemContextState,\n\tCollapsibleItemContext\n>(CollapsibleItemContextState);\n\nexport const getCollapsibleItemContext = (element: Element) => {\n\tconst context = getContextFromProvider<CollapsibleItemContext>(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\treturn useCollapsibleItemContext(context);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tpreventDefault: boolean;\n};\n\nexport const Name = `collapsible-trigger`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tcreateEffect(() => {\n\t\tconst isAnimating = state.isAnimating;\n\t\tif (isAnimating) return;\n\n\t\tconst controller = new AbortController(),\n\t\t\tpreventDefault = props.preventDefault;\n\n\t\telement.addEventListener(\n\t\t\t\"click\",\n\t\t\t(event) => {\n\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\tmethods.toggle();\n\t\t\t},\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\treturn onCleanup(() => {\n\t\t\tcontroller.abort();\n\t\t});\n\t});\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { provideCollapsibleItemContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\tisExpanded: boolean;\n\tisAnimating: boolean;\n\tariaExpanded: boolean;\n};\n\nexport const Name = `collapsible-item`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tprovideCollapsibleItemContext(props, element);\n};\n","import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tCollapsibleItem,\n\tCollapsibleContent,\n\tCollapsibleTrigger,\n} from \"./components/index.js\";\n\nexport type CollapsibleItemProps = CollapsibleContent.Props;\nexport type CollapsibleTriggerProps = CollapsibleTrigger.Props;\nexport type CollapsibleContentProps = CollapsibleContent.Props;\n\ncustomShadowlessElement(\n\tCollapsibleItem.Name,\n\t{ index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },\n\tcorrectElementType(CollapsibleItem.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleTrigger.Name,\n\t{ preventDefault: true },\n\tcorrectElementType(CollapsibleTrigger.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleContent.Name,\n\t{ shouldScrollIntoView: false },\n\tcorrectElementType(CollapsibleContent.Component),\n);\n\nexport * from \"./hooks/index.js\";\n"]}

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

@@ -0,0 +1,113 @@
+import { animate } from 'motion';
+import { createEffect, on, onCleanup } from 'solid-js';
+import { controlsToPromise } from '@brytdesigns/web-component-core/animation';
+import { useCollapsibleItem } from '../hooks/index.js';
+
+const hideElement = (element) => {
+  element.style.cssText = `
+      display: none;
+      opacity: 0;
+      visibility: hidden;
+      max-height: 0px;
+    `;
+  element.style.overflow = null;
+};
+const showElement = (element) => {
+  element.style.cssText = `
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    `;
+};
+const getHeight = (el) => {
+  el.style.maxHeight = "max-content";
+  const height = el.getBoundingClientRect().height;
+  el.style.maxHeight = `${0}`;
+  return height;
+};
+const getPaddingTop = (element) => {
+  const paddingY = parseInt(getComputedStyle(element).paddingTop);
+  return paddingY;
+};
+const getPaddingBottom = (element) => {
+  const paddingY = parseInt(getComputedStyle(element).paddingBottom);
+  return paddingY;
+};
+const Name = `collapsible-content`;
+const Component = (props, { element }) => {
+  const [state, methods] = useCollapsibleItem(element);
+  let isFirstRender = true;
+  const expand = (element2) => {
+    showElement(element2);
+    const height = getHeight(element2), pt = getPaddingTop(element2), pb = getPaddingBottom(element2);
+    Array.from(element2.children).forEach((child) => {
+      child.style.opacity = "1";
+    });
+    const animation = animate(
+      element2,
+      {
+        maxHeight: ["0px", `${height}px`],
+        paddingTop: ["0px", `${pt}px`],
+        paddingBottom: ["0px", `${pb}px`]
+      },
+      {
+        duration: 0.35
+      }
+    );
+    animation.then(() => {
+      element2.style.maxHeight = "max-content";
+      element2.style.overflow = null;
+      if (props.shouldScrollIntoView)
+        element2.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest"
+        });
+      return;
+    });
+    return animation;
+  };
+  const collapse = (element2) => {
+    const height = getHeight(element2), pt = getPaddingTop(element2), pb = getPaddingBottom(element2);
+    element2.style.overflow = "hidden";
+    Array.from(element2.children).forEach((child) => {
+      child.style.opacity = "0";
+    });
+    const animation = animate(
+      element2,
+      {
+        maxHeight: [`${height}px`, "0px"],
+        paddingTop: [`${pt}px`, "0px"],
+        paddingBottom: [`${pb}px`, "0px"]
+      },
+      {
+        duration: 0.35
+      }
+    );
+    animation.then(() => hideElement(element2));
+    return animation;
+  };
+  createEffect(
+    on(
+      () => state.isExpanded,
+      (isExpanded) => {
+        if (!isExpanded) {
+          const animation2 = collapse(element);
+          controlsToPromise(animation2).finally(methods.finish);
+          return onCleanup(() => animation2.complete());
+        }
+        if (isFirstRender) {
+          isFirstRender = false;
+          showElement(element);
+        }
+        const animation = expand(element);
+        controlsToPromise(animation).finally(methods.finish);
+        return onCleanup(() => animation.complete());
+      }
+    )
+  );
+};
+
+export { Component, Name };
+//# sourceMappingURL=collapsible-content.js.map
+//# sourceMappingURL=collapsible-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/collapsible-content.ts"],"names":["element","animation"],"mappings":"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","file":"collapsible-content.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n      display: none;\n      opacity: 0;\n      visibility: hidden;\n      max-height: 0px;\n    `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n      display: block;\n      opacity: 1;\n      visibility: visible;\n    `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n"]}

package/dist/main/components/collapsible-item.js

@@ -0,0 +1,10 @@
+import { provideCollapsibleItemContext } from '../hooks/index.js';
+
+const Name = `collapsible-item`;
+const Component = (props, { element }) => {
+  provideCollapsibleItemContext(props, element);
+};
+
+export { Component, Name };
+//# sourceMappingURL=collapsible-item.js.map
+//# sourceMappingURL=collapsible-item.js.map

package/dist/main/components/collapsible-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/collapsible-item.ts"],"names":[],"mappings":";;AAUO,MAAM,IAAO,GAAA,CAAA,gBAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC7E,EAAA,6BAAA,CAA8B,OAAO,OAAO,CAAA;AAC7C","file":"collapsible-item.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { provideCollapsibleItemContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\tisExpanded: boolean;\n\tisAnimating: boolean;\n\tariaExpanded: boolean;\n};\n\nexport const Name = `collapsible-item`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tprovideCollapsibleItemContext(props, element);\n};\n"]}

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

@@ -0,0 +1,27 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { useCollapsibleItem } from '../hooks/index.js';
+
+const Name = `collapsible-trigger`;
+const Component = (props, { element }) => {
+  const [state, methods] = useCollapsibleItem(element);
+  createEffect(() => {
+    const isAnimating = state.isAnimating;
+    if (isAnimating) return;
+    const controller = new AbortController(), preventDefault = props.preventDefault;
+    element.addEventListener(
+      "click",
+      (event) => {
+        if (preventDefault) event.preventDefault();
+        methods.toggle();
+      },
+      { signal: controller.signal }
+    );
+    return onCleanup(() => {
+      controller.abort();
+    });
+  });
+};
+
+export { Component, Name };
+//# sourceMappingURL=collapsible-trigger.js.map
+//# sourceMappingURL=collapsible-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/collapsible-trigger.ts"],"names":[],"mappings":";;;AAUO,MAAM,IAAO,GAAA,CAAA,mBAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC7E,EAAA,MAAM,CAAC,KAAA,EAAO,OAAO,CAAA,GAAI,mBAAmB,OAAO,CAAA;AAEnD,EAAA,YAAA,CAAa,MAAM;AAClB,IAAA,MAAM,cAAc,KAAM,CAAA,WAAA;AAC1B,IAAA,IAAI,WAAa,EAAA;AAEjB,IAAA,MAAM,UAAa,GAAA,IAAI,eAAgB,EAAA,EACtC,iBAAiB,KAAM,CAAA,cAAA;AAExB,IAAQ,OAAA,CAAA,gBAAA;AAAA,MACP,OAAA;AAAA,MACA,CAAC,KAAU,KAAA;AACV,QAAI,IAAA,cAAA,QAAsB,cAAe,EAAA;AACzC,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA,OAChB;AAAA,MACA,EAAE,MAAQ,EAAA,UAAA,CAAW,MAAO;AAAA,KAC7B;AAEA,IAAA,OAAO,UAAU,MAAM;AACtB,MAAA,UAAA,CAAW,KAAM,EAAA;AAAA,KACjB,CAAA;AAAA,GACD,CAAA;AACF","file":"collapsible-trigger.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tpreventDefault: boolean;\n};\n\nexport const Name = `collapsible-trigger`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tcreateEffect(() => {\n\t\tconst isAnimating = state.isAnimating;\n\t\tif (isAnimating) return;\n\n\t\tconst controller = new AbortController(),\n\t\t\tpreventDefault = props.preventDefault;\n\n\t\telement.addEventListener(\n\t\t\t\"click\",\n\t\t\t(event) => {\n\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\tmethods.toggle();\n\t\t\t},\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\treturn onCleanup(() => {\n\t\t\tcontroller.abort();\n\t\t});\n\t});\n};\n"]}

package/dist/main/components/index.js

@@ -0,0 +1,8 @@
+import * as collapsibleContent_js from './collapsible-content.js';
+export { collapsibleContent_js as CollapsibleContent };
+import * as collapsibleTrigger_js from './collapsible-trigger.js';
+export { collapsibleTrigger_js as CollapsibleTrigger };
+import * as collapsibleItem_js from './collapsible-item.js';
+export { collapsibleItem_js as CollapsibleItem };
+//# 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/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useCollapsibleItem.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/useCollapsibleItem.js

@@ -0,0 +1,87 @@
+import { createContext, provide, consume } from 'component-register';
+import { splitProps, untrack, mergeProps, batch } from 'solid-js';
+import { createWithElementContext, toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
+
+function initializeCollapsibleItemContext(props) {
+  const [element, _, stateProps] = splitProps(
+    props,
+    ["root"],
+    ["ariaExpanded"]
+  );
+  function setElementState(key, value) {
+    const currentValue = untrack(() => props[key]);
+    if (typeof value === "function") {
+      let result = false;
+      if (typeof currentValue === "number") {
+        result = value(currentValue || 0);
+      } else if (typeof currentValue === "boolean") {
+        result = value(currentValue || false);
+      }
+      if (`${currentValue}` === `${value}`) return;
+      element.root.setAttribute(toHyphenated(key), `${result}`);
+      return;
+    }
+    if (`${currentValue}` === `${value}`) return;
+    return element.root.setAttribute(toHyphenated(key), `${value}`);
+  }
+  return [stateProps, { setElementState }];
+}
+const CollapsibleItemContextState = createContext(
+  initializeCollapsibleItemContext
+);
+const provideCollapsibleItemContext = (initialState, element) => {
+  const props = mergeProps(initialState, { root: element });
+  return provide(CollapsibleItemContextState, props, element);
+};
+const useCollapsibleItemContext = (context) => {
+  const [state, { setElementState }] = context;
+  function expand() {
+    batch(() => {
+      setElementState("isExpanded", true);
+      setElementState("ariaExpanded", true);
+      setElementState("isAnimating", true);
+    });
+  }
+  function collapse() {
+    batch(() => {
+      setElementState("isExpanded", false);
+      setElementState("ariaExpanded", false);
+      setElementState("isAnimating", true);
+    });
+  }
+  function toggle() {
+    batch(() => {
+      setElementState("isExpanded", (v) => !v);
+      setElementState("ariaExpanded", (v) => !v);
+      setElementState("isAnimating", true);
+    });
+  }
+  function finish() {
+    setElementState("isAnimating", false);
+  }
+  return [state, { expand, collapse, toggle, finish }];
+};
+const useCollapsibleItem = (element) => {
+  const context = consume(
+    CollapsibleItemContextState,
+    element
+  );
+  if (!context) {
+    throw console.error(
+      "AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element."
+    );
+  }
+  return useCollapsibleItemContext(context);
+};
+const withCollapsibleItemElementContext = createWithElementContext(CollapsibleItemContextState);
+const getCollapsibleItemContext = (element) => {
+  const context = getContextFromProvider(
+    CollapsibleItemContextState,
+    element
+  );
+  return useCollapsibleItemContext(context);
+};
+
+export { getCollapsibleItemContext, provideCollapsibleItemContext, useCollapsibleItem, useCollapsibleItemContext, withCollapsibleItemElementContext };
+//# sourceMappingURL=useCollapsibleItem.js.map
+//# sourceMappingURL=useCollapsibleItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useCollapsibleItem.ts"],"names":[],"mappings":"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","file":"useCollapsibleItem.js","sourcesContent":["import {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport { batch, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n\ttoHyphenated,\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisExpanded: boolean;\n\tariaExpanded: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype CollapsibleItemContext = ReturnType<\n\ttypeof initializeCollapsibleItemContext\n>;\n\nfunction initializeCollapsibleItemContext(props: CreateContextOptions) {\n\tconst [element, _, stateProps] = splitProps(\n\t\tprops,\n\t\t[\"root\"],\n\t\t[\"ariaExpanded\"],\n\t);\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | number | ((v: boolean | number) => boolean | number),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tlet result: boolean | number = false;\n\t\t\tif (typeof currentValue === \"number\") {\n\t\t\t\tresult = value(currentValue || 0);\n\t\t\t} else if (typeof currentValue === \"boolean\") {\n\t\t\t\tresult = value(currentValue || false);\n\t\t\t}\n\t\t\tif (`${currentValue}` === `${value}`) return;\n\t\t\telement.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn element.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\treturn [stateProps, { setElementState }] as const;\n}\n\nconst CollapsibleItemContextState = createContext(\n\tinitializeCollapsibleItemContext,\n);\n\nexport const provideCollapsibleItemContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): CollapsibleItemContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(CollapsibleItemContextState, props, element);\n};\n\nexport const useCollapsibleItemContext = (context: CollapsibleItemContext) => {\n\tconst [state, { setElementState }] = context;\n\n\tfunction expand() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", true);\n\t\t\tsetElementState(\"ariaExpanded\", true);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction collapse() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", false);\n\t\t\tsetElementState(\"ariaExpanded\", false);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction toggle() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", (v) => !v);\n\t\t\tsetElementState(\"ariaExpanded\", (v) => !v);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction finish() {\n\t\tsetElementState(\"isAnimating\", false);\n\t}\n\n\treturn [state, { expand, collapse, toggle, finish }] as const;\n};\n\nexport const useCollapsibleItem = (element: HTMLElement & ICustomElement) => {\n\tconst context: CollapsibleItemContext = consume(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n\t\t);\n\t}\n\n\treturn useCollapsibleItemContext(context);\n};\n\nexport const withCollapsibleItemElementContext = createWithElementContext<\n\ttypeof CollapsibleItemContextState,\n\tCollapsibleItemContext\n>(CollapsibleItemContextState);\n\nexport const getCollapsibleItemContext = (element: Element) => {\n\tconst context = getContextFromProvider<CollapsibleItemContext>(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\treturn useCollapsibleItemContext(context);\n};\n"]}

package/dist/main/index.d.ts

@@ -0,0 +1,90 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ICustomElement, provide } from 'component-register';
+
+export type CorrectComponentOptions = {
+	element: HTMLElement & ICustomElement;
+};
+export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
+export type Props = {
+	shouldScrollIntoView: boolean;
+};
+declare const Name = "collapsible-content";
+declare const Component: CorrectComponentType<Props>;
+type Props$1 = {
+	preventDefault: boolean;
+};
+declare const Name$1 = "collapsible-trigger";
+declare const Component$1: CorrectComponentType<Props$1>;
+export type CreateContextOptions = {
+	root: HTMLElement & ICustomElement;
+	isExpanded: boolean;
+	ariaExpanded: boolean;
+	isAnimating: boolean;
+};
+export type WalkableNode = Parameters<typeof provide>[2];
+export type CollapsibleItemContext = ReturnType<typeof initializeCollapsibleItemContext>;
+declare function initializeCollapsibleItemContext(props: CreateContextOptions): readonly [
+	{
+		isExpanded: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly setElementState: (key: keyof Omit<CreateContextOptions, "root">, value: boolean | number | ((v: boolean | number) => boolean | number)) => void;
+	}
+];
+export declare const provideCollapsibleItemContext: (initialState: Omit<CreateContextOptions, "root">, element: WalkableNode) => CollapsibleItemContext;
+export declare const useCollapsibleItemContext: (context: CollapsibleItemContext) => readonly [
+	{
+		isExpanded: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+		readonly finish: () => void;
+	}
+];
+export declare const useCollapsibleItem: (element: HTMLElement & ICustomElement) => readonly [
+	{
+		isExpanded: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+		readonly finish: () => void;
+	}
+];
+export declare const withCollapsibleItemElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
+	{
+		isExpanded: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly setElementState: (key: keyof Omit<CreateContextOptions, "root">, value: boolean | number | ((v: boolean | number) => boolean | number)) => void;
+	}
+], dependencies: D) => void | (() => void)) => void;
+export declare const getCollapsibleItemContext: (element: Element) => readonly [
+	{
+		isExpanded: boolean;
+		isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+		readonly finish: () => void;
+	}
+];
+export type CollapsibleItemProps = Props;
+export type CollapsibleTriggerProps = CollapsibleTrigger.Props;
+export type CollapsibleContentProps = Props;
+
+declare namespace CollapsibleTrigger {
+	export { Component$1 as Component, Name$1 as Name, Props$1 as Props };
+}
+
+export {};

package/dist/main/index.js

@@ -0,0 +1,21 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
+import { CollapsibleItem, CollapsibleTrigger, CollapsibleContent } from './components/index.js';
+export * from './hooks/index.js';
+
+customShadowlessElement(
+  CollapsibleItem.Name,
+  { index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },
+  correctElementType(CollapsibleItem.Component)
+);
+customShadowlessElement(
+  CollapsibleTrigger.Name,
+  { preventDefault: true },
+  correctElementType(CollapsibleTrigger.Component)
+);
+customShadowlessElement(
+  CollapsibleContent.Name,
+  { shouldScrollIntoView: false },
+  correctElementType(CollapsibleContent.Component)
+);
+//# 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":";;;;AAeA,uBAAA;AAAA,EACC,eAAgB,CAAA,IAAA;AAAA,EAChB,EAAE,OAAO,CAAG,EAAA,UAAA,EAAY,OAAO,YAAc,EAAA,KAAA,EAAO,aAAa,KAAM,EAAA;AAAA,EACvE,kBAAA,CAAmB,gBAAgB,SAAS;AAC7C,CAAA;AAEA,uBAAA;AAAA,EACC,kBAAmB,CAAA,IAAA;AAAA,EACnB,EAAE,gBAAgB,IAAK,EAAA;AAAA,EACvB,kBAAA,CAAmB,mBAAmB,SAAS;AAChD,CAAA;AAEA,uBAAA;AAAA,EACC,kBAAmB,CAAA,IAAA;AAAA,EACnB,EAAE,sBAAsB,KAAM,EAAA;AAAA,EAC9B,kBAAA,CAAmB,mBAAmB,SAAS;AAChD,CAAA","file":"index.js","sourcesContent":["import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tCollapsibleItem,\n\tCollapsibleContent,\n\tCollapsibleTrigger,\n} from \"./components/index.js\";\n\nexport type CollapsibleItemProps = CollapsibleContent.Props;\nexport type CollapsibleTriggerProps = CollapsibleTrigger.Props;\nexport type CollapsibleContentProps = CollapsibleContent.Props;\n\ncustomShadowlessElement(\n\tCollapsibleItem.Name,\n\t{ index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },\n\tcorrectElementType(CollapsibleItem.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleTrigger.Name,\n\t{ preventDefault: true },\n\tcorrectElementType(CollapsibleTrigger.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleContent.Name,\n\t{ shouldScrollIntoView: false },\n\tcorrectElementType(CollapsibleContent.Component),\n);\n\nexport * from \"./hooks/index.js\";\n"]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@brytdesigns/web-component-collapsible",
+  "version": "1.0.0",
+  "description": "Headless collapsible 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": {
+    "component-register": "0.8.7",
+    "motion": "^12.18.1",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.9",
+    "@brytdesigns/web-component-core": "1.1.5"
+  },
+  "devDependencies": {
+    "dts-bundle-generator": "^9.5.1",
+    "tsup": "^8.4.0"
+  },
+  "scripts": {
+    "build": "tsup --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}