playbook_ui 13.14.0.pre.alpha.play1120lintdatepicker1797 → 13.15.0.pre.alpha.PLAY10831873

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c34c836a1ff08237ce9ff16758432e89285b4276002874e0a9229bd976b3b972
-  data.tar.gz: b8247e84f089cfdfc7c250cd3cf4055321b14c44a79013e6bdc2fae042e4a17b
+  metadata.gz: 5c792af7baba55e98e5f05e45c33104f369267fa1acfa30556f96fb650e21ce4
+  data.tar.gz: e05765a5b49f1c379dcf111ad9085ecaf012083f673776103489d6eef8674842
 SHA512:
-  metadata.gz: 72dcd9f2da5ced65a814dec3edbabe64e314d41cb9f992b6e952be77fd038584ad684ec3897a17968a28cc73954e5c1bbdf22877ddcd2ea2f8f09ec4be5cebdc
-  data.tar.gz: 3db22c62475fca1e03967434f5692c66a6209fcce64b6532a31f925e5c85db741ce4497bb6ffd8b1e9b9ddf397b14599e413d6aa94dd72a91019cb0183e4e681
+  metadata.gz: fe584e4c6307e81a122a08406fc7451e6edbd546e4d83677d0521ebe0b4a7b324b632971ecf1818a9a8886e56aeeaea8bb9ca89efc17079907fa4d3e64f4564e
+  data.tar.gz: f2552261c54ec7d511e0f007ef7067d681eb65345cc2cc442ba3b191067dfba335eabeede5d8cb42e83203c513b491aa3baa62469c40e695ae3a4cc7724b9c42

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md

@@ -0,0 +1,27 @@
+![collapsible-colors](https://github.com/powerhome/playbook/assets/54749071/daafd129-fd0a-4992-8fee-bfa55aed8a23)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+       VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconColor: .default, text: "Default Section")
+            CollapsibleDoc(iconColor: .light, text: "Light Section")
+            CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
+            CollapsibleDoc(iconColor: .link, text: "Link Section")
+            CollapsibleDoc(iconColor: .error, text: "Error Section")
+            CollapsibleDoc(iconColor: .success, text: "Success Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md

@@ -0,0 +1,22 @@
+![collapsible-default](https://github.com/powerhome/playbook/assets/54749071/3e97095b-f6bb-45b7-bd33-99ebde0d40fd)
+
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+        CollapsibleDoc(text: "Main Section")
+      } content: {
+        Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isCollapsed** | `Bool` | Value for whether or not the dropdown is closed or open | `false` | `true` `false` |
+| **headerView** | `View` | Title of dropdown |  | |
+| **contentView** | `View` | Content of dropdown |  |  |
+| **iconSize** | `PBIcon.IconSize` | Sets size of chevron icon | `.small`  | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **iconColor** | `CollapsibleIconColor` | Sets color of chevron icon | `.default` | `default` `light` `lighter` `link` `error` `success`  |

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md

@@ -0,0 +1,26 @@
+![collapsible-sizes](https://github.com/powerhome/playbook/assets/54749071/557bfe16-26e4-4966-9f1c-689a2dc44412)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+      VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
+            CollapsibleDoc(iconSize: .small, text: "Small Section")
+            CollapsibleDoc(text: "Default Section")
+            CollapsibleDoc(iconSize: .large, text: "Large Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -14,3 +14,9 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+
+  swift:
+  - collapsible_default_swift: Default
+  - collapsible_sizes_swift: Sizes
+  - collapsible_colors_swift: Colors
+  - collapsible_props_table: ""

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -32,10 +32,6 @@ type DatePickerConfig = {
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
-  const noop = () => {
-    // intentionally left empty as a no-op placeholder
-  }
-
   const {
     allowInput,
     closeOnSelect = true,
@@ -49,8 +45,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate,
     minDate,
     mode,
-    onChange = noop,
-    onClose = noop,
+    onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -76,11 +72,20 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       return defaultDate
     }
   }
+  const disabledParser = () => {
+    const disabledArray=[]
+     
+    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
+    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
+    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
+
+    return disabledArray
+  }
 
   const disabledWeekDays = () => {
     return (
       [
-        (date: any) => {
+        (date:any) => {
           const weekdayObj: {
             [day: string]: number
           } = {
@@ -105,16 +110,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       ]
     )
   }
-
-  const disabledParser = () => {
-    const disabledArray=[]
-
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
@@ -130,46 +125,28 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
-
+  
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
-
+  
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
       pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
-
+  
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-
+  
     return pluginList
   }
-
+  
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
 
-  // Attach / detach to / from scroll events
-  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
-  const scrollEvent = () => {
-    initialPicker._positionCalendar()
-  }
-  function attachToScroll(scrollParent: string | HTMLElement) {
-    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
-  }
-  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
-    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
-  }
-
-  // two way binding
-  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-  const yearChangeHook = () => {
-    initialDropdown.value = initialPicker.currentYear
-  }
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -216,6 +193,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // Attach / detach to / from scroll events
+  const scrollEvent = () => {
+    picker._positionCalendar()
+  }
+  function attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  }
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -254,6 +242,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
+  // two way binding
+  const yearChangeHook = () => {
+    dropdown.value = picker.currentYear
+  }
+
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -53,8 +53,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
 
     const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
       const endDate = new Date();
-      const startDate = new Date();
-
+      let startDate = new Date();
+    
       switch (timePeriod) {
         case 'days':
           startDate.setDate(endDate.getDate() - amount);
@@ -76,7 +76,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       }
       return [startDate, endDate];
     };
-
+  
 
     type rangesType = {
       [key: string]: Date[]
@@ -95,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       'Last year': [lastYearStartDate, lastYearEndDate]
     };
 
-
+    
     if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
       if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
         customQuickPickDates.dates.forEach((item) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from "../utilities/props";
+import { VoidCallback } from "../types";
 
 import Icon from "../pb_icon/_icon";
 import Title from "../pb_title/_title";
@@ -15,23 +16,23 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number,
-  children?: React.ReactChild[] | React.ReactChild,
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: "right" | "left" | "center",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: "success" | "error" | "neutral" | "tip",
-  text?: string,
-  vertical?: "top" | "bottom",
-}
+  autoClose?: number;
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  id?: string;
+  multiLine?: boolean;
+  onClose?: VoidCallback;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text?: string;
+  vertical?: "top" | "bottom";
+};
 
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
@@ -41,7 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
     horizontal,
     htmlOptions = {},
     multiLine = false,
-    onClose = () => { },
+    onClose = () => undefined,
     open = true,
     status = "neutral",
     text,
@@ -65,7 +66,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
         onClose();
       }, autoClose);
     }
-  }
+  };
 
   useEffect(() => {
     toggleToast(open);
@@ -80,22 +81,35 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   return (
     <>
       {showToast && (
-        <div className={css} onClick={handleClick} {...htmlProps}>
-          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+        <div
+            className={css}
+            onClick={handleClick}
+            {...htmlProps}
+        >
+          {icon && (
+            <Icon
+                className="pb_icon"
+                fixedWidth
+                icon={icon}
+            />
+          )}
 
-          {
-            children && children ||
-            text && (
+          {(children && children) ||
+            (text && (
               <Title
-                className="pb_fixed_confirmation_toast_text"
-                size={4}
-                text={text}
+                  className="pb_fixed_confirmation_toast_text"
+                  size={4}
+                  text={text}
               />
-            )
-          }
+            ))}
 
           {closeable && (
-            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
+            <Icon
+                className="pb_icon"
+                cursor="pointer"
+                fixedWidth={false}
+                icon="times"
+            />
           )}
         </div>
       )}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { Sizes } from '../types'
+import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,7 +25,7 @@ type FlexProps = {
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
 
-const Flex = (props: FlexProps) => {
+const Flex = (props: FlexProps): React.ReactElement => {
   const {
     align = 'none',
     children,
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps) => {
     wrap = false,
     alignSelf = 'none',
   } = props
-  
+
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

data/app/pb_kits/playbook/pb_form_group/_form_group.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GenericObject } from '../types'
 
 type FormGroupProps = {
   aria?: {[key: string]: string},
   children?: Node,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   fullWidth?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const FormGroup = (props: FormGroupProps) => {
+const FormGroup = (props: FormGroupProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,16 +22,16 @@ type FormPillProps = {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
-  }, 
+  },
 } & GlobalProps
-const FormPill = (props: FormPillProps) => {
+const FormPill = (props: FormPillProps): React.ReactElement => {
   const {
     className,
     htmlOptions = {},
     id,
     text,
     name,
-    onClick = () => {},
+    onClick = () => undefined,
     avatarUrl,
     closeProps = {},
     size = '',
@@ -48,7 +48,10 @@ const FormPill = (props: FormPillProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={css} id={id} {...htmlProps}>
+    <div className={css}
+        id={id}
+        {...htmlProps}
+    >
         {name &&
         <>
         <Avatar

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -12,12 +12,13 @@ import typography from "../tokens/exports/_typography.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
+  dark?: boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
   fullCircle?: boolean;
@@ -33,13 +34,12 @@ type GaugeProps = {
   title?: string;
   tooltipHtml?: string;
   colors: string[];
-  minorTickInterval: any;
+  minorTickInterval?: number;
   circumference: number[];
 };
 
 const Gauge = ({
   aria = {},
-  className,
   chartData,
   dark = false,
   data = {},
@@ -61,9 +61,9 @@ const Gauge = ({
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
   ...props
-}: GaugeProps) => {
+}: GaugeProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
- const dataProps = buildDataProps(data)
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   highchartsMore(Highcharts);
   solidGauge(Highcharts);
@@ -89,7 +89,7 @@ const Gauge = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
+    const formattedChartData = chartData.map((obj: GenericObject) => {
       obj.y = obj.value;
       delete obj.value;
       return obj;
@@ -185,20 +185,20 @@ const Gauge = ({
         .querySelectorAll(".fix")
         .forEach((fix) => fix.setAttribute("y", "38"));
     }
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartData]);
 
   return (
     <HighchartsReact
-      containerProps={{
+        containerProps={{
         className: classnames(css, globalProps(props)),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps,
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -8,6 +8,7 @@ import Body from '../pb_body/_body'
 import Hashtag from '../pb_hashtag/_hashtag'
 import Title from '../pb_title/_title'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GenericObject } from '../types'
 
 type HomeAddressStreetProps = {
   aria?: { [key: string]: string },
@@ -28,7 +29,7 @@ type HomeAddressStreetProps = {
   territory: string,
 }
 
-const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
   const {
     address,
     addressCont,
@@ -58,17 +59,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
       className
     )
 
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: GenericObject = buildDataProps(data)
+  const ariaProps: GenericObject = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   return (
-    <div 
-      className={classes(className, dark)} 
-      {...ariaProps} 
-      {...dataProps}
-      {...htmlProps}
+    <div
+        className={classes(className, dark)}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
     >
-      {emphasis == 'street' && 
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -9,11 +9,12 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 
 type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
     | "green",
 }
 
-const IconStatValue = (props: IconStatValueProps) => {
+const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps) => {
+const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-bold](https://github.com/powerhome/playbook/assets/54749071/f55f31c5-dbf9-40e2-9f08-6a075c7cb56b)
+
+```swift
+@State private var selectedHBold: Int = 1
+
+PBNav(
+        selected: $selectedHBold,
+        variant: .bold,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```