lesli_view 1.1.2 → 1.1.3

data/lib/lesli_view/elements/button.css

@@ -0,0 +1,357 @@
+/*!
+
+Lesli
+
+Copyright (c) 2026, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see http://www.gnu.org/licenses/.
+
+Lesli · Ruby on Rails SaaS Development Framework.
+
+Made with ♥ by LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+@layer components {
+    .lesli-button:hover {
+        cursor: pointer;
+    }
+    .lesli-button {
+        @apply
+            cursor-pointer
+            inline-flex
+            items-center
+            justify-center
+            gap-2
+            border
+            rounded-lg
+            h-10
+            px-4
+            text-sm
+            font-medium
+            whitespace-nowrap
+            transition-colors
+            duration-150
+            focus:outline-none
+            focus-visible:ring-2
+            focus-visible:ring-offset-2
+            disabled:pointer-events-none
+            disabled:opacity-50;
+    }
+
+    .lesli-button.is-small {
+        @apply
+            h-8
+            rounded-md
+            px-3
+            text-xs;
+    }
+
+    .lesli-button.is-icon-only {
+        @apply
+            w-10
+            px-0;
+    }
+
+    .lesli-button.is-icon-only.is-small {
+        @apply
+            w-8
+            px-0;
+    }
+
+    .lesli-button.is-loading {
+        @apply
+            pointer-events-none
+            cursor-wait
+            opacity-80;
+    }
+
+    .lesli-button.is-loading::before {
+        width: 1rem;
+        height: 1rem;
+        content: "";
+        border: 2px solid currentColor;
+        border-right-color: transparent;
+        border-radius: 9999px;
+        animation: lesli-button-spin .65s linear infinite;
+    }
+
+    /*
+     * Solid variants
+     */
+
+    .lesli-button.is-primary {
+        @apply
+            border-blue-600
+            bg-blue-600
+            text-white
+            hover:border-blue-700
+            hover:bg-blue-700
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info {
+        @apply
+            border-sky-600
+            bg-sky-600
+            text-white
+            hover:border-sky-700
+            hover:bg-sky-700
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success {
+        @apply
+            border-emerald-600
+            bg-emerald-600
+            text-white
+            hover:border-emerald-700
+            hover:bg-emerald-700
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning {
+        @apply
+            border-amber-500
+            bg-amber-500
+            text-amber-950
+            hover:border-amber-600
+            hover:bg-amber-600
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger {
+        @apply
+            border-rose-600
+            bg-rose-600
+            text-white
+            hover:border-rose-700
+            hover:bg-rose-700
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Light variants
+     *
+     * These must come after solid variants.
+     */
+
+    .lesli-button.is-primary.is-light {
+        @apply
+            border-blue-100
+            bg-blue-50
+            text-blue-700
+            hover:border-blue-200
+            hover:bg-blue-100
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info.is-light {
+        @apply
+            border-sky-100
+            bg-sky-50
+            text-sky-700
+            hover:border-sky-200
+            hover:bg-sky-100
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success.is-light {
+        @apply
+            border-emerald-100
+            bg-emerald-50
+            text-emerald-700
+            hover:border-emerald-200
+            hover:bg-emerald-100
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning.is-light {
+        @apply
+            border-amber-100
+            bg-amber-50
+            text-amber-700
+            hover:border-amber-200
+            hover:bg-amber-100
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger.is-light {
+        @apply
+            border-rose-100
+            bg-rose-50
+            text-rose-700
+            hover:border-rose-200
+            hover:bg-rose-100
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Outlined variants
+     *
+     * These must come after solid and light variants.
+     */
+
+    .lesli-button.is-primary.is-outlined {
+        @apply
+            border-blue-300
+            bg-transparent
+            text-blue-700
+            hover:border-blue-400
+            hover:bg-blue-50
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info.is-outlined {
+        @apply
+            border-sky-300
+            bg-transparent
+            text-sky-700
+            hover:border-sky-400
+            hover:bg-sky-50
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success.is-outlined {
+        @apply
+            border-emerald-300
+            bg-transparent
+            text-emerald-700
+            hover:border-emerald-400
+            hover:bg-emerald-50
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning.is-outlined {
+        @apply
+            border-amber-300
+            bg-transparent
+            text-amber-700
+            hover:border-amber-400
+            hover:bg-amber-50
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger.is-outlined {
+        @apply
+            border-rose-300
+            bg-transparent
+            text-rose-700
+            hover:border-rose-400
+            hover:bg-rose-50
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Optional: light + outlined
+     */
+
+    .lesli-button.is-light.is-outlined {
+        @apply
+            bg-transparent;
+    }
+}
+
+@keyframes lesli-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+
+@layer components {
+    .lesli-icon {
+        @apply
+            inline-flex
+            items-center
+            justify-center
+            shrink-0
+            h-6
+            w-6
+            text-[1.5rem]
+            leading-none;
+    }
+
+    .lesli-icon.is-small {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+
+    .lesli-icon.is-medium {
+        @apply
+            h-8
+            w-8
+            text-[2rem];
+    }
+
+    .lesli-icon.is-large {
+        @apply
+            h-12
+            w-12
+            text-[3rem];
+    }
+
+    .lesli-icon .material-symbols,
+    .lesli-icon .material-symbols-outlined,
+    .lesli-icon .material-symbols-rounded,
+    .lesli-icon .material-symbols-sharp {
+        @apply
+            block
+            text-inherit
+            leading-none;
+    }
+
+    /*
+     * Button-specific icon sizing.
+     * This keeps icons visually balanced inside .lesli-button.
+     */
+    .lesli-button .lesli-icon {
+        @apply
+            h-5
+            w-5
+            text-[1.25rem];
+    }
+
+    .lesli-button.is-small .lesli-icon {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+
+    .lesli-button.is-icon-only .lesli-icon {
+        @apply
+            h-5
+            w-5
+            text-[1.25rem];
+    }
+
+    .lesli-button.is-icon-only.is-small .lesli-icon {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+}

data/lib/lesli_view/elements/button.html.erb

@@ -6,29 +6,32 @@
         @url,
         method: @method,
         params: @params,
-        class: html_classes,
-        data: { turbo_frame: "_top" },
-        **alpine_attributes) do %>
+        disabled: disabled?,
+        **common_attributes
+    ) do %>
         <%= button_content %>
     <% end %>
 
 <% elsif mode == :link %>
 
-    <%= link_to(
-        @url,
-        class: html_classes,
-        data: { turbo_frame: "_top" },
-        **alpine_attributes) do %>
-        <%= button_content %>
+    <% if disabled? %>
+        <%= content_tag(:span, role: "link", tabindex: -1, **common_attributes) do %>
+            <%= button_content %>
+        <% end %>
+    <% else %>
+        <%= link_to(@url, **common_attributes) do %>
+            <%= button_content %>
+        <% end %>
     <% end %>
 
 <% else %>
 
     <%= content_tag(
         :button,
-        type: "button",
-        class: html_classes,
-        **alpine_attributes) do %>
+        type: button_type,
+        disabled: disabled?,
+        **common_attributes
+    ) do %>
         <%= button_content %>
     <% end %>
 

data/lib/lesli_view/elements/button.rb

@@ -35,33 +35,38 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Button < ViewComponent::Base
-            attr_reader :label, :url, :icon, :loading, :solid, :info, :success, :warning, :danger, :small, :dispatch, :method, :params, :css_class
+            attr_reader :label, :url, :icon, :loading, :solid, :light,
+                :info, :success, :warning, :danger, :small, :dispatch,
+                :method, :params, :css_class, :aria_label, :disabled,
+                :button_type, :data
 
-            # Adds two numbers together.
-            # @param [Integer] a The first number.
-            # @param [Integer] b The second number.
-            # @return [Integer] The sum of the two numbers.
             def initialize(
-                label=nil, 
-                url:nil,
-                icon: nil, 
-                loading: false, 
-                solid: false, 
-                info: false, 
-                success: false, 
-                warning: false, 
-                danger: false, 
+                label = nil,
+                url: nil,
+                icon: nil,
+                loading: false,
+                solid: true,
+                light: false,
+                info: true,
+                success: false,
+                warning: false,
+                danger: false,
                 small: false,
-                dispatch:nil,
+                dispatch: nil,
                 method: nil,
-                params:nil,
-                css_class:nil
+                params: nil,
+                css_class: nil,
+                aria_label: nil,
+                disabled: false,
+                type: :button,
+                data: {}
             )
                 @label = label
                 @url = url
                 @icon = icon
                 @loading = loading
                 @solid = solid
+                @light = light
                 @info = info
                 @success = success
                 @warning = warning
@@ -71,6 +76,10 @@ module LesliView
                 @method = method
                 @params = params
                 @css_class = css_class
+                @aria_label = aria_label
+                @disabled = disabled
+                @button_type = type
+                @data = data
             end
 
             def mode
@@ -80,20 +89,22 @@ module LesliView
             end
 
             def alpine_attributes
-                return {} unless @dispatch
+                return {} unless dispatch.present?
 
                 {
-                "x-data": "",
-                "@click": "$dispatch('#{@dispatch}')"
+                    "x-data": "",
+                    "@click": "$dispatch('#{dispatch}')"
                 }
             end
 
             def html_classes
-                classes = ["button", button_variant]
-                classes << "is-light" << "is-outlined" unless solid
+                classes = ["lesli-button", button_variant]
+                classes << "is-outlined" unless solid
+                classes << "is-light" if light
                 classes << "is-loading" if loading
                 classes << "is-small" if small
-                classes << css_class 
+                classes << "is-icon-only" if icon_only?
+                classes << css_class if css_class.present?
                 classes.join(" ")
             end
 
@@ -106,21 +117,50 @@ module LesliView
             end
 
             def icon_only?
-                icon && !label
+                icon.present? && visible_label.blank?
+            end
+
+            def disabled?
+                disabled || loading
+            end
+
+            def visible_label
+                label.presence || (content if content?)
+            end
+
+            def accessible_label
+                aria_label.presence || (icon.to_s.humanize if icon_only?)
+            end
+
+            def html_data
+                { turbo_frame: "_top" }.merge(data || {})
+            end
+
+            def common_attributes
+                attributes = {
+                    class: html_classes,
+                    data: html_data,
+                    aria: {
+                        label: accessible_label,
+                        busy: loading || nil,
+                        disabled: disabled? || nil
+                    }.compact
+                }
+
+                attributes.merge(alpine_attributes)
             end
 
             def button_content
-                if @icon
-                    safe_join([
-                        content_tag(:span,
-                            content_tag(:span, @icon, class: "material-symbols"),
-                            class: "icon #{'is-small' if @small}"
-                        ),
-                        (@icon_only ? nil : content_tag(:span, @label))
-                    ].compact)
-                else
-                    @label
+                parts = []
+
+                if icon.present?
+                    parts << content_tag(:span, class: "lesli-icon", aria: { hidden: true }) do
+                        content_tag(:span, icon, class: "material-symbols")
+                    end
                 end
+
+                parts << content_tag(:span, visible_label) if visible_label.present?
+                safe_join(parts)
             end
         end  
     end

data/lib/lesli_view/elements/empty.html.erb

@@ -1,8 +1,33 @@
 
-<div class="lesli-empty has-text-centered">
-    <svg width="184" height="184" viewBox="0 0 184 184" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M145.271 90.6522H142.735V89.528C142.735 83.9793 138.222 79.4655 132.673 79.4655H85.7357C84.255 79.4655 82.1132 78.0942 81.4922 76.7515L76.1878 65.2544C74.1523 60.8499 68.9629 57.5293 64.1128 57.5293H39.7012C34.1524 57.5293 29.6387 62.043 29.6387 67.5918V151.809C29.6387 157.358 34.1524 161.872 39.7012 161.872H53.3459C53.5357 161.883 53.7139 161.932 53.9065 161.932H112.945V153.307H108.831H53.9065C53.7197 153.307 53.6219 153.278 53.5587 153.247C53.527 153.232 53.4897 153.215 53.481 153.206C53.458 153.181 53.412 153.045 53.4609 152.772L63.1985 101.419C63.4027 100.338 64.6849 99.2772 65.7803 99.2772H134.11H142.735H145.271C145.553 99.2772 145.679 99.349 145.697 99.3749C145.714 99.4008 145.766 99.533 145.714 99.809L142.735 115.524L135.979 151.159C135.775 152.24 134.493 153.301 133.395 153.301H121.964V161.926H133.395C138.621 161.926 143.48 157.904 144.455 152.767L154.189 101.413C154.713 98.6648 154.037 95.9163 152.341 93.8693C150.645 91.8281 148.069 90.6522 145.271 90.6522ZM134.11 90.6522H65.7832C60.5593 90.6522 55.7005 94.6743 54.7259 99.8119L44.9883 151.168C44.856 151.864 44.8043 152.56 44.8244 153.247H39.7012C38.922 153.247 38.2637 152.588 38.2637 151.809V67.5918C38.2637 66.8127 38.922 66.1543 39.7012 66.1543H64.1128C65.5934 66.1543 67.7353 67.5257 68.3563 68.8683L73.6607 80.3654C75.6962 84.7699 80.8855 88.0905 85.7357 88.0905H132.673C133.452 88.0905 134.11 88.7489 134.11 89.528V90.6522Z" fill="#BDBDBD"/>
-        <path d="M145.7 50.5227L153.201 43.0219C154.805 41.4176 154.739 38.7525 153.054 37.0677C151.369 35.383 148.704 35.3197 147.1 36.9211L139.599 44.422L132.098 36.9211C130.494 35.3169 127.829 35.383 126.144 37.0677C124.459 38.7525 124.396 41.4176 125.997 43.0219L133.498 50.5227L125.997 58.0236C124.393 59.6279 124.459 62.293 126.144 63.9777C127.829 65.6625 130.494 65.7257 132.098 64.1244L139.599 56.6235L147.1 64.1244C148.704 65.7286 151.369 65.6625 153.054 63.9777C154.739 62.293 154.802 59.6279 153.201 58.0236L145.7 50.5227Z" fill="#BDBDBD"/>
-    </svg>
-    <p class="has-text-grey"><%= @text %></p>
+<div
+    class="lesli-empty-state flex w-full flex-col items-center justify-center px-6 py-10 text-center sm:py-12"
+    role="region"
+    aria-label="<%= text.presence || "Empty state" %>">
+
+    <div class="mb-5 flex h-36 w-36 items-center justify-center rounded-full bg-slate-100/80 sm:h-40 sm:w-40">
+        <svg
+            class="h-28 w-28 text-slate-300 sm:h-32 sm:w-32"
+            viewBox="0 0 184 184"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false">
+            <path d="M145.271 90.6522H142.735V89.528C142.735 83.9793 138.222 79.4655 132.673 79.4655H85.7357C84.255 79.4655 82.1132 78.0942 81.4922 76.7515L76.1878 65.2544C74.1523 60.8499 68.9629 57.5293 64.1128 57.5293H39.7012C34.1524 57.5293 29.6387 62.043 29.6387 67.5918V151.809C29.6387 157.358 34.1524 161.872 39.7012 161.872H53.3459C53.5357 161.883 53.7139 161.932 53.9065 161.932H112.945V153.307H108.831H53.9065C53.7197 153.307 53.6219 153.278 53.5587 153.247C53.527 153.232 53.4897 153.215 53.481 153.206C53.458 153.181 53.412 153.045 53.4609 152.772L63.1985 101.419C63.4027 100.338 64.6849 99.2772 65.7803 99.2772H134.11H142.735H145.271C145.553 99.2772 145.679 99.349 145.697 99.3749C145.714 99.4008 145.766 99.533 145.714 99.809L142.735 115.524L135.979 151.159C135.775 152.24 134.493 153.301 133.395 153.301H121.964V161.926H133.395C138.621 161.926 143.48 157.904 144.455 152.767L154.189 101.413C154.713 98.6648 154.037 95.9163 152.341 93.8693C150.645 91.8281 148.069 90.6522 145.271 90.6522ZM134.11 90.6522H65.7832C60.5593 90.6522 55.7005 94.6743 54.7259 99.8119L44.9883 151.168C44.856 151.864 44.8043 152.56 44.8244 153.247H39.7012C38.922 153.247 38.2637 152.588 38.2637 151.809V67.5918C38.2637 66.8127 38.922 66.1543 39.7012 66.1543H64.1128C65.5934 66.1543 67.7353 67.5257 68.3563 68.8683L73.6607 80.3654C75.6962 84.7699 80.8855 88.0905 85.7357 88.0905H132.673C133.452 88.0905 134.11 88.7489 134.11 89.528V90.6522Z" fill="currentColor"/>
+            <path d="M145.7 50.5227L153.201 43.0219C154.805 41.4176 154.739 38.7525 153.054 37.0677C151.369 35.383 148.704 35.3197 147.1 36.9211L139.599 44.422L132.098 36.9211C130.494 35.3169 127.829 35.383 126.144 37.0677C124.459 38.7525 124.396 41.4176 125.997 43.0219L133.498 50.5227L125.997 58.0236C124.393 59.6279 124.459 62.293 126.144 63.9777C127.829 65.6625 130.494 65.7257 132.098 64.1244L139.599 56.6235L147.1 64.1244C148.704 65.7286 151.369 65.6625 153.054 63.9777C154.739 62.293 154.802 59.6279 153.201 58.0236L145.7 50.5227Z" fill="currentColor"/>
+        </svg>
+    </div>
+
+    <% if text.present? %>
+        <p class="text-base font-semibold text-slate-700 sm:text-lg"><%= text %></p>
+    <% end %>
+
+    <% if description.present? %>
+        <p class="mt-2 max-w-md text-sm leading-6 text-slate-500"><%= description %></p>
+    <% end %>
+
+    <% if content? %>
+        <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+            <%= content %>
+        </div>
+    <% end %>
 </div>

data/lib/lesli_view/elements/empty.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -32,8 +34,13 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Empty < ViewComponent::Base
-            def initialize(text: "No data found")
+            attr_reader :text, :description
+
+            # `text` remains optional for icon-only uses such as error pages.
+            # A component block can be supplied to render an action below the message.
+            def initialize(text: "No data found", description: nil)
                 @text = text
+                @description = description
             end
         end
     end

data/lib/lesli_view/elements/table-chart.html.erb

@@ -0,0 +1,42 @@
+distribution: [{
+    label: "Deactivated_users",
+    value: summary[:total_users_deactivated],
+    percentage: percentage(summary[:total_users_deactivated], summary[:total_users]),
+    color: "#5D7C4D"
+}, {
+    label: "Locked_users",
+    value: summary[:total_users_locked],
+    percentage: percentage(summary[:total_users_locked], summary[:total_users]),
+    color: "#B23A3A"
+}, {
+    label: "Unconfirmed_users",
+    value: summary[:total_users_unconfirmed],
+    percentage: percentage(summary[:total_users_unconfirmed], summary[:total_users]),
+    color: "#5F6C7D"
+}, {
+    label: "Deleted_users",
+    value: summary[:total_users_deleted],
+    percentage: percentage(summary[:total_users_deleted], summary[:total_users]),
+    color: "#4B5FA8"
+}],
+<%= render(LesliView::Elements::Table.new(columns: [])) do |table| %>
+    <% @users[:distribution].each do |user| %>
+        <% table.with_row do |row| %>
+            <% row.with_cell do %>
+                <%= user[:label] %>
+            <% end %>
+            <% row.with_cell(class_name: "w-full p-0") do %>
+                <p style="padding:8px;border-radius:4px;background:<%= user[:color] %>;width:<%= user[:percentage] %>%">
+                </p>
+            <% end %>
+            <% row.with_cell(align: :right) do %>
+                <%= user[:value] %>
+            <% end %>
+            <% row.with_cell(align: :right) do %>
+                <span class="font-semibold text-slate-400">
+                    <%= user[:percentage] %>%
+                </span>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>