playbook_ui 14.15.0.pre.alpha.PBNTR902multilevelselecthiddeninputbug6580 → 14.15.0.pre.alpha.PLAY1871speedupvitebuildwatch6643

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorDashed = (props) => {
     return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorText = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import SelectableCard from '../../pb_selectable_card/_selectable_card'
+import Title from '../../pb_title/_title'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from 'playbook-ui'
+import SelectableList from '../../pb_selectable_list/_selectable_list'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from 'playbook-ui'
+import SelectableList from '../../pb_selectable_list/_selectable_list'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Flex, SkeletonLoading } from "playbook-ui"
 
+import Flex from '../../pb_flex/_flex'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingBorderRadius = (props) => (
   <Flex justify="evenly">

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
 
+import Card from '../../pb_card/_card'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,5 +1,12 @@
 import React, { useState } from 'react';
-import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Card from '../../pb_card/_card'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
 
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Card from '../../pb_card/_card'
 
 const SkeletonLoadingHeightWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingLayout = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Flex from '../../pb_flex/_flex'
+import User from '../../pb_user/_user'
 
 const SkeletonLoadingUser = (props) => {
   const [isLoading, setIsLoading] = useState(true)

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeUnitTwo = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Table, Icon } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
 
 const TableWithClickableRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Icon, Body, Card } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
 
 const TableWithCollapsible = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Card, Icon, Body } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
+
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Background, Icon } from 'playbook-ui'
+
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Background from '../../pb_background/_background'
 
 const TableWithCollapsibleWithNestedRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import {Pill, Background, Table, Icon} from "playbook-ui"
+
+import Pill from '../../pb_pill/_pill'
+import Background from '../../pb_background/_background'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
 
 const TableWithCollapsibleWithNestedTable = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Button from '../../pb_button/_button'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -17,7 +17,7 @@ const formatCurrencyDefaultValue = (value: string): string => {
 
     // Parse the numeric value as a float to handle decimals
     const dollars = parseFloat(numericValue)
-    if (isNaN(dollars) || dollars === 0) return ''
+    if (isNaN(dollars)) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,10 +30,9 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue) return ''
+    if (!numericValue || numericValue === "00") return ''
 
     const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
-    if (dollars === 0) return ''
 
     return new Intl.NumberFormat('en-US', {
         style: 'currency',

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from 'playbook-ui'
+import Textarea from '../../pb_textarea/_textarea'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TimeRangeInline } from 'playbook-ui'
+import TimeRangeInline from '../../pb_time_range_inline/_time_range_inline'
 
 const TimeRangeInlineDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Caption, Timestamp, Title } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Timestamp from '../../pb_timestamp/_timestamp'
+import Title from '../../pb_title/_title'
 
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Button, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Body from '../../pb_body/_body'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

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

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
+  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect} from 'react'
+import React, { useState, useEffect, forwardRef} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -49,6 +49,7 @@ type TypeaheadProps = {
   options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
@@ -71,8 +72,7 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
@@ -83,9 +83,11 @@ const Typeahead = ({
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -156,6 +158,15 @@ const Typeahead = ({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+    if (onChange) {
+      const isReactHookForm = onChange.toString().includes("target")
+      if (isReactHookForm) {
+        onChange({ target: { name, value: _data } })
+      } else {
+        onChange(_data)
+      }
+    }
+    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -199,10 +210,11 @@ const Typeahead = ({
       />
     </div>
   )
-}
+})
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
+Typeahead.displayName = 'Typeahead'
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -2,9 +2,7 @@
 
 import React, { useState } from 'react'
 
-import {
-  Button,
-} from 'playbook-ui'
+import Button from '../../pb_button/_button'
 
 import Typeahead from '../_typeahead'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },