maquina-components 0.1.2 → 0.2.0

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 %>

data/app/views/components/pagination/_previous.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.previous", default: "Previous")
+  merged_data = (html_options.delete(:data) || {}).merge("pagination-part": "previous") %>
+
+<% if is_disabled %>
+  <span
+    class="<%= css_classes.presence %>"
+    data-pagination-part="previous"
+    aria-disabled="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"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+
+    <% if show_label %>
+      <span><%= display_label %></span>
+    <% end %>
+  </span>
+<% else %>
+  <%= link_to href,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-label": display_label,
+        **html_options do %>
+    <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="m15 18-6-6 6-6" />
+    </svg>
+
+    <% if show_label %>
+      <span><%= display_label %></span>
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

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

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

@@ -0,0 +1,12 @@
+<%# locals: (title: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: :group
+  ) %>
+
+<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+  <% if title.present? %>
+    <div data-sidebar-part="group-label"><%= title %></div>
+  <% end %>
+
+  <%= yield %>
+<% end %>

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

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

data/app/views/components/sidebar/_inset.html.erb

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

data/app/views/components/sidebar/_menu.html.erb

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

data/app/views/components/sidebar/_menu_button.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (title:, url:, icon_name: nil, size: :default, active: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: "menu-button",
+    size: size,
+    active: active
+  ) %>
+
+<%= link_to url, class: css_classes, data: merged_data, **html_options do %>
+  <% if icon_name.present? %>
+    <%= icon_for(icon_name) %>
+  <% end %>
+
+  <span><%= title %></span>
+<% end %>

data/app/views/components/sidebar/_menu_item.html.erb

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

data/app/views/components/sidebar/_menu_link.html.erb

@@ -0,0 +1,32 @@
+<%# locals: (url: "#", active: false, title: nil, subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: "menu-link",
+    active: active
+  ) %>
+
+<%= link_to url, class: css_classes, data: merged_data, **html_options do %>
+  <% if icon.present? || text_icon.present? %>
+    <div data-sidebar-part="menu-avatar">
+      <% if icon.present? %>
+        <%= image_tag icon, class: icon_classes %>
+      <% elsif text_icon.present? %>
+        <span class="<%= icon_classes %>"><%= text_icon %></span>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if title.present? || subtitle.present? %>
+    <div
+      class="flex flex-col gap-0.5 leading-none"
+      data-sidebar-hide-on-collapse
+    >
+      <% if title.present? %>
+        <span class="font-medium"><%= title %></span>
+      <% end %>
+
+      <% if subtitle.present? %>
+        <span class="text-xs text-sidebar-foreground/70"><%= subtitle %></span>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/components/sidebar/_provider.html.erb

@@ -0,0 +1,16 @@
+<%# locals: (default_open: true, variant: :inset, css_classes: "", cookie_name: "sidebar_state", keyboard_shortcut: "b", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :sidebar,
+    variant: variant,
+    controller: "sidebar",
+    outlet: "sidebar",
+    sidebar_default_open_value: default_open,
+    sidebar_open_value: default_open,
+    sidebar_cookie_name_value: cookie_name,
+    sidebar_keyboard_shortcut_value: keyboard_shortcut,
+    action: "keydown.meta+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard"
+  ) %>
+
+<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%# locals: (icon_name:, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: :trigger,
+    controller: "sidebar-trigger",
+    action: "click->sidebar-trigger#triggerClick",
+    sidebar_trigger_sidebar_outlet: "[data-outlet='sidebar']"
+  ) %>
+
+<%= button_tag type: :button, class: css_classes, data: merged_data, **html_options do %>
+  <%= icon_for(icon_name) %>
+  <span class="sr-only">Toggle Sidebar</span>
+<% end %>