playbook_ui 16.1.0.pre.alpha.play274314102 → 16.1.0.pre.alpha.play276813969

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play274314102
+  version: 16.1.0.pre.alpha.play276813969
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-03 00:00:00.000000000 Z
+date: 2026-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -304,8 +304,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -741,9 +739,6 @@ 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
@@ -960,7 +955,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -2764,8 +2758,6 @@ 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
@@ -2776,26 +2768,37 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
 - 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
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
 - app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
 - app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
 - app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.ts
+- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/types.d.ts
@@ -3305,7 +3308,6 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -3376,9 +3378,6 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
@@ -3660,9 +3659,6 @@ 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
@@ -3881,12 +3877,12 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_pb_line_graph-DuJNCf7N.js
-- dist/chunks/_typeahead-Cx2lp7TD.js
+- dist/chunks/_pb_line_graph-BgKF_zz1.js
+- dist/chunks/_typeahead-C4YsbA48.js
 - dist/chunks/componentRegistry-DzmmLR2x.js
-- dist/chunks/globalProps-Bc-FVsRt.js
+- dist/chunks/globalProps-BhVYCqRf.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BwX82vim.js
+- dist/chunks/lib-DD34ZrWL.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-rails-react-bindings.js

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx

@@ -1,71 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import  Flex  from '../../pb_flex/_flex'
-import  Title  from '../../pb_title/_title'
-import  Body  from '../../pb_body/_body'
-
-
-const AdvancedTableColumnStylingBackgroundCustom = (props) => {
-  const columnDefinitions = [
-{
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex flexDirection="column">
-          <Title size={4}
-              text={value} 
-          />
-          <Body text="lorem ipsum" />
-          <Body text="lorem ipsum" />
-        </Flex>
-      ), 
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
-      },
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableColumnStylingBackgroundCustom

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

@@ -1,4 +0,0 @@
-`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
-
-See the code snippet below for more details.
-

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

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,17 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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_date_picker/docs/_date_picker_default.md

@@ -1 +0,0 @@
-`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

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

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-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_label.jsx

@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
-
-const RichTextEditorLabel = (props) => {
-  const [value, setValue] = useState(''),
-  handleOnChange = (html) => setValue(html)
-
-  return (
-    <div>
-      <RichTextEditor
-          TrixEditor={TrixEditor}
-          id="example"
-          label="Example Label"
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-      <br/>
-      <RichTextEditor
-          TrixEditor={TrixEditor}
-          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

@@ -1 +0,0 @@
-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_textarea/docs/_textarea_default.md

@@ -1 +0,0 @@
-Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("time_picker", props: {
-  id: "time-picker-required-indicator",
-  label: "Select Time",
-  required_indicator: true,
-}) %>
-

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import TimePicker from '../_time_picker'
-
-const TimePickerRequiredIndicator = (props) => (
-  <div>
-    <TimePicker
-        id="time-picker-required-indicator"
-        label="Select Time"
-        requiredIndicator
-        {...props}
-    />
-  </div>
-)
-
-export default TimePickerRequiredIndicator
-

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md

@@ -1,3 +0,0 @@
-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/_typeahead_required_indicator.html.erb

@@ -1,16 +0,0 @@
-<% 
-  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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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.