baldur 0.1.1

data/app/views/baldur/components/_table_card.html.erb

@@ -0,0 +1,86 @@
+<%
+  actions_content = if actions.respond_to?(:call)
+                      capture(&actions)
+                    else
+                      actions
+                    end
+  title_meta_content = if title_meta.respond_to?(:call)
+                         capture(&title_meta)
+                       else
+                         title_meta
+                       end
+  controls_content = if controls.respond_to?(:call)
+                       capture(&controls)
+                     else
+                       controls
+                     end
+  footer_content = if footer.respond_to?(:call)
+                     capture(&footer)
+                   else
+                     footer
+                   end
+  controls_position = local_assigns[:controls_position].to_s == "header" ? "header" : "row"
+  header_controls_content = controls_position == "header" ? controls_content : nil
+  row_controls_content = controls_position == "row" ? controls_content : nil
+  header_present = title.present? || title_meta_content.present? || description.present? || actions_content.present? || header_controls_content.present?
+  controls_present = row_controls_content.present?
+  footer_present = footer_content.present?
+  card_classes = ["table-card", local_assigns[:class]].compact.join(" ")
+%>
+<div class="<%= card_classes %>">
+  <% if header_present %>
+    <div class="table-card__header table-card__section--top">
+      <div class="table-card__header-main">
+        <% if title.present? || title_meta_content.present? %>
+          <div class="table-card__header-title-row">
+            <% if title.present? %>
+              <h3 class="text-lg font-semibold text-[color:var(--color-on-surface)]"><%= title %></h3>
+            <% end %>
+            <% if title_meta_content.present? %>
+              <div class="table-card__title-meta"><%= title_meta_content %></div>
+            <% end %>
+          </div>
+        <% end %>
+        <% if description.present? %>
+          <p class="text-sm text-muted"><%= description %></p>
+        <% end %>
+      </div>
+      <% if actions_content.present? || header_controls_content.present? %>
+        <div class="table-card__header-side">
+          <% if actions_content.present? %>
+            <div class="table-card__header-actions">
+              <%= actions_content %>
+            </div>
+          <% end %>
+          <% if header_controls_content.present? %>
+            <div class="table-card__header-controls">
+              <%= header_controls_content %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if controls_present %>
+    <% controls_classes = ["table-card__controls"] %>
+    <% controls_classes << "table-card__section--top" unless header_present %>
+    <% controls_classes << "table-card__section--bottom" unless footer_present %>
+    <div class="<%= controls_classes.join(" ") %>">
+      <%= row_controls_content %>
+    </div>
+  <% end %>
+
+  <% body_classes = ["table-card__body"] %>
+  <% body_classes << "table-card__section--top" unless header_present || controls_present %>
+  <% body_classes << "table-card__section--bottom" unless footer_present %>
+  <div class="<%= body_classes.join(" ") %>">
+    <%= body %>
+  </div>
+
+  <% if footer_present %>
+    <div class="table-card__footer table-card__section--bottom">
+      <%= footer_content %>
+    </div>
+  <% end %>
+</div>

data/app/views/baldur/components/_table_footer.html.erb

@@ -0,0 +1,68 @@
+<% require "uri" %>
+<%
+  rows_param = rows_per_page_param.to_s.presence
+  rows_options = Array(rows_per_page_options).map(&:to_i).select(&:positive?).uniq
+  rows_selected = rows_per_page_selected.to_i
+  rows_selected = per_page.to_i if rows_selected <= 0
+  rows_enabled = rows_param.present? && rows_options.present?
+  pagination_enabled = total_pages.to_i > 1
+  return unless rows_enabled || pagination_enabled
+  rows_selected = rows_options.first if rows_enabled && !rows_options.include?(rows_selected)
+  base_path = begin
+    path_builder.call(current_page)
+  rescue
+    nil
+  end
+  pagination_page_param = base_path.present? ? Rack::Utils.parse_query(URI.parse(base_path).query.to_s).keys.find { |key| key.to_s.include?("page") } : nil
+  pagination_page_param ||= "page"
+  rows_form_action = base_path.present? ? URI.parse(base_path).path.presence || request.path : request.path
+  rows_form_hidden_params = request.query_parameters.except(rows_param, pagination_page_param)
+  showing_from = if total_count.to_i.positive? && per_page.to_i.positive?
+    ((current_page - 1) * per_page) + 1
+  else
+    nil
+  end
+  showing_to = if total_count.to_i.positive? && per_page.to_i.positive?
+    [ current_page * per_page, total_count ].min
+  else
+    nil
+  end
+%>
+
+<div class="flex flex-wrap items-start justify-between gap-3">
+  <div class="flex min-w-0 flex-col gap-2">
+    <% if rows_enabled %>
+      <%= form_with url: rows_form_action, method: :get, local: true, class: "flex flex-wrap items-center gap-2 text-xs text-muted", data: { controller: "form-submit" }, html: { aria: { label: "Items per page" } } do %>
+        <% rows_form_hidden_params.each do |key, value| %>
+          <% Array(value).each do |entry| %>
+            <%= hidden_field_tag key, entry %>
+          <% end %>
+        <% end %>
+        <%= hidden_field_tag pagination_page_param, 1 %>
+        <span>Show</span>
+        <%= ui_menu_select_tag rows_param,
+              options: rows_options.map { |option| { value: option.to_s, label: option.to_s } },
+              selected: rows_selected.to_s,
+              wrapper_class: "w-24",
+              input_data: { action: "change->form-submit#submit" } %>
+        <span>items per page</span>
+      <% end %>
+    <% end %>
+
+    <div class="text-xs text-muted">
+      <% if showing_from && showing_to %>
+        Showing <%= showing_from %>-<%= showing_to %> of <%= total_count %>
+      <% else %>
+        Page <%= current_page %> of <%= total_pages %>
+      <% end %>
+    </div>
+  </div>
+
+  <% if pagination_enabled %>
+    <%= ui_pagination(
+      current_page: current_page,
+      total_pages: total_pages,
+      path_builder: path_builder
+    ) %>
+  <% end %>
+</div>

data/app/views/baldur/components/_text_field.html.erb

@@ -0,0 +1,33 @@
+<div class="<%= wrapper_classes %>">
+  <% if label.present? %>
+    <label class="field__label" for="<%= input_options[:id] %>"><%= label %></label>
+  <% end %>
+  <div class="text-field__input">
+    <% if prefix.present? %>
+      <span class="text-field__prefix"><%= prefix %></span>
+    <% end %>
+    <% if multiline %>
+      <%= tag.textarea(input_value.to_s, **input_options.except(:type, :value)) %>
+    <% else %>
+      <%= tag.input(**input_options) %>
+    <% end %>
+    <% if suffix.present? %>
+      <span class="text-field__suffix"><%= suffix %></span>
+    <% end %>
+  </div>
+  <%
+    support_fragments = []
+    support_fragments << supporting_text if supporting_text.present?
+    support_fragments << supporting_slot if supporting_slot.present?
+    support_output = safe_join(support_fragments, " ")
+    support_hidden = support_output.blank?
+  %>
+  <p class="field__supporting"
+     id="<%= support_id %>"
+     data-field-support="true"
+     data-default-support="<%= supporting_text.to_s %>"
+     aria-live="polite"
+     <%= "hidden" if support_hidden %>>
+    <%= support_output %>
+  </p>
+</div>

data/app/views/baldur/components/_tooltip.html.erb

@@ -0,0 +1,73 @@
+<% tooltip_id = "tooltip-#{SecureRandom.hex(4)}" %>
+<% inline = !!local_assigns[:inline] %>
+<% wrapper_tag = inline ? :span : :div %>
+<% bubble_tag = inline ? :span : :div %>
+<% wrapper_classes = ["relative inline-flex items-center group", ("align-middle shrink-0" if inline), wrapper_class].compact.join(" ") %>
+<% icon_variant = variant.to_s == "icon" %>
+<% trigger_classes = if icon_variant
+  [
+    "inline-flex items-center justify-center rounded-full p-1 text-muted hover:text-base-content",
+    ("align-middle leading-none shrink-0" if inline),
+    "focus:outline-none focus:ring-2 focus:ring-primary/30",
+    trigger_class
+  ].compact.join(" ")
+else
+  [
+    "inline-flex items-center gap-1 text-sm text-on-surface/70 cursor-pointer",
+    "border-b border-dashed border-current pb-0.5",
+    "transition-colors hover:text-on-surface",
+    trigger_class
+  ].compact.join(" ")
+end %>
+<% bubble_classes = [
+  "absolute left-0 top-full z-30 mt-2 hidden w-max max-w-[90vw] sm:max-w-[32rem] rounded-lg",
+  "border border-[color:var(--color-outline)]",
+  "bg-[color:var(--color-inverse-surface)]",
+  "text-[color:var(--color-inverse-on-surface)]",
+  "text-left whitespace-normal break-words",
+  "dark:bg-[color:var(--color-surface-lowest)]",
+  "dark:text-[color:var(--color-on-surface)]",
+  "p-3 text-sm font-normal",
+  "shadow-[var(--elev-1)]",
+  (inline ? "data-[state=open]:inline-block" : "data-[state=open]:block"),
+  bubble_class
+].compact.join(" ") %>
+
+<%= content_tag wrapper_tag,
+                class: wrapper_classes,
+                data: {
+                  controller: "tooltip",
+                  action: "mouseenter->tooltip#open mouseleave->tooltip#close focusin->tooltip#open focusout->tooltip#close"
+                } do %>
+  <button
+    type="button"
+    class="<%= trigger_classes %>"
+    data-tooltip-target="trigger"
+    data-action="click->tooltip#toggle"
+    aria-describedby="<%= tooltip_id %>"
+    aria-expanded="false"
+  >
+    <% if icon_variant %>
+      <span class="sr-only"><%= text %></span>
+      <%= ui_icon(icon, class_name: "h-4 w-4") %>
+    <% else %>
+      <span><%= text %></span>
+    <% end %>
+    <% if show_icon && !icon_variant %>
+      <%= ui_icon(icon, class_name: "h-4 w-4") %>
+    <% end %>
+  </button>
+  <%= content_tag bubble_tag,
+                  content,
+                  id: tooltip_id,
+                  role: "tooltip",
+                  class: bubble_classes,
+                  style: "text-align: left;",
+                  data: {
+                    tooltip_target: "bubble",
+                    state: "closed"
+                  },
+                  aria: {
+                    hidden: "true"
+                  } %>
+<% end %>

data/app/views/baldur/marketing/_cta_banner.html.erb

@@ -0,0 +1,20 @@
+<%
+  payload = local_assigns.fetch(:banner)
+  section_attributes = {
+    class: ["marketing-cta-banner px-12 py-16 sm:px-12", local_assigns[:classes]].compact.join(" ")
+  }
+  section_attributes[:id] = payload[:id] if payload[:id].present?
+%>
+<section <%= tag.attributes(section_attributes) %>>
+  <div class="mx-auto flex max-w-6xl flex-col gap-6 md:flex-row md:items-center md:justify-between">
+    <div class="max-w-3xl">
+      <h2 class="text-neutral-50"><%= payload[:title] %></h2>
+      <p class="mt-4 text-neutral-50"><%= payload[:body] %></p>
+    </div>
+    <div class="flex flex-wrap gap-3">
+      <%= link_to payload[:cta_label],
+                  payload[:cta_href],
+                  class: "inline-flex h-11 items-center justify-center rounded-[1rem] bg-white px-5 text-base font-semibold text-[#1f1f27] shadow-[var(--elev-1)] transition-transform duration-150 hover:-translate-y-0.5" %>
+    </div>
+  </div>
+</section>

data/app/views/baldur/marketing/_faq_section.html.erb

@@ -0,0 +1,37 @@
+<section id="<%= id %>" class="<%= ["marketing-faq-section bg-surface px-6 py-16 sm:px-12", local_assigns[:classes]].compact.join(" ") %>">
+  <div class="<%= ["mx-auto", (local_assigns[:container_class].presence || "max-w-4xl")].join(" ") %>">
+    <h2><%= title %></h2>
+    <% if description.present? %>
+      <p class="mt-3 text-soft"><%= description %></p>
+    <% end %>
+    <div class="mt-8 rounded-3xl border border-outline bg-surface-high px-6" data-controller="accordion">
+      <% Array(items).each_with_index do |item, index| %>
+        <% button_action = ui_marketing_action_string("click->accordion#toggle", item[:button_action], item[:button_actions]) %>
+        <div data-accordion-target="item" data-open="<%= item.key?(:open) ? !!item[:open] : index.zero? %>" class="<%= index.zero? ? "" : "border-t border-outline" %>">
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 py-6 text-left text-lg font-semibold text-on-surface"
+            data-action="<%= button_action %>"
+            <% (item[:button_data] || {}).each do |key, value| %>
+              data-<%= key.to_s.dasherize %>="<%= value %>"
+            <% end %>
+            aria-expanded="<%= (item.key?(:open) ? !!item[:open] : index.zero?) ? "true" : "false" %>"
+            aria-controls="<%= item[:id].presence || "#{id}-item-#{index}" %>"
+          >
+            <span aria-hidden="true" data-accordion-target="icon"><%= ui_icon("chevron-right", class_name: "h-[18px] w-[18px]") %></span>
+            <span><%= item[:question] %></span>
+          </button>
+          <div
+            id="<%= item[:id].presence || "#{id}-item-#{index}" %>"
+            data-accordion-target="content"
+            aria-hidden="<%= (item.key?(:open) ? !!item[:open] : index.zero?) ? "false" : "true" %>"
+          >
+            <div class="pb-6 pl-7 pr-1">
+              <p class="text-soft"><%= item[:answer] %></p>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/baldur/marketing/_features_section.html.erb

@@ -0,0 +1,67 @@
+<%
+  resolved_tabs = Array(tabs)
+  selected_tab = resolved_tabs.find { |tab| tab[:selected] } || resolved_tabs.first
+  selected_value = selected_tab&.dig(:value)
+  tab_segments = resolved_tabs.map do |tab|
+    {
+      label: tab[:label],
+      value: tab[:value],
+      selected: tab[:value] == selected_value,
+      data: { action: "marketing-tabs#select", marketing_tabs_target: "option" }
+    }
+  end
+%>
+<section id="<%= id %>" class="<%= ["marketing-features-section bg-surface px-12 py-16 sm:px-12", local_assigns[:classes]].compact.join(" ") %>">
+  <div class="mx-auto max-w-6xl rounded-[40px] bg-accent/10 px-12 py-14 sm:px-12">
+    <div class="space-y-8" data-controller="marketing-tabs" data-marketing-tabs-tab-value="<%= selected_value %>">
+      <div class="text-center">
+        <h2><%= title %></h2>
+        <% if description.present? %>
+          <p class="mt-3 text-sm text-soft"><%= description %></p>
+        <% end %>
+      </div>
+      <div class="flex justify-center">
+        <%= ui_segmented_buttons(aria_label: "Use case tabs", items: tab_segments) %>
+      </div>
+
+      <div class="overflow-hidden transition-[height] duration-300 ease-out" data-marketing-tabs-target="panels">
+        <% resolved_tabs.each do |tab| %>
+          <% active = tab[:value] == selected_value %>
+          <% panel_classes = [("motion-slide-up" if active), ("hidden" unless active)].compact.join(" ") %>
+          <div data-marketing-tabs-target="panel"
+               data-tab="<%= tab[:value] %>"
+               role="tabpanel"
+               class="<%= panel_classes %>"
+               <%= 'hidden aria-hidden="true"' unless active %>>
+            <div class="grid items-start gap-8 md:grid-cols-[0.9fr_1.1fr]">
+              <div class="rounded-3xl border border-outline-variant bg-surface p-6">
+                <h3 class="text-2xl font-semibold text-on-surface"><%= tab[:panel_title].presence || tab[:label] %></h3>
+                <p class="mt-3 text-sm text-soft"><%= tab[:panel_body] %></p>
+                <% if tab[:visual].present? %>
+                  <div class="mt-6"><%= ui_marketing_render_content(tab[:visual]) %></div>
+                <% else %>
+                  <div class="mt-6 h-40 rounded-2xl border border-outline bg-surface-high"></div>
+                <% end %>
+              </div>
+              <div class="grid gap-5">
+                <p class="text-sm font-semibold uppercase tracking-wide text-muted"><%= question_label %></p>
+                <% Array(tab[:cards]).each do |card| %>
+                  <article class="rounded-3xl border border-outline bg-surface-high p-6">
+                    <h3 class="text-lg font-semibold"><%= card[:title] %></h3>
+                    <p class="mt-3 text-sm text-soft"><%= card[:body] %></p>
+                  </article>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <% if cta.present? %>
+        <div class="flex justify-center">
+          <%= ui_button(**cta) %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/baldur/marketing/_footer.html.erb

@@ -0,0 +1,38 @@
+<%
+  resolved_brand = local_assigns.fetch(:brand).symbolize_keys
+  resolved_brand[:logo_class] = resolved_brand[:logo_class].presence || "h-10 w-10 rounded-lg"
+  resolved_brand[:wordmark_class] = resolved_brand[:wordmark_class].presence || "text-2xl font-bold text-on-surface"
+  resolved_copyright = local_assigns[:copyright].presence || "© #{Time.current.year} #{resolved_brand[:name]}. All rights reserved."
+%>
+<footer class="<%= ["marketing-footer border-t border-outline-variant bg-surface px-12 py-12 text-sm text-soft", local_assigns[:classes]].compact.join(" ") %>">
+  <div class="mx-auto flex max-w-6xl flex-col gap-8 md:flex-row md:items-start md:justify-between">
+    <div>
+      <span class="brand-lockup">
+        <%= image_tag resolved_brand[:logo_src], alt: resolved_brand[:logo_alt], class: ["brand-lockup__logo", resolved_brand[:logo_class]].join(" ") %>
+        <span class="<%= ["brand-lockup__wordmark", resolved_brand[:wordmark_class]].join(" ") %>"><%= resolved_brand[:wordmark] %></span>
+      </span>
+      <p class="mt-2 max-w-md text-soft"><%= description %></p>
+    </div>
+    <div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
+      <% Array(columns).each do |column| %>
+        <div>
+          <h4 class="font-semibold text-on-surface"><%= column[:title] %></h4>
+          <ul class="mt-3 space-y-2 text-soft">
+            <% Array(column[:links]).each do |link| %>
+              <li>
+                <% if link[:href].present? %>
+                  <%= link_to link[:label], link[:href], class: link[:class].presence || "hover:text-primary" %>
+                <% else %>
+                  <span><%= link[:label] %></span>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="mx-auto mt-8 max-w-6xl border-t border-outline-variant pt-6 text-xs text-soft">
+    <p><%= resolved_copyright %></p>
+  </div>
+</footer>