@brytdesigns/web-component-accordion 1.0.0

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

@@ -0,0 +1,118 @@
+import '@brytdesigns/web-component-utils';
+import { animate } from 'motion';
+import { createEffect, on, onCleanup } from 'solid-js';
+import { useAccordionItem, useAccordion } from '../hooks/index.js';
+
+async function controlPromise(controls) {
+  return new Promise((resolve) => {
+    controls.then(() => resolve(null));
+  });
+}
+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 AccordionContent = (props, { element }) => {
+  const [state] = useAccordionItem(element);
+  const [_, accordionMethods] = useAccordion(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);
+          accordionMethods.updateAnimationQueue(controlPromise(animation2));
+          return onCleanup(() => animation2.complete());
+        }
+        if (isFirstRender) {
+          isFirstRender = false;
+          showElement(element);
+        }
+        const animation = expand(element);
+        accordionMethods.updateAnimationQueue(controlPromise(animation));
+        return onCleanup(() => animation.complete());
+      }
+    )
+  );
+};
+
+export { AccordionContent };
+//# sourceMappingURL=accordion-content.js.map
+//# sourceMappingURL=accordion-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion-content.ts"],"names":["element","animation"],"mappings":"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","file":"accordion-content.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate, type AnimationPlaybackControls } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { useAccordion, useAccordionItem } from \"../hooks/index.js\";\n\ntype AccordionContentProps = {\n  shouldScrollIntoView: boolean;\n};\n\nasync function controlPromise(controls: AnimationPlaybackControls) {\n  return new Promise((resolve) => {\n    controls.then(() => resolve(null));\n  });\n}\n\nconst hideElement = (element: ICustomElement) => {\n  element.style.cssText = `\n      display: none;\n      opacity: 0;\n      visibility: hidden;\n      max-height: 0px;\n    `;\n  element.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n  element.style.cssText = `\n      display: block;\n      opacity: 1;\n      visibility: visible;\n    `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n  el.style.maxHeight = \"max-content\";\n  const height = el.getBoundingClientRect().height;\n  el.style.maxHeight = `${0}`;\n  return height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n  const paddingY = parseInt(getComputedStyle(element).paddingTop);\n  return paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n  const paddingY = parseInt(getComputedStyle(element).paddingBottom);\n  return paddingY;\n};\n\nexport const AccordionContent: CorrectComponentType<AccordionContentProps> = (\n  props,\n  { element },\n) => {\n  const [state] = useAccordionItem(element);\n  const [_, accordionMethods] = useAccordion(element);\n\n  let isFirstRender = true;\n\n  const expand = (element: ICustomElement & HTMLElement) => {\n    showElement(element);\n\n    const height = getHeight(element),\n      pt = getPaddingTop(element),\n      pb = getPaddingBottom(element);\n\n    (Array.from(element.children) as HTMLElement[]).forEach(\n      (child) => (child.style.opacity = \"1\"),\n    );\n\n    const animation = animate(\n      element,\n      {\n        maxHeight: [\"0px\", `${height}px`],\n        paddingTop: [\"0px\", `${pt}px`],\n        paddingBottom: [\"0px\", `${pb}px`],\n      },\n      {\n        duration: 0.35,\n      },\n    );\n\n    animation.then(() => {\n      element.style.maxHeight = \"max-content\";\n      //@ts-ignore\n      element.style.overflow = null;\n      if (props.shouldScrollIntoView)\n        element.scrollIntoView({\n          behavior: \"smooth\",\n          block: \"start\",\n          inline: \"nearest\",\n        });\n      return;\n    });\n\n    return animation;\n  };\n\n  const collapse = (element: ICustomElement & HTMLElement) => {\n    const height = getHeight(element),\n      pt = getPaddingTop(element),\n      pb = getPaddingBottom(element);\n\n    element.style.overflow = \"hidden\";\n\n    (Array.from(element.children) as HTMLElement[]).forEach(\n      (child) => (child.style.opacity = \"0\"),\n    );\n\n    const animation = animate(\n      element,\n      {\n        maxHeight: [`${height}px`, \"0px\"],\n        paddingTop: [`${pt}px`, \"0px\"],\n        paddingBottom: [`${pb}px`, \"0px\"],\n      },\n      {\n        duration: 0.35,\n      },\n    );\n\n    animation.then(() => hideElement(element));\n\n    return animation;\n  };\n\n  createEffect(\n    on(\n      () => state.isExpanded,\n      (isExpanded) => {\n        if (isExpanded) {\n          const animation = collapse(element);\n          accordionMethods.updateAnimationQueue(controlPromise(animation));\n          return onCleanup(() => animation.complete());\n        }\n\n        if (isFirstRender) {\n          isFirstRender = false;\n          showElement(element);\n        }\n\n        const animation = expand(element);\n        accordionMethods.updateAnimationQueue(controlPromise(animation));\n        return onCleanup(() => animation.complete());\n      },\n    ),\n  );\n};\n"]}

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

@@ -0,0 +1,21 @@
+import { toHyphenated } from '@brytdesigns/web-component-utils';
+import { provideAccordionContext, useAccordionContext } from '../hooks/index.js';
+
+const AccordionContext = (props, { element }) => {
+  const context = provideAccordionContext(props, element);
+  const [_, methods] = useAccordionContext(context);
+  const children = Array.from(element.children);
+  const accordionItems = children.filter(
+    (child) => child.tagName === "ACCORDION-ITEM"
+  );
+  accordionItems.forEach((accordionItem, index) => {
+    accordionItem.setAttribute("index", `${index + 1}`);
+    if (accordionItem.getAttribute(toHyphenated("isExpanded")) !== "true")
+      return;
+    methods.item.update(index + 1);
+  });
+};
+
+export { AccordionContext };
+//# sourceMappingURL=accordion-context.js.map
+//# sourceMappingURL=accordion-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion-context.ts"],"names":[],"mappings":";;;AAeO,MAAM,gBAAgE,GAAA,CAC3E,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAM,MAAA,OAAA,GAAU,uBAAwB,CAAA,KAAA,EAAO,OAAO,CAAA;AACtD,EAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,GAAI,oBAAoB,OAAO,CAAA;AAChD,EAAA,MAAM,QAAW,GAAA,KAAA,CAAM,IAAK,CAAA,OAAA,CAAQ,QAAQ,CAAA;AAC5C,EAAA,MAAM,iBAAiB,QAAS,CAAA,MAAA;AAAA,IAC9B,CAAC,KAAU,KAAA,KAAA,CAAM,OAAY,KAAA;AAAA,GAC/B;AACA,EAAe,cAAA,CAAA,OAAA,CAAQ,CAAC,aAAA,EAAe,KAAU,KAAA;AAC/C,IAAA,aAAA,CAAc,YAAa,CAAA,OAAA,EAAS,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAE,CAAA,CAAA;AAClD,IAAA,IAAI,aAAc,CAAA,YAAA,CAAa,YAAa,CAAA,YAAY,CAAC,CAAM,KAAA,MAAA;AAC7D,MAAA;AACF,IAAQ,OAAA,CAAA,IAAA,CAAK,MAAO,CAAA,KAAA,GAAQ,CAAC,CAAA;AAAA,GAC9B,CAAA;AACH","file":"accordion-context.js","sourcesContent":["import {\n  toHyphenated,\n  type CorrectComponentType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n  provideAccordionContext,\n  useAccordionContext,\n} from \"../hooks/index.js\";\n\ntype AccordionContextProps = {\n  activeIndex: number;\n  isAnimating: boolean;\n};\n\nexport const AccordionContext: CorrectComponentType<AccordionContextProps> = (\n  props,\n  { element },\n) => {\n  const context = provideAccordionContext(props, element);\n  const [_, methods] = useAccordionContext(context);\n  const children = Array.from(element.children) as HTMLElement[];\n  const accordionItems = children.filter(\n    (child) => child.tagName === \"ACCORDION-ITEM\",\n  );\n  accordionItems.forEach((accordionItem, index) => {\n    accordionItem.setAttribute(\"index\", `${index + 1}`);\n    if (accordionItem.getAttribute(toHyphenated(\"isExpanded\")) !== \"true\")\n      return;\n    methods.item.update(index + 1);\n  });\n};\n"]}

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

@@ -0,0 +1,15 @@
+import '@brytdesigns/web-component-utils';
+import { provideAccordionItemContext } from '../hooks/index.js';
+
+const AccordionItem = (props, { element }) => {
+  if (element.parentElement?.tagName !== "ACCORDION-CONTEXT")
+    return console.warn(
+      "accordion-item must be an immediate child of accordion-context",
+      element
+    );
+  provideAccordionItemContext(props, element);
+};
+
+export { AccordionItem };
+//# sourceMappingURL=accordion-item.js.map
+//# sourceMappingURL=accordion-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion-item.ts"],"names":[],"mappings":";;;AAUO,MAAM,aAA0D,GAAA,CACrE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAI,IAAA,OAAA,CAAQ,eAAe,OAAY,KAAA,mBAAA;AACrC,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,gEAAA;AAAA,MACA;AAAA,KACF;AAEF,EAAA,2BAAA,CAA4B,OAAO,OAAO,CAAA;AAC5C","file":"accordion-item.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { provideAccordionItemContext } from \"../hooks/index.js\";\n\ntype AccordionItemProps = {\n  index: number;\n  isExpanded: boolean;\n  ariaExpanded: boolean;\n};\n\nexport const AccordionItem: CorrectComponentType<AccordionItemProps> = (\n  props,\n  { element },\n) => {\n  if (element.parentElement?.tagName !== \"ACCORDION-CONTEXT\")\n    return console.warn(\n      \"accordion-item must be an immediate child of accordion-context\",\n      element,\n    );\n\n  provideAccordionItemContext(props, element);\n};\n"]}

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

@@ -0,0 +1,27 @@
+import '@brytdesigns/web-component-utils';
+import { createEffect, onCleanup } from 'solid-js';
+import { useAccordionItem } from '../hooks/index.js';
+
+const AccordionTrigger = (props, { element }) => {
+  const [state, methods] = useAccordionItem(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 { AccordionTrigger };
+//# sourceMappingURL=accordion-trigger.js.map
+//# sourceMappingURL=accordion-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion-trigger.ts"],"names":[],"mappings":";;;;AAUO,MAAM,gBAAgE,GAAA,CAC3E,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,MAAM,CAAC,KAAA,EAAO,OAAO,CAAA,GAAI,iBAAiB,OAAO,CAAA;AAEjD,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,MAAM,cAAc,KAAM,CAAA,WAAA;AAC1B,IAAA,IAAI,WAAa,EAAA;AAEjB,IAAA,MAAM,UAAa,GAAA,IAAI,eAAgB,EAAA,EACrC,iBAAiB,KAAM,CAAA,cAAA;AAEzB,IAAQ,OAAA,CAAA,gBAAA;AAAA,MACN,OAAA;AAAA,MACA,CAAC,KAAU,KAAA;AACT,QAAI,IAAA,cAAA,QAAsB,cAAe,EAAA;AACzC,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA,OACjB;AAAA,MACA,EAAE,MAAQ,EAAA,UAAA,CAAW,MAAO;AAAA,KAC9B;AAEA,IAAA,OAAO,UAAU,MAAM;AACrB,MAAA,UAAA,CAAW,KAAM,EAAA;AAAA,KAClB,CAAA;AAAA,GACF,CAAA;AACH","file":"accordion-trigger.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useAccordionItem } from \"../hooks/index.js\";\n\ntype AccordionTriggerProps = {\n  preventDefault: boolean;\n};\n\nexport const AccordionTrigger: CorrectComponentType<AccordionTriggerProps> = (\n  props,\n  { element },\n) => {\n  const [state, methods] = useAccordionItem(element);\n\n  createEffect(() => {\n    const isAnimating = state.isAnimating;\n    if (isAnimating) return;\n\n    const controller = new AbortController(),\n      preventDefault = props.preventDefault;\n\n    element.addEventListener(\n      \"click\",\n      (event) => {\n        if (preventDefault) event.preventDefault();\n        methods.toggle();\n      },\n      { signal: controller.signal },\n    );\n\n    return onCleanup(() => {\n      controller.abort();\n    });\n  });\n};\n"]}

package/dist/main/components/index.js

@@ -0,0 +1,6 @@
+export * from './accordion-content.js';
+export * from './accordion-item.js';
+export * from './accordion-trigger.js';
+export * from './accordion-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/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useAccordion.js';
+export * from './useAccordionItem.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/useAccordion.js

@@ -0,0 +1,84 @@
+import { createContext, provide, consume } from 'component-register';
+import { splitProps, createEffect, on, batch, untrack, mergeProps, createSelector } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
+
+function initializeAccordionContext(props) {
+  const [element, stateProps] = splitProps(props, ["root"]);
+  const [store, setStore] = createStore({ animationQueue: [] });
+  createEffect(
+    on(
+      () => store.animationQueue,
+      (animationQueue) => {
+        if (!animationQueue.length) return;
+        const animations = Promise.allSettled(store.animationQueue);
+        setElementState("isAnimating", true);
+        animations.finally(() => {
+          batch(() => {
+            setElementState("isAnimating", false);
+            setStore("animationQueue", []);
+          });
+        });
+      }
+    )
+  );
+  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 [
+    mergeProps(store, stateProps),
+    { setElementState, setStore }
+  ];
+}
+const AccordionContextState = createContext(initializeAccordionContext);
+const provideAccordionContext = (initialState, element) => {
+  const props = mergeProps(initialState, { root: element });
+  return provide(AccordionContextState, props, element);
+};
+const useAccordionContext = (context) => {
+  const [state, { setElementState, setStore: setState }] = context;
+  function updateAnimationQueue(animation) {
+    setState("animationQueue", (state2) => [...state2, animation]);
+  }
+  function updateActiveIndex(index) {
+    setElementState("activeIndex", index);
+  }
+  const isActive = createSelector(() => state.activeIndex);
+  return [
+    state,
+    { updateAnimationQueue, item: { update: updateActiveIndex, isActive } }
+  ];
+};
+const useAccordion = (element) => {
+  const context = consume(AccordionContextState, element);
+  if (!context) {
+    throw console.error(
+      "AccordionContext not found! Please ensure to wrap your custom element with accordion-context element."
+    );
+  }
+  return useAccordionContext(context);
+};
+const getAccordionContext = (element) => {
+  const context = getContextFromProvider(
+    AccordionContextState,
+    element
+  );
+  return useAccordionContext(context);
+};
+
+export { getAccordionContext, provideAccordionContext, useAccordion, useAccordionContext };
+//# sourceMappingURL=useAccordion.js.map
+//# sourceMappingURL=useAccordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useAccordion.ts"],"names":["state"],"mappings":"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","file":"useAccordion.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport {\n  createEffect,\n  mergeProps,\n  on,\n  batch,\n  splitProps,\n  createSelector,\n  untrack,\n} 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  isAnimating: boolean;\n  activeIndex: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionContext = ReturnType<typeof initializeAccordionContext>;\n\nfunction initializeAccordionContext(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.allSettled(store.animationQueue);\n        setElementState(\"isAnimating\", true);\n        animations.finally(() => {\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 | number | ((v: boolean | number) => boolean | number),\n  ) {\n    const currentValue = untrack(() => props[key]);\n    if (typeof value === \"function\") {\n      let result: boolean | number = false;\n      if (typeof currentValue === \"number\") {\n        result = value(currentValue || 0);\n      } else if (typeof currentValue === \"boolean\") {\n        result = value(currentValue || false);\n      }\n      if (`${currentValue}` === `${value}`) return;\n      element.root.setAttribute(toHyphenated(key), `${result}`);\n      return;\n    }\n    if (`${currentValue}` === `${value}`) return;\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 AccordionContextState = createContext(initializeAccordionContext);\n\nexport const provideAccordionContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): AccordionContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(AccordionContextState, props, element);\n};\n\nexport const useAccordionContext = (context: AccordionContext) => {\n  const [state, { setElementState, setStore: setState }] = context;\n\n  function updateAnimationQueue(animation: Promise<unknown>) {\n    setState(\"animationQueue\", (state) => [...state, animation]);\n  }\n\n  function updateActiveIndex(index: number) {\n    setElementState(\"activeIndex\", index);\n  }\n\n  const isActive = createSelector(() => state.activeIndex);\n\n  return [\n    state,\n    { updateAnimationQueue, item: { update: updateActiveIndex, isActive } },\n  ] as const;\n};\n\nexport const useAccordion = (element: HTMLElement & ICustomElement) => {\n  const context: AccordionContext = consume(AccordionContextState, element);\n\n  if (!context) {\n    throw console.error(\n      \"AccordionContext not found! Please ensure to wrap your custom element with accordion-context element.\",\n    );\n  }\n\n  return useAccordionContext(context);\n};\n\nexport const getAccordionContext = (element: Element) => {\n  const context = getContextFromProvider<AccordionContext>(\n    AccordionContextState,\n    element,\n  );\n  return useAccordionContext(context);\n};\n"]}

package/dist/main/hooks/useAccordionItem.js

@@ -0,0 +1,101 @@
+import { createContext, provide, consume } from 'component-register';
+import { splitProps, createEffect, batch, mergeProps, untrack } from 'solid-js';
+import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
+import { useAccordion } from './useAccordion.js';
+
+function initializeAccordionItemContext(props) {
+  const [element, privateProps, stateProps] = splitProps(
+    props,
+    ["root"],
+    ["ariaExpanded"]
+  );
+  const [context, methods] = useAccordion(element.root);
+  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}`);
+  }
+  createEffect(() => {
+    const isActive = methods.item.isActive(props.index);
+    batch(() => {
+      setElementState("isExpanded", isActive);
+      setElementState("ariaExpanded", isActive);
+    });
+  });
+  function setActive(index) {
+    methods.item.update(index);
+  }
+  return [
+    mergeProps(stateProps, {
+      get isAnimating() {
+        return context.isAnimating;
+      }
+    }),
+    { setElementState, setActive }
+  ];
+}
+const AccordionItemContextState = createContext(initializeAccordionItemContext);
+const provideAccordionItemContext = (initialState, element) => {
+  const props = mergeProps(initialState, { root: element });
+  return provide(AccordionItemContextState, props, element);
+};
+const useAccordionItemContext = (context) => {
+  const [state, { setElementState, setActive }] = context;
+  function expand() {
+    const index = untrack(() => state.index);
+    batch(() => {
+      setActive(index);
+      setElementState("isExpanded", true);
+    });
+  }
+  function collapse() {
+    batch(() => {
+      setActive(-1);
+      setElementState("isExpanded", false);
+    });
+  }
+  function toggle() {
+    setElementState("isExpanded", (v) => {
+      const index = untrack(() => state.index);
+      const newValue = !v;
+      if (newValue) setActive(index);
+      else setActive(-1);
+      return newValue;
+    });
+  }
+  return [state, { expand, collapse, toggle }];
+};
+const useAccordionItem = (element) => {
+  const context = consume(
+    AccordionItemContextState,
+    element
+  );
+  if (!context) {
+    throw console.error(
+      "AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element."
+    );
+  }
+  return useAccordionItemContext(context);
+};
+const getAccordionItemContext = (element) => {
+  const context = getContextFromProvider(
+    AccordionItemContextState,
+    element
+  );
+  return useAccordionItemContext(context);
+};
+
+export { getAccordionItemContext, provideAccordionItemContext, useAccordionItem, useAccordionItemContext };
+//# sourceMappingURL=useAccordionItem.js.map
+//# sourceMappingURL=useAccordionItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useAccordionItem.ts"],"names":[],"mappings":"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","file":"useAccordionItem.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport { batch, createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n  toHyphenated,\n  getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\nimport { useAccordion } from \"./useAccordion.js\";\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  isExpanded: boolean;\n  index: number;\n  ariaExpanded: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;\n\nfunction initializeAccordionItemContext(props: CreateContextOptions) {\n  const [element, privateProps, stateProps] = splitProps(\n    props,\n    [\"root\"],\n    [\"ariaExpanded\"],\n  );\n  const [context, methods] = useAccordion(element.root);\n\n  function setElementState(\n    key: keyof Omit<CreateContextOptions, \"root\">,\n    value: boolean | number | ((v: boolean | number) => boolean | number),\n  ) {\n    const currentValue = untrack(() => props[key]);\n    if (typeof value === \"function\") {\n      let result: boolean | number = false;\n      if (typeof currentValue === \"number\") {\n        result = value(currentValue || 0);\n      } else if (typeof currentValue === \"boolean\") {\n        result = value(currentValue || false);\n      }\n      if (`${currentValue}` === `${value}`) return;\n      element.root.setAttribute(toHyphenated(key), `${result}`);\n      return;\n    }\n    if (`${currentValue}` === `${value}`) return;\n    return element.root.setAttribute(toHyphenated(key), `${value}`);\n  }\n\n  createEffect(() => {\n    const isActive = methods.item.isActive(props.index);\n    batch(() => {\n      setElementState(\"isExpanded\", isActive);\n      setElementState(\"ariaExpanded\", isActive);\n    });\n  });\n\n  function setActive(index: number) {\n    methods.item.update(index);\n  }\n\n  return [\n    mergeProps(stateProps, {\n      get isAnimating() {\n        return context.isAnimating;\n      },\n    }),\n    { setElementState, setActive },\n  ] as const;\n}\n\nconst AccordionItemContextState = createContext(initializeAccordionItemContext);\n\nexport const provideAccordionItemContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): AccordionItemContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(AccordionItemContextState, props, element);\n};\n\nexport const useAccordionItemContext = (context: AccordionItemContext) => {\n  const [state, { setElementState, setActive }] = context;\n\n  function expand() {\n    const index = untrack(() => state.index);\n    batch(() => {\n      setActive(index);\n      setElementState(\"isExpanded\", true);\n    });\n  }\n\n  function collapse() {\n    batch(() => {\n      setActive(-1);\n      setElementState(\"isExpanded\", false);\n    });\n  }\n\n  function toggle() {\n    setElementState(\"isExpanded\", (v) => {\n      const index = untrack(() => state.index);\n      const newValue = !v;\n      if (newValue) setActive(index);\n      else setActive(-1);\n      return newValue;\n    });\n  }\n\n  return [state, { expand, collapse, toggle }] as const;\n};\n\nexport const useAccordionItem = (element: HTMLElement & ICustomElement) => {\n  const context: AccordionItemContext = consume(\n    AccordionItemContextState,\n    element,\n  );\n\n  if (!context) {\n    throw console.error(\n      \"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n    );\n  }\n\n  return useAccordionItemContext(context);\n};\n\nexport const getAccordionItemContext = (element: Element) => {\n  const context = getContextFromProvider<AccordionItemContext>(\n    AccordionItemContextState,\n    element,\n  );\n  return useAccordionItemContext(context);\n};\n"]}

package/dist/main/index.d.ts

@@ -0,0 +1,126 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ICustomElement, provide } from 'component-register';
+
+export type StoreContext = {
+	animationQueue: Promise<unknown>[];
+};
+export type CreateContextOptions = {
+	root: HTMLElement & ICustomElement;
+	isAnimating: boolean;
+	activeIndex: number;
+};
+export type WalkableNode = Parameters<typeof provide>[2];
+export type AccordionContext = ReturnType<typeof initializeAccordionContext>;
+declare function initializeAccordionContext(props: CreateContextOptions): readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isAnimating: boolean;
+		activeIndex: number;
+	},
+	{
+		readonly setElementState: (key: keyof Omit<CreateContextOptions, "root">, value: boolean | number | ((v: boolean | number) => boolean | number)) => void;
+		readonly setStore: import("solid-js/store").SetStoreFunction<StoreContext>;
+	}
+];
+export declare const provideAccordionContext: (initialState: Omit<CreateContextOptions, "root">, element: WalkableNode) => AccordionContext;
+export declare const useAccordionContext: (context: AccordionContext) => readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isAnimating: boolean;
+		activeIndex: number;
+	},
+	{
+		readonly updateAnimationQueue: (animation: Promise<unknown>) => void;
+		readonly item: {
+			readonly update: (index: number) => void;
+			readonly isActive: (key: number) => boolean;
+		};
+	}
+];
+export declare const useAccordion: (element: HTMLElement & ICustomElement) => readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isAnimating: boolean;
+		activeIndex: number;
+	},
+	{
+		readonly updateAnimationQueue: (animation: Promise<unknown>) => void;
+		readonly item: {
+			readonly update: (index: number) => void;
+			readonly isActive: (key: number) => boolean;
+		};
+	}
+];
+export declare const getAccordionContext: (element: Element) => readonly [
+	{
+		animationQueue: Promise<unknown>[];
+		isAnimating: boolean;
+		activeIndex: number;
+	},
+	{
+		readonly updateAnimationQueue: (animation: Promise<unknown>) => void;
+		readonly item: {
+			readonly update: (index: number) => void;
+			readonly isActive: (key: number) => boolean;
+		};
+	}
+];
+type CreateContextOptions$1 = {
+	root: HTMLElement & ICustomElement;
+	isExpanded: boolean;
+	index: number;
+	ariaExpanded: boolean;
+};
+type WalkableNode$1 = Parameters<typeof provide>[2];
+export type AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;
+declare function initializeAccordionItemContext(props: CreateContextOptions$1): readonly [
+	{
+		isExpanded: boolean;
+		index: number;
+		readonly isAnimating: boolean;
+	},
+	{
+		readonly setElementState: (key: keyof Omit<CreateContextOptions$1, "root">, value: boolean | number | ((v: boolean | number) => boolean | number)) => void;
+		readonly setActive: (index: number) => void;
+	}
+];
+export declare const provideAccordionItemContext: (initialState: Omit<CreateContextOptions$1, "root">, element: WalkableNode$1) => AccordionItemContext;
+export declare const useAccordionItemContext: (context: AccordionItemContext) => readonly [
+	{
+		isExpanded: boolean;
+		index: number;
+		readonly isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+	}
+];
+export declare const useAccordionItem: (element: HTMLElement & ICustomElement) => readonly [
+	{
+		isExpanded: boolean;
+		index: number;
+		readonly isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+	}
+];
+export declare const getAccordionItemContext: (element: Element) => readonly [
+	{
+		isExpanded: boolean;
+		index: number;
+		readonly isAnimating: boolean;
+	},
+	{
+		readonly expand: () => void;
+		readonly collapse: () => void;
+		readonly toggle: () => void;
+	}
+];
+
+export {};

package/dist/main/index.js

@@ -0,0 +1,26 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { AccordionContext, AccordionItem, AccordionTrigger, AccordionContent } from './components/index.js';
+export * from './hooks/index.js';
+
+customShadowlessElement(
+  "accordion-context",
+  { activeIndex: -1, isAnimating: false },
+  correctElementType(AccordionContext)
+);
+customShadowlessElement(
+  "accordion-item",
+  { index: 0, isExpanded: false, ariaExpanded: false },
+  correctElementType(AccordionItem)
+);
+customShadowlessElement(
+  "accordion-trigger",
+  { preventDefault: true },
+  correctElementType(AccordionTrigger)
+);
+customShadowlessElement(
+  "accordion-content",
+  { shouldScrollIntoView: false },
+  correctElementType(AccordionContent)
+);
+//# 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,mBAAA;AAAA,EACA,EAAE,WAAA,EAAa,EAAI,EAAA,WAAA,EAAa,KAAM,EAAA;AAAA,EACtC,mBAAmB,gBAAgB;AACrC,CAAA;AAEA,uBAAA;AAAA,EACE,gBAAA;AAAA,EACA,EAAE,KAAO,EAAA,CAAA,EAAG,UAAY,EAAA,KAAA,EAAO,cAAc,KAAM,EAAA;AAAA,EACnD,mBAAmB,aAAa;AAClC,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAA;AAAA,EACA,EAAE,gBAAgB,IAAK,EAAA;AAAA,EACvB,mBAAmB,gBAAgB;AACrC,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAA;AAAA,EACA,EAAE,sBAAsB,KAAM,EAAA;AAAA,EAC9B,mBAAmB,gBAAgB;AACrC,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n  AccordionContext,\n  AccordionItem,\n  AccordionContent,\n  AccordionTrigger,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n  \"accordion-context\",\n  { activeIndex: -1, isAnimating: false },\n  correctElementType(AccordionContext),\n);\n\ncustomShadowlessElement(\n  \"accordion-item\",\n  { index: 0, isExpanded: false, ariaExpanded: false },\n  correctElementType(AccordionItem),\n);\n\ncustomShadowlessElement(\n  \"accordion-trigger\",\n  { preventDefault: true },\n  correctElementType(AccordionTrigger),\n);\n\ncustomShadowlessElement(\n  \"accordion-content\",\n  { shouldScrollIntoView: false },\n  correctElementType(AccordionContent),\n);\n\nexport * from \"./hooks/index.js\";\n"]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@brytdesigns/web-component-accordion",
+  "version": "1.0.0",
+  "description": "Headless accordion 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.5.0",
+    "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"
+  }
+}