@bspk/ui 1.1.33 → 1.2.0

package/build.ts

@@ -6,30 +6,32 @@
  *
  * It performs the following tasks:
  *
- * 1. Compiles TypeScript files using `tsc` and `tsc-alias`.
+ * 1. Compiles TypeScript files using `tsc`
  * 2. Processes SASS files using `npm run sass`.
  * 3. Copies styles from `@bspk/styles` to a temporary directory.
  * 4. Creates importable CSS files for each @bspk/styles brand.
  * 5. Creates importable CSS files for each component.
- * 6. Fixes scss and css import paths in JavaScript files.
+ * 6. Translates import paths from aliases to relative paths.
  * 7. Moves the temporary build directory to the final distribution directory.
  * 8. Updates the package exports to include component directories.
  *
  * $ npx tsx build.ts
  */
 import child_process from 'child_process';
-import fs_ from 'fs';
+import fs from 'fs';
 import path from 'path';
 import util from 'util';
 
 import packageData from './package.json';
 
+import { compilerOptions } from './tsconfig.json';
+
 const BRANDS = packageData.brands;
 
 const exec = util.promisify(child_process.exec);
-const writeFile = util.promisify(fs_.writeFile);
-const readDir = util.promisify(fs_.readdir);
-const readFile = (filePath: string) => util.promisify(fs_.readFile)(filePath, 'utf-8');
+const writeFile = util.promisify(fs.writeFile);
+const readDir = util.promisify(fs.readdir);
+const readFile = (filePath: string) => util.promisify(fs.readFile)(filePath, 'utf-8');
 
 const STYLES_SOURCE_DIR = path.dirname(import.meta.resolve('@bspk/styles/package.json').split('file:')[1]);
 
@@ -47,7 +49,7 @@ async function main() {
 
     await exec(`rm -rf ${distPath} && mkdir -p ${distStylesPath}`);
 
-    await exec('npm run tsc && npm run sass');
+    await exec('npx tsc && npm run sass');
 
     // copy the styles from @bspk/styles to the temp styles directory
     await Promise.all(
@@ -57,9 +59,7 @@ async function main() {
         }),
     );
 
-    await fileProcessing();
-
-    await componentExports();
+    await Promise.all([fileProcessing(), componentExports()]);
 
     // copy dist to dist
 
@@ -73,7 +73,7 @@ main();
 async function fileProcessing() {
     const allFiles = await readDir(distPath, { encoding: 'utf-8', recursive: true, withFileTypes: true });
 
-    return Promise.all(
+    Promise.all(
         allFiles.map(async (dirent) => {
             if (!dirent.isFile()) return;
 
@@ -81,32 +81,81 @@ async function fileProcessing() {
 
             // make importable .css files
             if (filePath.endsWith('.css')) {
-                await createImportableCss(await readFile(filePath), filePath.replace(/\.css$/, '.css.js'));
+                return createImportableCss(await readFile(filePath), filePath.replace(/\.css$/, '.css.js'));
             }
 
             // fix import paths in .js files
             if (filePath.endsWith('.js')) {
-                const newFileContent = (await readFile(filePath)).replace(
-                    /import ['"]([^'"]+\/)?([^.]+)\.(s?css)['"];?/g,
-                    (_match, importPath = '', name) => {
-                        const nextImportPath = (importPath || '').replace('@bspk/styles/', '../../styles/');
-                        return `import '${nextImportPath}${name}.css.js';`;
-                    },
-                );
-                await writeFile(filePath, newFileContent, 'utf-8');
+                let newFileContent = await readFile(filePath);
+
+                // fix import paths for styles
+                newFileContent = cssImportsInjected(newFileContent);
+
+                // fix import paths for '@bspk/styles. The css files are now in the dist/styles directory.
+                newFileContent = newFileContent.replace("import '@bspk/styles/", "import '-/styles/");
+
+                // translate alias imports to relative paths
+                newFileContent = aliasToRelative(newFileContent, filePath);
+
+                return writeFile(filePath, newFileContent, 'utf-8');
             }
         }),
     );
 }
 
+// Create a mapping of TypeScript alias paths to relative paths
+const tsConfigPathsToRelative = Object.fromEntries(
+    Object.entries(compilerOptions.paths).map(([aliasPath, relativePaths]) => {
+        // Convert the alias path to a relative path
+        const relativePath = relativePaths[0].replace(/\/\*$/, '/');
+        return [
+            aliasPath.replace(/\/\*$/, '/'),
+            path.resolve(compilerOptions.baseUrl, relativePath.replace('/src/', '/dist/')),
+        ];
+    }),
+);
+
+/**
+ * This function converts TypeScript alias paths to relative paths based on the current file's location. It reads the
+ * tsConfigPathsToRelative object to find the corresponding relative path for each alias import in the file content.
+ */
+function aliasToRelative(fileContent: string, filePath: string) {
+    const aliasImportMatches = fileContent.matchAll(
+        new RegExp(`import (.*)'(${Object.keys(tsConfigPathsToRelative).join('|')})([^']+)';`, 'g'),
+    );
+
+    for (const match of aliasImportMatches) {
+        const [fullMatch, importedValue, aliasPathMatched, actualImportedFile] = match;
+
+        const relativePath = tsConfigPathsToRelative[aliasPathMatched] || '';
+        const relativeFilePath =
+            path.relative(path.dirname(filePath), path.resolve(relativePath, actualImportedFile)) || '.';
+        const newImport = `import ${importedValue}'${relativeFilePath}';`;
+
+        fileContent = fileContent.replace(fullMatch, newImport);
+    }
+
+    return fileContent;
+}
+
+function cssImportsInjected(fileContent: string) {
+    return fileContent.replace(/import ['"]([^'"]+\/)?([^.]+)\.(s?css)['"];?/g, (_match, importPath = '', name) => {
+        const nextImportPath = importPath || '';
+        return `import '${nextImportPath}${name}.css.js';`;
+    });
+}
+
 async function componentExports() {
     const nextExports = { ...packageData['static-exports'] };
 
-    (await readDir(path.resolve('./dist/components'), { withFileTypes: true })).forEach((dirent) => {
-        if (!dirent.isDirectory() || dirent.name.startsWith('.')) return;
-        nextExports[`./${dirent.name}/*`] = `./dist/components/${dirent.name}/*.js`;
-        nextExports[`./${dirent.name}`] = `./dist/components/${dirent.name}/index.js`;
-    });
+    (await readDir(path.resolve('./dist/components'), { withFileTypes: true }))
+        .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith('.'))
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .forEach((dirent) => {
+            if (!dirent.isDirectory() || dirent.name.startsWith('.')) return;
+            nextExports[`./${dirent.name}`] = `./dist/components/${dirent.name}/index.js`;
+            nextExports[`./${dirent.name}/*`] = `./dist/components/${dirent.name}/*.js`;
+        });
 
     (packageData.exports as Record<string, string>) = nextExports as Record<string, string>;
     return writeFile(path.resolve('./package.json'), `${JSON.stringify(packageData, null, 4)}\n`, 'utf-8');
@@ -120,7 +169,6 @@ async function createImportableCss(cssContent: string, destPath: string, id?: st
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(\`${cssContent}\`));
 document.head.appendChild(style);
-${id ? `\ndocument.querySelector('#${id}')?.remove(); style.id = '${id}';` : ''}
-`,
+${id ? `\ndocument.querySelector('#${id}')?.remove(); style.id = '${id}';` : ''}`,
     );
 }

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { AccordionSectionProps } from './AccordionSection';
+import './accordion.scss';
+export type AccordionItem = Omit<AccordionSectionProps, 'toggleOpen'>;
+export type AccordionProps = {
+    /**
+     * Array of accordion sections
+     *
+     * @type Array<AccordionItem>
+     * @required
+     */
+    items: AccordionItem[];
+    /**
+     * If true only one accordion section can be opened at a time
+     *
+     * @default true
+     */
+    singleOpen?: boolean;
+};
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
+ *     }
+ *
+ * @name Accordion
+ * @phase UXReview
+ */
+export declare function Accordion({ items, singleOpen }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useState } from 'react';
+import { AccordionSection } from './AccordionSection';
+import './accordion.css.js';
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
+ *     }
+ *
+ * @name Accordion
+ * @phase UXReview
+ */
+export function Accordion({ items, singleOpen = true }) {
+    const [activeItems, setActiveItems] = useState(() => {
+        return items.filter((item) => item.isOpen).map((item) => item.id);
+    });
+    useEffect(() => {
+        // Update active items based on the items prop
+        setActiveItems(items.filter((item) => item.isOpen).map((item) => item.id));
+    }, [items]);
+    const toggleOpen = (itemId) => {
+        setActiveItems((prevItems) => {
+            const isItemActive = prevItems.includes(itemId);
+            // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
+            if (singleOpen)
+                return isItemActive ? [] : [itemId];
+            // If singleOpen is false, toggle the clicked item and keep others active
+            return isItemActive ? prevItems.filter((activeItemId) => activeItemId !== itemId) : [...prevItems, itemId];
+        });
+    };
+    return (_jsx("div", { "data-bspk": "accordion", children: items.map((item, index) => {
+            return (_createElement(AccordionSection, { ...item, isOpen: activeItems.includes(item.id), key: `${item.id}-${index}`, toggleOpen: () => toggleOpen(item.id) }, item.children));
+        }) }));
+}
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAyB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,kBAAkB,CAAC;AAoB1B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,EAAkB;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE;QACrE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,8CAA8C;QAC9C,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE;QAC3C,cAAc,CAAC,CAAC,SAAS,EAAE,EAAE;YACzB,MAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YAEhD,8GAA8G;YAC9G,IAAI,UAAU;gBAAE,OAAO,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAEpD,yEAAyE;YACzE,OAAO,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,MAAM,CAAC,CAAC;QAC/G,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,OAAO,CACH,2BAAe,WAAW,YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACvB,OAAO,CACH,eAAC,gBAAgB,OACT,IAAI,EACR,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACrC,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE,EAC1B,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAEpC,IAAI,CAAC,QAAQ,CACC,CACtB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/Accordion/AccordionExample.d.ts

@@ -0,0 +1,3 @@
+import { AccordionProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const AccordionExample: ComponentExampleFn<AccordionProps>;

package/dist/components/Accordion/AccordionExample.js

@@ -0,0 +1,72 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createExampleChildElement } from '../../utils/createExampleChildElement';
+const AccordionContent = () => (_jsx("p", { children: "Actualize the plan and markets. Going forward, we should harness the asset. Leverage skillsets to achieve maximum market share." }));
+export const AccordionExample = ({ action, setState }) => ({
+    containerStyle: { minHeight: 225 },
+    render: ({ props, Component, id, preset }) => {
+        const trailing = createExampleChildElement({
+            exampleState: props,
+            name: 'trailing',
+            setState,
+            action,
+            id,
+        });
+        const leading = createExampleChildElement({
+            exampleState: props,
+            name: 'leading',
+            setState,
+            action,
+            id,
+        });
+        return (_jsx(_Fragment, { children: _createElement(Component, { ...props, items: [
+                    {
+                        id: '1',
+                        title: `Section 1`,
+                        leading: leading.element,
+                        trailing: trailing.element,
+                        children: _jsx(AccordionContent, {}),
+                    },
+                    ...(props.items ?? []),
+                ], key: preset?.label }) }));
+    },
+    presets: [
+        {
+            label: 'Multiple Sections',
+            propState: {
+                items: [
+                    {
+                        id: '2',
+                        title: 'Section 2',
+                        children: _jsx(AccordionContent, {}),
+                    },
+                    {
+                        id: '3',
+                        title: 'Section 3',
+                        children: _jsx(AccordionContent, {}),
+                    },
+                ],
+            },
+        },
+        {
+            label: 'Multiple Sections with 1 disabled',
+            propState: {
+                items: [
+                    { id: '2', title: 'Section 2', disabled: true, children: _jsx(AccordionContent, {}) },
+                    { id: '3', title: 'Section 3', children: _jsx(AccordionContent, {}) },
+                ],
+            },
+        },
+        {
+            label: 'Multiple Sections with 1 disabled and open',
+            propState: {
+                items: [
+                    { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: _jsx(AccordionContent, {}) },
+                    { id: '3', title: 'Section 3', children: _jsx(AccordionContent, {}) },
+                ],
+            },
+        },
+    ],
+    variants: false,
+});
+//# sourceMappingURL=AccordionExample.js.map

package/dist/components/Accordion/AccordionExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionExample.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionExample.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC3B,0JAGI,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,OAAO,CACH,4BACI,eAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE;oBACH;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;wBACxB,QAAQ,EAAE,QAAQ,CAAC,OAAO;wBAC1B,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;oBACD,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;iBACzB,EACD,GAAG,EAAE,MAAM,EAAE,KAAK,GACpB,GACH,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;oBACD;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,mCAAmC;YAC1C,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;oBAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;iBAClE;aACJ;SACJ;QACD;YACI,KAAK,EAAE,4CAA4C;YACnD,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;oBAC7F,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;iBAClE;aACJ;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

package/dist/components/Accordion/AccordionSection.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import './accordion.scss';
+export type AccordionSectionProps = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The title of the accordion. */
+    subTitle?: string;
+    /**
+     * The leading element to display in the Accordion title.
+     *
+     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
+     *
+     * @exampleType select
+     * @options Icon, Img, Avatar
+     */
+    leading?: ReactNode;
+    /**
+     * The trailing element to display in the accordion header.
+     *
+     * @exampleType select
+     * @options Tag
+     */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is open.
+     *
+     * @default false
+     * @required
+     */
+    isOpen?: boolean;
+    /**
+     * Fires when the accordion state changes.
+     *
+     * @required
+     */
+    toggleOpen: () => void;
+    /**
+     * If true, a divider will be shown below the accordion header.
+     *
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * @required
+     */
+    id: string;
+};
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return (
+ *             <Accordion title="Accordion Title" subTitle="Accordion Subtitle">
+ *                 Accordion Content
+ *             </Accordion>
+ *         );
+ *     }
+ *
+ * @name Accordion
+ * @phase WorkInProgress
+ */
+export declare function AccordionSection({ children, title, subTitle, leading, isOpen, toggleOpen, divider, trailing, disabled, id, }: AccordionSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/AccordionSection.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import './accordion.css.js';
+import { Txt } from '../Txt';
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return (
+ *             <Accordion title="Accordion Title" subTitle="Accordion Subtitle">
+ *                 Accordion Content
+ *             </Accordion>
+ *         );
+ *     }
+ *
+ * @name Accordion
+ * @phase WorkInProgress
+ */
+export function AccordionSection({ children, title, subTitle, leading, isOpen = false, toggleOpen, divider = true, trailing, disabled = false, id, }) {
+    return (_jsxs("section", { "data-accordion-section": true, "data-disabled": disabled || undefined, "data-divider": divider || undefined, id: id, children: [_jsxs("button", { "aria-expanded": isOpen ? true : false, "data-accordion-header": true, disabled: disabled, onClick: !disabled ? toggleOpen : undefined, children: [_jsxs("span", { "data-accordion-header-body": true, children: [leading ?? null, _jsxs("span", { "data-accordion-title-wrapper": true, children: [_jsx(Txt, { variant: "labels-base", children: title }), !!subTitle && _jsx(Txt, { variant: "body-x-small", children: subTitle })] }), trailing ?? null] }), isOpen ? _jsx(SvgKeyboardArrowUp, {}) : _jsx(SvgKeyboardArrowDown, {})] }), isOpen && _jsx("div", { "data-accordion-content": true, children: children }), _jsx("div", { "data-not-a-divider-divider": true })] }));
+}
+//# sourceMappingURL=AccordionSection.js.map

package/dist/components/Accordion/AccordionSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSection.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAkEvC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,KAAK,EACd,UAAU,EACV,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,EAAE,GACkB;IACpB,OAAO,CACH,oEAEmB,QAAQ,IAAI,SAAS,kBACtB,OAAO,IAAI,SAAS,EAClC,EAAE,EAAE,EAAE,aAEN,mCACmB,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,iCAEpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,aAE3C,+DACK,OAAO,IAAI,IAAI,EAChB,iEACI,KAAC,GAAG,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,GAAO,EACvC,CAAC,CAAC,QAAQ,IAAI,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,QAAQ,GAAO,IACxD,EACN,QAAQ,IAAI,IAAI,IACd,EACN,MAAM,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,IACtD,EACR,MAAM,IAAI,wDAA6B,QAAQ,GAAO,EACvD,mDAAkC,IAC5B,CACb,CAAC;AACN,CAAC"}

package/dist/components/Accordion/accordion.css

@@ -0,0 +1,74 @@
+[data-bspk=accordion] {
+  width: 100%;
+}
+[data-bspk=accordion] [data-accordion-section] {
+  --border-bottom-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+[data-bspk=accordion] [data-accordion-section][data-divider] [data-not-a-divider-divider] {
+  display: block;
+  height: 1px;
+  width: calc(100% - var(--spacing-sizing-04));
+  margin: -1px var(--spacing-sizing-02) 0;
+  background-color: var(--border-bottom-color);
+}
+[data-bspk=accordion] [data-accordion-section][data-disabled] {
+  --border-bottom-color: var(--stroke-neutral-disabled-light);
+  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-04);
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-header-body] {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] [data-bspk=txt] {
+  text-align: left;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):focus-visible {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:disabled {
+  cursor: not-allowed;
+  color: var(--foreground-neutral-disabled-on-surface);
+  border-color: var(--stroke-neutral-disabled-light);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-content] {
+  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=accordion] [data-accordion-section] [data-not-a-divider-divider] {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Accordion/accordion.css.js

@@ -0,0 +1,79 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=accordion] {
+  width: 100%;
+}
+[data-bspk=accordion] [data-accordion-section] {
+  --border-bottom-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+[data-bspk=accordion] [data-accordion-section][data-divider] [data-not-a-divider-divider] {
+  display: block;
+  height: 1px;
+  width: calc(100% - var(--spacing-sizing-04));
+  margin: -1px var(--spacing-sizing-02) 0;
+  background-color: var(--border-bottom-color);
+}
+[data-bspk=accordion] [data-accordion-section][data-disabled] {
+  --border-bottom-color: var(--stroke-neutral-disabled-light);
+  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-04);
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-header-body] {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] [data-bspk=txt] {
+  text-align: left;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):focus-visible {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:disabled {
+  cursor: not-allowed;
+  color: var(--foreground-neutral-disabled-on-surface);
+  border-color: var(--stroke-neutral-disabled-light);
+}
+[data-bspk=accordion] [data-accordion-section] [data-accordion-content] {
+  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=accordion] [data-accordion-section] [data-not-a-divider-divider] {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/components/Accordion/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}