@bspk/ui 1.3.8 → 1.3.9

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/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

package/src/components/Chip/Chip.tsx

@@ -63,13 +63,9 @@ export type ChipProps = {
  * @example
  *     import { Chip } from '@bspk/ui/Chip';
  *
- *     function Example() {
- *         return (
- *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
+ *     <Chip label="Label" onClick={() => sendSnackbar('Chip clicked!')}>
+ *         Example Chip
+ *     </Chip>;
  *
  * @name Chip
  * @phase UXReview

package/src/components/Chip/ChipExample.tsx

@@ -6,6 +6,9 @@ export const presets: Preset<ChipProps>[] = [
         label: 'Basic',
         propState: {
             label: 'chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
@@ -13,15 +16,17 @@ export const presets: Preset<ChipProps>[] = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
         label: 'Trailing Icon',
         propState: {
             label: 'chip',
-            leadingIcon: '',
+            leadingIcon: undefined,
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -30,6 +35,7 @@ export const presets: Preset<ChipProps>[] = [
             label: 'chip',
             leadingIcon: 'Add',
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -38,6 +44,7 @@ export const presets: Preset<ChipProps>[] = [
             label: 'chip',
             leadingIcon: 'Bumblebee',
             trailingIcon: 'Rabbit',
+            trailingBadge: undefined,
         },
     },
     {
@@ -45,7 +52,7 @@ export const presets: Preset<ChipProps>[] = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
             trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
     },
@@ -57,6 +64,48 @@ export const presets: Preset<ChipProps>[] = [
             trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
     },
+    {
+        label: 'Assist Chip',
+        propState: {
+            label: 'Assist Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern:
+            'A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons. ',
+    },
+    {
+        label: 'Filter Chip',
+        propState: {
+            label: 'Filter Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'KeyboardArrowDown',
+            trailingBadge: undefined,
+        },
+        designPattern: 'Short form descriptive words that filter out content or represent active filter setting.',
+    },
+    {
+        label: 'Input Chip',
+        propState: {
+            label: 'Input Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'Close',
+            trailingBadge: undefined,
+        },
+        designPattern:
+            'A range of short form key words or pieces of information a customer enters within multi entry field.',
+    },
+    {
+        label: 'Suggest Chip',
+        propState: {
+            label: 'Suggest Chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern: 'Dynamically generated options that are suggested to the customer as responses or prompts. ',
+    },
 ];
 
 export const ChipExample: ComponentExample<ChipProps> = {

package/src/components/ChipGroup/ChipGroup.tsx

@@ -23,18 +23,29 @@ export type ChipGroupProps = {
  * A component that manages the layout of a group of chips.
  *
  * @example
- *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *     import { Chip } from '@bspk/ui/Chip';
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     function Example() {
- *         return (
- *             <ChipGroup wrap={false}>
- *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
- *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
- *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
- *             </ChipGroup>
- *         );
- *     }
+ *     <ChipGroup wrap={false}>
+ *         <Chip
+ *             label="chip 1"
+ *             leadingIcon={<SvgLightbulb />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 2"
+ *             leadingIcon={<SvgIcecream />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 3"
+ *             leadingIcon={<SvgSignLanguage />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgClose />}
+ *         />
+ *     </ChipGroup>;
  *
  * @name ChipGroup
  * @phase UXReview

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -17,10 +17,10 @@ export const presets: Preset<ChipGroupProps>[] = [
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
+    containerStyle: { width: '600px' },
     presets,
     render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');
-
         return (
             <Component {...props}>
                 <Chip

package/src/components/DatePicker/DatePicker.tsx

@@ -40,22 +40,23 @@ export type DatePickerProps = FieldControlProps<Date | undefined> &
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
- *     }
- *
- *     function ExampleWithField() {
+ *     () => {
  *         const [date, setDate] = useState<Date | undefined>(new Date());
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Date</FieldLabel>
- *                 <DatePicker name="date1" value={date} onChange={setDate} />
- *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone date picker example
+ *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
+ *                 <br />
+ *                 // date picker used within a field
+ *                 <Field>
+ *                     <FieldLabel>Date</FieldLabel>
+ *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name DatePicker
  * @phase UXReview

package/src/components/Dialog/Dialog.tsx

@@ -57,24 +57,29 @@ export type DialogProps = CommonProps<'id' | 'owner'> &
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
+ * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
  *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
+ *                         <h1>Dialog Title</h1>
+ *                         <p>This is the content of the dialog.</p>
+ *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                     </div>
  *                 </Dialog>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Dialog
  * @phase Utility

package/src/components/Divider/Divider.tsx

@@ -46,15 +46,11 @@ const insetToVariable = (insetProp: number | string) => {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
+ *     <div>
+ *         <p>Content above the divider</p>
+ *         <Divider orientation="horizontal" />
+ *         <p>Content below the divider</p>
+ *     </div>;
  *
  * @name Divider
  * @phase UXReview

package/src/components/Divider/DividerExample.tsx

@@ -26,5 +26,22 @@ export const DividerExample: ComponentExample<DividerProps> = {
             </div>
         );
     },
-    presets,
+    presets: [
+        {
+            label: 'Divider - Horizontal',
+            designPattern:
+                'Horizontal thin line that separates grouped content in a list or other containers with the option to include a section/group label.',
+            propState: {
+                orientation: 'horizontal',
+            },
+        },
+        {
+            label: 'Divider - Vertical',
+            designPattern:
+                'Vertical thin line that separates grouped content or other visual elements within a container.',
+            propState: {
+                orientation: 'vertical',
+            },
+        },
+    ],
 };