@bspk/ui 1.1.34 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.34",
+    "version": "1.2.0",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -17,179 +17,204 @@
         "sass": "npx sass --no-source-map --silence-deprecation=mixed-decls src:dist",
         "build": "npx tsx build.ts",
         "lint:css": "npx stylelint '**/*.scss'",
+        "lint:css:fix": "npx stylelint '**/*.scss' --fix",
         "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
         "semantic-release": "semantic-release",
         "test": "jest",
         "prepare": "husky",
         "pre:commit": "tsx .scripts/pre-commit.ts",
-        "tsc": "npx tsc && npx tsc-alias",
         "meta": "tsx meta.ts",
         "pretty": "npx prettier --write src/",
         "newc": "tsx .scripts/tasks/new-component.ts",
-        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts &&  npm run build"
+        "clean": "tsx .scripts/clean.ts",
+        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build"
     },
     "static-exports": {
-        "./*": "./dist/*.js",
-        ".": "./dist/index.js"
+        "./*": "./dist/*.js"
     },
     "exports": {
         "./*": "./dist/*.js",
-        ".": "./dist/index.js",
-        "./Avatar/*": "./dist/components/Avatar/*.js",
+        "./Accordion": "./dist/components/Accordion/index.js",
+        "./Accordion/*": "./dist/components/Accordion/*.js",
         "./Avatar": "./dist/components/Avatar/index.js",
-        "./AvatarGroup/*": "./dist/components/AvatarGroup/*.js",
+        "./Avatar/*": "./dist/components/Avatar/*.js",
         "./AvatarGroup": "./dist/components/AvatarGroup/index.js",
-        "./Badge/*": "./dist/components/Badge/*.js",
+        "./AvatarGroup/*": "./dist/components/AvatarGroup/*.js",
         "./Badge": "./dist/components/Badge/index.js",
-        "./BannerAlert/*": "./dist/components/BannerAlert/*.js",
+        "./Badge/*": "./dist/components/Badge/*.js",
+        "./BadgeDot": "./dist/components/BadgeDot/index.js",
+        "./BadgeDot/*": "./dist/components/BadgeDot/*.js",
         "./BannerAlert": "./dist/components/BannerAlert/index.js",
-        "./Breadcrumb/*": "./dist/components/Breadcrumb/*.js",
+        "./BannerAlert/*": "./dist/components/BannerAlert/*.js",
         "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
-        "./Button/*": "./dist/components/Button/*.js",
+        "./Breadcrumb/*": "./dist/components/Breadcrumb/*.js",
         "./Button": "./dist/components/Button/index.js",
-        "./Card/*": "./dist/components/Card/*.js",
+        "./Button/*": "./dist/components/Button/*.js",
         "./Card": "./dist/components/Card/index.js",
-        "./Checkbox/*": "./dist/components/Checkbox/*.js",
+        "./Card/*": "./dist/components/Card/*.js",
         "./Checkbox": "./dist/components/Checkbox/index.js",
-        "./CheckboxGroup/*": "./dist/components/CheckboxGroup/*.js",
+        "./Checkbox/*": "./dist/components/Checkbox/*.js",
         "./CheckboxGroup": "./dist/components/CheckboxGroup/index.js",
-        "./CheckboxOption/*": "./dist/components/CheckboxOption/*.js",
+        "./CheckboxGroup/*": "./dist/components/CheckboxGroup/*.js",
         "./CheckboxOption": "./dist/components/CheckboxOption/index.js",
-        "./Chip/*": "./dist/components/Chip/*.js",
-        "./Chip": "./dist/components/Chip/index.js",
-        "./ChipAssist/*": "./dist/components/ChipAssist/*.js",
+        "./CheckboxOption/*": "./dist/components/CheckboxOption/*.js",
         "./ChipAssist": "./dist/components/ChipAssist/index.js",
-        "./ChipFilter/*": "./dist/components/ChipFilter/*.js",
+        "./ChipAssist/*": "./dist/components/ChipAssist/*.js",
         "./ChipFilter": "./dist/components/ChipFilter/index.js",
-        "./ChipGroup/*": "./dist/components/ChipGroup/*.js",
+        "./ChipFilter/*": "./dist/components/ChipFilter/*.js",
         "./ChipGroup": "./dist/components/ChipGroup/index.js",
-        "./ChipInput/*": "./dist/components/ChipInput/*.js",
+        "./ChipGroup/*": "./dist/components/ChipGroup/*.js",
         "./ChipInput": "./dist/components/ChipInput/index.js",
-        "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
+        "./ChipInput/*": "./dist/components/ChipInput/*.js",
         "./ChipSuggestion": "./dist/components/ChipSuggestion/index.js",
-        "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
+        "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
         "./ChipUtility": "./dist/components/ChipUtility/index.js",
-        "./Combobox/*": "./dist/components/Combobox/*.js",
+        "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
         "./Combobox": "./dist/components/Combobox/index.js",
-        "./Dialog/*": "./dist/components/Dialog/*.js",
+        "./Combobox/*": "./dist/components/Combobox/*.js",
         "./Dialog": "./dist/components/Dialog/index.js",
-        "./Divider/*": "./dist/components/Divider/*.js",
+        "./Dialog/*": "./dist/components/Dialog/*.js",
         "./Divider": "./dist/components/Divider/index.js",
-        "./EmptyState/*": "./dist/components/EmptyState/*.js",
+        "./Divider/*": "./dist/components/Divider/*.js",
         "./EmptyState": "./dist/components/EmptyState/index.js",
-        "./ExamplePlaceholder/*": "./dist/components/ExamplePlaceholder/*.js",
+        "./EmptyState/*": "./dist/components/EmptyState/*.js",
         "./ExamplePlaceholder": "./dist/components/ExamplePlaceholder/index.js",
-        "./Fab/*": "./dist/components/Fab/*.js",
+        "./ExamplePlaceholder/*": "./dist/components/ExamplePlaceholder/*.js",
         "./Fab": "./dist/components/Fab/index.js",
-        "./FormField/*": "./dist/components/FormField/*.js",
+        "./Fab/*": "./dist/components/Fab/*.js",
+        "./FileUpload": "./dist/components/FileUpload/index.js",
+        "./FileUpload/*": "./dist/components/FileUpload/*.js",
+        "./FileUploadItem": "./dist/components/FileUploadItem/index.js",
+        "./FileUploadItem/*": "./dist/components/FileUploadItem/*.js",
         "./FormField": "./dist/components/FormField/index.js",
-        "./Img/*": "./dist/components/Img/*.js",
+        "./FormField/*": "./dist/components/FormField/*.js",
         "./Img": "./dist/components/Img/index.js",
-        "./InlineAlert/*": "./dist/components/InlineAlert/*.js",
+        "./Img/*": "./dist/components/Img/*.js",
         "./InlineAlert": "./dist/components/InlineAlert/index.js",
-        "./Layout/*": "./dist/components/Layout/*.js",
+        "./InlineAlert/*": "./dist/components/InlineAlert/*.js",
         "./Layout": "./dist/components/Layout/index.js",
-        "./Link/*": "./dist/components/Link/*.js",
+        "./Layout/*": "./dist/components/Layout/*.js",
         "./Link": "./dist/components/Link/index.js",
-        "./ListItem/*": "./dist/components/ListItem/*.js",
-        "./ListItem": "./dist/components/ListItem/index.js",
-        "./Listbox/*": "./dist/components/Listbox/*.js",
+        "./Link/*": "./dist/components/Link/*.js",
         "./Listbox": "./dist/components/Listbox/index.js",
-        "./Menu/*": "./dist/components/Menu/*.js",
+        "./Listbox/*": "./dist/components/Listbox/*.js",
+        "./ListItem": "./dist/components/ListItem/index.js",
+        "./ListItem/*": "./dist/components/ListItem/*.js",
         "./Menu": "./dist/components/Menu/index.js",
-        "./MenuButton/*": "./dist/components/MenuButton/*.js",
+        "./Menu/*": "./dist/components/Menu/*.js",
         "./MenuButton": "./dist/components/MenuButton/index.js",
-        "./Modal/*": "./dist/components/Modal/*.js",
+        "./MenuButton/*": "./dist/components/MenuButton/*.js",
         "./Modal": "./dist/components/Modal/index.js",
-        "./NumberField/*": "./dist/components/NumberField/*.js",
+        "./Modal/*": "./dist/components/Modal/*.js",
         "./NumberField": "./dist/components/NumberField/index.js",
-        "./NumberInput/*": "./dist/components/NumberInput/*.js",
+        "./NumberField/*": "./dist/components/NumberField/*.js",
         "./NumberInput": "./dist/components/NumberInput/index.js",
-        "./PhoneNumberField/*": "./dist/components/PhoneNumberField/*.js",
+        "./NumberInput/*": "./dist/components/NumberInput/*.js",
+        "./OTPInput": "./dist/components/OTPInput/index.js",
+        "./OTPInput/*": "./dist/components/OTPInput/*.js",
+        "./PageControl": "./dist/components/PageControl/index.js",
+        "./PageControl/*": "./dist/components/PageControl/*.js",
+        "./Pagination": "./dist/components/Pagination/index.js",
+        "./Pagination/*": "./dist/components/Pagination/*.js",
+        "./PasswordField": "./dist/components/PasswordField/index.js",
+        "./PasswordField/*": "./dist/components/PasswordField/*.js",
+        "./PasswordInput": "./dist/components/PasswordInput/index.js",
+        "./PasswordInput/*": "./dist/components/PasswordInput/*.js",
         "./PhoneNumberField": "./dist/components/PhoneNumberField/index.js",
-        "./PhoneNumberInput/*": "./dist/components/PhoneNumberInput/*.js",
+        "./PhoneNumberField/*": "./dist/components/PhoneNumberField/*.js",
         "./PhoneNumberInput": "./dist/components/PhoneNumberInput/index.js",
-        "./Popover/*": "./dist/components/Popover/*.js",
+        "./PhoneNumberInput/*": "./dist/components/PhoneNumberInput/*.js",
         "./Popover": "./dist/components/Popover/index.js",
-        "./Portal/*": "./dist/components/Portal/*.js",
+        "./Popover/*": "./dist/components/Popover/*.js",
         "./Portal": "./dist/components/Portal/index.js",
-        "./ProgressBar/*": "./dist/components/ProgressBar/*.js",
+        "./Portal/*": "./dist/components/Portal/*.js",
         "./ProgressBar": "./dist/components/ProgressBar/index.js",
-        "./ProgressCircle/*": "./dist/components/ProgressCircle/*.js",
+        "./ProgressBar/*": "./dist/components/ProgressBar/*.js",
         "./ProgressCircle": "./dist/components/ProgressCircle/index.js",
-        "./ProgressionStepper/*": "./dist/components/ProgressionStepper/*.js",
+        "./ProgressCircle/*": "./dist/components/ProgressCircle/*.js",
         "./ProgressionStepper": "./dist/components/ProgressionStepper/index.js",
-        "./ProgressionStepperBar/*": "./dist/components/ProgressionStepperBar/*.js",
+        "./ProgressionStepper/*": "./dist/components/ProgressionStepper/*.js",
         "./ProgressionStepperBar": "./dist/components/ProgressionStepperBar/index.js",
-        "./Radio/*": "./dist/components/Radio/*.js",
+        "./ProgressionStepperBar/*": "./dist/components/ProgressionStepperBar/*.js",
         "./Radio": "./dist/components/Radio/index.js",
-        "./RadioGroup/*": "./dist/components/RadioGroup/*.js",
+        "./Radio/*": "./dist/components/Radio/*.js",
         "./RadioGroup": "./dist/components/RadioGroup/index.js",
-        "./RadioOption/*": "./dist/components/RadioOption/*.js",
+        "./RadioGroup/*": "./dist/components/RadioGroup/*.js",
         "./RadioOption": "./dist/components/RadioOption/index.js",
-        "./Scrim/*": "./dist/components/Scrim/*.js",
+        "./RadioOption/*": "./dist/components/RadioOption/*.js",
+        "./Rating": "./dist/components/Rating/index.js",
+        "./Rating/*": "./dist/components/Rating/*.js",
         "./Scrim": "./dist/components/Scrim/index.js",
-        "./SearchBar/*": "./dist/components/SearchBar/*.js",
+        "./Scrim/*": "./dist/components/Scrim/*.js",
         "./SearchBar": "./dist/components/SearchBar/index.js",
-        "./SegmentedControl/*": "./dist/components/SegmentedControl/*.js",
+        "./SearchBar/*": "./dist/components/SearchBar/*.js",
         "./SegmentedControl": "./dist/components/SegmentedControl/index.js",
-        "./Select/*": "./dist/components/Select/*.js",
+        "./SegmentedControl/*": "./dist/components/SegmentedControl/*.js",
         "./Select": "./dist/components/Select/index.js",
-        "./SelectField/*": "./dist/components/SelectField/*.js",
+        "./Select/*": "./dist/components/Select/*.js",
         "./SelectField": "./dist/components/SelectField/index.js",
-        "./Skeleton/*": "./dist/components/Skeleton/*.js",
+        "./SelectField/*": "./dist/components/SelectField/*.js",
         "./Skeleton": "./dist/components/Skeleton/index.js",
-        "./SkeletonText/*": "./dist/components/SkeletonText/*.js",
+        "./Skeleton/*": "./dist/components/Skeleton/*.js",
         "./SkeletonText": "./dist/components/SkeletonText/index.js",
-        "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
+        "./SkeletonText/*": "./dist/components/SkeletonText/*.js",
+        "./Slider": "./dist/components/Slider/index.js",
+        "./Slider/*": "./dist/components/Slider/*.js",
         "./StylesProviderAnywhere": "./dist/components/StylesProviderAnywhere/index.js",
-        "./StylesProviderBetterHomesGardens/*": "./dist/components/StylesProviderBetterHomesGardens/*.js",
+        "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
         "./StylesProviderBetterHomesGardens": "./dist/components/StylesProviderBetterHomesGardens/index.js",
-        "./StylesProviderCartus/*": "./dist/components/StylesProviderCartus/*.js",
+        "./StylesProviderBetterHomesGardens/*": "./dist/components/StylesProviderBetterHomesGardens/*.js",
         "./StylesProviderCartus": "./dist/components/StylesProviderCartus/index.js",
-        "./StylesProviderCentury21/*": "./dist/components/StylesProviderCentury21/*.js",
+        "./StylesProviderCartus/*": "./dist/components/StylesProviderCartus/*.js",
         "./StylesProviderCentury21": "./dist/components/StylesProviderCentury21/index.js",
-        "./StylesProviderColdwellBanker/*": "./dist/components/StylesProviderColdwellBanker/*.js",
+        "./StylesProviderCentury21/*": "./dist/components/StylesProviderCentury21/*.js",
         "./StylesProviderColdwellBanker": "./dist/components/StylesProviderColdwellBanker/index.js",
-        "./StylesProviderCorcoran/*": "./dist/components/StylesProviderCorcoran/*.js",
+        "./StylesProviderColdwellBanker/*": "./dist/components/StylesProviderColdwellBanker/*.js",
         "./StylesProviderCorcoran": "./dist/components/StylesProviderCorcoran/index.js",
-        "./StylesProviderDenaliBoss/*": "./dist/components/StylesProviderDenaliBoss/*.js",
+        "./StylesProviderCorcoran/*": "./dist/components/StylesProviderCorcoran/*.js",
+        "./StylesProviderDemo": "./dist/components/StylesProviderDemo/index.js",
+        "./StylesProviderDemo/*": "./dist/components/StylesProviderDemo/*.js",
         "./StylesProviderDenaliBoss": "./dist/components/StylesProviderDenaliBoss/index.js",
-        "./StylesProviderEra/*": "./dist/components/StylesProviderEra/*.js",
+        "./StylesProviderDenaliBoss/*": "./dist/components/StylesProviderDenaliBoss/*.js",
         "./StylesProviderEra": "./dist/components/StylesProviderEra/index.js",
-        "./StylesProviderSothebys/*": "./dist/components/StylesProviderSothebys/*.js",
+        "./StylesProviderEra/*": "./dist/components/StylesProviderEra/*.js",
         "./StylesProviderSothebys": "./dist/components/StylesProviderSothebys/index.js",
-        "./Switch/*": "./dist/components/Switch/*.js",
+        "./StylesProviderSothebys/*": "./dist/components/StylesProviderSothebys/*.js",
         "./Switch": "./dist/components/Switch/index.js",
-        "./SwitchOption/*": "./dist/components/SwitchOption/*.js",
+        "./Switch/*": "./dist/components/Switch/*.js",
         "./SwitchOption": "./dist/components/SwitchOption/index.js",
-        "./TabGroup/*": "./dist/components/TabGroup/*.js",
+        "./SwitchOption/*": "./dist/components/SwitchOption/*.js",
         "./TabGroup": "./dist/components/TabGroup/index.js",
-        "./Table/*": "./dist/components/Table/*.js",
+        "./TabGroup/*": "./dist/components/TabGroup/*.js",
         "./Table": "./dist/components/Table/index.js",
-        "./Tag/*": "./dist/components/Tag/*.js",
+        "./Table/*": "./dist/components/Table/*.js",
+        "./TabList": "./dist/components/TabList/index.js",
+        "./TabList/*": "./dist/components/TabList/*.js",
         "./Tag": "./dist/components/Tag/index.js",
-        "./TextField/*": "./dist/components/TextField/*.js",
-        "./TextField": "./dist/components/TextField/index.js",
-        "./TextInput/*": "./dist/components/TextInput/*.js",
-        "./TextInput": "./dist/components/TextInput/index.js",
-        "./Textarea/*": "./dist/components/Textarea/*.js",
+        "./Tag/*": "./dist/components/Tag/*.js",
         "./Textarea": "./dist/components/Textarea/index.js",
-        "./TextareaField/*": "./dist/components/TextareaField/*.js",
+        "./Textarea/*": "./dist/components/Textarea/*.js",
         "./TextareaField": "./dist/components/TextareaField/index.js",
-        "./ToggleOption/*": "./dist/components/ToggleOption/*.js",
+        "./TextareaField/*": "./dist/components/TextareaField/*.js",
+        "./TextField": "./dist/components/TextField/index.js",
+        "./TextField/*": "./dist/components/TextField/*.js",
+        "./TextInput": "./dist/components/TextInput/index.js",
+        "./TextInput/*": "./dist/components/TextInput/*.js",
+        "./TimeInput": "./dist/components/TimeInput/index.js",
+        "./TimeInput/*": "./dist/components/TimeInput/*.js",
         "./ToggleOption": "./dist/components/ToggleOption/index.js",
-        "./Tooltip/*": "./dist/components/Tooltip/*.js",
+        "./ToggleOption/*": "./dist/components/ToggleOption/*.js",
         "./Tooltip": "./dist/components/Tooltip/index.js",
-        "./TopNavigation/*": "./dist/components/TopNavigation/*.js",
+        "./Tooltip/*": "./dist/components/Tooltip/*.js",
         "./TopNavigation": "./dist/components/TopNavigation/index.js",
-        "./Truncated/*": "./dist/components/Truncated/*.js",
+        "./TopNavigation/*": "./dist/components/TopNavigation/*.js",
         "./Truncated": "./dist/components/Truncated/index.js",
-        "./Txt/*": "./dist/components/Txt/*.js",
+        "./Truncated/*": "./dist/components/Truncated/*.js",
         "./Txt": "./dist/components/Txt/index.js",
-        "./UIProvider/*": "./dist/components/UIProvider/*.js",
-        "./UIProvider": "./dist/components/UIProvider/index.js"
+        "./Txt/*": "./dist/components/Txt/*.js",
+        "./UIProvider": "./dist/components/UIProvider/index.js",
+        "./UIProvider/*": "./dist/components/UIProvider/*.js"
     },
     "publishConfig": {
         "access": "public"
@@ -198,13 +223,13 @@
         "node": ">=20"
     },
     "dependencies": {
-        "@bspk/styles": "^1.0.1",
+        "@bspk/styles": "^1.0.2",
         "@floating-ui/dom": "^1.6.13",
         "focus-trap-react": "^11.0.1",
         "libphonenumber-js": "^1.12.9"
     },
     "peerDependencies": {
-        "@bspk/icons": "^1.0.3",
+        "@bspk/icons": "^1.0.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
@@ -240,7 +265,6 @@
         "stylelint-config-standard": "^38.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
         "ts-jest": "^29.2.5",
-        "tsc-alias": "^1.8.16",
         "tslib": "^2.8.1",
         "tsx": "^4.19.4",
         "typescript": "5.6.3",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { AccordionSectionProps, AccordionSection } 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 function Accordion({ items, singleOpen = true }: AccordionProps) {
+    const [activeItems, setActiveItems] = useState<(number | string)[]>(() => {
+        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: number | string) => {
+        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 (
+        <div data-bspk="accordion">
+            {items.map((item, index) => {
+                return (
+                    <AccordionSection
+                        {...item}
+                        isOpen={activeItems.includes(item.id)}
+                        key={`${item.id}-${index}`}
+                        toggleOpen={() => toggleOpen(item.id)}
+                    >
+                        {item.children}
+                    </AccordionSection>
+                );
+            })}
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Accordion/AccordionExample.tsx

@@ -0,0 +1,87 @@
+import { AccordionProps } from '.';
+import { createExampleChildElement } from '-/utils/createExampleChildElement';
+import { ComponentExampleFn } from '-/utils/demo';
+
+const AccordionContent = () => (
+    <p>
+        Actualize the plan and markets. Going forward, we should harness the asset. Leverage skillsets to achieve
+        maximum market share.
+    </p>
+);
+
+export const AccordionExample: ComponentExampleFn<AccordionProps> = ({ 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 (
+            <>
+                <Component
+                    {...props}
+                    items={[
+                        {
+                            id: '1',
+                            title: `Section 1`,
+                            leading: leading.element,
+                            trailing: trailing.element,
+                            children: <AccordionContent />,
+                        },
+                        ...(props.items ?? []),
+                    ]}
+                    key={preset?.label}
+                />
+            </>
+        );
+    },
+    presets: [
+        {
+            label: 'Multiple Sections',
+            propState: {
+                items: [
+                    {
+                        id: '2',
+                        title: 'Section 2',
+                        children: <AccordionContent />,
+                    },
+                    {
+                        id: '3',
+                        title: 'Section 3',
+                        children: <AccordionContent />,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'Multiple Sections with 1 disabled',
+            propState: {
+                items: [
+                    { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
+                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
+                ],
+            },
+        },
+        {
+            label: 'Multiple Sections with 1 disabled and open',
+            propState: {
+                items: [
+                    { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
+                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
+                ],
+            },
+        },
+    ],
+    variants: false,
+});

package/src/components/Accordion/AccordionSection.tsx

@@ -0,0 +1,128 @@
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { ReactNode } from 'react';
+import './accordion.scss';
+import { Txt } from '-/components/Txt';
+
+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 function AccordionSection({
+    children,
+    title,
+    subTitle,
+    leading,
+    isOpen = false,
+    toggleOpen,
+    divider = true,
+    trailing,
+    disabled = false,
+    id,
+}: AccordionSectionProps) {
+    return (
+        <section
+            data-accordion-section
+            data-disabled={disabled || undefined}
+            data-divider={divider || undefined}
+            id={id}
+        >
+            <button
+                aria-expanded={isOpen ? true : false}
+                data-accordion-header
+                disabled={disabled}
+                onClick={!disabled ? toggleOpen : undefined}
+            >
+                <span data-accordion-header-body>
+                    {leading ?? null}
+                    <span data-accordion-title-wrapper>
+                        <Txt variant="labels-base">{title}</Txt>
+                        {!!subTitle && <Txt variant="body-x-small">{subTitle}</Txt>}
+                    </span>
+                    {trailing ?? null}
+                </span>
+                {isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}
+            </button>
+            {isOpen && <div data-accordion-content>{children}</div>}
+            <div data-not-a-divider-divider />
+        </section>
+    );
+}