playbook_ui 12.36.0 → 12.37.0.pre.alpha.PLAY951collapsiblenav31062

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -11,43 +11,71 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
+  bold?: boolean,
+  emphasized?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
   data?: object,
+  dark?: boolean,
   iconLeft?: string,
   iconRight?: string | string[],
+  onIconRightClick?: () => void,
+  onIconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
+  collapsibleTrail?: boolean,
+  collapsed?: boolean
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
+    bold,
+    emphasized,
     children,
     className,
     collapsible,
     data = {},
+    dark = false,
     iconLeft,
     iconRight,
+    onIconRightClick,
+    onIconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
+    collapsibleTrail,
+    collapsed
   } = props
 
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
+  const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
+  const boldClass = collapsible && bold ? 'bold' : ''
+  const emphasizedClass = collapsible && emphasized ? 'emphasized' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 
+                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass, boldClass, emphasizedClass) : '', 
+                  globalProps(props), 
+                  className)
+
+
+  const handleIconClick = (e:any) => {
+    if (onIconLeftClick) {
+    e.stopPropagation();
+    onIconLeftClick()
+    }
+  }
 
   return (
     <li
@@ -58,18 +86,24 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
-          <Collapsible.Main>
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
+            iconSize="xs" 
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
+          >
+          <Collapsible.Main dark={dark}>
           <Tag
-          className="pb_nav_list_item_link"
+          className="pb_nav_list_item_link_collapsible"
           href={link}
-          onClick={onClick}
           target={target}
         >
           {imageUrl &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -80,17 +114,18 @@ const NavItem = (props: NavItemProps) => {
   
           {iconLeft &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
-                className="pb_nav_list_item_icon_left"
+                className="pb_nav_list_item_icon_left_collapsible"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
           }
-           <span className="pb_nav_list_item_text">
+           <span className="pb_nav_list_item_text_collapsible">
             {text}
           </span>
         </Tag>

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -29,12 +29,6 @@
         flex: 1;
         font-weight: $regular;
       }
-    }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
-      color: $primary;
-      letter-spacing: normal;
-    }
       &:hover {
         background-color: rgba($primary, 0.03);
         [class*=_icon] {
@@ -44,5 +38,11 @@
           color: $primary;
         }
       }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+      letter-spacing: normal;
+    }
   }
 }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
@@ -9,6 +7,7 @@ const CollapsibleNav = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,6 +32,7 @@ const CollapsibleNav = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -56,6 +56,7 @@ const CollapsibleNav = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
@@ -80,4 +81,4 @@ const CollapsibleNav = (props) => {
   );
 };
 
-export default CollapsibleNav;
+export default CollapsibleNav

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

@@ -0,0 +1 @@
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -0,0 +1,57 @@
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
+
+const CollapsibleNavCustom = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const collapsibles = navItems.map(() => useCollapsible(true))
+
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false)
+      } else {
+        setCollapsed(true)
+      }
+    })
+  }
+
+  return (
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsed={collapsed}
+                collapsible
+                emphasized
+                iconLeft="chevron-down"
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                onClick={() => handleMainClick(index)}
+                text={text}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavCustom

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

@@ -0,0 +1 @@
+The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx}

@@ -1,15 +1,14 @@
 import React from "react";
+import { Nav, NavItem } from '../..'
 
-import Nav from "../_nav";
-import NavItem from "../_item";
-
-const CollapsibleNavCustomIcons = (props) => {
+const CollapsibleNavEmphasize = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           collapsible 
+          emphasized
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -31,10 +30,10 @@ const CollapsibleNavCustomIcons = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          emphasized
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -57,8 +56,9 @@ const CollapsibleNavCustomIcons = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          emphasized
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
@@ -83,4 +83,4 @@ const CollapsibleNavCustomIcons = (props) => {
   );
 };
 
-export default CollapsibleNavCustomIcons;
+export default CollapsibleNavEmphasize;

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

@@ -0,0 +1 @@
+The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.

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

@@ -7,7 +7,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -25,8 +26,9 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
+export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
+export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -2,19 +2,20 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
+  dark: object.dark,
   id: object.id) do %>
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
-      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
         <%= content_tag(object.tag,
         object.link ? object.link_options : object.options) do %>
           <% if object.image_url %>
-            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
           <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
           <% end %>
-          <span class="pb_nav_list_item_text">
+          <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
         <% end %>    

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,9 +4,12 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :bold, type: Playbook::Props::Boolean, default: false
       prop :collapsible, type: Playbook::Props::Boolean, default: false
+      prop :emphasized, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
+      prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
       prop :icon_left
       prop :icon_right
       prop :image_url
@@ -14,7 +17,11 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        generate_classname("pb_nav_list_kit_item", active_class)
+        if collapsible
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
+        else
+          generate_classname("pb_nav_list_kit_item", active_class)
+        end
       end
 
       def tag
@@ -23,7 +30,7 @@ module Playbook
 
       def options
         {
-          class: "pb_nav_list_item_link",
+          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
         }.compact
       end
 
@@ -43,6 +50,18 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
+
+      def bold_class
+        bold ? "bold" : nil
+      end
+
+      def collapsible_trail_class
+        collapsible_trail ? "collapsible_trail" : nil
+      end
+
+      def emphasized_class
+        emphasized ? "emphasized" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md

@@ -0,0 +1,5 @@
+![pill-default](https://github.com/powerhome/playbook/assets/92755007/608cb5dd-9400-45f4-afb2-ac1bbd972c3d)
+
+```swift
+PBPill("default")
+```

data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Specifies the value of the Pill |  |  |
+| **variant** | `Variant` | Changes the color of the Pill | `.neutral` | `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md

@@ -0,0 +1,10 @@
+![pill-variants](https://github.com/powerhome/playbook/assets/92755007/79ac4260-633e-4429-8b1f-0a97b8178a86)
+
+```swift
+PBPill("success", variant: .success)
+ PBPill("error", variant: .error)
+ PBPill("warning", variant: .warning)
+ PBPill("info", variant: .info)
+ PBPill("neutral", variant: .neutral)
+ PBPill("primary", variant: .primary)
+```

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

@@ -11,3 +11,8 @@ examples:
   - pill_default: Default
   - pill_variants: Variants
   - pill_example: Example
+
+  swift:
+  - pill_default_swift: Default
+  - pill_variants_swift: Variants
+  - pill_props_swift: ""

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md

@@ -0,0 +1,16 @@
+![radio-alignment](https://github.com/powerhome/playbook/assets/92755007/04b84035-8391-4de1-a33e-8964999d5c0f)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    textAlignment: .vertical,
+    selected: $selectedAlignment
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md

@@ -0,0 +1,18 @@
+![radio-custom](https://github.com/powerhome/playbook/assets/92755007/3eab180b-0550-4d7e-b562-84a007690218)
+
+```swift
+VStack(alignment: .leading) {
+  if let selectedCustom = selectedCustom {
+    Text("Your choice is: \(selectedCustom.title)")
+  }
+  PBRadio(
+    items: [
+      PBRadioItem("Custom Power"),
+      .init("Custom Nitro"),
+      .init("Custom Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedCustom
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md

@@ -0,0 +1,15 @@
+![radio-default](https://github.com/powerhome/playbook/assets/92755007/be32852e-de70-4ae0-b8bb-c091f8cfa34b)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedDefault
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md

@@ -0,0 +1,14 @@
+![radio-error](https://github.com/powerhome/playbook/assets/92755007/425f499b-4daf-4093-82a7-230b01723287)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power")
+    ],
+    orientation: .vertical,
+    selected: $selectedError,
+    errorState: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md

@@ -0,0 +1,15 @@
+![radio-orientation](https://github.com/powerhome/playbook/assets/92755007/f1f8dac7-a7d5-43cf-ba93-92bd624a1016)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    selected: $selectedOrientation
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md

@@ -0,0 +1,31 @@
+![radio-padding](https://github.com/powerhome/playbook/assets/92755007/5cb123fb-791b-43f7-a57e-336f93c1bb3a)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small")
+    ],
+    orientation: .vertical,
+    padding: Spacing.small,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium")
+    ],
+    orientation: .vertical,
+    padding: Spacing.medium,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large")
+    ],
+    orientation: .vertical,
+    padding: Spacing.large,
+    selected: $selectedPadding
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **items** | `PBRadioItem` | Specifies the value of the Radio buttons | | |
+| **orientation** | `Orientation` | Changes between stacked or inline Radio items | `.vertical` | |
+| **textAlignment** | `Orientation` | Changes lable position | `.horizontal` | |
+| **spacing** | `CGFloat` | Applies padding around Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **padding** | `CGFloat` | Applies padding between Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **errorState** | `Bool` | Changes Radio to error styling | | |
+| **selected** | `PBRadioItem?` | Sets selected Radio item | | |

data/app/pb_kits/playbook/pb_radio/docs/_radio_spacing_swift.md

@@ -0,0 +1,36 @@
+![radio-spacing](https://github.com/powerhome/playbook/assets/92755007/58d1bf02-0c79-4526-9e5c-ba2f631d1dfe)
+
+```swift
+HStack(alignment: .top) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small"),
+      .init("Small Spacing"),
+      .init("Small Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.small,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium"),
+      .init("Medium Spacing"),
+      .init("Medium Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.medium,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large"),
+      .init("Large Spacing"),
+      .init("Large Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.large,
+    selected: $selectedSpacing
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_subtitle_swift.md

@@ -0,0 +1,13 @@
+![radio-subtitle](https://github.com/powerhome/playbook/assets/92755007/1244f4d4-0e87-4b5a-9b20-ac2223866321)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power", subtitle: "subtitle")
+    ],
+    selected: $selectedSubtitle
+  )
+}
+
+```