playbook_ui_docs 16.1.0.pre.alpha.play277814027 → 16.1.0.pre.alpha.play279914268

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43f7d11b6833e9d85b5d4a595f5217ea6d98de29164345f41e2fbdd768851a82
-  data.tar.gz: 5a1d93a5ddb391158a1552eeb5d736d7e305d381624eed5201ee8449e11fa4a5
+  metadata.gz: 1c3736a232ae892c28aba8e55b4c79b81586c24c01ab54ebaaa55b48c0577560
+  data.tar.gz: eb6bdbdc97f6bdceb335d332577b1a1c22b92359e9bbdfe4464efd5baf0db605
 SHA512:
-  metadata.gz: 455ed90c00a6ca16af00f7ad78ce9265cf1d5014c84bc737a37b10189d2cd3b554938d78ba0cceec469c23db3c07a1f94af725369fc65bf773e6dfba49dd728b
-  data.tar.gz: 7083d22a67bc730c855ee8fbfa8bb93cded87249da657b57869154d3f9d52bf2fedbc9436906bc0f679a66d4639be4a4444fe6e6dbd68095986ac2f0a4f1fefe
+  metadata.gz: 6c1ace983f142b7e52638434a2d02abbb4744eef2ddd3d360db7af110c6750737287377d2f5fed0cb9fa136a9e6535c283fd479a32eb11713802aeb852088401
+  data.tar.gz: c885fa4dbedecbc66518b6f20a67212d289c58a74d10f467f2afecbf3d66d9130467ccc340e5ed58578656769e856694f25a8c102e2889c5f48183bb67d59a19

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

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

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,10 +1,13 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
-
 %>
 
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
+<%= pb_rails("dropdown", props: {
+  id: "select_a_country",
+  label: "Select a Country",
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -25,6 +25,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element. 
+
+Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -1,14 +1,16 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -65,7 +65,7 @@
 }] %>
 
 <%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
+  id: "select_a_department",
+  label: "Select a Department",
+  tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input. 
+
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb

@@ -0,0 +1,24 @@
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const CollapsibleNavDisabledItem = (props) => {
+  return (
+    <Nav 
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          collapsed={false}
+          collapsible
+          disabled
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            disabled
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default  CollapsibleNavDisabledItem

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

@@ -14,6 +14,7 @@ examples:
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -42,6 +43,7 @@ examples:
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -62,9 +64,3 @@ examples:
   - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
   - nav_horizontal_bold_swift: Horizontal Bold
   - nav_props_swift: ""
-
-
-
-  
-
-  

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -22,4 +22,5 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedLabel = (props) => {
+
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    if (!editor || !editorNoLabel) return null
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx

@@ -22,6 +22,7 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
+          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorLabel = (props) => {
+  const [value, setValue] = useState(''),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          id="example"
+          label="Example Label"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+      <br/>
+      <RichTextEditor
+          label="Example Label No ID"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx

@@ -8,6 +8,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator

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

@@ -32,6 +32,8 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_label: Label
+  - rich_text_editor_advanced_label: Advanced (Label)
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
+export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
+export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb

@@ -0,0 +1,16 @@
+<% 
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-required-indicator",
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    required_indicator: true,
+}) %>

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

@@ -0,0 +1,23 @@
+import React from "react"
+import Typeahead from "../../pb_typeahead/_typeahead"
+
+const options = [
+  {label: "Orange", value: "#FFA500"},
+  {label: "Red", value: "#FF0000"},
+  {label: "Green", value: "#00FF00"},
+  {label: "Blue", value: "#0000FF"},
+]
+
+const TypeaheadRequiredIndicator = (props) => {
+  return (
+    <Typeahead
+        id="typeahead_required_indicator"
+        label="Colors"
+        options={options}
+        requiredIndicator
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadRequiredIndicator

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

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -19,6 +19,7 @@ examples:
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
+    - typeahead_required_indicator: Required Indicator
 
   react:
     - typeahead_default: Default
@@ -42,3 +43,4 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
+    - typeahead_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -1,21 +1,22 @@
-export { default as TypeaheadDefault } from './_typeahead_default.jsx'
-export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
-export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
-export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
-export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
-export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options.jsx'
-export { default as TypeaheadInline } from './_typeahead_inline.jsx'
-export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
-export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
-export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
-export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
-export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
-export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
-export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
-export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
-export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
-export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
-export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
+export {default as TypeaheadDefault} from "./_typeahead_default.jsx"
+export {default as TypeaheadWithHighlight} from "./_typeahead_with_highlight.jsx"
+export {default as TypeaheadWithPills} from "./_typeahead_with_pills.jsx"
+export {default as TypeaheadWithPillsAsync} from "./_typeahead_with_pills_async.jsx"
+export {default as TypeaheadWithPillsAsyncUsers} from "./_typeahead_with_pills_async_users.jsx"
+export {default as TypeaheadWithPillsAsyncCustomOptions} from "./_typeahead_with_pills_async_custom_options.jsx"
+export {default as TypeaheadInline} from "./_typeahead_inline.jsx"
+export {default as TypeaheadMultiKit} from "./_typeahead_multi_kit.jsx"
+export {default as TypeaheadCreateable} from "./_typeahead_createable.jsx"
+export {default as TypeaheadAsyncCreateable} from "./_typeahead_async_createable.jsx"
+export {default as TypeaheadErrorState} from "./_typeahead_error_state.jsx"
+export {default as TypeaheadCustomMenuList} from "./_typeahead_custom_menu_list.jsx"
+export {default as TypeaheadMarginBottom} from "./_typeahead_margin_bottom.jsx"
+export {default as TypeaheadWithPillsColor} from "./_typeahead_with_pills_color.jsx"
+export {default as TypeaheadTruncatedText} from "./_typeahead_truncated_text.jsx"
+export {default as TypeaheadReactHook} from "./_typeahead_react_hook.jsx"
+export {default as TypeaheadDisabled} from "./_typeahead_disabled.jsx"
+export {default as TypeaheadPreserveInput} from "./_typeahead_preserve_input.jsx"
+export {default as TypeaheadDefaultValue} from "./_typeahead_default_value.jsx"
+export {default as TypeaheadCustomOptions} from "./_typeahead_custom_options.jsx"
+export {default as TypeaheadInputDisplay} from "./_typeahead_input_display.jsx"
+export {default as TypeaheadRequiredIndicator} from "./_typeahead_required_indicator.jsx"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play277814027
+  version: 16.1.0.pre.alpha.play279914268
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-30 00:00:00.000000000 Z
+date: 2026-02-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -421,6 +421,9 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -1431,6 +1434,7 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
@@ -1506,6 +1510,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.html.erb
@@ -1932,6 +1938,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
@@ -1950,6 +1958,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
@@ -2613,6 +2623,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md