maquina-components 0.1.1 → 0.2.0

data/app/views/components/_separator.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (orientation: :horizontal) -%>
+
+<div
+  data-orientation="<%= orientation %>"
+  role="none"
+  class="
+    bg-border shrink-0 data-[orientation=horizontal]:h-px
+    data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px mx-2
+    data-[orientation=vertical]:h-4
+  "
+></div>

data/app/views/components/_sidebar.html.erb

@@ -0,0 +1,40 @@
+<%# locals: (id: nil, state: :collapsed, collapsible: :offcanvas, variant: :inset, side: :left, css_classes: "", **html_options) %>
+<% random_id = id || "sidebar-#{SecureRandom.hex(6)}"
+  
+  merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: :root,
+    sidebar_target: "sidebar",
+    state: state,
+    variant: variant,
+    collapsible: collapsible,
+    side: side
+  ) %>
+
+<aside
+  id="<%= random_id %>"
+  class="group peer sidebar-loading <%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <%# Sidebar gap (creates space for sidebar on desktop) %>
+  <div id="<%= random_id %>-gap" data-sidebar-part="gap"></div>
+
+  <%# Mobile backdrop overlay %>
+  <div
+    id="<%= random_id %>-overlay"
+    data-sidebar-part="backdrop"
+    data-sidebar-target="backdrop"
+    data-action="click->sidebar#backdropClick"
+  ></div>
+
+  <%# Sidebar container (fixed positioned) %>
+  <div
+    id="<%= random_id %>-container"
+    data-sidebar-part="container"
+    data-sidebar-target="container"
+  >
+    <%# Inner sidebar content wrapper %>
+    <div id="<%= random_id %>-inner" data-sidebar-part="inner">
+      <%= yield %>
+    </div>
+  </div>
+</aside>

data/app/views/components/_simple_table.html.erb

@@ -0,0 +1,49 @@
+<%# locals: (collection:, columns:, caption: nil, variant: nil, table_variant: nil, empty_message: "No data available", row_id: nil, html_options: {}) %>
+<%= render "components/table", variant: variant, table_variant: table_variant, **html_options do %>
+  <% if caption.present? %>
+    <%= render "components/table/caption" do %><%= caption %><% end %>
+  <% end %>
+
+  <%= render "components/table/header" do %>
+    <%= render "components/table/row" do %>
+      <% columns.each do |column| %>
+        <%= render "components/table/head", css_classes: table_alignment_class(column[:align]) do %>
+          <%= column[:label] %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render "components/table/body" do %>
+    <% if collection.empty? %>
+      <%= render "components/table/row" do %>
+        <%= render "components/table/cell", colspan: columns.size, data: { empty: "true" } do %>
+          <%= empty_message %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <% collection.each do |item| %>
+        <%
+          row_options = {}
+          row_options[:id] = "row-#{item.public_send(row_id)}" if row_id && item.respond_to?(row_id)
+        %>
+        <%= render "components/table/row", **row_options do %>
+          <% columns.each do |column| %>
+            <%
+              value = if column[:key].is_a?(Proc)
+                column[:key].call(item)
+              elsif item.is_a?(Hash)
+                item[column[:key]] || item[column[:key].to_s]
+              elsif item.respond_to?(column[:key])
+                item.public_send(column[:key])
+              end
+            %>
+            <%= render "components/table/cell", css_classes: table_alignment_class(column[:align]) do %>
+              <%= value %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/components/_table.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (css_classes: "", container: true, variant: nil, table_variant: nil, **html_options) %>
+<%
+  # Table data attributes - merge user data with component defaults
+  table_data = (html_options.delete(:data) || {}).merge(component: :table)
+  table_data[:variant] = table_variant if table_variant
+
+  # Container data attributes
+  container_data = { table_part: :container }
+  container_data[:variant] = variant if variant
+%>
+<% if container %>
+<div data-table-part="container"<%= " data-variant=\"#{variant}\"" if variant %>>
+  <%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
+    <%= yield %>
+  <% end %>
+</div>
+<% else %>
+<%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
+  <%= yield %>
+<% end %>
+<% end %>

data/app/views/components/_toggle_group.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options) %>
+<% selected_values = case value
+                    when Array then value.map(&:to_s)
+                    when nil then []
+                    else [value.to_s]
+                    end
+  
+  merged_data = (html_options.delete(:data) || {}).merge(
+    controller: "toggle-group",
+    component: "toggle-group",
+    variant: variant,
+    size: size,
+    "toggle-group-type-value": type,
+    "toggle-group-selected-value": selected_values.to_json
+  ) %>
+
+<%= content_tag :div,
+      role: "group",
+      class: css_classes.presence,
+      data: merged_data,
+      "aria-disabled": (disabled ? "true" : nil),
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/alert/_description.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :description) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/alert/_title.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :title) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/breadcrumbs/_ellipsis.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :ellipsis
+  ) %>
+
+<%= content_tag :span, role: "presentation", class: css_classes, data: merged_data, **html_options do %>
+  <%= icon_for(:ellipsis) %>
+  <span class="sr-only">More</span>
+<% end %>

data/app/views/components/breadcrumbs/_item.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :item
+  ) %>
+
+<%= content_tag :li, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_link.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (href:, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :link
+  ) %>
+
+<%= link_to href, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_list.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :list
+  ) %>
+
+<%= content_tag :ol, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_page.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :page
+  ) %>
+
+<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_separator.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (icon: :chevron_right, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :separator
+  ) %>
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  class="<%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <% if icon == :custom %>
+    <%= yield %>
+  <% else %>
+    <%= icon_for(icon) %>
+  <% end %>
+</li>

data/app/views/components/card/_action.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(card_part: :action) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/card/_content.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (spacing: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    card_part: :content,
+    spacing: (spacing == :full ? :full : nil)
+  ).compact %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/card/_description.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(card_part: :description) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/card/_footer.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (align: :start, spacing: :default, css_classes: "", **html_options) %>
+<% align_value = case align.to_sym
+    when :between then :between
+    when :end then :end
+    when :center then :center
+    else nil
+  end
+  
+  merged_data = (html_options.delete(:data) || {}).merge(
+    card_part: :footer,
+    align: align_value,
+    spacing: (spacing == :full ? :full : nil)
+  ).compact %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/card/_header.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (layout: :column, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    card_part: :header,
+    layout: (layout == :row ? :row : nil)
+  ).compact %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/card/_title.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (text: nil, size: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    card_part: :title,
+    size: (size == :sm ? :sm : nil)
+  ).compact %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/dropdown_menu/_content.html.erb

@@ -0,0 +1,20 @@
+<%# locals: (align: :start, side: :bottom, width: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "content",
+    "dropdown-menu-target": "content",
+    align: align,
+    side: side,
+    width: width,
+    state: "closed"
+  ) %>
+
+<%= content_tag :div,
+      role: "menu",
+      aria: { orientation: "vertical" },
+      tabindex: "-1",
+      class: css_classes.presence,
+      data: merged_data,
+      hidden: true,
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/dropdown_menu/_group.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "group"
+  ) %>
+
+<%= content_tag :div,
+      role: "group",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/dropdown_menu/_item.html.erb

@@ -0,0 +1,29 @@
+<%# locals: (href: nil, method: nil, variant: :default, disabled: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "item",
+    variant: variant
+  ) %>
+
+<% merged_data["turbo-method"] = method if method.present? %>
+
+<% aria_attrs = {} %>
+<% aria_attrs[:disabled] = "true" if disabled %>
+
+<% tag_name = href.present? ? :a : :button %>
+
+<% tag_options = {
+     role: "menuitem",
+     tabindex: "-1",
+     class: css_classes.presence,
+     data: merged_data,
+     aria: aria_attrs.presence,
+     disabled: (disabled unless href.present?),
+     **html_options
+   } %>
+
+<% tag_options[:href] = href if href.present? %>
+<% tag_options[:type] = "button" if tag_name == :button %>
+
+<%= content_tag tag_name, **tag_options.compact do %>
+  <%= yield %>
+<% end %>

data/app/views/components/dropdown_menu/_label.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (text: nil, inset: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "label",
+    inset: inset
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/dropdown_menu/_separator.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "separator"
+  ) %>
+
+<%= content_tag :div, nil,
+      role: "separator",
+      aria: { orientation: "horizontal" },
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options %>

data/app/views/components/dropdown_menu/_shortcut.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-part": "shortcut"
+  ) %>
+
+<%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/dropdown_menu/_trigger.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (variant: :outline, size: :default, as_child: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "dropdown-menu-target": "trigger",
+    action: "dropdown-menu#toggle"
+  ) %>
+
+<% if as_child %>
+  <%= yield %>
+<% else %>
+  <% button_data = merged_data.merge(
+      component: "button",
+      variant: variant,
+      size: size
+    ) %>
+  <%= content_tag :button,
+        type: "button",
+        class: css_classes.presence,
+        data: button_data,
+        aria: { haspopup: "menu", expanded: "false" },
+        **html_options do %>
+    <%= yield %>
+    <%= icon_for :chevron_down, data: { "dropdown-menu-target": "chevron" } %>
+  <% end %>
+<% end %>

data/app/views/components/empty/_content.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "empty-part": "content"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/empty/_description.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "empty-part": "description"
+  ) %>
+
+<%= content_tag :p, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/empty/_header.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "empty-part": "header"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/empty/_media.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (icon: nil, variant: :icon, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "empty-part": "media",
+    variant: variant
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if icon.present? && respond_to?(:icon_for) %>
+    <%= icon_for(icon) %>
+  <% elsif block_given? %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/empty/_title.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "empty-part": "title"
+  ) %>
+
+<%= content_tag :h3, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/pagination/_content.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "pagination-part": "content"
+  ) %>
+
+<%= content_tag :ul, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/pagination/_ellipsis.html.erb

@@ -0,0 +1,28 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% sr_label = t("maquina_components.pagination.more_pages", default: "More pages") %>
+
+<span
+  class="<%= css_classes.presence %>"
+  data-pagination-part="ellipsis"
+  aria-hidden="true"
+  <%= tag.attributes(html_options.except(:data)) %>
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+    <circle cx="5" cy="12" r="1" />
+  </svg>
+
+  <span class="sr-only"><%= sr_label %></span>
+</span>

data/app/views/components/pagination/_item.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "pagination-part": "item"
+  ) %>
+
+<%= content_tag :li, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/pagination/_link.html.erb

@@ -0,0 +1,23 @@
+<%# locals: (href:, active: false, disabled: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "pagination-part": "link",
+    active: active
+  ) %>
+
+<% if disabled %>
+  <%= content_tag :span,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-disabled": "true",
+        **html_options do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <%= link_to href,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-current": (active ? "page" : nil),
+        **html_options do %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/components/pagination/_next.html.erb

@@ -0,0 +1,57 @@
+<%# locals: (href: nil, label: nil, disabled: false, show_label: true, css_classes: "", **html_options) %>
+<% is_disabled = disabled || href.nil?
+  display_label = label || t("maquina_components.pagination.next", default: "Next")
+  merged_data = (html_options.delete(:data) || {}).merge("pagination-part": "next") %>
+
+<% if is_disabled %>
+  <span
+    class="<%= css_classes.presence %>"
+    data-pagination-part="next"
+    aria-disabled="true"
+    <%= tag.attributes(html_options.except(:data)) %>
+  >
+    <% if show_label %>
+      <span><%= display_label %></span>
+    <% end %>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </span>
+<% else %>
+  <%= link_to href,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-label": display_label,
+        **html_options do %>
+    <% if show_label %>
+      <span><%= display_label %></span>
+    <% end %>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  <% end %>
+<% end %>