playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md

@@ -0,0 +1,72 @@
+![label-value-examples](https://github.com/powerhome/playbook/assets/92755007/1810abee-c45a-45ac-bb12-eef88d6a254e)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("Patient Profile")
+  .pbFont(.title4)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Age",
+    variant: .details,
+    icon: FontAwesome.user,
+    title: "24 yrs old"
+  )
+
+  PBLabelValue(
+    "Blood",
+    variant: .details,
+    icon: FontAwesome.tint,
+    title: "A +"
+  )
+
+  PBLabelValue(
+    "Weight",
+    variant: .details,
+    icon: FontAwesome.weight,
+    title: "91 kg"
+  )
+
+  PBLabelValue(
+    "Height",
+    variant: .details,
+    icon: FontAwesome.arrowsAltV,
+    title: "187 cm"
+  )
+
+  Text("Workout Schedule")
+  .pbFont(.title4)
+  .padding(.top, Spacing.large)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Chest",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "6 sets • 8 reps • 40-100 kg",
+    title: "Bench Press",
+    active: true
+  )
+
+  PBLabelValue(
+    "Biceps",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "5 sets • 12 reps • 20-40 kg",
+    title: "Barbell Curl",
+    active: true
+  )
+
+  PBLabelValue(
+    "Back",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "8 sets • 8 reps • 40-120 kg",
+    title: "Back Squat",
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md

@@ -0,0 +1,41 @@
+![label-value-details](https://github.com/powerhome/playbook/assets/92755007/bc1628f8-8698-4ac2-a236-d93687e6f165)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBLabelValue(
+    "Installer",
+    variant: .details,
+    icon: FontAwesome.truck,
+    title: "JD Installations LLC"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date()
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date(),
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Label** | `String` | Sets the label text |  |  |
+| **Value** | `String` | Sets the value | `nil` |  |
+| **Variant** | `Variant` | Changes the style of the Label Value  | `.default` | `.default` `.details` |
+| **Icon** | `PlaybookGenericIcon` | Adds an icon next to the title | `nil` |  |
+| **Description** | `String` | Sets the description | `nil` |  |
+| **Title** | `String` | Sets the title | `nil` |  |
+| **Date** | `Date` | Adds a date | `nil` |  |
+| **Active** | `Bool` | Changes the style of the Label Value | `false` | `true` `false` |

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

@@ -11,3 +11,9 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
+
+  swift:
+  - label_value_default_swift: Default
+  - label_value_details_swift: Details
+  - label_value_details_examples_swift: Other Examples
+  - label_value_props_swift: ""

data/app/pb_kits/playbook/pb_layout/_layout.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+declare type LayoutPropTypes = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    collapse?: "xs" | "sm" | "md" | "lg" | "xl";
+    dark?: boolean;
+    data?: object;
+    full?: boolean;
+    position?: "left" | "right";
+    responsive?: boolean;
+    size?: "xs" | "sm" | "md" | "base" | "lg" | "xl";
+    variant?: "light" | "dark" | "gradient";
+    transparent?: boolean;
+    layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry";
+};
+declare type LayoutSideProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+declare type LayoutBodyProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+declare type LayoutItemProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+};
+declare type LayoutHeaderProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+declare type LayoutFooterProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+declare const Layout: {
+    (props: LayoutPropTypes): JSX.Element;
+    Side: (props: LayoutSideProps) => JSX.Element;
+    Body: (props: LayoutBodyProps) => JSX.Element;
+    Item: (props: LayoutItemProps) => JSX.Element;
+    Header: (props: LayoutHeaderProps) => JSX.Element;
+    Footer: (props: LayoutFooterProps) => JSX.Element;
+};
+export default Layout;

data/app/pb_kits/playbook/pb_legend/_legend.d.ts

@@ -0,0 +1,14 @@
+declare type LegendProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    color?: string;
+    dark?: boolean;
+    data?: object;
+    id?: string;
+    prefixText?: string;
+    text: string;
+};
+declare const Legend: (props: LegendProps) => JSX.Element;
+export default Legend;

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type SlideType = {
+    alt?: string;
+    current?: number;
+    onClick: () => void;
+    onChange?: (index: number) => void;
+    onZoom: (zoom: boolean) => void;
+    zooming: boolean;
+    url: string;
+};
+export default function Slide({ alt, onClick, onZoom, url, zooming, }: SlideType): React.ReactElement;
+export {};

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type SlidesType = {
+    urls: Array<string>;
+    current: number;
+    onChange: (index: number) => void;
+    onClick: (index: number) => void;
+    setIndex?: (index: number) => void;
+};
+export default function Slides({ urls, current, onChange, setIndex, }: SlidesType): React.ReactElement;
+export {};

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type ThumbnailType = {
+    active?: boolean;
+    alt?: string;
+    onClick: () => void;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+    url: string;
+    width?: string;
+};
+export default function Thumbnail({ active, alt, width, url, onClick, buttonRef, }: ThumbnailType): React.ReactElement;
+export {};

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const indexWithinBounds: (current: number, min: number, max: number) => number;
+declare type ThumbnailsType = {
+    current: number;
+    onChange: (index: number) => void;
+    urls: string[];
+};
+export default function Thumbnails({ current, onChange, urls, }: ThumbnailsType): React.ReactElement;
+export {};

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare type CarouselType = {
+    initialPhoto?: string;
+    onClose?: () => void;
+    icon?: string;
+    currentIndex: number;
+    photos: {
+        url: string;
+        thumbnail: string;
+    }[];
+    onChange: (index: number) => void;
+    onClick?: (index: number) => void;
+    setIndex?: (index: number) => void;
+};
+export default function Carousel({ currentIndex, photos, onClick, onChange, setIndex, }: CarouselType): React.ReactElement;
+export {};

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { GlobalProps } from "../../utilities/globalProps";
+declare type LightboxHeaderProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactNode[] | React.ReactNode | string;
+    className?: string;
+    closeable?: boolean;
+    data?: {
+        [key: string]: string | number;
+    };
+    icon?: string;
+    id?: string;
+    onClickRight?: () => void;
+    onClose?: () => void;
+    text?: string;
+    navRight?: string;
+    title?: string;
+} & GlobalProps;
+declare const LightboxHeader: (props: LightboxHeaderProps) => React.ReactElement;
+export default LightboxHeader;

data/app/pb_kits/playbook/pb_lightbox/_lightbox.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+declare type LightboxType = {
+    aria?: {
+        [key: string]: string;
+    };
+    children: React.ReactNode[] | React.ReactNode | string;
+    className?: string;
+    currentPhotoIndex?: number;
+    data?: {
+        [key: string]: string | number;
+    };
+    description?: string | any;
+    id?: string;
+    photos: [];
+    initialPhoto?: number;
+    onChange?: (index: number) => {};
+    onClickRight?: () => void;
+    onClose?: () => void;
+    icon: string;
+    navRight?: string;
+    trigger?: string;
+    title?: string | any;
+};
+declare const Lightbox: {
+    (props: LightboxType): React.ReactNode;
+    Header: (props: {
+        aria?: {
+            [key: string]: string;
+        };
+        children?: React.ReactNode | React.ReactNode[];
+        className?: string;
+        closeable?: boolean;
+        data?: {
+            [key: string]: string | number;
+        };
+        icon?: string;
+        id?: string;
+        onClickRight?: () => void;
+        onClose?: () => void;
+        text?: string;
+        navRight?: string;
+        title?: string;
+    } & import("../utilities/globalProps").GlobalProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default Lightbox;

data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LightboxContext: React.Context<{}>;

data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.d.ts

@@ -0,0 +1,3 @@
+export declare const useKbdControls: (api: {
+    [key: string]: () => void;
+}) => string;

data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.d.ts

@@ -0,0 +1,6 @@
+declare type WindowSize = {
+    width: number;
+    height: number;
+};
+export declare const useWindowSize: () => WindowSize;
+export {};

data/app/pb_kits/playbook/pb_line_graph/_line_graph.d.ts

@@ -0,0 +1,35 @@
+declare type LineGraphProps = {
+    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;
+    };
+};
+declare const LineGraph: ({ aria, data, align, className, dark, gradient, type, id, legend, toggleLegendClick, layout, verticalAlign, x, y, axisTitle, xAxisCategories, yAxisMin, yAxisMax, chartData, pointStart, subTitle, title, height, colors, ...props }: LineGraphProps) => JSX.Element;
+export default LineGraph;

data/app/pb_kits/playbook/pb_list/_list.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+declare type ListProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    borderless?: boolean;
+    className?: string;
+    children: React.ReactNode[] | React.ReactNode;
+    dark?: boolean;
+    data?: object;
+    id?: string;
+    layout?: "" | "left" | "right";
+    ordered?: boolean;
+    role?: string;
+    tabIndex?: number;
+    text?: string;
+    size?: string;
+    variant?: string;
+    xpadding?: boolean;
+};
+declare const List: (props: ListProps) => JSX.Element;
+export default List;

data/app/pb_kits/playbook/pb_list/_list_item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type ListItemProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    data?: object;
+    id?: string;
+    tabIndex?: number;
+};
+declare const ListItem: (props: ListItemProps) => JSX.Element;
+export default ListItem;

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.d.ts

@@ -0,0 +1,13 @@
+declare type LoadingInlineProps = {
+    align?: "left" | "center" | "right";
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+};
+declare const LoadingInline: (props: LoadingInlineProps) => JSX.Element;
+export default LoadingInline;

data/app/pb_kits/playbook/pb_map/_map.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type MapProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactNode;
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    zoomBtns?: boolean;
+    flyTo?: boolean;
+    zoomInClick?: () => {};
+    zoomOutClick?: () => {};
+    flyToClick?: () => {};
+} & GlobalProps;
+declare const Map: {
+    (props: MapProps): JSX.Element;
+    Controls: ({ zoomBtns, zoomInClick, zoomOutClick, flyTo, flyToClick, children, }: {
+        zoomBtns?: boolean;
+        flyTo?: boolean;
+        zoomInClick?: () => {};
+        zoomOutClick?: () => {};
+        flyToClick?: () => {};
+        children?: React.ReactNode | React.ReactNode[];
+    }) => JSX.Element;
+};
+export default Map;

data/app/pb_kits/playbook/pb_map/_map_controls.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare type MapControlTypes = {
+    zoomBtns?: boolean;
+    flyTo?: boolean;
+    zoomInClick?: () => {};
+    zoomOutClick?: () => {};
+    flyToClick?: () => {};
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare const MapControls: ({ zoomBtns, zoomInClick, zoomOutClick, flyTo, flyToClick, children, }: MapControlTypes) => JSX.Element;
+export default MapControls;

data/app/pb_kits/playbook/pb_map/_map_custom_button.d.ts

@@ -0,0 +1,6 @@
+declare type MapCustomButtonTypes = {
+    onClick?: () => {};
+    icon?: string;
+};
+declare const MapCustomButton: ({ onClick, icon }: MapCustomButtonTypes) => JSX.Element;
+export default MapCustomButton;

data/app/pb_kits/playbook/pb_map/pbMapTheme.d.ts

@@ -0,0 +1,20 @@
+declare const mapTheme: {
+    marker: any;
+    maptiles: string;
+    flyToConfig: {
+        zoom: number;
+        bearing: number;
+        curve: number;
+        easing: (t: any) => any;
+        essential: boolean;
+    };
+    zoomConfig: {
+        duration: number;
+    };
+    mapConfig: {
+        style: string;
+        zoom: number;
+        attributionControl: boolean;
+    };
+};
+export default mapTheme;

data/app/pb_kits/playbook/pb_message/_message.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+declare type MessageProps = {
+    aria: {
+        [key: string]: string;
+    };
+    avatarName?: string;
+    avatarStatus?: "away" | "offline" | "online";
+    avatarUrl?: string;
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    data?: object;
+    id?: string;
+    label?: string;
+    message: string;
+    timestamp?: string;
+    timestampObject?: Date;
+    timezone?: string;
+    alignTimestamp?: string;
+};
+declare const Message: {
+    (props: MessageProps): JSX.Element;
+    Mention: (props: {
+        aria: {
+            [key: string]: string;
+        };
+        children?: React.ReactChild | React.ReactChild[];
+        className?: string;
+        data?: object;
+        id?: string;
+        variant: "user" | "self";
+    }) => JSX.Element;
+};
+export default Message;

data/app/pb_kits/playbook/pb_message/_message_mention.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type MessageMentionProps = {
+    aria: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    data?: object;
+    id?: string;
+    variant: 'user' | 'self';
+};
+declare const MessageMention: (props: MessageMentionProps) => JSX.Element;
+export default MessageMention;

data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md

@@ -0,0 +1,57 @@
+![message-default](https://github.com/powerhome/playbook/assets/92755007/a50c7439-a429-4e8a-b8d4-ef8323199745)
+
+```swift
+
+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)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md

@@ -0,0 +1,12 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Avatar** | `AnyView` | Sets avatar image | `nil` |  |
+| **Label** | `String` | Sets the name of the sender | `""` |  |
+| **Message** | `String` | Sets the message text | `nil` |  |
+| **Timestamp** | `Date` | Adds a date |  | `nil` |
+| **Timestamp Alignment** | `TimestampAlignment` | Changes the style of the timestamp | `.trailing` | `.leading` `.trailing` |
+| **Change TimeStamp On Hover** | `Bool` | Changes the timestamp hover functionality | `false` | `true` `false` |
+| **Vertical Padding** | `CGFloat` | Changes vertical padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Horizontal Padding** | `CGFloat` | Changes horizontal padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Timestamp Variant** | `PBTimestamp.Variant` | Changes the style of the Message | `.standard` | `.standard` `.hideUserElapsed` |

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

@@ -11,3 +11,7 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+
+  swift:
+   - message_default_swift: Default
+   - message_props_swift: ""