keystone_ui 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9007e4cf813a277f78f01bdf10df84d28856a5eaf1e7460c51e77db5d8b13143
-  data.tar.gz: a31771c5217f422c78000dc895be2314e9ecac0de206155f3d3a123b3da362af
+  metadata.gz: 01e2ba0387ee8dd44d772be3546d44dada399d754099e486b607a73056c85606
+  data.tar.gz: ea5acc7537974e4bd59f7415e267b0038148fecd0890dc0b91a86f1af9a3801d
 SHA512:
-  metadata.gz: d5649e25777890bf3bd01be1f42260c92038b66cef09c71f1b6e4655658f6d602102d0adcef0bd4b063edb837490818df7734c84b3f0e0198e2a859a83b2ea10
-  data.tar.gz: 52bce90d7e68c9ead4e459f71376c16257b235b1418ef92c156bd8d7fb1bd2b33a17cf7111bcb0412d19d79e6ad0626ce8d2aa72db8fe00988fbaae41705151d
+  metadata.gz: 1f7b432026de7ac8ededb44facb8488df5ded58f185b91b9981654c978d7a32ce567b43b5fe38359c036a1457092a633ca54e2b5a873654250aac36b99bd1a08
+  data.tar.gz: fb986e2fde289d1c0b969096a04a02be8664544fbe7046d93c358b8d054440da8eed66824e23a23644b02efb76e0d25c95647bf0b32d06582dd0a5b4a0fd5bb1

data/app/components/keystone/ui/checkbox_row_component.html.erb

@@ -0,0 +1,9 @@
+<label class="<%= row_classes %>">
+  <input type="checkbox" name="<%= name %>" value="<%= value %>" <%= "checked" if checked? %> class="<%= input_classes %>">
+  <span>
+    <span class="<%= label_classes %>"><%= label %></span>
+    <% if hint? %>
+      <span class="<%= hint_classes %>"><%= hint %></span>
+    <% end %>
+  </span>
+</label>

data/app/components/keystone/ui/checkbox_row_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CheckboxRowComponent < ViewComponent::Base
+      ROW_CLASSES = "flex items-start gap-3 py-3 cursor-pointer"
+      INPUT_CLASSES = "mt-0.5 size-4 shrink-0 rounded border-surface-300 text-accent-600 focus:ring-accent-500"
+      LABEL_CLASSES = "block text-sm font-medium text-surface-900"
+      HINT_CLASSES = "block mt-0.5 text-sm text-surface-500"
+
+      attr_reader :name, :value, :label, :hint
+
+      def initialize(name:, value:, label:, hint: nil, checked: false)
+        @name = name
+        @value = value
+        @label = label
+        @hint = hint
+        @checked = checked
+      end
+
+      def checked?
+        @checked
+      end
+
+      def hint?
+        !@hint.nil?
+      end
+
+      def row_classes
+        ROW_CLASSES
+      end
+
+      def input_classes
+        INPUT_CLASSES
+      end
+
+      def label_classes
+        LABEL_CLASSES
+      end
+
+      def hint_classes
+        HINT_CLASSES
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui_helper.rb

@@ -153,6 +153,10 @@ module KeystoneUiHelper
     render Keystone::Ui::RadioCardComponent.new(**args)
   end
 
+  def ui_checkbox_row(**args)
+    render Keystone::Ui::CheckboxRowComponent.new(**args)
+  end
+
   def ui_progress(**args)
     render Keystone::Ui::ProgressComponent.new(**args)
   end

data/lib/keystone_ui/safelist.rb

@@ -42,6 +42,7 @@ module Keystone
       Keystone::Ui::ShowPageComponent,
       Keystone::Ui::OptionCardComponent,
       Keystone::Ui::RadioCardComponent,
+      Keystone::Ui::CheckboxRowComponent,
       Keystone::Ui::ProgressComponent,
       Keystone::Ui::ColorPickerComponent,
       Keystone::Ui::MultiSelectComponent,

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end

data/the_local/agents/keystone_ui-develop.md

@@ -117,6 +117,11 @@ one raises at render time.
   hue/saturation panel and writes the hex into a hidden input named `name`.
 - `ui_radio_card(name:, value:, label:, hint: nil, checked: false)` — a
   selectable card backed by a real radio input; selection styling is pure CSS.
+- `ui_checkbox_row(name:, value:, label:, hint: nil, checked: false)` — a real
+  checkbox with its label and optional hint inside one `<label>`, so a tap
+  anywhere on the row toggles the box. A checked row submits `value` under
+  `name`; give several rows the same array name, e.g. `"shown[]"`, to submit the
+  checked values as a list. An unchecked row submits nothing. No JavaScript.
 - `ui_option_card(name:, value:, selected: false, input_data: {}, label_data: {})`
   — takes a block. A radio whose visible body is whatever the block renders.
   `input_data:`/`label_data:` become `data-*` attributes on the input and label.

data/the_local/interface.yml

@@ -41,6 +41,7 @@ develop:
   - ui_bottom_nav_item
   - ui_option_card
   - ui_radio_card
+  - ui_checkbox_row
   - ui_progress
   - ui_settings_link
   - ui_color_picker
@@ -68,6 +69,8 @@ sources:
   - app/components/keystone/ui/card_component.rb
   - app/components/keystone/ui/card_link_component.rb
   - app/components/keystone/ui/chart_card_component.rb
+  - app/components/keystone/ui/checkbox_row_component.rb
+  - app/components/keystone/ui/checkbox_row_component.html.erb
   - app/components/keystone/ui/code_component.rb
   - app/components/keystone/ui/color_picker_component.rb
   - app/components/keystone/ui/column_picker_component.rb

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -90,6 +90,8 @@ files:
 - app/components/keystone/ui/card_link_component.rb
 - app/components/keystone/ui/chart_card_component.html.erb
 - app/components/keystone/ui/chart_card_component.rb
+- app/components/keystone/ui/checkbox_row_component.html.erb
+- app/components/keystone/ui/checkbox_row_component.rb
 - app/components/keystone/ui/code_component.html.erb
 - app/components/keystone/ui/code_component.rb
 - app/components/keystone/ui/color_picker_component.html.erb