Kits




Dialog

Simple

user-default

PBDialog(
            title: "This is some informative text",
            message: infoMessage,
            cancelButton: ("Cancel", closeToast),
            confirmButton: ("Okay", closeToast)
          )

Fixed Confirmation Toast

Default

Default-Toast

VStack(alignment: .leading) {
  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
}

Button

Button Variants

button-default

VStack(alignment: .leading, spacing: Spacing.small) {
   PBButton(
     title: "Button Primary",
     action: {}
    )
    PBButton(
      variant: .secondary,
      title: "Button Secondary",
      action: {})
    PBButton(
      variant: .link,
      title: "Button Link",
      action: {}
    )
    PBButton(
      variant: .disabled,
      title: "Button Disabled"
    )
 }

Date

Default

date-default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(
    Date(),
    variant: .short
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true)
  )
  Spacer()
  PBDate(
    Date(),
    variant: .short, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true),
    typography: .title4
  )
}

Date Range Inline

Default

Date-Range-Inline-Default

VStack(alignment: .leading, spacing: Spacing.large) {
  VStack(alignment: .leading, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption,
      iconSize: .xSmall,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  VStack(alignment: .center, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  VStack(alignment: .trailing, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Date Range Stacked

Default

Date-Range-Stacked-Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateRangeStacked(
    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
    startAlignment: .trailing,
    endAlignment: .leading,
    startVariant: .short(showIcon: false),
    endVariant: .short(showIcon: false)
  )
}

Date Stacked

Default

Date-Stacked-Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isMonthStacked: true
  )
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title3,
    isMonthStacked: true
  )
}

Date Time

Default

Date-Time-Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateTime(
    dateVariant: .dayDate(showYear: true),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    timeZoneIdentifier: "EST"
  )
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .standard,
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    showTimeZone: true,
    timeZoneIdentifier: "GMT+9"
  )
}

Date Time Stacked

Default

Date-Time-Stacked-Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateTimeStacked(
    timeZoneIdentifier: "EDT",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "EDT",
    isYearDisplayed: true,
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true,
    isYearBold: true,
    dateVariant: .standard
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "GMT+9",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "MDT",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
}

Timestamp

Default

timestamp-default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTimestamp(
    Date(),
    showDate: false
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date()
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(addThreeYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(subOneYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
}

Contact

Default

contact-default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBContact(type: .cell, value: "3491859988")
  PBContact(value: "5555555555")
  PBContact(type: .email, value: "email@example.com")
  PBContact(type: .work, value: "3245627482")
  PBContact(type: .workCell, value: "3245627482")
}


Currency

Size

Currency-Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBCurrency(
    amount: "2,000",
    decimalAmount: ".50",
    label: "small",
    size: .title4,
    symbol: "en_US",
    isEmphasized: true
  )
  PBCurrency(
    amount: "342",
    decimalAmount: ".00",
    label: "medium",
    size: .title3,
    symbol: "en_EU",
    isEmphasized: true
  )
  PBCurrency(
    amount: "45",
    label: "large",
    size: .title1,
    symbol: "en_US",
    unit: "/mo",
    isEmphasized: true,
    hasUnit: true
  )
}

Home Address Street

Default

home-address-street-default


PBHomeAddressStreet(
  address: "70 Prospect Ave",
  withBullet: true,
  houseStyle: "Colonial",
  addressCont: "Apt M18",
  city: "West Chester",
  homeId: "8250263",
  homeUrl: "https://powerhrg.com/",
  state: "PA",
  territory: "PHL",
  zipcode: "19382"
)

Label Value

Default

label-value-default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBLabelValue("Role", "Administrator, Moderator")
  PBLabelValue("Email", "anna.black@powerhrg.com")
  PBLabelValue("Bio", longText)
}

Person

Default

PBIOS-227


PBPerson(firstName: "Timothy", lastName: "Wenhold")

Toggle

Default State

toggle-default


VStack(spacing: Spacing.small) {
  PBToggle(checked: true)
  PBToggle(checked: false)
}

Text Input

Default

text-input-default


@State private var textFirstName: String = ""
@State private var textLastName: String = ""
@State private var textPhone: String = ""

PBTextInput(
  "First name",
  text: $textFirstName,
  placeholder: "Enter first name"
)

PBTextInput(
  "Last name",
  text: $textLastName,
  placeholder: "Enter last name"
)

PBTextInput(
  "Phone number",
  text: $textPhone,
  placeholder: "Enter phone number",
  keyboardType: .phonePad
)

Textarea

Default

textarea-default


@State var defaultText = ""
@State var placeholderText = ""
@State var customText = "Default value text"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTextArea(
    "Label",
    text: $defaultText
  )

  PBTextArea(
    "Label",
    text: $placeholderText,
    placeholder: "Placeholder with text"
  )

  PBTextArea(
    "Label",
    text: $customText
  )
}

Select

Default

select-default

let defaultOptions = [
    (value: "1", text: "Burgers"),
    (value: "2", text: "Pizza"),
    (value: "3", text: "Tacos")
  ]
@State private var defaultState = ""

 PBSelect(title: "Favorite Food", options: defaultOptions, style: .default) { selected in
            defaultState = selected
          }

Radio

Default

radio-default

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power"),
      .init("Nitro"),
      .init("Google")
    ],
    orientation: .vertical,
    selected: $selectedDefault
  )
}

Checkbox

Default

checkbox-default


  PBCheckbox(checked: false, text: "Unchecked", action: {})
    .padding(.bottom, Spacing.small)

  PBCheckbox(checked: true, text: "Checked", action: {})

Icon

Icon Default

card-default


PBIcon.fontAwesome(.user, size: .x1)

Icon Circle

Default

icon-circle-default


PBIconCircle(FontAwesome.rocket)

Image

Size

image-size


VStack(alignment: .leading, spacing: Spacing.small) {
  Text("xSmall").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xSmall,
    rounded: .sharp
  )

  Text("small").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .small,
    rounded: .sharp
  )

  Text("medium").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .medium,
    rounded: .sharp
  )

  Text("large").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .large,
    rounded: .sharp
  )

  Text("xLarge").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xLarge,
    rounded: .sharp
  )
}

Card

Default

card-default

PBCard {
  Text("Card Content").pbFont(.body)
 }

Section Separator

Line Separator

section-separator-default


PBSectionSeparator()

Collapsible

Default

collapsible-default

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)
      }

Message

Default

message-default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBMessage(
    avatar: AnyView(picAnna),
    label: "Anna Black",
    message: "How can we assist you today?",
    timestamp: Date().addingTimeInterval(-20)
  )

  PBMessage(
    avatar: AnyView(picPatric),
    label: "Patrick Welch",
    message: "We will escalate this issue to a Senior Support agent.",
    timestamp: Date().addingTimeInterval(-540),
    timestampAlignment: .leading
  )

  PBMessage(
    avatar: AnyView(picLuccile),
    label: "Lucille Sanchez",
    message: "Application for Kate Smith is waiting for your approval",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    avatar: AnyView(PBAvatar(name: "Beverly Reyes", size: .xSmall)),
    label: "Beverly Reyes",
    message: "We are so sorry you had a bad experience!",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {}

  PBMessage(
    label: "Keith Craig",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }
}

Nav

Vertical Default

nav-vertical-default

@State private var selectedVDefault: Int = 1

PBNav(
        selected: $selectedVDefault,
        variant: .normal,
        orientation: .vertical,
        title: "Menu"
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Badge

Rectangle

badge-rectangle

HStack {
  PBBadge(text: "+1", variant: .primary)
  PBBadge(text: "+4", variant: .primary)
  PBBadge(text: "+1000", variant: .primary)
 }

Pill

Default

pill-default

PBPill("default")

Avatar

Default

avatar-default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBAvatar(image: Image("andrew", bundle: .module), size: .xxSmall, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xLarge, status: .offline)
 }

Multiple Users

Default

mulitple-users-default


let twoUsers = [andrew, picAndrew]

PBDoc(title: "xSmall") {
  PBMultipleUsers(users: twoUsers, size: .xSmall)
}

Multiple Users Stacked

Default

mulitple-users-stacked-default


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)
}

User

Horizontal

user-horizontal


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small
  )
}