ariadne_view_components 0.0.96 → 0.0.96.2

data/app/components/ariadne/ui/badge/component.rb

@@ -45,20 +45,16 @@ module Ariadne
         style do
           base do
             [
+              "ariadne:inline-flex",
+              "ariadne:items-center",
+              "ariadne:gap-1",
               "ariadne:truncate",
-              "ariadne:max-w-full",
-              "ariadne:border-black/10",
-              "ariadne:dark:border-white/10",
               "ariadne:text-content",
               "ariadne:dark:text-content-dark",
-              "ariadne:outline-hidden",
-              "ariadne:ring-offset-0",
-              "ariadne:focus-visible:ring-2",
-              "ariadne:ring-blue-400",
-              "ariadne:dark:ring-blue-600",
-              "ariadne:py-1",
-              "ariadne:px-1.5",
-              "ariadne:rounded-md",
+              "ariadne:py-0.5",
+              "ariadne:px-2",
+              "ariadne:rounded-full",
+              "ariadne:font-medium",
             ]
           end
 
@@ -67,7 +63,7 @@ module Ariadne
             include_colors!
 
             with_leading_item do
-              yes { "ariadne:inline-flex ariadne:items-center" }
+              yes { "" }
               no { "ariadne:inline-block" }
             end
 
@@ -77,21 +73,24 @@ module Ariadne
             end
 
             size do
-              xs { "ariadne:text-xs ariadne:leading-3" }
-              sm { "ariadne:text-xs ariadne:leading-4" }
-              md { "ariadne:text-base ariadne:leading-5" }
-              lg { "ariadne:text-lg ariadne:leading-6" }
-              xl { "ariadne:text-xl ariadne:leading-8" }
+              xs { "ariadne:text-xs ariadne:leading-3 ariadne:py-0" }
+              sm { "ariadne:text-xs ariadne:leading-4 ariadne:py-0.5" }
+              md { "ariadne:text-sm ariadne:leading-5 ariadne:py-0.5" }
+              lg { "ariadne:text-sm ariadne:leading-5 ariadne:py-1" }
+              xl { "ariadne:text-base ariadne:leading-6 ariadne:py-1" }
             end
           end
 
-          compound(size: :xs, with_leading_item: :yes) { ["ariadne:pe-1 ariadne:ps-0.5"] }
-          compound(size: :sm, with_leading_item: :yes) { ["ariadne:pe-1.5 ariadne:ps-0.5"] }
-          compound(size: :md, with_leading_item: :yes) { ["ariadne:pe-1.5 ariadne:ps-0.5"] }
+          compound(size: :xs, with_leading_item: :yes) { ["ariadne:pe-1.5 ariadne:ps-1"] }
+          compound(size: :sm, with_leading_item: :yes) { ["ariadne:pe-2 ariadne:ps-1"] }
+          compound(size: :md, with_leading_item: :yes) { ["ariadne:pe-2 ariadne:ps-1"] }
 
-          compound(size: :xs, with_leading_item: :no) { ["ariadne:px-1"] }
-          compound(size: :sm, with_leading_item: :no) { ["ariadne:px-1.5"] }
+          compound(size: :xs, with_leading_item: :no) { ["ariadne:px-1.5"] }
+          compound(size: :sm, with_leading_item: :no) { ["ariadne:px-2"] }
           compound(size: :md, with_leading_item: :no) { ["ariadne:px-2"] }
+
+          # Add gray color as default
+          compound(color: :none) { ["ariadne:bg-gray-100 ariadne:text-gray-800"] }
         end
       end
     end

data/app/components/ariadne/ui/button/component.rb

@@ -101,6 +101,7 @@ module Ariadne
         style do
           base do
             [
+              "ariadne:bg-background",
               "ariadne:inline-flex",
               "ariadne:items-center",
               "ariadne:justify-center",
@@ -108,7 +109,7 @@ module Ariadne
               "ariadne:gap-x-1.5",
               "ariadne:rounded",
               "ariadne:px-2",
-              # "ariadne:py-1",
+              "ariadne:hover:cursor-pointer",
               "ariadne:font-semibold",
               "ariadne:shadow-sm",
               "ariadne:text-black",
@@ -125,11 +126,13 @@ module Ariadne
             scheme do
               primary do
                 [
-                  "ariadne:bg-primary",
+                  "ariadne:bg-purple-300",
+                  "ariadne:dark:bg-purple-600",
+
                   "ariadne:text-primary-foreground",
+                  "ariadne:dark:text-primary-foreground",
 
                   "ariadne:hover:enabled:bg-primary/90",
-
                   "ariadne:disabled:opacity-50",
                 ]
               end
@@ -275,7 +278,7 @@ module Ariadne
           return trimmed_content unless content.html_safe?
 
           # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-          trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+          trimmed_content.html_safe
         end
       end
     end

data/app/components/ariadne/ui/dialog/component.rb

@@ -59,7 +59,7 @@ module Ariadne
         }
 
         # The main content within the dialog.
-       renders_one :body, BaseComponent::ACCEPT_ANYTHING
+        renders_one :body, BaseComponent::ACCEPT_ANYTHING
 
         # Optional footer content to the dialog; usually form buttons for submit or cancel.
         #

data/app/components/ariadne/ui/popover/component.rb

@@ -58,7 +58,7 @@ module Ariadne
 
           html_attrs[:data] ||= {}
           html_attrs[:data] = {
-            "#{stimulus_name}-target" => ["popover", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
+            "#{stimulus_name}-target" => ["popover", html_attrs.dig(:data, :target)].compact.join(" "),
           }.merge(html_attrs[:data])
         end
 

data/app/components/ariadne/ui/sidebar/component.rb

@@ -43,33 +43,23 @@ module Ariadne
               "ariadne:flex-col",
               "ariadne:h-screen",
               "ariadne:overflow-hidden",
-              "ariadne:border-r",
-              "ariadne:bg-white", # Add background color matching Figma
-              "ariadne:border-zinc-100",
-              "ariadne:dark:border-zinc-800", # Updated dark border color
               "ariadne:transition-all",
               "ariadne:duration-300",
               "ariadne:ease-in-out",
-              "ariadne:z-20"
+              "ariadne:z-20",
             ]
           end
 
           variants do
-            variant do
-              default do
-                []
-              end
-            end
-
             size do
               sm do
                 ["ariadne:w-64 ariadne:data-[collapsed=true]:w-16"]
               end
-              
+
               md do
                 ["ariadne:w-72 ariadne:data-[collapsed=true]:w-20"]
               end
-              
+
               lg do
                 ["ariadne:w-80 ariadne:data-[collapsed=true]:w-24"]
               end
@@ -79,4 +69,4 @@ module Ariadne
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/sidebar/content/component.html.erb

@@ -1,14 +1,13 @@
 <div class="<%= style %>">
+  <% if custom_content %>
+    <%= custom_content %>
+  <% end %>
   <% if search %>
-    <div class="ariadne:mb-4">
-      <%= search %>
-    </div>
+    <%= search %>
   <% end %>
   <% if groups.any? %>
     <% groups.each do |group| %>
       <%= group %>
     <% end %>
-  <% elsif custom_content %>
-    <%= custom_content %>
   <% end %>
 </div>

data/app/components/ariadne/ui/sidebar/content/component.rb

@@ -11,37 +11,27 @@ module Ariadne
           # Accepts any content for the sidebar
           renders_many :groups, Ariadne::UI::Sidebar::Group::Component
 
-          # If no groups are used, any content can be passed directly
+          # Custom content can be placed anywhere within the sidebar content
           renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
-          
-          # Search box for the sidebar
-          renders_one :search
 
-          # Whether to render direct content with padding
-          option :padded, default: -> { true }
+          # Search box for the sidebar
+          renders_one :search, BaseComponent::ACCEPT_ANYTHING
 
           style do
             base do
               [
                 "ariadne:flex",
                 "ariadne:flex-col",
-                "ariadne:gap-3",
+                "ariadne:gap-4",
                 "ariadne:flex-1",
                 "ariadne:overflow-y-auto",
-                "ariadne:py-2",
-                "ariadne:bg-white", # Match Figma background
+                "ariadne:p-4",
+                "ariadne:rounded-md",
               ]
             end
-
-            variants do
-              padded do
-                yes { "ariadne:px-4" }
-                no { "" }
-              end
-            end
           end
         end
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/sidebar/footer/component.rb

@@ -23,7 +23,8 @@ module Ariadne
                 "ariadne:flex",
                 "ariadne:items-center",
                 "ariadne:justify-between",
-                "ariadne:p-4",
+                "ariadne:px-4",
+                "ariadne:py-3",
                 "ariadne:border-t",
                 "ariadne:border-zinc-100",
                 "ariadne:dark:border-zinc-800",
@@ -51,4 +52,4 @@ module Ariadne
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/sidebar/group/component.html.erb

@@ -2,6 +2,9 @@
      id="<%= component_id %>" 
      data-controller="<%= collapsible ? 'ariadne-ui-sidebar-group' : nil %>"
      data-ariadne-ui-sidebar-group-open-value="<%= default_open %>">
+  <% if custom_content %>
+    <%= custom_content %>
+  <% end %>
   <% if label.present? %>
     <div class="<%= style(:label) %>" <%= "data-action='click->ariadne-ui-sidebar-group#toggle'" if collapsible %>>
       <%= label %>
@@ -29,8 +32,6 @@
       <% items.each do |item| %>
         <%= item %>
       <% end %>
-    <% elsif custom_content %>
-      <%= custom_content %>
     <% end %>
   </div>
 </div>

data/app/components/ariadne/ui/sidebar/group/component.rb

@@ -9,7 +9,7 @@ module Ariadne
         # Used to organize related navigation items.
         class Component < Ariadne::BaseComponent
           # @param [String] label Label for the group
-          option :label, default: -> { nil }
+          option :label, optional: true
 
           # @param [Boolean] collapsible Whether the group can be collapsed
           option :collapsible, default: -> { false }
@@ -29,7 +29,6 @@ module Ariadne
                 "ariadne:flex",
                 "ariadne:flex-col",
                 "ariadne:gap-1",
-                "ariadne:px-3",
               ]
             end
           end
@@ -39,8 +38,7 @@ module Ariadne
               [
                 "ariadne:text-xs",
                 "ariadne:font-medium",
-                "ariadne:text-zinc-500",
-                "ariadne:dark:text-zinc-400",
+                "ariadne:sidebar-foreground",
                 "ariadne:uppercase",
                 "ariadne:tracking-wider",
                 "ariadne:py-2",
@@ -57,16 +55,12 @@ module Ariadne
               [
                 "ariadne:flex",
                 "ariadne:flex-col",
-                "ariadne:gap-0.5",
+                "ariadne:gap-1",
               ]
             end
 
             variants do
               collapsible do
-                no do
-                  []
-                end
-
                 yes do
                   [
                     "ariadne:transition-all",
@@ -81,4 +75,4 @@ module Ariadne
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/sidebar/header/component.rb

@@ -23,11 +23,11 @@ module Ariadne
                 "ariadne:flex",
                 "ariadne:items-center",
                 "ariadne:justify-between",
-                "ariadne:p-4",
+                "ariadne:px-4",
+                "ariadne:py-3",
                 "ariadne:border-b",
                 "ariadne:border-zinc-100",
                 "ariadne:dark:border-zinc-800",
-                "ariadne:bg-white", # Match Figma
               ]
             end
 
@@ -51,4 +51,4 @@ module Ariadne
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/sidebar/item/component.html.erb

@@ -1,24 +1,20 @@
-<% tag_name = href.present? ? "a" : "div" %>
-<% tag_attributes = { class: style(current: current), data: { collapsed: false } } %>
-<% tag_attributes[:href] = href if href.present? %>
-<%= content_tag(tag_name, **tag_attributes) do %>
-  <% if icon %>
-    <span class="ariadne:flex ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
-      <%= icon %>
-    </span>
-  <% elsif icon_slot %>
-    <span class="ariadne:flex ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
-      <%= icon_slot %>
-    </span>
+<%= content_tag(href.present? ? "a" : "div", data: { collapsed: false }, **html_attrs) do %>
+  <% if custom_content %>
+    <div class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></div>
   <% end %>
-  <% if label.present? %>
-    <span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
-  <% elsif custom_content %>
-    <span class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></span>
-  <% end %>
-  <% if badge %>
-    <div class="ariadne:ml-auto ariadne:data-[sidebar-collapsed=true]:hidden">
-      <%= badge %>
-    </div>
-  <% end %>
-<% end %> 
+  <div class="ariadne:flex ariadne:items-center ariadne:w-full">
+    <% if icon %>
+      <span class="ariadne:flex mr-2 ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
+        <%= icon %>
+      </span>
+    <% end %>
+    <% if label.present? %>
+      <span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
+      <% if badge %>
+        <span class="ariadne:ml-auto ariadne:inline-flex ariadne:items-center ariadne:py-0 ariadne:h-5 ariadne:data-[sidebar-collapsed=true]:hidden">
+          <%= badge %>
+        </span>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/ui/sidebar/item/component.rb

@@ -16,19 +16,27 @@ module Ariadne
 
           # @param [String] label Text label for the item
           option :label, default: -> { nil }
+          option :html_attrs, default: -> { {} }
 
           # Icon for the item
           renders_one :icon, Ariadne::UI::Heroicon::Component
-          
           # Generic icon slot for custom icons
           renders_one :icon_slot, BaseComponent::ACCEPT_ANYTHING
 
           # Badge for the item (e.g., notification count)
-          renders_one :badge, Ariadne::UI::Badge::Component
+          renders_one :badge, BaseComponent::ACCEPT_ANYTHING
 
           # Content for the item if not using label
           renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
 
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = merge_tailwind_classes([style(current: current), html_attrs[:class]].join(" "))
+
+            if href.present?
+              html_attrs[:href] = href
+            end
+          end
+
           style do
             base do
               [
@@ -44,28 +52,17 @@ module Ariadne
                 "ariadne:outline-none",
                 "ariadne:focus-visible:ring-2",
                 "ariadne:focus-visible:ring-offset-2",
+                "ariadne:relative",
+                "ariadne:dark:hover:bg-purple-700/20",
               ]
             end
 
             variants do
               current do
-                no do
-                  [
-                    "ariadne:text-zinc-700",
-                    "ariadne:dark:text-zinc-300",
-                    "ariadne:hover:bg-violet-50", # Purple hover state based on Figma
-                    "ariadne:hover:text-violet-700", # Text color on hover
-                    "ariadne:dark:hover:bg-violet-900",
-                    "ariadne:dark:hover:text-violet-300",
-                  ]
-                end
-
                 yes do
                   [
-                    "ariadne:text-violet-700", # Purple active text based on Figma
-                    "ariadne:bg-violet-50", # Light purple background
-                    "ariadne:dark:text-violet-300",
-                    "ariadne:dark:bg-violet-900",
+                    "ariadne:bg-purple-700/20",
+                    "ariadne:dark:bg-purple-300/20",
                   ]
                 end
               end
@@ -75,4 +72,4 @@ module Ariadne
       end
     end
   end
-end 
+end

data/app/components/ariadne/ui/table/component.rb

@@ -11,6 +11,18 @@ module Ariadne
         renders_many :rows, Ariadne::UI::Table::Row::Component
         renders_one :footer, Ariadne::UI::Table::Footer::Component
 
+        # TODO: Add hoverable variant to make the table rows hoverable
+        # variant :hoverable do
+        #   style(:row) do
+        #     base do
+        #       [
+        #         "ariadne:hover:bg-purple-300/50",
+        #         "ariadne:hover:dark:bg-purple-600/50",
+        #       ]
+        #     end
+        #   end
+        # end
+
         style :table do
           base do
             [

data/app/components/ariadne/ui/table/row/component.rb

@@ -23,10 +23,10 @@ module Ariadne
           style :row do
             base do
               [
-                "ariadne:border-b",
                 "ariadne:transition-colors",
-                "ariadne:hover:bg-muted/50",
-                "ariadne:data-[state=selected]:bg-muted",
+                "ariadne:border-b",
+                "ariadne:border-gray-200",
+                "ariadne:dark:border-gray-800",
               ]
             end
           end

data/app/components/ariadne/ui/typography/component.rb

@@ -4,7 +4,7 @@
 module Ariadne
   module UI
     module Typography
-      VALID_TYPES = [:title, :heading, :subheading, :ann, :lede, :code].freeze
+      VALID_TYPES = [:title, :heading, :subheading, :ann, :lede, :code, :text].freeze
 
       class Component < Ariadne::BaseComponent
         option :tag, optional: true
@@ -50,6 +50,12 @@ module Ariadne
 
           variants do
             size do
+              xs do
+                [
+                  "ariadne:text-xs",
+                ]
+              end
+
               sm do
                 [
                   "ariadne:text-sm",