playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,6 +1,7 @@
 @import "../../tokens/opacity";
 
 $transition-speed: 0.2s;
+$border_hover_color_dark: lighten($border_dark, 5%);
 
 [class^=pb_table] {
   &.table-sm,
@@ -15,9 +16,9 @@ $transition-speed: 0.2s;
           td {
             border-top-color: transparent;
             border-top-width: 0;
-            transition: all $transition-speed ease; 
+            transition: all $transition-speed ease;
           }
-          @media (hover:hover) { 
+          @media (hover:hover) {
             td {
               position: relative;
               &:after {
@@ -69,6 +70,29 @@ $transition-speed: 0.2s;
           }
         }
       }
+
+      &.dark  {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                box-shadow: 0 2px 10px 0 $shadow_dark;
+                td {
+                  border-top-width: 0;
+                  border-top-color: transparent;
+                  border-color: $border_hover_color_dark !important;
+                  &:after {
+                    transition: background-color $transition-speed ease, height $transition-speed ease;
+                    background-color: $border_hover_color_dark !important;
+                    height: 1px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,6 +1,6 @@
 @import "../../tokens/screen_sizes";
 
-$table-dark-card-bg: $bg_dark;
+$table-dark-card-bg: $card_dark;
 
 [class^=pb_table] {
   &.table-sm,
@@ -24,7 +24,6 @@ $table-dark-card-bg: $bg_dark;
 
           td {
             border-color: $border_dark !important;
-            border-bottom-width: 0 !important;
             color: $white;
 
             &:before {
@@ -39,21 +38,6 @@ $table-dark-card-bg: $bg_dark;
         }
       }
 
-      &:not(.no-hover) {
-        tbody {
-          tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
-              }
-            }
-          }
-        }
-      }
-
       &.table-card {
         background: $table-dark-card-bg !important;
       }

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,15 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each_with_index do |item, index| %>
+          <% object.sort_items.each do |sort_item| %>
+            <% item = active_or_first_item(sort_items_for(sort_item)) %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: item[:link],
+              link: next_link(sort_item: sort_item),
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+              classname: "header_nav_item"
             }) %>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,20 +32,43 @@ module Playbook
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link
-        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+      def next_link(sort_item: "")
+        sort_menu_for = if sort_item.blank?
+                          sort_menu
+                        else
+                          sort_items_for(sort_item)
+                        end
+
+        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu.each_with_index do |item, index|
+        sort_menu_for.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu.length
-            link = sort_menu[next_index][:link]
+            next_index = (index + 1) % sort_menu_for.length
+            link = sort_menu_for[next_index][:link]
           end
         end
         link
       end
 
+      def sort_items
+        sort_menu.map { |hash| hash[:item] }.uniq
+      end
+
+      def sort_items_for(sort_item)
+        sort_menu.find_all { |hash| hash[:item] == sort_item }
+      end
+
+      def active_or_first_item(items)
+        active_item = items.find { |hash| hash[:active] == true }
+        if active_item.present?
+          active_item
+        else
+          items[0]
+        end
+      end
+
       def sorting_style?
         sort_menu != [{}]
       end

data/app/pb_kits/playbook/pb_text_input/_text_input.d.ts

@@ -0,0 +1,383 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<(Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    inline?: boolean;
+    name: string;
+    label: string;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    required?: boolean;
+    type: string;
+    value: string | number;
+    children: Node;
+    addOn?: {
+        icon?: string;
+        alignment?: "left" | "right";
+        border?: boolean;
+    };
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & {
+    display?: import("../types").DisplayType;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    zIndex?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    inline?: boolean;
+    name: string;
+    label: string;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    required?: boolean;
+    type: string;
+    value: string | number;
+    children: Node;
+    addOn?: {
+        icon?: string;
+        alignment?: "left" | "right";
+        border?: boolean;
+    };
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & {
+    display?: import("../types").DisplayType;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    [key: string]: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    inline?: boolean;
+    name: string;
+    label: string;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    required?: boolean;
+    type: string;
+    value: string | number;
+    children: Node;
+    addOn?: {
+        icon?: string;
+        alignment?: "left" | "right";
+        border?: boolean;
+    };
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    zIndex?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    inline?: boolean;
+    name: string;
+    label: string;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    required?: boolean;
+    type: string;
+    value: string | number;
+    children: Node;
+    addOn?: {
+        icon?: string;
+        alignment?: "left" | "right";
+        border?: boolean;
+    };
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    [key: string]: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number>) & React.RefAttributes<HTMLInputElement>>;
+export default _default;

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md

@@ -0,0 +1,35 @@
+![text-input-add-on](https://github.com/powerhome/playbook/assets/92755007/65a28e6a-9e65-4ca1-af8d-91dae6eac4f5)
+
+```swift
+
+PBTextInput(
+  "ADD ON WITH DEFAULTS",
+  text: $textAddOn,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnRight,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnRightNoBorder,
+  style: .rightIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnLeft,
+  style: .leftIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnLeftNoBorder,
+  style: .leftIcon(.user, divider: true)
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md

@@ -0,0 +1,29 @@
+![text-input-default](https://github.com/powerhome/playbook/assets/92755007/625a246e-9d5c-42ea-8c6e-7afcf0984c9a)
+
+
+```swift
+
+@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
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md

@@ -0,0 +1,13 @@
+![text-input-disabled](https://github.com/powerhome/playbook/assets/92755007/0e08256e-dd76-4528-b748-826f38bbe6a0)
+
+
+```swift
+
+PBTextInput(
+  "Last name",
+  text: $textDisabled,
+  placeholder: "Enter last name",
+  style: .disabled
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md

@@ -0,0 +1,24 @@
+![text-input-error](https://github.com/powerhome/playbook/assets/92755007/7c664f75-1d7a-4a94-bc59-6f845a68ce19)
+
+
+```swift
+
+@State private var textError: String = ""
+@State private var textConfirmError: String = ""
+
+PBTextInput(
+  "Email address",
+  text: $textError,
+  placeholder: "Enter email address",
+  error: (true, "Insert a valid email"),
+  style: .leftIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "Confirm email address",
+  text: $textConfirmError,
+  placeholder: "Confirm email address",
+  style: .leftIcon(.user, divider: true)
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md

@@ -0,0 +1,13 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Adds a title | `nil` |  |
+| **placeholder** | `String` | Adds placeholder text | `""` |  |
+| **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` |  |
+| **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
+| **onChange** | `Bool` | Adds an event handler | `nil` |  |
+| **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` |  |
+| **text** | `String` | Sets the Text Input's text value |  |  |
+| **selected** | `Bool` | Changes the style of the Text Input |  | `true` `false` |
+| **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
+| **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |

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

@@ -16,3 +16,10 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+
+  swift:
+    - text_input_default_swift: Default
+    - text_input_error_swift: With Error
+    - text_input_disabled_swift: Disabled
+    - text_input_add_on_swift: Add On
+    - text_input_props_swift: ""