@bspk/ui 1.3.7 → 1.3.9

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -42,7 +42,7 @@ export type AvatarGroupProps = CommonProps<'style'> & {
     /**
      * The variant of the avatar group.
      *
-     * @default auto
+     * @default stacked
      */
     variant?: 'spread' | 'stacked';
 };
@@ -53,22 +53,39 @@ export type AvatarGroupProps = CommonProps<'style'> & {
  * @example
  *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
  *
- *     function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                     { name: 'Princess Buttercup' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <AvatarGroup
+ *         style={{ marginLeft: 'var(--spacing-sizing-12)' }}
+ *         size="medium"
+ *         max={4}
+ *         variant="stacked"
+ *         items={[
+ *             {
+ *                 name: 'Alice Johnson',
+ *                 image: '/avatar-01.png',
+ *             },
+ *             {
+ *                 name: 'Bob Smith',
+ *                 image: '/avatar-02.png',
+ *             },
+ *             {
+ *                 name: 'Charlie Brown',
+ *                 image: '/avatar-03.png',
+ *             },
+ *             {
+ *                 name: 'Diana Prince',
+ *                 image: '/avatar-04.png',
+ *             },
+ *             {
+ *                 name: 'Ethan Hunt',
+ *                 image: '/avatar-05.png',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name AvatarGroup
  * @phase UXReview
  */
-export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'spread', style }: AvatarGroupProps) {
+export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'stacked', style }: AvatarGroupProps) {
     const max = maxProp > items.length ? items.length : maxProp;
     const overflowItems = items.slice(max);
 

package/src/components/Badge/Badge.tsx

@@ -49,9 +49,7 @@ export type BadgeProps = {
  * @example
  *     import { Badge } from '@bspk/ui/Badge';
  *
- *     function Example() {
- *         return <Badge count={5} size="small" color="primary" />;
- *     }
+ *     <Badge count={5} size="small" color="primary" surfaceBorder={true} />;
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *

package/src/components/BadgeDot/BadgeDot.tsx

@@ -44,16 +44,18 @@ export type BadgeDotProps = {
  * @example
  *     import { BadgeDot } from '@bspk/ui/BadgeDot';
  *
- *     function Example() {
- *         return <BadgeDot color="primary" />;
- *     }
+ *     <BadgeDot color="secondary" size={12} outline={true}>
+ *         <Button>Messages</Button>
+ *     </BadgeDot>;
  *
  * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
  *
  * @name BadgeDot
  * @phase UXReview
  */
-export function BadgeDot({ children, color = 'primary', size = 6, outline = false }: BadgeDotProps) {
+export function BadgeDot({ children, color = 'primary', size: sizeProp = 6, outline = false }: BadgeDotProps) {
+    const size = sizeProp in OUTLINE_WIDTHS ? sizeProp : 6;
+
     const badgeDot = (
         <sup
             data-attachment={!!children || undefined}

package/src/components/BannerAlert/BannerAlert.tsx

@@ -54,18 +54,17 @@ export type BannerAlertProps = {
  * @example
  *     import { BannerAlert } from '@bspk/ui/BannerAlert';
  *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *             callToAction={{
- *                 label = 'Click me',
- *                 onClick = () => action('Call to action clicked!'),
- *             }}
- *         />;
- *     }
+ *     <BannerAlert
+ *         elevated={true}
+ *         variant="error"
+ *         header="Error"
+ *         body="There was an error processing your request."
+ *         onClose={() => sendSnackbar('Alert closed')}
+ *         callToAction={{
+ *             label = 'Click me',
+ *             onClick = () => action('Call to action clicked!'),
+ *         }}
+ *     />;
  *
  * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
  *

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -23,13 +23,16 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState<string>('1');
  *
  *         return (
  *             <BottomNavigation
+ *                 variant="elevated"
+ *                 mode="inline"
+ *                 label="Bottom Navigation Example"
  *                 value={value}
- *                 onChange={onChange}
+ *                 onChange={(next) => setValue(next)}
  *                 options={[
  *                     {
  *                         value: '1',
@@ -46,7 +49,7 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *                 ]}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name BottomNavigation
  * @phase Dev

package/src/components/BottomNavigation/BottomNavigationExample.tsx

@@ -1,13 +1,3 @@
-import { SvgCloud } from '@bspk/icons/Cloud';
-import { SvgCloudFill } from '@bspk/icons/CloudFill';
-import { SvgEvent } from '@bspk/icons/Event';
-import { SvgEventFill } from '@bspk/icons/EventFill';
-import { SvgPerson } from '@bspk/icons/Person';
-import { SvgPersonFill } from '@bspk/icons/PersonFill';
-import { SvgSettings } from '@bspk/icons/Settings';
-import { SvgSettingsFill } from '@bspk/icons/SettingsFill';
-import { SvgSmartphone } from '@bspk/icons/Smartphone';
-import { SvgSmartphoneFill } from '@bspk/icons/SmartphoneFill';
 import { BottomNavigationProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
@@ -19,20 +9,20 @@ export const presets: Preset<BottomNavigationProps>[] = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
                     label: 'Item 3',
-                    icon: <SvgSmartphone />,
-                    iconSelected: <SvgSmartphoneFill />,
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
             ],
             value: '1',
@@ -45,33 +35,33 @@ export const presets: Preset<BottomNavigationProps>[] = [
             options: [
                 {
                     value: '1',
-                    label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    label: 'Item 1 With Longer Label',
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
-                    label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    label: 'Item 2 With Longer Label',
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
-                    label: 'Item 3',
-                    icon: <SvgSmartphone />,
-                    iconSelected: <SvgSmartphoneFill />,
+                    label: 'Item 3 With Longer Label',
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
                 {
                     value: '4',
-                    label: 'Item 4',
-                    icon: <SvgEvent />,
-                    iconSelected: <SvgEventFill />,
+                    label: 'Item 4 With Longer Label',
+                    icon: 'Event',
+                    iconSelected: 'EventFill',
                 },
                 {
                     value: '5',
-                    label: 'Item 5',
-                    icon: <SvgPerson />,
-                    iconSelected: <SvgPersonFill />,
+                    label: 'Item 5 With Longer Label',
+                    icon: 'Person',
+                    iconSelected: 'PersonFill',
                 },
             ],
             value: '1',
@@ -85,14 +75,14 @@ export const presets: Preset<BottomNavigationProps>[] = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                     disabled: true,
                 },
             ],
@@ -111,7 +101,12 @@ export const BottomNavigationExample: ComponentExample<BottomNavigationProps> =
     },
     defaultState: {
         value: '1',
-        options: presets[0].propState.options,
+        options: presets[0].propState.options.map((option) => ({
+            ...option,
+            icon: undefined,
+            iconSelected: undefined,
+        })),
+        label: 'Single Icon',
     },
     disableProps: [],
     presets,

package/src/components/BottomNavigation/bottom-navigation.scss

@@ -4,6 +4,7 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
     box-sizing: border-box;
     background-color: var(--background-base);
     height: var(--spacing-sizing-13);
+    gap: var(--spacing-sizing-02);
 
     &[data-variant='elevated'] {
         box-shadow: var(--drop-shadow-north);
@@ -20,7 +21,7 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
         color: var(--foreground-neutral-on-surface-variant-02);
         font: var(--labels-x-small);
         flex-direction: column;
-        gap: 0;
+        justify-content: center;
         overflow: hidden;
 
         &[data-pseudo='focus'] > &,
@@ -59,6 +60,14 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
         }
     }
 
+    li:first-child {
+        padding-left: var(--spacing-sizing-02);
+    }
+
+    li:last-child {
+        padding-right: var(--spacing-sizing-02);
+    }
+
     &[data-mode='fixed'] {
         position: fixed;
         bottom: 0;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -41,24 +41,23 @@ export type BreadcrumbProps = CommonProps<'id'> &
  * @example
  *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
  *
- *     function Example() {
- *         return (
- *             <Breadcrumb
- *                 items={[
- *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <Breadcrumb
+ *         id="example-breadcrumb"
+ *         scrollLimit={5}
+ *         items={[
+ *             { label: 'Brioche', href: '#brioche' },
+ *             { label: 'Whole Wheat', href: '#whole-wheat' },
+ *             { label: 'Sourdough', href: '#sourdough' },
+ *             { label: 'Rye', href: '#rye' },
+ *             { label: 'Multigrain', href: '#multigrain' },
+ *             { label: 'Baguette', href: '#baguette' },
+ *             { label: 'Focaccia', href: '#focaccia' },
+ *             { label: 'Ciabatta', href: '#ciabatta' },
+ *             { label: 'Pita', href: '#pita' },
+ *             { label: 'Naan', href: '#naan' },
+ *             { label: 'Flatbread', href: '#flatbread' },
+ *         ]}
+ *     />;
  *
  * @name Breadcrumb
  * @phase UXReview

package/src/components/Button/Button.tsx

@@ -83,17 +83,7 @@ export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'dis
  *     import { Button } from '@bspk/ui/Button';
  *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
+ *     <Button label="Click Me" size="medium" onClick={() => action('Button clicked')} icon={<SvgPerson />} />;
  *
  * @name Button
  * @phase UXReview

package/src/components/Button/ButtonExample.tsx

@@ -1,4 +1,3 @@
-import { SvgPerson } from '@bspk/icons/Person';
 import { ButtonProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
@@ -32,6 +31,6 @@ export const presets: Preset<ButtonProps>[] = [
 export const ButtonExample: ComponentExample<ButtonProps> = {
     presets,
     variants: {
-        iconOnly: () => ({ icon: <SvgPerson />, label: 'Person' }),
+        iconOnly: { icon: 'Person', label: 'Person' },
     },
 };

package/src/components/ButtonDock/ButtonDock.tsx

@@ -35,20 +35,16 @@ export type ButtonDockProps = {
  * @example
  *     import { ButtonDock } from '@bspk/ui/ButtonDock';
  *
- *     function Example() {
- *         return (
- *             <ButtonDock
- *                 primaryButton={{
- *                     children: 'Send',
- *                     label: 'send',
- *                 }}
- *                 secondaryButton={{
- *                     children: 'Cancel',
- *                     label: 'cancel',
- *                 }}
- *             />
- *         );
- *     }
+ *     <ButtonDock
+ *         primaryButton={{
+ *             children: 'Send',
+ *             label: 'send',
+ *         }}
+ *         secondaryButton={{
+ *             children: 'Cancel',
+ *             label: 'cancel',
+ *         }}
+ *     />;
  *
  * @name ButtonDock
  * @phase Dev

package/src/components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
-import { ElementProps } from '-/types/common';
+import { ElementProps, SetRef } from '-/types/common';
 
 export type CardProps = {
     /**
@@ -15,6 +15,8 @@ export type CardProps = {
      * @default elevated
      */
     variant?: 'elevated' | 'outlined';
+    /** A ref to the list item div element. */
+    innerRef?: SetRef<HTMLElement>;
 };
 
 /**
@@ -27,21 +29,17 @@ export type CardProps = {
  * @example
  *     import { Card } from '@bspk/ui/card';
  *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
+ *     <Card variant="elevated" style={{ padding: 'var(--spacing-sizing-04)', maxWidth: '100%', width: '400px' }}>
+ *         <h3>Card Title</h3>
+ *         <p>This is some content inside the card.</p>
+ *     </Card>;
  *
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated', ...props }: ElementProps<CardProps, 'div'>) {
+export function Card({ children, variant = 'elevated', innerRef, ...props }: ElementProps<CardProps, 'div'>) {
     return (
-        <div {...props} data-bspk="card" data-variant={variant}>
+        <div {...props} data-bspk="card" data-variant={variant} ref={innerRef}>
             {children}
         </div>
     );

package/src/components/Carousel/Carousel.tsx

@@ -51,19 +51,15 @@ export type CarouselProps = {
  * @example
  *     import { Carousel } from '@bspk/ui/Carousel';
  *
- *     function Example() {
- *         return (
- *             <Carousel label="Example Carousel" width="1/2">
- *                 <div>child 1</div>
- *                 <div>child 2</div>
- *                 <div>child 3</div>
- *                 <div>child 4</div>
- *                 <div>child 5</div>
- *                 <div>child 6</div>
- *                 <div>child 7</div>
- *             </Carousel>
- *         );
- *     }
+ *     <Carousel label="Example Carousel" width="1/2">
+ *         <div>child 1</div>
+ *         <div>child 2</div>
+ *         <div>child 3</div>
+ *         <div>child 4</div>
+ *         <div>child 5</div>
+ *         <div>child 6</div>
+ *         <div>child 7</div>
+ *     </Carousel>;
  *
  * @name Carousel
  * @phase UXReview

package/src/components/Carousel/CarouselExample.tsx

@@ -4,37 +4,13 @@ import { Button } from '-/components/Button';
 import { COLOR_VARIANTS } from '-/utils/colorVariants';
 import { ComponentExampleFn } from '-/utils/demo';
 
-function ExampleSlide({ number, onClick }: { number: number; onClick?: (message: string) => void }) {
-    return (
-        <div
-            data-color={COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length]}
-            style={{
-                backgroundColor: 'var(--background)',
-                color: 'var(--foreground)',
-                borderRadius: '8px',
-                minHeight: '180px',
-                padding: 20,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-        >
-            Slide {number}
-            {onClick && (
-                <Button label="Click me" onClick={() => onClick(`Slide ${number} clicked`)} variant="tertiary" />
-            )}
-        </div>
-    );
-}
-
 export const CarouselExample: ComponentExampleFn<CarouselProps & { slideCount: number }> = ({ action }) => {
     return {
         containerStyle: { width: '100%', padding: '16px', overflow: 'hidden' },
         render: ({ props, Component }) => (
             <Component {...props}>
                 {Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (
-                    <ExampleSlide key={num} number={num} onClick={action} />
+                    <SlidePlaceholder key={num} number={num} onClick={action} />
                 ))}
             </Component>
         ),
@@ -80,3 +56,27 @@ export const CarouselExample: ComponentExampleFn<CarouselProps & { slideCount: n
         ],
     };
 };
+
+function SlidePlaceholder({ number, onClick }: { number: number; onClick?: (message: string) => void }) {
+    return (
+        <div
+            data-color={COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length]}
+            style={{
+                backgroundColor: 'var(--background)',
+                color: 'var(--foreground)',
+                borderRadius: '8px',
+                minHeight: '180px',
+                padding: 20,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            Slide {number}
+            {onClick && (
+                <Button label="Click me" onClick={() => onClick(`Slide ${number} clicked`)} variant="tertiary" />
+            )}
+        </div>
+    );
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -36,11 +36,14 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  * @example
  *     import { Checkbox } from '@bspk/ui/Checkbox';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
  *
  *         return (
- *             <label htmlFor="sample-checkbox">
+ *             <label
+ *                 htmlFor="sample-checkbox"
+ *                 style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sizing-02)' }}
+ *             >
  *                 <Checkbox
  *                     aria-label="Sample"
  *                     checked={checked}
@@ -52,7 +55,7 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  *                 Checkbox Label
  *             </label>
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/src/components/Checkbox/CheckboxExample.tsx

@@ -2,7 +2,8 @@ import { CheckboxProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 
 export const CheckboxExample: ComponentExample<CheckboxProps> = {
-    render: ({ props, Component }) => (
-        <Component {...props} aria-label={props['aria-label'] || 'checkbox aria-label'} />
-    ),
+    defaultState: {
+        'aria-label': 'checkbox aria-label',
+    },
+    render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -42,8 +42,8 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  * @example
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
- *     function Example() {
- *         const [value, setValue] = React.useState<string[]>([]);
+ *     () => {
+ *         const [value, setValue] = useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -60,7 +60,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  *                 }}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxGroup
  * @phase UXReview

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -12,8 +12,9 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  * @example
  *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
+ *
  *         return (
  *             <CheckboxOption
  *                 checked={checked}
@@ -22,12 +23,11 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  *                 name="example-checkbox-name"
  *                 onChange={(nextChecked, event) => {
  *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
  *                 }}
  *                 value="example-checkbox-value"
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxOption
  * @phase UXReview