@bspk/ui 1.1.33 → 1.2.0

package/meta.ts

@@ -14,13 +14,19 @@ import { fileURLToPath } from 'url';
 
 import * as TJS from 'typescript-json-schema';
 
-import { ComponentMeta, TypeProperty, UtilityMeta, TypeMeta, ComponentPhase } from './meta-types';
+import {
+    ComponentMeta,
+    TypeProperty,
+    UtilityMeta,
+    TypeMeta,
+    ComponentPhase,
+    COMPONENT_PHASE_ORDER,
+} from './src/types/meta';
 
 const RESET = '\x1b[0m';
 const BLUE = '\x1b[34m';
 const GREEN = '\x1b[32m';
 const ORANGE = '\x1b[38;5;208m';
-const YELLOW = '\x1b[33m';
 
 function getArgValue(name: string, defaultValue: string = ''): string {
     const arg = process.argv.find((arg2) => arg2.startsWith(`${name}=`));
@@ -31,6 +37,7 @@ const outDirectory = getArgValue('out');
 const uiHash = getArgValue('hash');
 const build = getArgValue('build', '0');
 const target = getArgValue('target');
+const mode = getArgValue('mode', 'production');
 
 if (!outDirectory) {
     console.error('Please provide a path to the meta file.');
@@ -162,11 +169,6 @@ function generateComponentMeta({
         return null;
     }
 
-    if (!content.includes(".bspkName = '")) {
-        console.warn(`No bspkName found for component ${name} for ${componentFile}`);
-        return null;
-    }
-
     const componentDoc = [...(jsDocs || [])].find((doc) => doc.name === name);
 
     if (!componentDoc) {
@@ -207,21 +209,12 @@ function generateComponentMeta({
         usage,
         css,
         hasTouchTarget: css.includes('data-touch-target'),
-        phase: (COMPONENT_PHASES.includes(componentDoc.phase as ComponentPhase)
+        phase: (COMPONENT_PHASE_ORDER.includes(componentDoc.phase as ComponentPhase)
             ? componentDoc.phase
             : 'Backlog') as ComponentPhase,
     } as ComponentMeta;
 }
 
-const COMPONENT_PHASES: ComponentPhase[] = [
-    'AccessibilityReview',
-    'Backlog',
-    'DesignReview',
-    'ProductionReady',
-    'Utility',
-    'WorkInProgress',
-] as const;
-
 async function generateUtilityMeta(utilityFile: string): Promise<UtilityMeta | null> {
     const content = fs.readFileSync(utilityFile, 'utf-8');
 
@@ -289,7 +282,8 @@ function generateTypes() {
                 '-/hooks/*': ['src/hooks/*'],
                 '-/styles/*': ['src/styles/*'],
                 '-/utils/*': ['src/utils/*'],
-                '-': ['src/index.ts'],
+                '-/types/*': ['src/types/*'],
+                '-/constants/*': ['src/constants/*'],
             },
         },
         rootPath,
@@ -513,14 +507,7 @@ async function createMeta() {
 
     const uiVersion = `${execSync('npm view @bspk/ui version', { encoding: 'utf-8' }).trim()}`;
 
-    let mode = 'production';
-
-    if (uiHash === 'local' || process.env.DEV_GIT_TOKEN) {
-        mode = 'development';
-        console.info(`${ORANGE}Development meta build.${RESET}`);
-    } else {
-        console.info(`${YELLOW}Production meta build.${RESET}`);
-    }
+    console.info(`${ORANGE}${mode} meta build.${RESET}`);
 
     const metaJsonPath = path.join(outDirectory, 'data.json');
 
@@ -552,12 +539,12 @@ async function createMeta() {
             `export const componentsMeta = meta.componentsMeta as ComponentMeta[];
 export const utilitiesMeta = meta.utilitiesMeta as UtilityMeta[];
 export const typesMeta = meta.typesMeta as TypeMeta[];
-export const MODE = meta.MODE as 'development' | 'production';
+export const MODE = meta.MODE as 'development' | 'production' | 'test';
 export const UI_HASH = meta.UI_HASH as string;
 export const VERSION = meta.VERSION as string;
 export const BUILD = meta.BUILD as string;`,
 
-            fs.readFileSync(path.resolve(__dirname, 'meta-types.ts'), { encoding: 'utf-8' }),
+            fs.readFileSync(path.resolve(__dirname, './src/types/meta.ts'), { encoding: 'utf-8' }),
 
             `export type MetaComponentName = '${metaComponentNames.join("' | '")}';`,
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.33",
+    "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.0",
+        "@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,
+});