playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
@@ -23,6 +24,7 @@ type LightboxHeaderProps = {
   className?: string;
   closeable?: boolean;
   data?: { [key: string]: string | number };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   icon?: string;
   id?: string;
   onClickRight?: () => void;
@@ -38,6 +40,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     onClickRight,
     spacing = "between",
     text,
@@ -48,7 +51,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const api: any = useContext(LightboxContext);
   const headerCSS = buildCss("lightbox_header");
   const headerSpacing = globalProps(props, { paddingY: "sm" });
@@ -112,6 +116,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <Flex
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(headerCSS, headerSpacing, className)}
         spacing={spacing}
       >

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useRef, useState, useEffect } from 'react'
 import { useKbdControls } from './hooks/useKbdControls'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
@@ -15,6 +15,7 @@ type LightboxType = {
   currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   photos: [],
   initialPhoto?: number,
@@ -35,6 +36,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     currentPhotoIndex,
     data = {},
     description,
+    htmlOptions = {},
     id = '',
     initialPhoto = 0,
     photos,
@@ -60,6 +62,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_lightbox_kit'),
     globalProps(props),
@@ -96,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
         <div
             {...ariaProps}
             {...dataProps}
+            {...htmlProps}
             className={classes}
             id={id}
             ref={lightboxRef}

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,42 +1,43 @@
-/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle?: string,
-  dark?: Boolean,
-  xAxisCategories: [],
-  yAxisMin: number,
-  yAxisMax: number,
-  className?: string,
+  align?: "left" | "right" | "center";
+  axisTitle?: string;
+  dark?: Boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  className?: string;
   chartData: {
-    name: string,
-    data: number[],
-  }[],
-  gradient?: boolean,
-  id: string,
-  pointStart: number,
-  subTitle?: string,
-  title: string,
-  type?: string,
-  legend?: boolean,
-  toggleLegendClick?: boolean,
-  height?: string,
-  colors: string[],
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+    name: string;
+    data: number[];
+  }[];
+  gradient?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
+  id: string;
+  pointStart: number;
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
 const LineGraph = ({
@@ -47,6 +48,7 @@ const LineGraph = ({
   dark = false,
   gradient = false,
   type = "line",
+  htmlOptions = {},
   id,
   legend = false,
   toggleLegendClick = true,
@@ -66,8 +68,17 @@ const LineGraph = ({
   colors = [],
   ...props
 }: LineGraphProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
   const staticOptions = {
     title: {
@@ -101,7 +112,7 @@ const LineGraph = ({
     colors:
       colors !== undefined && colors.length > 0
         ? mapColors(colors)
-        : highchartsTheme(window.Highcharts).colors,
+        : highchartsTheme.colors,
     plotOptions: {
       series: {
         pointStart: pointStart,
@@ -120,32 +131,21 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
         id: id,
         ...ariaProps,
         ...dataProps,
+        ...htmlProps
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type ListProps = {
@@ -10,6 +10,7 @@ type ListProps = {
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
   data?: object;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   layout?: "" | "left" | "right";
   ordered?: boolean;
@@ -29,6 +30,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     layout = "",
     ordered = false,
@@ -53,7 +55,8 @@ const List = (props: ListProps) => {
     }
   );
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_list_kit", layoutClass[layout], size, {
       dark: dark,
@@ -71,6 +74,7 @@ const List = (props: ListProps) => {
         <ol
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}
@@ -82,6 +86,7 @@ const List = (props: ListProps) => {
         <ul
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ListItemProps = {
@@ -8,6 +8,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tabIndex?: number,
 }
@@ -18,12 +19,14 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     tabIndex,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_item_kit'),
     globalProps(props),
@@ -35,6 +38,7 @@ const ListItem = (props: ListItemProps) => {
       <li
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
           tabIndex={tabIndex}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -21,11 +22,13 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss(`pb_loading_inline_kit_${align}`),
     globalProps(props),
@@ -36,6 +39,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import MapControls from './_map_controls';
@@ -10,6 +10,7 @@ type MapProps = {
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   zoomBtns?: boolean,
   flyTo?: boolean, 
@@ -24,6 +25,7 @@ const Map = (props: MapProps) => {
   children,
   className,
   data = {},
+  htmlOptions = {},
   id,
   zoomBtns = false,
   flyTo = false,
@@ -34,12 +36,15 @@ const Map = (props: MapProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const classes = classnames(buildCss('pb_map'), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -21,6 +21,7 @@ type MessageProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   message: string,
@@ -39,6 +40,7 @@ const Message = (props: MessageProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     label,
     message,
@@ -49,6 +51,7 @@ const Message = (props: MessageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const shouldDisplayAvatar = avatarUrl || avatarName
   const baseClassName = shouldDisplayAvatar
     ? 'pb_message_kit_avatar'
@@ -64,6 +67,7 @@ const Message = (props: MessageProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message_mention.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type MessageMentionProps = {
@@ -8,6 +8,7 @@ type MessageMentionProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   variant: 'user' | 'self',
 }
@@ -18,11 +19,13 @@ const MessageMention = (props: MessageMentionProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     variant = 'user',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_message_mention', variant),
     globalProps(props),
@@ -33,6 +36,7 @@ const MessageMention = (props: MessageMentionProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react"
 import classnames from "classnames"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
 import Radio from "../pb_radio/_radio"
 import Body from "../pb_body/_body"
@@ -24,6 +24,7 @@ type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  htmlOptions?: {[key: string]: string | number | boolean | Function}
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
@@ -40,6 +41,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
@@ -53,6 +55,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
@@ -418,6 +421,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -13,6 +13,7 @@ type MultipleUsersProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
@@ -26,6 +27,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     maxDisplayedUsers = 4,
     reverse = false,
@@ -41,6 +43,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_multiple_users_kit', reverseClass),
     globalProps(props),
@@ -56,6 +59,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-default](https://github.com/powerhome/playbook/assets/92755007/73dffd55-14f7-468e-b6ea-4e700980183d)
+
+```swift
+
+let twoUsers = [andrew, picAndrew]
+
+PBDoc(title: "xSmall") {
+  PBMultipleUsers(users: twoUsers, size: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `AvatarSize` | Changes the size of the avatars  | `.small` | `.xSmall` `.small` |
+| **Reversed** | `Bool` | Changes the order of the avatars | `false` | `true` `false` |
+| **Max Displayed Users** | `Int` | Limits the number of avatars displayed | `4` |  |

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md

@@ -0,0 +1,13 @@
+![multiple-users-reverse](https://github.com/powerhome/playbook/assets/92755007/be3f6f7d-f699-40f2-bbb6-8a99144a8744)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+let twoUsers = [andrew, picAndrew]
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
+  PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-size](https://github.com/powerhome/playbook/assets/92755007/5c15b862-fb32-4e0a-a826-bc25b1db555e)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+PBDoc(title: "Small") {
+  PBMultipleUsers(users: multipleUsers, size: .small)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml

@@ -10,3 +10,9 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+
+  swift:
+  - multiple_users_default_swift: Default
+  - multiple_users_reverse_swift: Reverse
+  - multiple_users_size_swift: Small
+  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
@@ -12,6 +12,7 @@ type MultipleUsersStackedProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   users: Array<{ [key: string]: string }>,
 }
@@ -22,6 +23,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     users,
   } = props
@@ -33,6 +35,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
     { single: onlyOne }), globalProps(props), className)
@@ -85,6 +88,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .default)
+  PBMultipleUsersStacked(users: twoUsers, size: .default)
+  PBMultipleUsersStacked(users: multipleUsers, size: .default)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |