keystone_ui 0.6.0

data/app/assets/tailwind/keystone_ui_engine/nav.css

@@ -0,0 +1,175 @@
+/* Bottom navigation bar */
+.bottom-nav {
+  background: var(--base-bg-low);
+  border-top: 1px solid var(--base-border-tertiary);
+  bottom: 0;
+  display: flex;
+  justify-content: space-around;
+  left: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  position: fixed;
+  right: 0;
+  z-index: 40;
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: inherit;
+  }
+}
+
+.bottom-nav-item {
+  align-items: center;
+  color: var(--base-text-tertiary);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  justify-content: center;
+  min-height: 56px;
+  padding: 8px 4px;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: var(--base-text-secondary);
+  }
+
+  &.active {
+    color: var(--text-primary);
+  }
+
+  svg {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.bottom-nav-label {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+/* Nav dropdown for desktop area navigation */
+.nav-dropdown {
+  position: relative;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    width: auto;
+  }
+}
+
+.nav-dropdown-trigger {
+  align-items: center;
+  color: var(--base-text);
+  display: flex;
+  font-size: 14px;
+  gap: 4px;
+  justify-content: space-between;
+  padding: 12px 16px;
+  text-wrap: nowrap;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    padding: 8px 4px;
+    width: auto;
+  }
+
+  &:hover {
+    color: var(--base-text-secondary);
+  }
+
+  &.active {
+    color: var(--text-primary);
+    font-weight: 600;
+
+    @media (min-width: 1024px) {
+      box-shadow: inset 0 -4px 0 0 var(--border-primary);
+    }
+  }
+}
+
+.nav-dropdown-caret {
+  height: 16px;
+  width: 16px;
+  transition: transform 0.2s ease;
+}
+
+.nav-dropdown:has(.nav-dropdown-menu:not(.hidden)) .nav-dropdown-caret {
+  transform: rotate(180deg);
+}
+
+.nav-dropdown-menu {
+  background: var(--base-bg-base);
+  position: relative;
+  width: 100%;
+  z-index: 50;
+
+  @media (min-width: 1024px) {
+    background: var(--base-bg-low);
+    border: 1px solid var(--base-border-tertiary);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    min-width: 200px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li a,
+  & > a {
+    color: var(--base-text);
+    display: block;
+    font-size: 14px;
+    padding: 12px 16px 12px 32px;
+    text-decoration: none;
+    white-space: nowrap;
+
+    @media (min-width: 1024px) {
+      padding: 8px 16px;
+    }
+
+    &:hover {
+      background: var(--base-bg-hover);
+      color: var(--base-text-secondary);
+    }
+
+    &.active {
+      background: var(--base-bg-hover);
+      color: var(--text-primary);
+      font-weight: 600;
+    }
+  }
+}
+
+/* Add padding to main content for bottom nav on mobile */
+@media (max-width: 1023px) {
+  main {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  }
+
+  .hotwire-native .bottom-nav {
+    display: none;
+  }
+
+  .hotwire-native main {
+    padding-bottom: 0;
+  }
+}

data/app/assets/tailwind/keystone_ui_engine/theme.css

@@ -0,0 +1,32 @@
+/* Keystone UI theme — defines accent and surface color tokens as CSS custom properties.
+   Apps override these variables to customize the color palette. */
+
+@theme {
+  /* Accent — defaults to blue */
+  --color-accent-50: #eff6ff;
+  --color-accent-100: #dbeafe;
+  --color-accent-200: #bfdbfe;
+  --color-accent-300: #93c5fd;
+  --color-accent-400: #60a5fa;
+  --color-accent-500: #3b82f6;
+  --color-accent-600: #2563eb;
+  --color-accent-700: #1d4ed8;
+  --color-accent-800: #1e40af;
+  --color-accent-900: #1e3a8a;
+
+  /* Surface — defaults to zinc */
+  --color-surface-50: #fafafa;
+  --color-surface-100: #f4f4f5;
+  --color-surface-200: #e4e4e7;
+  --color-surface-300: #d4d4d8;
+  --color-surface-400: #a1a1aa;
+  --color-surface-500: #71717a;
+  --color-surface-600: #52525b;
+  --color-surface-700: #3f3f46;
+  --color-surface-800: #27272a;
+  --color-surface-900: #18181b;
+  --color-surface-950: #09090b;
+
+  /* Accent — darkest shade */
+  --color-accent-950: #172554;
+}

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

@@ -0,0 +1,19 @@
+<div class="<%= classes %>" data-controller="accordion">
+  <% items.each_with_index do |item, index| %>
+    <div class="<%= item_classes %>">
+      <button
+        type="button"
+        class="<%= button_classes %>"
+        data-action="click->accordion#toggle"
+        data-index="<%= index %>">
+        <span class="pr-4"><%= item[:question] %></span>
+        <span class="<%= icon_classes %>" data-accordion-target="icon" data-index="<%= index %>">
+          <%= caret_icon.html_safe %>
+        </span>
+      </button>
+      <div class="<%= answer_classes %>" data-accordion-target="answer" data-index="<%= index %>">
+        <p><%= item[:answer] %></p>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class AccordionComponent < ViewComponent::Base
+      BASE_CLASSES = "flex flex-col gap-4"
+      ITEM_LAYOUT_CLASSES = "rounded-xl border"
+      BUTTON_LAYOUT_CLASSES = "flex w-full items-center justify-between px-6 py-4 text-left font-semibold transition"
+      ANSWER_LAYOUT_CLASSES = "hidden px-6 pb-4 text-sm"
+      ICON_LAYOUT_CLASSES = "shrink-0 transition-transform"
+
+      CARET_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="M19 9l-7 7-7-7" /></svg>
+      SVG
+
+      attr_reader :items
+
+      def initialize(items: [])
+        @items = items
+      end
+
+      def classes
+        BASE_CLASSES
+      end
+
+      def item_classes
+        "#{ITEM_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700"
+      end
+
+      def button_classes
+        "#{BUTTON_LAYOUT_CLASSES} text-surface-900 dark:text-white hover:text-accent-600 dark:hover:text-accent-400"
+      end
+
+      def answer_classes
+        "#{ANSWER_LAYOUT_CLASSES} text-surface-600 dark:text-surface-400"
+      end
+
+      def icon_classes
+        "#{ICON_LAYOUT_CLASSES} text-surface-400"
+      end
+
+      def caret_icon
+        CARET_ICON
+      end
+
+      def wrapper_data
+        { controller: "accordion" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<div class="<%= classes %>" role="alert" <%= wrapper_data.map { |k, v| %(data-#{k}="#{v}") }.join(" ") %>>
+  <div class="<%= OUTER_CLASSES %>">
+    <div class="<%= INNER_CLASSES %>">
+      <% if title? %>
+        <p class="<%= TITLE_CLASSES %>"><%= title_text %></p>
+      <% end %>
+      <p class="<%= title? ? MESSAGE_WITH_TITLE_CLASSES : MESSAGE_CLASSES %>"><%= message_text %></p>
+    </div>
+    <% if dismissible? %>
+      <button type="button" class="<%= DISMISS_CLASSES %>" data-action="click->dismiss#close" aria-label="Dismiss">
+        &times;
+      </button>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class AlertComponent < ViewComponent::Base
+      BASE_CLASSES = "rounded-md p-4"
+
+      TYPE_CLASSES = {
+        success: "bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+        warning: "bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+        error: "bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300"
+      }.freeze
+
+      OUTER_CLASSES = "flex"
+      INNER_CLASSES = "flex-1"
+      TITLE_CLASSES = "font-semibold"
+      MESSAGE_CLASSES = "text-sm"
+      MESSAGE_WITH_TITLE_CLASSES = "text-sm mt-1"
+      DISMISS_CLASSES = "ml-auto -mr-1.5 -mt-1.5 inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer"
+
+      def initialize(message:, type: :info, title: nil, dismissible: false)
+        @message = message
+        @type = type
+        @title = title
+        @dismissible = dismissible
+      end
+
+      def classes
+        type_css = if @type == :info
+          "bg-accent-50 text-accent-800 dark:bg-accent-900/30 dark:text-accent-300"
+        else
+          TYPE_CLASSES.fetch(@type)
+        end
+        "#{BASE_CLASSES} #{type_css}"
+      end
+
+      def message_text
+        @message
+      end
+
+      def title?
+        !@title.nil?
+      end
+
+      def title_text
+        @title
+      end
+
+      def dismissible?
+        @dismissible
+      end
+
+      def wrapper_data
+        dismissible? ? { controller: "dismiss" } : {}
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<span class="<%= classes %>"><%= label %></span>

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class BadgeComponent < ViewComponent::Base
+      BASE_CLASSES = "inline-flex items-center rounded-full px-2 py-1 text-xs font-medium"
+
+      VARIANT_CLASSES = {
+        neutral: "bg-gray-100 text-gray-700 dark:bg-zinc-700 dark:text-gray-300",
+        success: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400",
+        danger: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400",
+        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400",
+        info: "bg-accent-100 text-accent-700 dark:bg-accent-900/50 dark:text-accent-400"
+      }.freeze
+
+      attr_reader :label
+
+      def initialize(label:, variant: :neutral)
+        @label = label
+        @variant = variant
+      end
+
+      def classes
+        "#{BASE_CLASSES} #{VARIANT_CLASSES.fetch(@variant)}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<nav class="<%= nav_classes %>">
+  <%= content %>
+</nav>

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class BottomNavComponent < ViewComponent::Base
+      NAV_CLASSES = "bottom-nav lg:hidden hotwire-native:hidden"
+
+      def nav_classes
+        NAV_CLASSES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<a href="<%= @href %>" class="<%= item_classes %>">
+  <%= @icon.html_safe %>
+  <span class="<%= LABEL_CLASSES %>"><%= @label %></span>
+</a>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class BottomNavItemComponent < ViewComponent::Base
+      attr_reader :label, :href, :icon
+
+      def initialize(label:, href:, icon:, active: false)
+        @label = label
+        @href = href
+        @icon = icon
+        @active = active
+      end
+
+      ITEM_BASE = "bottom-nav-item"
+      ACTIVE_CLASS = "active"
+      LABEL_CLASSES = "bottom-nav-label"
+
+      def item_classes
+        @active ? "#{ITEM_BASE} #{ACTIVE_CLASS}" : ITEM_BASE
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= content_tag(tag_name, @label, **tag_options) %>

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ButtonComponent < ViewComponent::Base
+      BASE_CLASSES = "inline-flex items-center justify-center font-semibold rounded-lg border-0 cursor-pointer no-underline"
+
+      VARIANT_CLASSES = {
+        secondary: "bg-gray-500 text-white hover:bg-gray-400",
+        danger: "bg-red-600 text-white hover:bg-red-500"
+      }.freeze
+
+      SIZE_CLASSES = {
+        sm: "text-sm px-3 py-1.5",
+        md: "text-base px-4 py-2",
+        lg: "text-lg px-5 py-3"
+      }.freeze
+
+      def initialize(label:, href: nil, variant: :primary, size: :md, type: :submit, data: nil)
+        @label = label
+        @href = href
+        @variant = variant
+        @size = size
+        @type = type.to_s
+        @data = data
+      end
+
+      def classes
+        variant_css = if @variant == :primary
+          "bg-accent-600 text-white hover:bg-accent-500"
+        else
+          VARIANT_CLASSES.fetch(@variant)
+        end
+        [ BASE_CLASSES, variant_css, SIZE_CLASSES.fetch(@size) ].join(" ")
+      end
+
+      def tag_name
+        button? ? :button : :a
+      end
+
+      def tag_options
+        options = { class: classes }
+        if button?
+          options[:type] = @type
+        else
+          options[:href] = @href
+        end
+        options[:data] = @data if @data
+        options
+      end
+
+      def button?
+        @href.nil?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="<%= card_classes %>">
+  <div class="<%= BODY_CLASSES %>">
+    <h3 class="<%= TITLE_CLASSES %>"><%= @title %></h3>
+    <p class="<%= SUMMARY_CLASSES %>"><%= @summary %></p>
+  </div>
+  <div class="<%= CTA_CLASSES %>">
+    <%= link_to @cta, @link, class: link_classes %>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CardComponent < ViewComponent::Base
+      CARD_CLASSES = "overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700"
+      CARD_EDGE_CLASSES = "overflow-hidden border-y border-gray-200 bg-white sm:rounded-lg sm:border-x dark:bg-zinc-900 dark:border-zinc-700"
+      BODY_CLASSES = "px-4 py-4 sm:px-6 sm:pt-6 sm:pb-4"
+      CTA_CLASSES = "px-4 pb-4 sm:px-6 sm:pb-6"
+      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-white m-0"
+      SUMMARY_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400 mb-0"
+      LINK_BASE_CLASSES = "text-sm font-medium no-underline"
+
+      def initialize(title:, summary:, link:, cta: "Read more", edge_to_edge: false)
+        @title = title
+        @summary = summary
+        @link = link
+        @cta = cta
+        @edge_to_edge = edge_to_edge
+      end
+
+      def link_classes
+        "#{LINK_BASE_CLASSES} text-accent-600 hover:text-accent-900 dark:text-accent-400"
+      end
+
+      private
+
+      def card_classes
+        @edge_to_edge ? CARD_EDGE_CLASSES : CARD_CLASSES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<a href="<%= href %>" class="<%= classes %>">
+  <%= content %>
+</a>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CardLinkComponent < ViewComponent::Base
+      BASE_CLASSES = "block rounded-lg border border-gray-200 bg-white dark:border-zinc-700 dark:bg-zinc-900"
+      SHADOW_CLASS = "shadow-sm"
+      PADDING_CLASSES = { sm: "p-3", md: "p-4", lg: "p-6" }.freeze
+
+      attr_reader :href
+
+      def initialize(href:, padding: :md, shadow: true)
+        @href = href
+        @padding = padding
+        @shadow = shadow
+      end
+
+      def classes
+        tokens = [ BASE_CLASSES, "hover:border-accent-500/50", PADDING_CLASSES.fetch(@padding) ]
+        tokens << SHADOW_CLASS if @shadow
+        tokens.join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="<%= classes %>">
+  <h2 class="<%= title_classes %>"><%= title %></h2>
+  <div class="<%= chart_height_class %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ChartCardComponent < ViewComponent::Base
+      CARD_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+      TITLE_CLASSES = "text-sm font-medium text-gray-500 dark:text-gray-400 mb-4"
+
+      HEIGHT_CLASSES = {
+        sm: "h-48",
+        md: "h-64",
+        lg: "h-96"
+      }.freeze
+
+      attr_reader :title
+
+      def initialize(title:, height: :md)
+        @title = title
+        @height = height
+      end
+
+      def classes
+        CARD_CLASSES
+      end
+
+      def title_classes
+        TITLE_CLASSES
+      end
+
+      def chart_height_class
+        HEIGHT_CLASSES.fetch(@height)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="<%= wrapper_classes %>">
+  <% if caption? %>
+    <div class="<%= caption_classes %>"><%= caption %></div>
+  <% end %>
+  <pre class="<%= pre_classes %>"><code class="<%= language_class %>"><%= content %></code></pre>
+</div>

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CodeComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700"
+      CAPTION_CLASSES = "border-b border-surface-200 bg-surface-50 px-4 py-2 font-mono text-xs text-surface-500 dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400"
+      PRE_CLASSES = "overflow-x-auto bg-surface-900 p-4 font-mono text-sm leading-relaxed text-surface-100 dark:bg-black"
+
+      attr_reader :language, :caption
+
+      def initialize(language: nil, caption: nil)
+        @language = language
+        @caption = caption
+      end
+
+      def caption?
+        !@caption.nil?
+      end
+
+      def wrapper_classes
+        WRAPPER_CLASSES
+      end
+
+      def caption_classes
+        CAPTION_CLASSES
+      end
+
+      def pre_classes
+        PRE_CLASSES
+      end
+
+      def language_class
+        return nil if @language.nil?
+
+        "language-#{@language}"
+      end
+    end
+  end
+end