playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

data/lib/playbook/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
-require "webpacker/react"
 require "view_component"
 
 module Playbook

data/lib/playbook/forms/builder/form_field_builder.rb

@@ -15,7 +15,7 @@ module Playbook
 
         def initialize(method_name, kit_name:)
           define_method method_name do |name, props: {}, **options, &block|
-            props[:label] = @template.label(@object_name, name) if props[:label] == true
+            props   = props.dup
             options = Hash(options)
 
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
@@ -48,6 +48,14 @@ module Playbook
 
             input = super(name, **options, &block)
 
+            input_id = input[/\bid="([^"]+)"/, 1] || "#{@object_name}_#{name}"
+
+            if props[:label] == true
+              props[:label] = @template.label(@object_name, name)
+            elsif props[:label].is_a?(String)
+              props[:label] = @template.label_tag(input_id, props[:label])
+            end
+
             @template.pb_rails(kit_name, props: props) do
               input
             end

data/lib/playbook/kit_base.rb

@@ -122,7 +122,7 @@ module Playbook
       html_options.each do |key, value|
         if key == :style && value.is_a?(Hash)
           # Convert style hash to CSS string
-          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
+          merged[:style] = value.map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
         else
           merged[key] = value
         end
@@ -136,6 +136,27 @@ module Playbook
       merged.deep_merge(data_attributes)
     end
 
+    # Custom react_component helper to replace Webpacker React
+    # This will render a div with data attributes for the component name and props
+    # The mounting script will look for these divs and mount the appropriate React components
+    # Sister def in app/helpers/react_helper in playbook-website. Any changes here should be reflected there.
+    def react_component(component_name, props = {}, html_options = {})
+      # Convert props to JSON for the data attribute
+      props_json = props.to_json
+
+      # Build the HTML attributes
+      html_attrs = {
+        "data-pb-react-component" => component_name,
+        "data-pb-react-props" => props_json,
+      }
+
+      # Merge with any additional HTML options
+      html_attrs.merge!(html_options)
+
+      # Return the div element
+      content_tag(:div, "", html_attrs)
+    end
+
     def global_inline_props
       {
         height: height,
@@ -172,7 +193,7 @@ module Playbook
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if inline_validator(key, value) }.compact
+      styles = global_inline_props.map { |key, value| "#{key.to_s.tr('_', '-')}: #{value}" if inline_validator(key, value) }.compact
       styles.join("; ").presence
     end
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.0.0"
-  VERSION = "15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419"
+  VERSION = "15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419
+  version: 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-12 00:00:00.000000000 Z
+date: 2025-09-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -53,20 +53,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-- !ruby/object:Gem::Dependency
-  name: react-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 2.6.1
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -82,19 +68,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.83.0
 - !ruby/object:Gem::Dependency
-  name: webpacker-react
+  name: vite_rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.2
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.2
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: brakeman
   requirement: !ruby/object:Gem::Requirement
@@ -889,6 +875,7 @@ files:
 - app/pb_kits/playbook/pb_contact/contact.test.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
+- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -2277,6 +2264,9 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_description.md
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx
+- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md
@@ -2415,6 +2405,71 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
+- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js
+- app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts
+- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb
+- app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
+- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
+- app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/_person.tsx
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2705,6 +2760,7 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
+- app/pb_kits/playbook/pb_section_separator/section_separator.test.js
 - app/pb_kits/playbook/pb_select/_select.scss
 - app/pb_kits/playbook/pb_select/_select.tsx
 - app/pb_kits/playbook/pb_select/docs/_description.md
@@ -3252,25 +3308,47 @@ files:
 - app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
-- app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
@@ -3624,12 +3702,13 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-B-n_nsLR.js
-- dist/chunks/_typeahead-CS9PvM1x.js
-- dist/chunks/_weekday_stacked-DaFBilv5.js
+- dist/chunks/_line_graph-CspDMr9b.js
+- dist/chunks/_typeahead-B_wpgm_J.js
+- dist/chunks/_weekday_stacked-CXzARuTy.js
+- dist/chunks/componentRegistry-DzmmLR2x.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BTs5acfO.js
-- dist/chunks/pb_form_validation-CKkaQFX3.js
+- dist/chunks/lib-QZuu1ltS.js
+- dist/chunks/pb_form_validation-W63gNcnu.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md

@@ -1 +0,0 @@
-Use these only to display status updates in areas that has a lot of data.

data/dist/chunks/pb_form_validation-CKkaQFX3.js

@@ -1 +0,0 @@
-import{P as PbEnhancedElement,d as debounce}from"./lib-BTs5acfO.js";const KIT_SELECTOR='[class^="pb_"][class*="_kit"]';const ERROR_MESSAGE_SELECTOR=".pb_body_kit_negative";const FORM_SELECTOR='form[data-pb-form-validation="true"]';const REQUIRED_FIELDS_SELECTOR="input[required],textarea[required],select[required]";const FIELD_EVENTS=["change","valid","invalid"];class PbFormValidation extends PbEnhancedElement{static get selector(){return FORM_SELECTOR}connect(){this.formValidationFields.forEach((field=>{FIELD_EVENTS.forEach((e=>{field.addEventListener(e,debounce((event=>{this.validateFormField(event)}),250),false)}))}))}validateFormField(event){event.preventDefault();const{target:target}=event;target.setCustomValidity("");const isValid=event.target.validity.valid;if(isValid){this.clearError(target)}else{this.showValidationMessage(target)}}showValidationMessage(target){const{parentElement:parentElement}=target;this.clearError(target);parentElement.closest(KIT_SELECTOR).classList.add("error");const errorMessageContainer=this.errorMessageContainer;if(target.dataset.message)target.setCustomValidity(target.dataset.message);errorMessageContainer.innerHTML=target.validationMessage;parentElement.appendChild(errorMessageContainer)}clearError(target){const{parentElement:parentElement}=target;parentElement.closest(KIT_SELECTOR).classList.remove("error");const errorMessageContainer=parentElement.querySelector(ERROR_MESSAGE_SELECTOR);if(errorMessageContainer)errorMessageContainer.remove()}get errorMessageContainer(){const errorContainer=document.createElement("div");const kitClassName=ERROR_MESSAGE_SELECTOR.replace(/\./,"");errorContainer.classList.add(kitClassName);return errorContainer}get formValidationFields(){return this._formValidationFields=this._formValidationFields||this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)}}window.PbFormValidation=PbFormValidation;