@stack-spot/citric-react 0.1.0

package/dist/utils/acessibility.d.ts

@@ -0,0 +1,52 @@
+export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other';
+export type TagPriorityElement = TagPriority | TagPriority[];
+interface FocusOptions {
+    /**
+     * Instead of focusing the first element overall, focus the first according to this list of priorities.
+     *
+     * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+     */
+    priority?: TagPriorityElement[];
+    /**
+     * Ignores any element that matches this query selector.
+     */
+    ignore?: string;
+}
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ *
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ *
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ *
+ * Elements with `auto-focus={false}` will be ignored.
+ *
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ *
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export declare function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority, ignore }?: FocusOptions): void;
+/**
+ * Checks if an element can receive focus.
+ *
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export declare function isFocusable(element?: Element | null): boolean;
+export {};
+//# sourceMappingURL=acessibility.d.ts.map

package/dist/utils/acessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"acessibility.d.ts","sourceRoot":"","sources":["../../src/utils/acessibility.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpF,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAE5D,UAAU,YAAY;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QAkB/H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,WAYnD"}

package/dist/utils/acessibility.js

@@ -0,0 +1,80 @@
+const selectors = {
+    a: 'a[href]:not(:disabled)',
+    button: 'button:not(:disabled)',
+    input: 'input:not(:disabled):not([type="hidden"])',
+    select: 'textarea:not(:disabled)',
+    textarea: 'select:not(:disabled)',
+    other: '[tabindex]:not([tabindex="-1"])',
+};
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ *
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ *
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ *
+ * Elements with `auto-focus={false}` will be ignored.
+ *
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ *
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export function focusFirstChild(element, { priority = [], ignore } = {}) {
+    const allFocusableTags = ['a', 'button', 'input', 'other', 'select', 'textarea'];
+    const focusableList = [
+        element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
+    ];
+    for (const p of priority) {
+        const tags = Array.isArray(p) ? p : [p];
+        const querySelectors = tags.map(t => selectors[t]);
+        focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')));
+    }
+    for (const focusable of focusableList ?? []) {
+        for (const f of focusable ?? []) {
+            if (f.getAttribute('auto-focus') !== 'false' && (!ignore || !f.matches(ignore))) {
+                const styles = window.getComputedStyle(f);
+                if (styles.display != 'none' && styles.visibility != 'hidden')
+                    return f.focus();
+            }
+        }
+    }
+}
+/**
+ * Checks if an element can receive focus.
+ *
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element) {
+    if (!element)
+        return false;
+    // is disabled: return false
+    if (element.ariaDisabled || element.getAttribute('disabled') !== null)
+        return false;
+    // is invisible: return false
+    if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }))
+        return false;
+    // has tab index: return false if negative, true otherwise
+    const tabIndexStr = element.getAttribute('tabindex');
+    const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined;
+    if (tabIndex !== undefined)
+        return tabIndex >= 0;
+    // check the tag name
+    return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '');
+}
+//# sourceMappingURL=acessibility.js.map

package/dist/utils/acessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"acessibility.js","sourceRoot":"","sources":["../../src/utils/acessibility.ts"],"names":[],"mappings":"AAgBA,MAAM,SAAS,GAAgC;IAC7C,CAAC,EAAE,wBAAwB;IAC3B,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,2CAA2C;IAClD,MAAM,EAAE,yBAAyB;IACjC,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAkD,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,KAAmB,EAAE;IAC9H,MAAM,gBAAgB,GAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;IAC/F,MAAM,aAAa,GAA4C;QAC7D,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9E,CAAA;IACD,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAClD,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAC7E,CAAC;IACD,KAAK,MAAM,SAAS,IAAI,aAAa,IAAI,EAAE,EAAE,CAAC;QAC5C,KAAK,MAAM,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;gBAChF,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBACzC,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,IAAI,QAAQ;oBAAE,OAAO,CAAC,CAAC,KAAK,EAAE,CAAA;YACjF,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,OAAwB;IAClD,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAA;IAC1B,4BAA4B;IAC5B,IAAI,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IACnF,6BAA6B;IAC7B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QAAE,OAAO,KAAK,CAAA;IAC5F,0DAA0D;IAC1D,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IACpD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAChE,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,QAAQ,IAAI,CAAC,CAAA;IAChD,qBAAqB;IACrB,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAA;AAC/G,CAAC"}

package/dist/utils/css.d.ts

@@ -0,0 +1,12 @@
+import { ColorKey } from '@stack-spot/portal-theme';
+import { TextAppearance, WithStyleShortcuts } from '../types.js';
+export declare function colorNameToColorVariable(name: ColorKey): string;
+export declare function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined): import("react").CSSProperties | undefined;
+export declare function textAppearanceToClass(appearance: TextAppearance): string;
+export declare function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined): string;
+export declare function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any): import("react").CSSProperties | undefined;
+export declare function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }: WithStyleShortcuts & Record<string, any>): {
+    style: Partial<import("react").CSSProperties>;
+};
+export declare function styleObjectToCssString(styleObject?: React.CSSProperties): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AAGvE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,WAAW,CACzB,EACE,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;EA8B5C;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}

package/dist/utils/css.js

@@ -0,0 +1,72 @@
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { isNil, omitBy } from 'lodash';
+export function colorNameToColorVariable(name) {
+    return `var(--${name.replaceAll('.', '-')})`;
+}
+export function applyColor(style, color) {
+    return color ? { ...style, color: colorNameToColorVariable(color) } : style;
+}
+export function textAppearanceToClass(appearance) {
+    return `text-${appearance}`;
+}
+export function applyTextAppearance(className, appearance) {
+    return listToClass([className, appearance ? textAppearanceToClass(appearance) : undefined]);
+}
+export function applyCSSVariable(style, name, value) {
+    if (isNil(value))
+        return style;
+    return { ...style, [`--${name}`]: `${value}` };
+}
+function spacingToStyle(spacing) {
+    if (typeof spacing === 'string')
+        return spacing;
+    if (typeof spacing === 'number')
+        return theme.spacing[spacing];
+    return spacing?.map(s => theme.spacing[s]).join(' ');
+}
+export function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }) {
+    const [bgColor, bgLevel] = bg?.split('.') ?? [];
+    const [fgColor, fgLevel] = fg?.split('.') ?? [];
+    const [borderColor, borderLevel] = border?.split('.') ?? [];
+    const borderColorVar = theme.color[borderColor]?.[borderLevel];
+    const newStyle = {
+        backgroundColor: theme.color[bgColor]?.[bgLevel],
+        color: theme.color[fgColor]?.[fgLevel],
+        border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
+        borderRadius: radius ? theme.radius[radius] : undefined,
+        justifyContent,
+        alignItems,
+        flex,
+        gap,
+        margin: spacingToStyle(m),
+        marginTop: spacingToStyle(mt),
+        marginBottom: spacingToStyle(mb),
+        marginLeft: spacingToStyle(ml),
+        marginRight: spacingToStyle(mr),
+        padding: spacingToStyle(p),
+        paddingTop: spacingToStyle(pt),
+        paddingBottom: spacingToStyle(pb),
+        paddingLeft: spacingToStyle(pl),
+        paddingRight: spacingToStyle(pr),
+        width: w,
+        height: h,
+        ...style,
+    };
+    return { style: omitBy(newStyle, v => v === undefined), ...props };
+}
+// AI generated
+export function styleObjectToCssString(styleObject = {}) {
+    return Object.entries(styleObject)
+        .map(([property, value]) => {
+        // Convert camelCase to kebab-case
+        const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase();
+        // Append 'px' to numeric values for common dimension properties
+        const cssValue = typeof value === "number" &&
+            !['zIndex', 'opacity', 'fontWeight'].includes(property)
+            ? `${value}px`
+            : value;
+        return `${cssProperty}: ${cssValue}`;
+    })
+        .join("; ");
+}
+//# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"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"}

package/dist/utils/options.d.ts

@@ -0,0 +1,3 @@
+export declare function defaultRenderLabel(option: any): string;
+export declare function defaultRenderKey(option: any): string | undefined;
+//# sourceMappingURL=options.d.ts.map

package/dist/utils/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,GAAG,UAE7C;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,GAAG,sBAE3C"}

package/dist/utils/options.js

@@ -0,0 +1,7 @@
+export function defaultRenderLabel(option) {
+    return `${option}`;
+}
+export function defaultRenderKey(option) {
+    return ['string', 'number'].includes(typeof option) ? `${option}` : undefined;
+}
+//# sourceMappingURL=options.js.map

package/dist/utils/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAC,MAAW;IAC5C,OAAO,GAAG,MAAM,EAAE,CAAA;AACpB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,MAAW;IAC1C,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;AAC/E,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@stack-spot/citric-react",
+  "version": "0.1.0",
+  "author": "StackSpot",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme.css": "./dist/theme.css",
+    "./citric.css": "./dist/citric.css"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stack-spot/citric"
+  },
+  "peerDependencies": {
+    "@stack-spot/citric-icons": ">=0.1.0",
+    "@stack-spot/portal-theme": ">=1.2.0",
+    "@stack-spot/portal-translate": ">=1.2.2",
+    "lodash": ">=4.17.21",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.177",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "18.2.3",
+    "@types/yargs": "^17.0.33",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "glob": "^11.0.3",
+    "rimraf": "^5.0.7",
+    "tsc-esm-fix": "^2.20.26",
+    "tsx": "^4.19.4",
+    "typescript": "^5.3.3",
+    "yargs": "^18.0.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist' && pnpm tsx scripts/build-css.ts",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  }
+}

package/scripts/build-css.ts

@@ -0,0 +1,49 @@
+import { readFile, writeFile } from 'fs/promises'
+import { glob } from 'glob'
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
+
+interface Argv {
+  o?: string,
+  output?: string,
+}
+
+function getArguments() {
+  const argv = yargs(hideBin(process.argv)).parse() as Argv
+  const output = argv.o || argv.output || './dist'
+  return { output }
+}
+
+async function readInput() {
+  const themeFiles = await glob('../css/theme/**.css')
+  const otherFiles = await glob('../css/**/**.css', { ignore: '../css/theme/**' })
+  const themeCss: string[] = []
+  const otherCss: string[] = []
+  for (const f of themeFiles) {
+    themeCss.push(await readFile(f, { encoding: 'utf8' }))
+  }
+  for (const f of otherFiles) {
+    otherCss.push(await readFile(f, { encoding: 'utf8' }))
+  }
+  return { theme: themeCss.join('\n\n'), citric: otherCss.join('\n\n') }
+}
+
+async function start() {
+  try {
+    const { output } = getArguments()
+    const { theme, citric } = await readInput()
+    await Promise.all([
+      writeFile(`${output}/theme.css`, theme, { encoding: 'utf8' }),
+      writeFile(`${output}/citric.css`, citric, { encoding: 'utf8' }),
+    ])
+    // eslint-disable-next-line no-console
+    console.log(`CSS built at ${output}`)
+    process.exit(0)
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    process.exit(1)
+  }
+}
+
+start()

package/src/components/Accordion.tsx

@@ -0,0 +1,74 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useMemo, useState } from 'react'
+import { HTMLExtension } from '../types'
+import { applyCSSVariable } from '../utils/css'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAccordionProps {
+  /**
+   * A unique id for this accordion.
+   */
+  id?: string,
+  /**
+   * The Accordion's appearance. If unset, the appearance is customizable.
+   */
+  appearance?: 'card',
+  /**
+   * Controls the expansion state of the accordion.
+   */
+  expanded?: boolean,
+  /**
+   * Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
+   */
+  onChange?: (expanded: boolean) => void,
+  /**
+   * The header for the accordion, i.e. the part that is always rendered. You can use either a simple title or a custom set of components,
+   * in the second case, you may pass a function that receives the "expand/collapse" button as parameter. 
+   */
+  header: React.ReactNode | ((expandButton: React.ReactElement) => React.ReactNode),
+  /**
+   * The maximum height for the accordion.
+   * 
+   * @default 300
+   */
+  maxHeight?: number,
+}
+
+export type AccordionProps = HTMLExtension<'div', BaseAccordionProps, 'onChange'>
+
+export const Accordion = (
+  { id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,
+) => {
+  const [ariaHidden, setAriaHidden] = useState(!expanded)
+  const accordionId = useMemo(() => id || `${Math.random()}`, [id])
+
+  useEffect(() => {
+    setAriaHidden(!expanded)
+  }, [expanded])
+
+  const expandBtn = <input
+    type="checkbox"
+    checked={expanded}
+    onChange={() => {
+      setAriaHidden(!ariaHidden)
+      onChange?.(!expanded)
+    }}
+    onKeyDown={e => e.key === 'Enter' && (e.target as HTMLElement).click?.()}
+    aria-controls={accordionId}
+  />
+  const headerContent = typeof header === 'function' ? header(expandBtn) : <label>{header}{expandBtn}</label>
+  return (
+    <CitricComponent
+      tag="div"
+      component="accordion"
+      className={listToClass([appearance, className])}
+      style={applyCSSVariable(style, 'max-height', `${maxHeight}px`)}
+      {...props}
+    >
+      <header>{headerContent}</header>
+      <section id={accordionId} aria-hidden={ariaHidden} {...(ariaHidden ? { inert: 'true' } : {})}>
+        {appearance === 'card' ? <div className="content">{children}</div> : children}
+      </section>
+    </CitricComponent>
+  )
+}

package/src/components/Alert.tsx

@@ -0,0 +1,16 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { HTMLExtension } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAlertProps {
+  /**
+   * Type of the message.
+   * @default 'warning'
+   */
+  type?: 'error' | 'info' | 'warning',
+}
+
+export type AlertProps = HTMLExtension<'div', BaseAlertProps>
+
+export const Alert = ({ type, className, children, ...props }: AlertProps) =>
+  <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>

package/src/components/AsyncContent.tsx

@@ -0,0 +1,54 @@
+import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
+import { useCitricController } from '../context/hooks'
+import { ErrorMessage } from './ErrorMessage'
+import { LoadingPanel } from './LoadingPanel'
+
+interface Props {
+  /**
+   * Whether or not to show the loading feedback.
+   */
+  loading: boolean,
+  /**
+   * A javascript error. Used to show error feedbacks.
+   */
+  error?: any,
+  /**
+   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+   * Can be either a React Ref Object or a query selector.
+   */
+  autofocus?: string | MutableRefObject<HTMLElement>,
+  /**
+   * The content to show if it's not loading or has errors.
+   */
+  children: React.ReactNode,
+}
+
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
+export const AsyncContent = ({ loading, error, autofocus, children }: Props) => {
+  const citric = useCitricController()
+
+  useEffect(() => {
+    if (error) {
+      citric?.onError?.(error)
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [error])
+
+  useLayoutEffect(() => {
+    if (!loading && !error) {
+      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
+    }
+  }, [loading, error])
+
+  if (loading) return <LoadingPanel />
+  if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
+  return children
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,34 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { HTMLExtension, WithColorPalette } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAvatarProps extends WithColorPalette {
+  /**
+   * @default 'lg'
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  /**
+   * This name will be reduced to a maximum of 2 capital letters (first letter of each word).
+   */
+  name?: string,
+  /**
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * If instead of the name you want to use an image, this should be the image's url.
+   */
+  image?: string,
+}
+
+export type AvatarProps = HTMLExtension<'div', BaseAvatarProps, 'children'>
+
+export const Avatar = ({ size, name, appearance, className, image, ...props }: AvatarProps) => {
+  const parts = name?.split(' ') ?? ['']
+  const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0]
+  return (
+    <CitricComponent tag="div" component="avatar" className={listToClass([size, appearance, className])} {...props}>
+      {image ? <img src={image} /> : acronym}
+    </CitricComponent>
+  )
+}

package/src/components/AvatarGroup.tsx

@@ -0,0 +1,40 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { HTMLExtension, WithColorPalette } from '../types'
+import { Avatar } from './Avatar'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAvatarGroupProps extends WithColorPalette {
+  /**
+   * @default 'lg'
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  /**
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * The avatars in the group. Use "image" for rendering images instead of the avatar.
+   */
+  items: { name?: string, image?: string }[],
+  /**
+   * A maximum number of avatars to show in the group.
+   **/
+  maxItems?: number,
+}
+
+export type AvatarGroupProps = HTMLExtension<'div', BaseAvatarGroupProps, 'children'>
+
+export const AvatarGroup = ({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
+  const avatars = items.map(({ name, image }) => <Avatar key={name} name={name} image={image} />, [items])
+  return (
+    <CitricComponent
+      tag="div"
+      component="avatar-group"
+      className={listToClass([size, appearance, className])}
+      data-max-items={maxItems}
+      {...props}
+    >
+      {avatars}
+    </CitricComponent>
+  )
+}

package/src/components/Badge.tsx

@@ -0,0 +1,28 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { HTMLExtension, WithColorPalette } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span'
+
+export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithColorPalette {
+  /**
+   * @default 'div'
+   */
+  tag?: T,
+  /**
+   * Determines how round the corners are.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+}
+
+export type BadgeProps<T extends ValidTags> = HTMLExtension<T, BaseBadgeProps<T>>
+
+export function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
+  return (
+    <CitricComponent tag={tag || 'div'} component="badge" className={listToClass([appearance, className])} {...props as any}>
+      {children}
+    </CitricComponent>
+  )
+}

package/src/components/Blockquote.tsx

@@ -0,0 +1,9 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+export type BaseBlockquoteProps = WithColorScheme & WithColorPalette
+
+export type BlockquoteProps = HTMLExtension<'blockquote', BaseBlockquoteProps>
+
+export const Blockquote = ({ children, ...props }: BlockquoteProps) =>
+  <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { HTMLExtension } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+interface BreadCrumbItem {
+  label: string,
+  href?: string,
+}
+
+export interface BaseBreadcrumbProps {
+  items: BreadCrumbItem[],
+}
+
+export type BreadcrumbProps = HTMLExtension<'nav', BaseBreadcrumbProps, 'children'>
+
+export const Breadcrumb = ({ items, ...props }: BreadcrumbProps) => {
+  const children = useMemo(
+    () => items.map(
+      (item, index) => item.href ? <li key={index}><a href={item.href}>{item.label}</a></li> : <li key={index}>{item.label}</li>,
+    ),
+    [items],
+  )
+  return <CitricComponent tag="nav" component="breadcrumb" {...props}><ul>{children}</ul></CitricComponent>
+}