keystone_ui 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3461e5f2648165cab0fbea2244fe15dbf42c2bf1da5a96f5ebfdfe89b7a2278c
-  data.tar.gz: c39d95798511ddbe58a61144a98fca8b2070475c3850e83b7016a73627c439ce
+  metadata.gz: 794dd244d2cfac2f3389a4e4405e8e127c759fb310aac4c9e00b55c6c4501be7
+  data.tar.gz: 7ebebe2b82a82e423dd2ab440c5c804192355a9aab7f00ffffaf513f05c902de
 SHA512:
-  metadata.gz: 2a0eb208c6a668bf2d2e62ae1d5a996f04b4c8cae8b5f014287cc066a4840195b24756b7efe5a44ef1b3aa2cec367c32129361897f2aa8dbeff09ee786a8ba5f
-  data.tar.gz: 5d596e9a799b189775af38d413afc945fea87828d90517cd21930c80a6efa9a222faa32d8401c4d8bfe8f4d5bc03f32f1e4bb8dfb5f8691aa570e8322d4340bd
+  metadata.gz: e214dca626bc889d34fb68f322d0fd311a118b017e2ede2092d433df032c41163e2469ac67fe305b78164692cbaf3a73b25691c9cbc34686446f70d971767443
+  data.tar.gz: 811a7d3124b5d8b090239c38c0fd8b9dbfa74c225f92f1385d0f1ec0125a55d0b2234636a25b3d7d9010af37d23f91ba261e3d8154e2ef68ff5ff14e0041dfe3

data/MIT-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tyler Schneider
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -5,18 +5,16 @@
       <button type="button" class="<%= info_button_classes %>" data-action="click->stat-card-info#toggle" aria-label="Show metric details">
         <%= info_icon.html_safe %>
       </button>
+      <div class="<%= disclosure_classes %>" data-stat-card-info-target="panel">
+        <% if definition %><p><span class="font-medium text-gray-700 dark:text-gray-300">Captures:</span> <%= definition %></p><% end %>
+        <% if calculation %><p><span class="font-medium text-gray-700 dark:text-gray-300">Calc:</span> <%= calculation %></p><% end %>
+      </div>
     <% end %>
   </div>
   <p class="<%= value_classes %>">
-    <%= value %><% if suffix? %><span class="<%= suffix_classes %>"> <%= suffix %></span><% end %>
+    <% if link? %><a href="<%= href %>" class="<%= value_link_classes %>"><%= value %></a><% else %><%= value %><% end %><% if suffix? %><span class="<%= suffix_classes %>"> <%= suffix %></span><% end %>
   </p>
   <% if change? %>
     <p class="mt-1 text-sm font-medium <%= change_classes %>"><%= change_label %></p>
   <% end %>
-  <% if info? %>
-    <div class="<%= disclosure_classes %>" data-stat-card-info-target="panel">
-      <% if definition %><p><span class="font-medium text-gray-700 dark:text-gray-300">Captures:</span> <%= definition %></p><% end %>
-      <% if calculation %><p><span class="font-medium text-gray-700 dark:text-gray-300">Calc:</span> <%= calculation %></p><% end %>
-    </div>
-  <% end %>
 </div>

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

@@ -3,12 +3,13 @@
 module Keystone
   module Ui
     class StatCardComponent < ViewComponent::Base
-      CARD_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+      CARD_CLASSES = "relative rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
       LABEL_CLASSES = "text-sm font-medium text-gray-500 dark:text-gray-400"
       VALUE_BASE_CLASSES = "mt-1 text-3xl font-bold"
       SUFFIX_CLASSES = "text-lg text-gray-500 dark:text-gray-400"
-      DISCLOSURE_CLASSES = "hidden mt-4 space-y-1 border-t border-gray-200 pt-3 text-sm text-gray-600 dark:border-zinc-700 dark:text-gray-400"
-      INFO_BUTTON_CLASSES = "shrink-0 text-gray-400 transition hover:text-accent-600 dark:hover:text-accent-400"
+      DISCLOSURE_CLASSES = "hidden peer-hover:block peer-focus-visible:block absolute inset-x-0 top-full z-10 mt-2 space-y-1 rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-600 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 dark:text-gray-400"
+      VALUE_LINK_CLASSES = "hover:underline focus:outline-none focus-visible:underline"
+      INFO_BUTTON_CLASSES = "peer shrink-0 text-gray-400 transition hover:text-accent-600 dark:hover:text-accent-400"
 
       INFO_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
@@ -22,9 +23,9 @@ module Keystone
         info: "text-accent-600 dark:text-accent-400"
       }.freeze
 
-      attr_reader :label, :value, :suffix, :definition, :calculation, :change
+      attr_reader :label, :value, :suffix, :definition, :calculation, :change, :href
 
-      def initialize(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil)
+      def initialize(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil)
         @label = label
         @value = value
         @variant = variant
@@ -32,6 +33,7 @@ module Keystone
         @definition = definition
         @calculation = calculation
         @change = change
+        @href = href
       end
 
       def classes
@@ -62,6 +64,14 @@ module Keystone
         !@change.nil?
       end
 
+      def link?
+        !@href.nil?
+      end
+
+      def value_link_classes
+        VALUE_LINK_CLASSES
+      end
+
       def change_label
         formatted = "#{format("%.1f", @change.abs)}%"
         return formatted if @change.zero?

data/lib/keystone_ui/version.rb

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

data/the_local/agents/keystone_ui-develop.md

@@ -157,11 +157,14 @@ one raises at render time.
   close control.
 - `ui_progress(value:, max:, label: nil)` — a labeled progress bar. The percent
   is `value / max`, rounded and clamped at 100.
-- `ui_stat_card(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil)`
+- `ui_stat_card(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil)`
   — a single metric tile. `variant:` `:neutral` `:success` `:danger` `:warning`
   `:info` colors the value. `change:` is a signed number rendered as `▲ 4.2%` in
-  green when positive, `▼` in red when negative, plain when zero. Passing
-  `definition:` and/or `calculation:` adds an info button that reveals them.
+  green when positive, `▼` in red when negative, plain when zero. `href:` makes
+  the value a link to its drill-down screen; only the value is linked, never the
+  whole card. Passing `definition:` and/or `calculation:` adds an info button
+  whose details show in a panel floating below the card while the button is
+  hovered or focused, and tapping the button toggles it.
 - `ui_copy_button(text:, label: "Copy", success_message: "Copied!", error_message: "Failed!")`
   — copies `text:` to the clipboard.
 - `ui_code(language: nil, caption: nil)` — takes a block holding the code. The
@@ -242,7 +245,8 @@ one raises at render time.
 5. Fill the body with the leaf helpers from the Interface above. Reach for the
    most specific one that fits — `ui_form_field` over `ui_input`,
    `ui_data_table` over a hand-built `<table>`, `ui_stat_card` over a panel with
-   text in it.
+   text in it. To make a stat card clickable, pass `href:` — never wrap it in
+   `ui_card_link`, because a tap on the info button would then follow the link.
 
 6. For a table, decide how columns are declared. Use `{ key: "Label" }` hashes
    when every column is plain. Switch the whole set to `Keystone::Ui::Column`

data/the_local/interface.yml

@@ -105,6 +105,7 @@ sources:
   - app/components/keystone/ui/settings_link_component.rb
   - app/components/keystone/ui/show_page_component.rb
   - app/components/keystone/ui/stat_card_component.rb
+  - app/components/keystone/ui/stat_card_component.html.erb
   - app/components/keystone/ui/swipe_deck_component.rb
   - app/components/keystone/ui/tab_switcher_component.rb
   - app/components/keystone/ui/textarea_component.rb

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Tyler Schneider
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-31 00:00:00.000000000 Z
+date: 2026-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -37,6 +37,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- MIT-LICENSE
 - app/assets/javascripts/keystone_ui/accordion_controller.js
 - app/assets/javascripts/keystone_ui/auto_submit_controller.js
 - app/assets/javascripts/keystone_ui/chartjs.js