@bspk/ui 1.1.16 → 1.1.18

package/dist/text-input.css

@@ -1 +1 @@
-[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-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))}[data-bspk=text-input][data-disabled]{--border-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))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:none;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}[data-bspk=text-input]:focus-within button[data-clear]{display:flex}[data-bspk=text-input]:has(button[data-clear]){padding-right:0}
+[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 0 0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-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))}[data-bspk=text-input][data-disabled]{--border-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))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:flex;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:not(:focus-within),[data-bspk=text-input][data-empty],[data-bspk=text-input][data-readonly],[data-bspk=text-input][data-disabled]{padding-right:var(--field-padding)}[data-bspk=text-input]:not(:focus-within) button[data-clear],[data-bspk=text-input][data-empty] button[data-clear],[data-bspk=text-input][data-readonly] button[data-clear],[data-bspk=text-input][data-disabled] button[data-clear]{display:none}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}

package/dist/utils/children.js.map

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

package/meta-types.ts

@@ -2,6 +2,7 @@
  * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
  * the meta output file.
  */
+
 export type BaseMeta = {
     name: string;
     description?: string;
@@ -27,6 +28,7 @@ export type TypeProperty = {
     references?: string[];
     minimum?: number;
     maximum?: number;
+    example?: string;
 };
 
 export type ComponentMeta = BaseMeta & {

package/meta.ts

@@ -19,6 +19,12 @@ import { ComponentMeta, TypeProperty, UtilityMeta, TypeMeta } from './meta-types
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+const { componentsDir, hooksDir, rootPath } = {
+    componentsDir: path.resolve(__dirname, 'src'),
+    hooksDir: path.resolve(__dirname, 'src', 'hooks'),
+    rootPath: path.resolve(__dirname),
+} as const;
+
 function jsDocParse(content: string) {
     try {
         const contentTrimmed = content
@@ -43,7 +49,8 @@ function jsDocParse(content: string) {
                 data[key] = value
                     .replace(/\n[ ]+\*([ ]*)/g, '\n')
                     .replace(/^\s+\*\s+/, '')
-                    .trim();
+                    .trim()
+                    .replace(/;$/, '');
 
                 return;
             }
@@ -101,34 +108,34 @@ if (!metaFilePath) {
     process.exit(1);
 }
 
-const { componentsDir, hooksDir, rootPath } = {
-    componentsDir: path.resolve(__dirname, 'src'),
-    hooksDir: path.resolve(__dirname, 'src', 'hooks'),
-    rootPath: path.resolve(__dirname),
-} as const;
-
 const componentFiles = fs
     .readdirSync(componentsDir)
     .filter((f) => f.endsWith('.tsx'))
     .map((fileName) => {
         const filePath = path.resolve(componentsDir, fileName);
+        const content = fs.readFileSync(filePath, 'utf-8');
         return {
             filePath,
             name: fileName.replace(/\.[^.]+$/, ''),
             fileName,
-            content: fs.readFileSync(filePath, 'utf-8'),
+            content,
+            // eslint-disable-next-line no-useless-escape
+            jsDocs: content.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//g)?.map((jsDoc) => jsDocParse(jsDoc)),
         };
     });
 
+type ComponentFile = (typeof componentFiles)[0];
+
+fs.writeFileSync(path.resolve(__dirname, 'component-files.json'), JSON.stringify(componentFiles, null, 2), {
+    encoding: 'utf-8',
+});
+
 function generateComponentMeta({
     filePath: componentFile,
     content,
     name,
-}: {
-    filePath: string;
-    content: string;
-    name: string;
-}): ComponentMeta | null {
+    jsDocs,
+}: ComponentFile): ComponentMeta | null {
     const stats = fs.statSync(componentFile);
 
     const componentFunctionMatch = content.match(new RegExp(`function ${name}[(<]`));
@@ -142,18 +149,13 @@ function generateComponentMeta({
         return null;
     }
 
-    // eslint-disable-next-line no-useless-escape
-    const allJSDocMatches = content.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//g);
-
-    const componentDocStr = [...(allJSDocMatches || [])].find((doc) => doc.includes(`@name ${name}`));
+    const componentDoc = [...(jsDocs || [])].find((doc) => doc.name === name);
 
-    if (!componentDocStr) {
+    if (!componentDoc) {
         console.warn(`No JSDoc found for component ${name} for ${componentFile}`);
         return null;
     }
 
-    const componentDoc = jsDocParse(componentDocStr);
-
     const slug = kebabCase(componentDoc.name);
 
     const dependencies = [...content.matchAll(/import { ([^}]+) } from '\.\/([a-zA-Z]+)';/g)]
@@ -257,11 +259,9 @@ function generateTypes() {
         noExtraProps: false,
     })!;
 
-    const symbols = generator.getSchemaForSymbols(generator.getMainFileSymbols(program), true);
+    const { definitions } = generator.getSchemaForSymbols(generator.getMainFileSymbols(program), true);
 
-    const definitions = symbols.definitions as {
-        [key: string]: TJS.Definition;
-    };
+    fs.writeFileSync(path.resolve(__dirname, 'types.json'), JSON.stringify(definitions, null, 2));
 
     const nextTypes: TypeMeta[] = [];
 
@@ -283,26 +283,42 @@ function generateTypes() {
 
     const defineProperty = (
         name: string,
-        definition: TJS.DefinitionOrBoolean,
-        required?: string[],
+        definition: TJS.Definition,
+        required: string[],
+        context: {
+            componentFile: ComponentFile | null;
+            parent: string;
+        },
     ): TypeProperty | undefined => {
-        if (typeof definition !== 'object') return undefined;
+        // the auto-generated types aren't always correct, so we need to fix them
+        const jsDoc = definition.description
+            ? context.componentFile?.jsDocs?.find(
+                  (doc) =>
+                      doc.description.includes(definition.description!) ||
+                      definition.description!.includes(doc.description),
+              )
+            : undefined;
 
         const next: TypeProperty = {
             name,
             required: required?.includes(name),
-            description: definition.description,
+            description: jsDoc?.description || definition.description,
             default: definition.default === 'undefined' ? undefined : definition.default,
-            type: definition.type,
+            type: definition.type?.toString(),
             properties:
                 definition.properties &&
-                Object.entries(definition.properties)?.flatMap(
-                    ([name2, definition2]) => defineProperty(name2, definition2, definition.required) || [],
+                Object.entries(definition.properties)?.flatMap(([name2, definition2]) =>
+                    typeof definition2 === 'boolean'
+                        ? []
+                        : defineProperty(name2, definition2, definition.required || [], context) || [],
                 ),
             minimum: definition.minimum,
             maximum: definition.maximum,
+            example: jsDoc?.example,
         };
 
+        if (next.name.match(/^on[A-Z]/)) next.type = 'function';
+
         const defEnum = cleanUpDefinitionEnums(definition);
 
         if (defEnum) {
@@ -313,8 +329,8 @@ function generateTypes() {
         if (definition.$ref) {
             next.type = definition.$ref.split('/').pop() as string;
 
-            if (definitions[next.type]) {
-                next.options = cleanUpDefinitionEnums(definitions[next.type]);
+            if (definitions && definitions[next.type] && typeof definitions[next.type] !== 'boolean') {
+                next.options = cleanUpDefinitionEnums(definitions[next.type] as TJS.Definition);
             }
         }
 
@@ -325,6 +341,15 @@ function generateTypes() {
         Object.entries(definitions).forEach(([definitionName, definition]) => {
             if (typeof definition !== 'object') return;
 
+            let componentFile: ComponentFile | null = null;
+            // only care about ComponentProps
+            if (definitionName.endsWith('Props')) {
+                componentFile =
+                    componentFiles.find((f) => f.fileName === `${definitionName.replace(/Props$/, '')}.tsx`) || null;
+            }
+
+            const context = { componentFile, parent: definitionName };
+
             if (!definition?.properties && !definition?.allOf) return;
 
             if (['React', 'Omit<'].some((n) => definitionName.startsWith(n))) return;
@@ -336,9 +361,10 @@ function generateTypes() {
                     if (typeof ofDefinition !== 'object') return [];
 
                     if (ofDefinition.properties) {
-                        return Object.entries(ofDefinition.properties).flatMap(
-                            ([refName, refDefinition]) =>
-                                defineProperty(refName, refDefinition, ofDefinition.required) || [],
+                        return Object.entries(ofDefinition.properties).flatMap(([refName, refDefinition]) =>
+                            typeof refDefinition !== 'object'
+                                ? []
+                                : defineProperty(refName, refDefinition, ofDefinition.required || [], context) || [],
                         );
                     }
 
@@ -348,12 +374,13 @@ function generateTypes() {
 
                     const defReference = definitions[reference];
 
-                    if (!defReference) return [];
+                    if (typeof defReference === 'boolean') return [];
 
-                    return Object.entries(defReference.properties || {}).flatMap(
-                        ([refName, refDefinition]) =>
-                            defineProperty(refName, refDefinition, defReference.required) || [],
-                    );
+                    return Object.entries(defReference.properties || {}).flatMap(([refName, refDefinition]) => {
+                        return typeof refDefinition !== 'object'
+                            ? []
+                            : defineProperty(refName, refDefinition, defReference.required || [], context) || [];
+                    });
                 });
             }
 
@@ -366,7 +393,7 @@ function generateTypes() {
                     return;
                 }
                 properties = Object.entries(props).flatMap(
-                    ([propName, prop]) => defineProperty(propName, prop, definition.required) || [],
+                    ([propName, prop]) => defineProperty(propName, prop, definition.required || [], context) || [],
                 );
             }
 
@@ -432,11 +459,16 @@ async function createMeta() {
     const typesMeta = generateTypes();
     typesMeta.sort((a, b) => a.name.localeCompare(b.name));
 
+    const componentImport = (name: string) =>
+        `${name}: React.lazy(() => import('@bspk/ui/${name}').then((module) => ({ default: module.${name} })))`;
+
     fs.writeFileSync(
         metaFilePath,
         [
             `/** This file is generated by the @bspk/ui/meta.ts script with data scraped from the library. */`,
 
+            `import React from 'react';`,
+
             fs.readFileSync(path.resolve(__dirname, 'meta-types.ts'), { encoding: 'utf-8' }),
 
             `export const componentsMeta: ComponentMeta[] = ${JSON.stringify(componentsMeta, null, 2)} as const;`,
@@ -448,6 +480,8 @@ async function createMeta() {
             `export type MetaTypeName = '${typesMeta.map((t) => t.name).join("' | '")}';`,
 
             `export type MetaComponentName = '${metaComponentNames.join("' | '")}';`,
+
+            `export const components: Partial<Record<MetaComponentName, React.LazyExoticComponent<any>>> = {${metaComponentNames.map(componentImport).join(',')}\n};`,
         ].join('\n\n'),
     );
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.16",
+    "version": "1.1.18",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/Avatar.tsx

@@ -1,9 +1,15 @@
 import './avatar.scss';
 import { ReactNode, useMemo } from 'react';
 
+import { Tooltip } from './Tooltip';
+import { isValidIcon } from './utils/children';
 import { ColorVariant } from './utils/colorVariants';
 
-import { CommonProps } from '.';
+const DEFAULT = {
+    size: 'small',
+    color: 'grey',
+    showTooltip: true,
+} as const;
 
 export type SizeVariant =
     | 'large'
@@ -16,7 +22,16 @@ export type SizeVariant =
     | 'xxxx-large'
     | 'xxxxx-large';
 
-export type AvatarProps = CommonProps<'aria-label'> & {
+export type AvatarProps = {
+    /**
+     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
+     *
+     * @example
+     *     Jane Doe
+     *
+     * @required
+     */
+    name: string;
     /**
      * The size of the avatar.
      *
@@ -29,48 +44,86 @@ export type AvatarProps = CommonProps<'aria-label'> & {
      * @default grey
      */
     color?: ColorVariant;
-    /** The initials to display in the avatar limited to 2 characters. */
+    /**
+     * The initials to display in the avatar limited to 2 characters.
+     *
+     * If not provided, the first two letters of the name will be used as initials.
+     *
+     * @example
+     *     JD;
+     */
     initials?: string;
-    /** The icon to display in the avatar. */
+    /**
+     * The icon to display in the avatar. This needs to be an icon from the @bspk/icons library.
+     *
+     * @example
+     *     <SvgPerson />;
+     *
+     * @type BspkIcon
+     */
     icon?: ReactNode;
-    /** The url to the image to display in the avatar. */
+    /**
+     * The url to the image to display in the avatar.
+     *
+     * @example
+     *     /profile.jpg
+     */
     image?: string;
-    /** The number of notifications not displayed in a list. */
-    overflowCount?: number;
+    /**
+     * Whether to show the represeneetd user's name as a tooltip.
+     *
+     * @default true
+     */
+    showTooltip?: boolean;
 };
 
 /**
- * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
- * overflowCount.
+ * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
+ *
+ * The image if provided is displayed first, followed by the icon if provided, and finally the initials.
+ *
+ * If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
  */
 function Avatar({
-    initials,
-    color = 'grey',
-    size = 'small',
+    initials: initialsProp,
+    color = DEFAULT.color,
+    size = DEFAULT.size,
     icon,
     image,
-    'aria-label': ariaLabel,
-    overflowCount,
+    name: ariaLabel,
+    showTooltip = DEFAULT.showTooltip,
 }: AvatarProps) {
     const children = useMemo(() => {
-        if (initials) return <span data-initials>{initials}</span>;
-        if (icon) return <span data-icon>{icon}</span>;
         if (image) return <img alt={ariaLabel} src={image} />;
-        if (overflowCount) return <span data-overflow-count>+{overflowCount}</span>;
+
+        if (isValidIcon(icon)) return <span data-icon>{icon}</span>;
+
+        let initials = initialsProp;
+
+        if (ariaLabel && !initials)
+            initials = ariaLabel
+                .split(' ')
+                .map((word) => word.charAt(0))
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+
+        if (initials) return <span data-initials>{initials.slice(0, 2)}</span>;
+
         return null;
-    }, [ariaLabel, icon, image, initials, overflowCount]);
-
-    return (
-        <>
-            {children && (
-                <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
-                    {children}
-                </div>
-            )}
-        </>
+    }, [ariaLabel, icon, image, initialsProp]);
+
+    if (!children) return null;
+
+    const avatar = (
+        <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
+            {children}
+        </div>
     );
+
+    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar;
 }
 
 Avatar.bspkName = 'Avatar';

package/src/AvatarGroup.tsx

@@ -0,0 +1,71 @@
+import { Avatar, AvatarProps, SizeVariant } from './Avatar';
+import './avatar-group.scss';
+
+export type AvatarItem = Pick<AvatarProps, 'color' | 'icon' | 'image' | 'initials' | 'name'>;
+
+export type AvatarGroupProps = {
+    /**
+     * The avatars to display in the group.
+     *
+     * @example
+     *     [
+     *         { name: 'Jane Doe', image: '/path/to/image.jpg' },
+     *         { name: 'John Smith', initials: 'JS' },
+     *     ];
+     *
+     * @type Array<AvatarItem>
+     * @required
+     */
+    items: AvatarItem[];
+    /**
+     * Size of the avatar group.
+     *
+     * @default small
+     */
+    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    /**
+     * The maximum number of avatars to display before showing the overflowCount.
+     *
+     * This is used to limit the number of avatars displayed in the group.
+     *
+     * @minimum 3
+     * @maximum 5
+     */
+    max?: number;
+    /**
+     * The variant of the avatar group.
+     *
+     * @default spread
+     */
+    variant?: 'spread' | 'stacked';
+};
+
+/**
+ * AvatarGroup component displays a group of avatars.
+ *
+ * @name AvatarGroup
+ */
+function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
+    if (!Array.isArray(items) || !items?.length) return null;
+
+    const overFlowCount = items.length - max;
+
+    return (
+        <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant}>
+            <div data-wrap>
+                {items.map((item, index) => (
+                    <Avatar key={index} {...item} size={size} />
+                ))}
+                {overFlowCount > 0 && (
+                    <div aria-hidden data-bspk="avatar" data-size={size}>
+                        <span data-overflow-count>+{overFlowCount}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+AvatarGroup.bspkName = 'AvatarGroup';
+
+export { AvatarGroup };

package/src/Button.tsx

@@ -9,10 +9,18 @@ import { ButtonSize, CommonProps, ElementProps } from './';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'onClick'> & {
-    /** The label of the button. */
-    label?: string;
-    /** The icon of the button. */
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+    /**
+     * The label of the button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
     icon?: ReactNode;
     /**
      * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
@@ -59,6 +67,8 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
     children?: ReactNode;
     /** The tool tip text that appears when hovered. */
     toolTip?: string;
+    /** The function to call when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
 /**

package/src/Checkbox.tsx

@@ -1,17 +1,31 @@
 import './checkbox.scss';
-import { useEffect, useRef } from 'react';
+import { ChangeEvent, useEffect, useRef } from 'react';
 
-import { ToggleControlProps, ElementProps } from './';
+import { CommonProps, ElementProps, InvalidPropsLibrary } from './';
 
-export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
-    /**
-     * If the checkbox is partially checked or
-     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
-     *
-     * @default false
-     */
-    indeterminate?: boolean;
-};
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
+    InvalidPropsLibrary &
+    Required<CommonProps<'value'>> & {
+        /**
+         * If the checkbox is partially checked or
+         * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+         *
+         * @default false
+         */
+        indeterminate?: boolean;
+        /**
+         * Marks the checkbox as checked.
+         *
+         * @default false
+         */
+        checked?: boolean;
+        /**
+         * The function to call when the checkbox is checked or unchecked.
+         *
+         * @required
+         */
+        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    };
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base

package/src/CheckboxGroup.tsx

@@ -9,9 +9,12 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
     /**
      * The function to call when the checkboxes are changed.
      *
+     * @example
+     *     (values) => setState({ values });
+     *
      * @required
      */
-    onChange: (value: string[]) => void;
+    onChange: (values: string[]) => void;
     /**
      * The input control name of the checkboxes.
      *
@@ -21,14 +24,14 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
     /**
      * The options for the checkboxes.
      *
-     * @type CheckboxGroupOption[]
+     * @type Array<CheckboxGroupOption>
      * @required
      */
     options: CheckboxGroupOption[];
     /**
      * The values of the checked checkboxes.
      *
-     * @type string[]
+     * @type Array<string>
      */
     values?: CheckboxGroupProps['options'][number]['value'][];
     /**

package/src/CheckboxOption.tsx

@@ -4,8 +4,15 @@ import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 import { InvalidPropsLibrary } from '.';
 
 export type CheckboxOptionProps = InvalidPropsLibrary &
-    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'onChange' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'>;
+    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> &
+    Pick<ToggleOptionProps, 'description' | 'label'> & {
+        /**
+         * The function to call when the checkbox is checked or unchecked.
+         *
+         * @required
+         */
+        onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    };
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.

package/src/Chip.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, ReactNode } from 'react';
 
 import { CommonProps } from '.';
 
-export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
+export type ChipProps = CommonProps<'disabled'> & {
     /**
      * The content of the chip.
      *
@@ -39,6 +39,8 @@ export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
     selected?: boolean;
     /** The style of the chip. */
     style?: CSSProperties;
+    /** The function to call when the chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 };
 
 /**