@nodeblocks/frontend-faq-block 0.0.2 → 0.1.0

package/README.md

@@ -3,24 +3,29 @@
 Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
 
 ### ✨ Features
+
 - **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
 - **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
 - **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
 - **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
 
 ### 🛠️ How to Use
+
 1. **Clone this repository** 🌀:
+
    ```bash
    git clone <repository-url>
    cd <repository-directory>
    ```
 
 2. **Install dependencies** 📦:
+
    ```bash
    npm install
    ```
 
 3. **Start development** 🛠️:
+
    ```bash
    npm run watch
    ```
@@ -48,10 +53,12 @@ This ensures Nodeblocks libraries integrate seamlessly with different workflows.
    npm link
    ```
 2. In the test project you want to run:
+
    ```bash
    npm i
    npm link @basaldev/frontend-starter-kit
    ```
-(Note that in real life your library would not be called frontend-starter-kit.)
 
-3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
+   (Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.

package/dist/context.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+type FaqContextValue = {
+    faqTitle: ReactNode;
+    subtitle: ReactNode;
+    items: {
+        question: string;
+        answer: string;
+    }[];
+    activeIndex: number | null;
+    toggleAccordion: (index: number) => void;
+};
+export declare const FaqProvider: ({ children, ...value }: FaqContextValue & {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFaqContext: () => FaqContextValue;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,wBAGzB,eAAe,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAEA,CAAC;AAEF,eAAO,MAAM,aAAa,uBAOzB,CAAC"}

package/dist/faq.d.ts

@@ -1,6 +1,54 @@
-import React from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import './faq.css';
-import { FAQProps } from './types';
-export declare const FAQ: React.FC<FAQProps>;
+import { BlocksOverride } from './lib';
+export declare const FAQ: {
+    <CustomBlocks extends Record<string, ReactNode> = {}>({ faqTitle, subtitle, items, className, children, ...props }: ComponentProps<"div"> & {
+        faqTitle: ReactNode;
+        subtitle: ReactNode;
+        items: {
+            question: string;
+            answer: string;
+        }[];
+        children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;
+    }): import("react/jsx-runtime").JSX.Element;
+    Title(props: Partial<ComponentProps<"div"> & {
+        subtitle: string;
+    }>): import("react/jsx-runtime").JSX.Element;
+    Item({ className, question, answer, index, isActive, onToggle, ...props }: Partial<ComponentProps<"div">> & {
+        question: string;
+        answer: string;
+        index: number;
+        isActive: boolean;
+        onToggle: (index: number) => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    ItemList(props: Partial<ComponentProps<"div"> & {
+        subtitle: string;
+    }>): import("react/jsx-runtime").JSX.Element;
+};
+declare const defaultBlocks: {
+    title: import("react").ReactElement<Partial<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        subtitle: string;
+    }>, (props: Partial<ComponentProps<"div"> & {
+        subtitle: string;
+    }>) => import("react/jsx-runtime").JSX.Element>;
+    item: import("react").ReactElement<Partial<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>> & {
+        question: string;
+        answer: string;
+        index: number;
+        isActive: boolean;
+        onToggle: (index: number) => void;
+    }, ({ className, question, answer, index, isActive, onToggle, ...props }: Partial<ComponentProps<"div">> & {
+        question: string;
+        answer: string;
+        index: number;
+        isActive: boolean;
+        onToggle: (index: number) => void;
+    }) => import("react/jsx-runtime").JSX.Element>;
+    itemList: import("react").ReactElement<Partial<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        subtitle: string;
+    }>, (props: Partial<ComponentProps<"div"> & {
+        subtitle: string;
+    }>) => import("react/jsx-runtime").JSX.Element>;
+};
 export default FAQ;
 //# sourceMappingURL=faq.d.ts.map

package/dist/faq.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../src/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,WAAW,CAAC;AAGnB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA+BlC,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../src/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,SAAS,EAAyB,MAAM,OAAO,CAAC;AACnF,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,cAAc,EAAuE,MAAM,OAAO,CAAC;AAG5G,eAAO,MAAM,GAAG;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,qEAO/D,cAAc,CAAC,KAAK,CAAC,GAAG;QACzB,QAAQ,EAAE,SAAS,CAAC;QACpB,QAAQ,EAAE,SAAS,CAAC;QACpB,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC;YACjB,MAAM,EAAE,MAAM,CAAC;SAChB,EAAE,CAAC;QACJ,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D;iBAyCmB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;+EA+BtE,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG;QAClC,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC;oBAqBsB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CA5D3E,CAAC;AA+EF,QAAA,MAAM,aAAa;;kBA7E6C,MAAM;gBAAlD,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;;kBAgC7D,MAAM;gBACR,MAAM;eACP,MAAM;kBACH,OAAO;kBACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;8EALhC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG;QAClC,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC;;kBAqBkE,MAAM;gBAAlD,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAuB1E,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/dist/index.cjs.js

@@ -30,47 +30,82 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1D1E20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
+var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006ead;\n  --color-object-accent-primary-emphasis: #006ead;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1d1e20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-accordion .nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-accordion .nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-accordion .nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-accordion .nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-accordion .nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-accordion .nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-accordion .nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-faq-accordion .nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-accordion .nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
 styleInject(css_248z);
 
-function DefaultChevronIcon({ direction }) {
-    return direction === 'up' ? (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
-}
-function FAQTitle({ title, subtitle }) {
-    return (jsxRuntime.jsxs("div", { className: "nbb-faq-heading", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h2", { children: subtitle })] }));
-}
-function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }) {
-    return (jsxRuntime.jsxs("div", { className: "nbb-faq-item", children: [jsxRuntime.jsxs("button", { className: `nbb-faq-question ${activeIndex === index ? 'active' : ''}`, onClick: () => toggleAccordion(index), children: [jsxRuntime.jsxs("div", { className: "nbb-faq-header", children: [jsxRuntime.jsx("span", { className: "nbb-question-mark", children: "Q." }), jsxRuntime.jsx("span", { children: item.question })] }), jsxRuntime.jsx("span", { className: "nbb-faq-toggle", children: jsxRuntime.jsx(ChevronIcon, { direction: `${activeIndex === index ? 'up' : 'down'}` }) })] }), activeIndex === index && (jsxRuntime.jsx("div", { className: "nbb-faq-answer", children: jsxRuntime.jsx("p", { children: item.answer }) }))] }));
+/**
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
+ *
+ * @param components - A map of default block keys to component functions.
+ *
+ * @example
+ * const defaultBlocks = createDefaultBlocks({
+ *   title: Title,
+ *   description: Description,
+ *   form: Form,
+ * });
+ */
+function createDefaultBlocks(components) {
+    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, react.createElement(Component, { key })]));
 }
-const defaultOptions = {};
-const defaultBlocks = {
-    FAQTitle: FAQTitle,
-    FAQItem: FAQItem,
-    FAQChevronIcon: DefaultChevronIcon
-};
-
 /**
- * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
  *
- * @param defaultBlocks - The default blocks to be used.
- * @param children - An optional function that returns custom blocks and arguments.
- * @param args - Additional unknown arguments.
- * @returns An object containing the merged blocks and additional arguments.
+ * @param props
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
+ * @param props.defaultBlocks - The default blocks of outer component.
+ * @param props.children - A function returning the JSX to render.
+ *
+ * @example
+ * <BlocksOverrideComponent
+ *   defaultBlocks={defaultFormBlocks}
+ *   blocksOverride={children}
+ * >
+ *   {({ blocks, blockOrder }) =>
+ *     blockOrder.map((key) => (
+ *       <Fragment key={String(key)}>{blocks[key]}</Fragment>
+ *     ))
+ *   }
+ * </BlocksOverrideComponent>
  */
-function setBlocks(defaultBlocks, defaultOptions, children) {
-    const results = children
-        ? children({ defaultBlocks, ...defaultOptions })
-        : { blocks: {}, ...defaultOptions };
-    const { blocks: customBlocks = {} } = results;
-    return {
-        ...results,
-        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
-            key,
-            customBlocks[key] || defaultComponent,
-        ])),
-    };
+function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
+    if (blocksOverride === undefined) {
+        return children({
+            // TODO: Remove this assertion
+            blocks: defaultBlocks,
+            blockOrder: defaultBlockOrder,
+        });
+    }
+    if (typeof blocksOverride === 'function') {
+        const { blocks, blockOrder } = blocksOverride({
+            defaultBlocks,
+            defaultBlockOrder,
+        });
+        return children({ blocks, blockOrder });
+    }
+    return blocksOverride;
+}
+function deepMerge(obj1, obj2) {
+    const result = { ...obj1 };
+    for (const key in obj2) {
+        if (obj2.hasOwnProperty(key)) {
+            const val1 = result[key];
+            const val2 = obj2[key];
+            if (Array.isArray(val1) || Array.isArray(val2)) {
+                // If either is an array, replace entirely with obj2's value
+                result[key] = val2;
+            }
+            else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
+                result[key] = deepMerge(val1, val2);
+            }
+            else {
+                result[key] = val2;
+            }
+        }
+    }
+    return result;
 }
-
 /**
  * Utility function to join class names together, ignoring undefined or nil values.
  * @param classes - The class names to join.
@@ -80,15 +115,50 @@ function classNames(...classes) {
     return classes.flat().filter(Boolean).join(' ');
 }
 
-const FAQ = ({ className, title, subtitle, questionsAndAnswers, children, }) => {
+const FaqContext = react.createContext(undefined);
+const FaqProvider = ({ children, ...value }) => {
+    return jsxRuntime.jsx(FaqContext.Provider, { value: value, children: children });
+};
+const useFaqContext = () => {
+    const context = react.useContext(FaqContext);
+    if (!context) {
+        throw new Error('useFaqContext must be used within a FaqProvider');
+    }
+    return context;
+};
+
+const FAQ = ({ faqTitle, subtitle, items, className, children, ...props }) => {
     const [activeIndex, setActiveIndex] = react.useState(null);
-    const toggleAccordion = (index) => {
-        setActiveIndex(activeIndex === index ? null : index);
-    };
-    const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);
-    const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;
-    return (jsxRuntime.jsxs("div", { className: classNames('nbb-faq-accordion', className), children: [jsxRuntime.jsx(FAQTitle, { title: title, subtitle: subtitle }), questionsAndAnswers.map((item, index) => (jsxRuntime.jsx(FAQItem, { item: item, index: index, activeIndex: activeIndex, toggleAccordion: toggleAccordion, ChevronIcon: FAQChevronIcon }, index)))] }));
+    const toggleAccordion = react.useCallback((index) => {
+        setActiveIndex((activeIndex) => (activeIndex === index ? null : index));
+    }, [setActiveIndex]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(FaqProvider, { faqTitle,
+            subtitle,
+            items,
+            activeIndex,
+            toggleAccordion, children: jsxRuntime.jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { item, ...blocks }, blockOrder }) => (jsxRuntime.jsx("div", { className: classNames('nbb-faq-accordion', className), ...props, children: blockOrder
+                        .filter((key) => key in blocks)
+                        .map((key) => (jsxRuntime.jsx(react.Fragment, { children: blocks[key] }, String(key)))) })) }) }) }));
+};
+FAQ.Title = (props) => {
+    const { children, className, faqTitle, subtitle } = deepMerge(useFaqContext(), props);
+    return (jsxRuntime.jsxs("div", { className: classNames('nbb-faq-heading', className), ...props, children: [jsxRuntime.jsx("h3", { children: children || faqTitle }), jsxRuntime.jsx("h2", { children: subtitle })] }));
+};
+const ChevronIcon = ({ direction }) => {
+    return direction === 'up' ? (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
+};
+FAQ.Item = ({ className, question, answer, index, isActive, onToggle, ...props }) => {
+    return (jsxRuntime.jsxs("div", { className: classNames('nbb-faq-item', className), ...props, children: [jsxRuntime.jsxs("button", { className: `nbb-faq-question ${isActive ? 'active' : ''}`, onClick: () => onToggle(index), children: [jsxRuntime.jsxs("div", { className: "nbb-faq-header", children: [jsxRuntime.jsx("span", { className: "nbb-question-mark", children: "Q." }), jsxRuntime.jsx("span", { children: question })] }), jsxRuntime.jsx("span", { className: "nbb-faq-toggle", children: jsxRuntime.jsx(ChevronIcon, { direction: `${isActive ? 'up' : 'down'}` }) })] }), isActive && (jsxRuntime.jsx("div", { className: "nbb-faq-answer", children: jsxRuntime.jsx("p", { children: answer }) }))] }));
+};
+FAQ.ItemList = (props) => {
+    const { className, items, activeIndex, toggleAccordion } = deepMerge(useFaqContext(), props);
+    return (jsxRuntime.jsx("div", { className: classNames('nbb-item-list', className), ...props, children: items.map((item, index) => (jsxRuntime.jsx(FAQ.Item, { question: item.question, answer: item.answer, index: index, isActive: index == activeIndex, onToggle: toggleAccordion }, index))) }));
 };
+const defaultBlocks = createDefaultBlocks({
+    title: FAQ.Title,
+    item: FAQ.Item,
+    itemList: FAQ.ItemList,
+});
 
 exports.FAQ = FAQ;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/className.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, FAQListItem } from './types'\n\nfunction DefaultChevronIcon({ direction }: { direction: string }) {\n  return direction === 'up' ? (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  ) : (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  );\n}\n\n\nexport function FAQTitle({ title, subtitle }: { title: string; subtitle: string }) {\n  return (\n    <div className=\"nbb-faq-heading\">\n      <h3>{title}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  )\n}\nexport function FAQItem({\n  item,\n  index,\n  activeIndex, \n  toggleAccordion,\n  ChevronIcon }: {\n    item: FAQListItem;\n    index: number;\n    activeIndex: number | null;\n    toggleAccordion: (index: number) => void;\n    ChevronIcon: React.FC<{ direction: string }>\n  }) {\n  return (\n    <div className=\"nbb-faq-item\">\n      <button\n        className={`nbb-faq-question ${activeIndex === index ? 'active' : ''}`}\n        onClick={() => toggleAccordion(index)}\n      >\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{item.question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${activeIndex === index ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {activeIndex === index && (\n        <div className=\"nbb-faq-answer\">\n          <p>{item.answer}</p>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const defaultOptions = {}\n\nexport const defaultBlocks: DefaultBlocks = {\n  FAQTitle: FAQTitle,\n  FAQItem: FAQItem,\n  FAQChevronIcon: DefaultChevronIcon\n};\n","import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\nexport function setBlocks(\n  defaultBlocks: DefaultBlocks,\n  defaultOptions: DefaultOptions,\n  children?: (props: ChildrenProps) => DefaultOptions & {\n    blocks: { [x: string]: any };\n  },\n) {\n  const results = children\n    ? children({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  const {\n    blocks: customBlocks = {}\n  } = results;\n  return {\n    ...results,\n    blocks: Object.fromEntries(\n      Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n        key,\n        customBlocks[key] || defaultComponent,\n      ])\n    ),\n  };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React, { useState } from 'react';\nimport './faq.css';\nimport { defaultBlocks, defaultOptions } from './blocks';\nimport { setBlocks } from './lib';\nimport { FAQProps } from './types';\nimport { classNames } from './className';\n\nexport const FAQ: React.FC<FAQProps> = ({\n  className,\n  title,\n  subtitle,\n  questionsAndAnswers,\n  children,\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);\n  const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;\n\n  return (\n    <div className={classNames('nbb-faq-accordion', className)}>\n      <FAQTitle title={title} subtitle={subtitle} />\n      {questionsAndAnswers.map((item, index) => (\n        <FAQItem\n          key={index}\n          item={item}\n          index={index}\n          activeIndex={activeIndex}\n          toggleAccordion={toggleAccordion}\n          ChevronIcon={FAQChevronIcon}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default FAQ;\n"],"names":["_jsx","_jsxs","useState"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/context.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  if (typeof blocksOverride === 'function') {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  return blocksOverride;\n}\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}\n","import { createContext, ReactNode, useContext } from 'react';\n\ntype FaqContextValue = {\n  faqTitle: ReactNode;\n  subtitle: ReactNode;\n  items: {\n    question: string;\n    answer: string;\n  }[];\n  activeIndex: number | null;\n  toggleAccordion: (index: number) => void;\n};\n\nconst FaqContext = createContext<FaqContextValue | undefined>(undefined);\n\nexport const FaqProvider = ({\n  children,\n  ...value\n}: FaqContextValue & {\n  children: ReactNode;\n}) => {\n  return <FaqContext.Provider value={value}>{children}</FaqContext.Provider>;\n};\n\nexport const useFaqContext = () => {\n  const context = useContext<FaqContextValue | undefined>(FaqContext);\n\n  if (!context) {\n    throw new Error('useFaqContext must be used within a FaqProvider');\n  }\n  return context;\n};\n","import { ComponentProps, Fragment, ReactNode, useCallback, useState } from 'react';\nimport './faq.css';\nimport { BlocksOverride, BlocksOverrideComponent, classNames, createDefaultBlocks, deepMerge } from './lib';\nimport { FaqProvider, useFaqContext } from './context';\n\nexport const FAQ = <CustomBlocks extends Record<string, ReactNode> = {}>({\n  faqTitle,\n  subtitle,\n  items,\n  className,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  faqTitle: ReactNode;\n  subtitle: ReactNode;\n  items: {\n    question: string;\n    answer: string;\n  }[];\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = useCallback(\n    (index: number) => {\n      setActiveIndex((activeIndex) => (activeIndex === index ? null : index));\n    },\n    [setActiveIndex]\n  );\n\n  return (\n    <>\n      <FaqProvider\n        {...{\n          faqTitle,\n          subtitle,\n          items,\n          activeIndex,\n          toggleAccordion,\n        }}\n      >\n        <BlocksOverrideComponent\n          defaultBlocks={defaultBlocks}\n          defaultBlockOrder={Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]}\n          blocksOverride={children}\n        >\n          {({ blocks: { item, ...blocks }, blockOrder }) => (\n            <div className={classNames('nbb-faq-accordion', className)} {...props}>\n              {blockOrder\n                .filter((key) => key in blocks)\n                .map<ReactNode>((key) => (\n                  <Fragment key={String(key)}>{blocks[key]}</Fragment>\n                ))}\n            </div>\n          )}\n        </BlocksOverrideComponent>\n      </FaqProvider>\n    </>\n  );\n};\n\nFAQ.Title = (props: Partial<ComponentProps<'div'> & { subtitle: string }>) => {\n  const { children, className, faqTitle, subtitle } = deepMerge(useFaqContext(), props);\n\n  return (\n    <div className={classNames('nbb-faq-heading', className)} {...props}>\n      <h3>{children || faqTitle}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  );\n};\n\nconst ChevronIcon = ({ direction }: { direction: string }) => {\n  return direction === 'up' ? (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\" fill=\"#737D90\" />\n    </svg>\n  ) : (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\" fill=\"#737D90\" />\n    </svg>\n  );\n};\n\nFAQ.Item = ({\n  className,\n  question,\n  answer,\n  index,\n  isActive,\n  onToggle,\n  ...props\n}: Partial<ComponentProps<'div'>> & {\n  question: string;\n  answer: string;\n  index: number;\n  isActive: boolean;\n  onToggle: (index: number) => void;\n}) => {\n  return (\n    <div className={classNames('nbb-faq-item', className)} {...props}>\n      <button className={`nbb-faq-question ${isActive ? 'active' : ''}`} onClick={() => onToggle(index)}>\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${isActive ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {isActive && (\n        <div className=\"nbb-faq-answer\">\n          <p>{answer}</p>\n        </div>\n      )}\n    </div>\n  );\n};\n\nFAQ.ItemList = (props: Partial<ComponentProps<'div'> & { subtitle: string }>) => {\n  const { className, items, activeIndex, toggleAccordion } = deepMerge(useFaqContext(), props);\n\n  return (\n    <div className={classNames('nbb-item-list', className)} {...props}>\n      {items.map((item, index) => (\n        <FAQ.Item\n          key={index}\n          question={item.question}\n          answer={item.answer}\n          index={index}\n          isActive={index == activeIndex}\n          onToggle={toggleAccordion}\n        />\n      ))}\n    </div>\n  );\n};\n\nconst defaultBlocks = createDefaultBlocks({\n  title: FAQ.Title,\n  item: FAQ.Item,\n  itemList: FAQ.ItemList,\n});\n\nexport default FAQ;\n"],"names":["createElement","createContext","_jsx","useContext","useState","useCallback","_Fragment","Fragment","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FAQ } from "./faq";
+export { default as FAQ } from './faq';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { createElement, createContext, useContext, useState, useCallback, Fragment as Fragment$1 } from 'react';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -28,47 +28,82 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1D1E20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
+var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006ead;\n  --color-object-accent-primary-emphasis: #006ead;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1d1e20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-accordion .nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-accordion .nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-accordion .nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-accordion .nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-accordion .nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-accordion .nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-accordion .nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-faq-accordion .nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-accordion .nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
 styleInject(css_248z);
 
-function DefaultChevronIcon({ direction }) {
-    return direction === 'up' ? (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
-}
-function FAQTitle({ title, subtitle }) {
-    return (jsxs("div", { className: "nbb-faq-heading", children: [jsx("h3", { children: title }), jsx("h2", { children: subtitle })] }));
-}
-function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }) {
-    return (jsxs("div", { className: "nbb-faq-item", children: [jsxs("button", { className: `nbb-faq-question ${activeIndex === index ? 'active' : ''}`, onClick: () => toggleAccordion(index), children: [jsxs("div", { className: "nbb-faq-header", children: [jsx("span", { className: "nbb-question-mark", children: "Q." }), jsx("span", { children: item.question })] }), jsx("span", { className: "nbb-faq-toggle", children: jsx(ChevronIcon, { direction: `${activeIndex === index ? 'up' : 'down'}` }) })] }), activeIndex === index && (jsx("div", { className: "nbb-faq-answer", children: jsx("p", { children: item.answer }) }))] }));
+/**
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
+ *
+ * @param components - A map of default block keys to component functions.
+ *
+ * @example
+ * const defaultBlocks = createDefaultBlocks({
+ *   title: Title,
+ *   description: Description,
+ *   form: Form,
+ * });
+ */
+function createDefaultBlocks(components) {
+    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })]));
 }
-const defaultOptions = {};
-const defaultBlocks = {
-    FAQTitle: FAQTitle,
-    FAQItem: FAQItem,
-    FAQChevronIcon: DefaultChevronIcon
-};
-
 /**
- * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
  *
- * @param defaultBlocks - The default blocks to be used.
- * @param children - An optional function that returns custom blocks and arguments.
- * @param args - Additional unknown arguments.
- * @returns An object containing the merged blocks and additional arguments.
+ * @param props
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
+ * @param props.defaultBlocks - The default blocks of outer component.
+ * @param props.children - A function returning the JSX to render.
+ *
+ * @example
+ * <BlocksOverrideComponent
+ *   defaultBlocks={defaultFormBlocks}
+ *   blocksOverride={children}
+ * >
+ *   {({ blocks, blockOrder }) =>
+ *     blockOrder.map((key) => (
+ *       <Fragment key={String(key)}>{blocks[key]}</Fragment>
+ *     ))
+ *   }
+ * </BlocksOverrideComponent>
  */
-function setBlocks(defaultBlocks, defaultOptions, children) {
-    const results = children
-        ? children({ defaultBlocks, ...defaultOptions })
-        : { blocks: {}, ...defaultOptions };
-    const { blocks: customBlocks = {} } = results;
-    return {
-        ...results,
-        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
-            key,
-            customBlocks[key] || defaultComponent,
-        ])),
-    };
+function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
+    if (blocksOverride === undefined) {
+        return children({
+            // TODO: Remove this assertion
+            blocks: defaultBlocks,
+            blockOrder: defaultBlockOrder,
+        });
+    }
+    if (typeof blocksOverride === 'function') {
+        const { blocks, blockOrder } = blocksOverride({
+            defaultBlocks,
+            defaultBlockOrder,
+        });
+        return children({ blocks, blockOrder });
+    }
+    return blocksOverride;
+}
+function deepMerge(obj1, obj2) {
+    const result = { ...obj1 };
+    for (const key in obj2) {
+        if (obj2.hasOwnProperty(key)) {
+            const val1 = result[key];
+            const val2 = obj2[key];
+            if (Array.isArray(val1) || Array.isArray(val2)) {
+                // If either is an array, replace entirely with obj2's value
+                result[key] = val2;
+            }
+            else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
+                result[key] = deepMerge(val1, val2);
+            }
+            else {
+                result[key] = val2;
+            }
+        }
+    }
+    return result;
 }
-
 /**
  * Utility function to join class names together, ignoring undefined or nil values.
  * @param classes - The class names to join.
@@ -78,15 +113,50 @@ function classNames(...classes) {
     return classes.flat().filter(Boolean).join(' ');
 }
 
-const FAQ = ({ className, title, subtitle, questionsAndAnswers, children, }) => {
+const FaqContext = createContext(undefined);
+const FaqProvider = ({ children, ...value }) => {
+    return jsx(FaqContext.Provider, { value: value, children: children });
+};
+const useFaqContext = () => {
+    const context = useContext(FaqContext);
+    if (!context) {
+        throw new Error('useFaqContext must be used within a FaqProvider');
+    }
+    return context;
+};
+
+const FAQ = ({ faqTitle, subtitle, items, className, children, ...props }) => {
     const [activeIndex, setActiveIndex] = useState(null);
-    const toggleAccordion = (index) => {
-        setActiveIndex(activeIndex === index ? null : index);
-    };
-    const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);
-    const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;
-    return (jsxs("div", { className: classNames('nbb-faq-accordion', className), children: [jsx(FAQTitle, { title: title, subtitle: subtitle }), questionsAndAnswers.map((item, index) => (jsx(FAQItem, { item: item, index: index, activeIndex: activeIndex, toggleAccordion: toggleAccordion, ChevronIcon: FAQChevronIcon }, index)))] }));
+    const toggleAccordion = useCallback((index) => {
+        setActiveIndex((activeIndex) => (activeIndex === index ? null : index));
+    }, [setActiveIndex]);
+    return (jsx(Fragment, { children: jsx(FaqProvider, { faqTitle,
+            subtitle,
+            items,
+            activeIndex,
+            toggleAccordion, children: jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { item, ...blocks }, blockOrder }) => (jsx("div", { className: classNames('nbb-faq-accordion', className), ...props, children: blockOrder
+                        .filter((key) => key in blocks)
+                        .map((key) => (jsx(Fragment$1, { children: blocks[key] }, String(key)))) })) }) }) }));
+};
+FAQ.Title = (props) => {
+    const { children, className, faqTitle, subtitle } = deepMerge(useFaqContext(), props);
+    return (jsxs("div", { className: classNames('nbb-faq-heading', className), ...props, children: [jsx("h3", { children: children || faqTitle }), jsx("h2", { children: subtitle })] }));
+};
+const ChevronIcon = ({ direction }) => {
+    return direction === 'up' ? (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
+};
+FAQ.Item = ({ className, question, answer, index, isActive, onToggle, ...props }) => {
+    return (jsxs("div", { className: classNames('nbb-faq-item', className), ...props, children: [jsxs("button", { className: `nbb-faq-question ${isActive ? 'active' : ''}`, onClick: () => onToggle(index), children: [jsxs("div", { className: "nbb-faq-header", children: [jsx("span", { className: "nbb-question-mark", children: "Q." }), jsx("span", { children: question })] }), jsx("span", { className: "nbb-faq-toggle", children: jsx(ChevronIcon, { direction: `${isActive ? 'up' : 'down'}` }) })] }), isActive && (jsx("div", { className: "nbb-faq-answer", children: jsx("p", { children: answer }) }))] }));
+};
+FAQ.ItemList = (props) => {
+    const { className, items, activeIndex, toggleAccordion } = deepMerge(useFaqContext(), props);
+    return (jsx("div", { className: classNames('nbb-item-list', className), ...props, children: items.map((item, index) => (jsx(FAQ.Item, { question: item.question, answer: item.answer, index: index, isActive: index == activeIndex, onToggle: toggleAccordion }, index))) }));
 };
+const defaultBlocks = createDefaultBlocks({
+    title: FAQ.Title,
+    item: FAQ.Item,
+    itemList: FAQ.ItemList,
+});
 
 export { FAQ };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/className.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, FAQListItem } from './types'\n\nfunction DefaultChevronIcon({ direction }: { direction: string }) {\n  return direction === 'up' ? (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  ) : (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  );\n}\n\n\nexport function FAQTitle({ title, subtitle }: { title: string; subtitle: string }) {\n  return (\n    <div className=\"nbb-faq-heading\">\n      <h3>{title}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  )\n}\nexport function FAQItem({\n  item,\n  index,\n  activeIndex, \n  toggleAccordion,\n  ChevronIcon }: {\n    item: FAQListItem;\n    index: number;\n    activeIndex: number | null;\n    toggleAccordion: (index: number) => void;\n    ChevronIcon: React.FC<{ direction: string }>\n  }) {\n  return (\n    <div className=\"nbb-faq-item\">\n      <button\n        className={`nbb-faq-question ${activeIndex === index ? 'active' : ''}`}\n        onClick={() => toggleAccordion(index)}\n      >\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{item.question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${activeIndex === index ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {activeIndex === index && (\n        <div className=\"nbb-faq-answer\">\n          <p>{item.answer}</p>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const defaultOptions = {}\n\nexport const defaultBlocks: DefaultBlocks = {\n  FAQTitle: FAQTitle,\n  FAQItem: FAQItem,\n  FAQChevronIcon: DefaultChevronIcon\n};\n","import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\nexport function setBlocks(\n  defaultBlocks: DefaultBlocks,\n  defaultOptions: DefaultOptions,\n  children?: (props: ChildrenProps) => DefaultOptions & {\n    blocks: { [x: string]: any };\n  },\n) {\n  const results = children\n    ? children({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  const {\n    blocks: customBlocks = {}\n  } = results;\n  return {\n    ...results,\n    blocks: Object.fromEntries(\n      Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n        key,\n        customBlocks[key] || defaultComponent,\n      ])\n    ),\n  };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React, { useState } from 'react';\nimport './faq.css';\nimport { defaultBlocks, defaultOptions } from './blocks';\nimport { setBlocks } from './lib';\nimport { FAQProps } from './types';\nimport { classNames } from './className';\n\nexport const FAQ: React.FC<FAQProps> = ({\n  className,\n  title,\n  subtitle,\n  questionsAndAnswers,\n  children,\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);\n  const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;\n\n  return (\n    <div className={classNames('nbb-faq-accordion', className)}>\n      <FAQTitle title={title} subtitle={subtitle} />\n      {questionsAndAnswers.map((item, index) => (\n        <FAQItem\n          key={index}\n          item={item}\n          index={index}\n          activeIndex={activeIndex}\n          toggleAccordion={toggleAccordion}\n          ChevronIcon={FAQChevronIcon}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default FAQ;\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/context.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  if (typeof blocksOverride === 'function') {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  return blocksOverride;\n}\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}\n","import { createContext, ReactNode, useContext } from 'react';\n\ntype FaqContextValue = {\n  faqTitle: ReactNode;\n  subtitle: ReactNode;\n  items: {\n    question: string;\n    answer: string;\n  }[];\n  activeIndex: number | null;\n  toggleAccordion: (index: number) => void;\n};\n\nconst FaqContext = createContext<FaqContextValue | undefined>(undefined);\n\nexport const FaqProvider = ({\n  children,\n  ...value\n}: FaqContextValue & {\n  children: ReactNode;\n}) => {\n  return <FaqContext.Provider value={value}>{children}</FaqContext.Provider>;\n};\n\nexport const useFaqContext = () => {\n  const context = useContext<FaqContextValue | undefined>(FaqContext);\n\n  if (!context) {\n    throw new Error('useFaqContext must be used within a FaqProvider');\n  }\n  return context;\n};\n","import { ComponentProps, Fragment, ReactNode, useCallback, useState } from 'react';\nimport './faq.css';\nimport { BlocksOverride, BlocksOverrideComponent, classNames, createDefaultBlocks, deepMerge } from './lib';\nimport { FaqProvider, useFaqContext } from './context';\n\nexport const FAQ = <CustomBlocks extends Record<string, ReactNode> = {}>({\n  faqTitle,\n  subtitle,\n  items,\n  className,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  faqTitle: ReactNode;\n  subtitle: ReactNode;\n  items: {\n    question: string;\n    answer: string;\n  }[];\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = useCallback(\n    (index: number) => {\n      setActiveIndex((activeIndex) => (activeIndex === index ? null : index));\n    },\n    [setActiveIndex]\n  );\n\n  return (\n    <>\n      <FaqProvider\n        {...{\n          faqTitle,\n          subtitle,\n          items,\n          activeIndex,\n          toggleAccordion,\n        }}\n      >\n        <BlocksOverrideComponent\n          defaultBlocks={defaultBlocks}\n          defaultBlockOrder={Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]}\n          blocksOverride={children}\n        >\n          {({ blocks: { item, ...blocks }, blockOrder }) => (\n            <div className={classNames('nbb-faq-accordion', className)} {...props}>\n              {blockOrder\n                .filter((key) => key in blocks)\n                .map<ReactNode>((key) => (\n                  <Fragment key={String(key)}>{blocks[key]}</Fragment>\n                ))}\n            </div>\n          )}\n        </BlocksOverrideComponent>\n      </FaqProvider>\n    </>\n  );\n};\n\nFAQ.Title = (props: Partial<ComponentProps<'div'> & { subtitle: string }>) => {\n  const { children, className, faqTitle, subtitle } = deepMerge(useFaqContext(), props);\n\n  return (\n    <div className={classNames('nbb-faq-heading', className)} {...props}>\n      <h3>{children || faqTitle}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  );\n};\n\nconst ChevronIcon = ({ direction }: { direction: string }) => {\n  return direction === 'up' ? (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\" fill=\"#737D90\" />\n    </svg>\n  ) : (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\" fill=\"#737D90\" />\n    </svg>\n  );\n};\n\nFAQ.Item = ({\n  className,\n  question,\n  answer,\n  index,\n  isActive,\n  onToggle,\n  ...props\n}: Partial<ComponentProps<'div'>> & {\n  question: string;\n  answer: string;\n  index: number;\n  isActive: boolean;\n  onToggle: (index: number) => void;\n}) => {\n  return (\n    <div className={classNames('nbb-faq-item', className)} {...props}>\n      <button className={`nbb-faq-question ${isActive ? 'active' : ''}`} onClick={() => onToggle(index)}>\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${isActive ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {isActive && (\n        <div className=\"nbb-faq-answer\">\n          <p>{answer}</p>\n        </div>\n      )}\n    </div>\n  );\n};\n\nFAQ.ItemList = (props: Partial<ComponentProps<'div'> & { subtitle: string }>) => {\n  const { className, items, activeIndex, toggleAccordion } = deepMerge(useFaqContext(), props);\n\n  return (\n    <div className={classNames('nbb-item-list', className)} {...props}>\n      {items.map((item, index) => (\n        <FAQ.Item\n          key={index}\n          question={item.question}\n          answer={item.answer}\n          index={index}\n          isActive={index == activeIndex}\n          onToggle={toggleAccordion}\n        />\n      ))}\n    </div>\n  );\n};\n\nconst defaultBlocks = createDefaultBlocks({\n  title: FAQ.Title,\n  item: FAQ.Item,\n  itemList: FAQ.ItemList,\n});\n\nexport default FAQ;\n"],"names":["_jsx","_Fragment","Fragment","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/lib.d.ts

@@ -1,21 +1,78 @@
-import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';
+import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from 'react';
 /**
- * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.
  *
- * @param defaultBlocks - The default blocks to be used.
- * @param children - An optional function that returns custom blocks and arguments.
- * @param args - Additional unknown arguments.
- * @returns An object containing the merged blocks and additional arguments.
+ * @example
+ * <Block>
+ *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({
+ *     blocks: {
+ *       ...defaultBlocks,
+ *       header: {
+ *         ...header,
+ *         props: {
+ *           ...header.props,
+ *           label: "Custom Label"
+ *         }
+ *       },
+ *       subheader: <CustomComponent />
+ *     },
+ *     blockOrder: ["header", "subheader", "body", "footer"]
+ *   })}
+ * </Block>
  */
-export declare function setBlocks(defaultBlocks: DefaultBlocks, defaultOptions: DefaultOptions, children?: (props: ChildrenProps) => DefaultOptions & {
-    blocks: {
-        [x: string]: any;
-    };
-}): {
-    blocks: {
-        [k: string]: any;
-    };
+export type BlocksOverride<DefaultBlocks, CustomBlocks> = (({ defaultBlocks, defaultBlockOrder, }: {
+    defaultBlocks: DefaultBlocks;
+    defaultBlockOrder: readonly (keyof DefaultBlocks)[];
+}) => {
+    blocks: Partial<DefaultBlocks> & CustomBlocks;
+    blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];
+}) | ReactNode;
+/**
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
+ *
+ * @param components - A map of default block keys to component functions.
+ *
+ * @example
+ * const defaultBlocks = createDefaultBlocks({
+ *   title: Title,
+ *   description: Description,
+ *   form: Form,
+ * });
+ */
+export declare function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(components: T): {
+    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;
 };
+/**
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
+ *
+ * @param props
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
+ * @param props.defaultBlocks - The default blocks of outer component.
+ * @param props.children - A function returning the JSX to render.
+ *
+ * @example
+ * <BlocksOverrideComponent
+ *   defaultBlocks={defaultFormBlocks}
+ *   blocksOverride={children}
+ * >
+ *   {({ blocks, blockOrder }) =>
+ *     blockOrder.map((key) => (
+ *       <Fragment key={String(key)}>{blocks[key]}</Fragment>
+ *     ))
+ *   }
+ * </BlocksOverrideComponent>
+ */
+export declare function BlocksOverrideComponent<DefaultBlocks extends Record<string, ReactNode>, CustomBlocks extends Record<string, ReactNode>>({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }: {
+    blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;
+    defaultBlocks: DefaultBlocks;
+    defaultBlockOrder: (keyof DefaultBlocks)[];
+    children: ({ blocks, blockOrder, }: {
+        blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;
+        blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];
+    }) => ReactNode;
+}): ReactNode;
+export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): A & B;
 type ClassName = string | ClassName[] | undefined | null;
 /**
  * Utility function to join class names together, ignoring undefined or nil values.

package/dist/lib.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEvE;;;;;;;GAOG;AAEH,wBAAgB,SAAS,CACvB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;IACpD,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CAC9B;;;;EAiBF;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CAChF,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAClF,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAMA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAmBA;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAmBrF,CAAC,GAAG,CAAC,CACvB;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodeblocks/frontend-faq-block",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.iife.js",

package/dist/blocks.d.ts

@@ -1,17 +0,0 @@
-import { DefaultBlocks, FAQListItem } from './types';
-export declare function FAQTitle({ title, subtitle }: {
-    title: string;
-    subtitle: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }: {
-    item: FAQListItem;
-    index: number;
-    activeIndex: number | null;
-    toggleAccordion: (index: number) => void;
-    ChevronIcon: React.FC<{
-        direction: string;
-    }>;
-}): import("react/jsx-runtime").JSX.Element;
-export declare const defaultOptions: {};
-export declare const defaultBlocks: DefaultBlocks;
-//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAiCpD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,2CAOhF;AACD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,eAAe,EACf,WAAW,EAAE,EAAE;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC7C,2CAsBF;AAED,eAAO,MAAM,cAAc,IAAK,CAAA;AAEhC,eAAO,MAAM,aAAa,EAAE,aAI3B,CAAC"}

package/dist/className.d.ts

@@ -1,9 +0,0 @@
-type ClassName = string | ClassName[] | undefined | null;
-/**
- * Utility function to join class names together, ignoring undefined or nil values.
- * @param classes - The class names to join.
- * @returns The joined class names.
- */
-export declare function classNames(...classes: ClassName[]): string;
-export {};
-//# sourceMappingURL=className.d.ts.map

package/dist/className.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/className.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/dist/types.d.ts

@@ -1,38 +0,0 @@
-export type FAQListItem = {
-    question: string;
-    answer: string;
-};
-export type ChildrenProps = {
-    defaultBlocks: DefaultBlocks;
-};
-export type FAQProps = {
-    className?: string;
-    title: string;
-    subtitle: string;
-    questionsAndAnswers: FAQListItem[];
-    children?: (props: ChildrenProps) => DefaultOptions & {
-        blocks: {
-            [x: string]: any;
-        };
-    };
-};
-export type DefaultBlocks = {
-    FAQTitle: React.FC<{
-        title: string;
-        subtitle: string;
-    }>;
-    FAQItem: React.FC<{
-        item: FAQListItem;
-        index: number;
-        activeIndex: number | null;
-        toggleAccordion: (index: number) => void;
-        ChevronIcon: React.FC<{
-            direction: string;
-        }>;
-    }>;
-    FAQChevronIcon: React.FC<{
-        direction: string;
-    }>;
-};
-export type DefaultOptions = {};
-//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG;IACxB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,WAAW,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;QAClD,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;KAC9B,CAAC;CACP,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;QACd,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;YAAE,SAAS,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KACvJ,CAAC,CAAC;IACH,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,EAAE,CAAA"}