playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exporttypes1609

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" | "pointer" | "alias" | "auto" | "cell" | "copy" | "crosshair" | "default" | "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" | "initial" | "auto" | "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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    margin?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 1 | 2 | 3 | "none" | 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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    padding?: "none" | "inherit" | "initial" | "auto" | 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?: 1 | 2 | 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" | "pointer" | "alias" | "auto" | "cell" | "copy" | "crosshair" | "default" | "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" | "initial" | "auto" | "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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    margin?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 1 | 2 | 3 | "none" | 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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    padding?: "none" | "inherit" | "initial" | "auto" | 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]: 1 | 2 | 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" | "pointer" | "alias" | "auto" | "cell" | "copy" | "crosshair" | "default" | "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" | "initial" | "auto" | "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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    margin?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 1 | 2 | 3 | "none" | 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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    padding?: "none" | "inherit" | "initial" | "auto" | 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?: 1 | 2 | 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" | "pointer" | "alias" | "auto" | "cell" | "copy" | "crosshair" | "default" | "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" | "initial" | "auto" | "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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    marginY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    margin?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 1 | 2 | 3 | "none" | 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" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingLeft?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingTop?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingBottom?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingX?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    paddingY?: "none" | "inherit" | "initial" | "auto" | import("../types").Sizes;
+    padding?: "none" | "inherit" | "initial" | "auto" | 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]: 1 | 2 | 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: ""