lightning_ui_kit 0.3.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86220a49aeb80d07917a5d0fa3a221886dba5be1a44fdadf106b68a93b8ed4d8
-  data.tar.gz: 5e5245d824319823dc9a97850fc10834dc708f07e767667985f2f0399dadc95a
+  metadata.gz: 77ac7997e0454f44628404c5dffa3b4137bb4ce16433be36427ac06ca6529fdd
+  data.tar.gz: e34e0a3c0a5b647fe7617cde5519155b668c1c80511f7db4703fc251c6a042f7
 SHA512:
-  metadata.gz: 8b7a5a45bbebae22b04a2f5b0269f40f2f2d87bf774076543e1627ed3d35062ebec3611a4b0704b2c39410e307363f05b39704618b64356fd68505f1061ac1c3
-  data.tar.gz: f8e33c885b762da24e39222318de87a6a5eb5f6084ee1ceb6dc9fedbbfdc2e8d6c15461c58855807f36d42b47d3abeebcc32bcc5484c16ccdc93943acc0628aa
+  metadata.gz: 39d9f19c2d4a212f8d6eac51547e91d01ebf6b2b2728906c4d862d0ce0c6040db5350ecab201fd6c51818db865f08dd0c62f4b9ccbfe26af6344fee870c9d55d
+  data.tar.gz: 40d0ff1fff9115ec65111a32843e1900c568158314a003cc598b68cb5ebddb6866ad361ab89e1e487c5905a08e90918e33fac035820255cfbcef4a42b42e195e

data/README.md

@@ -34,6 +34,8 @@ Use the `lui` helper to render components:
 <%= lui.button { "Click me" } %>
 <%= lui.button(style: :outline) { "Cancel" } %>
 <%= lui.button(style: :destructive, size: :small) { "Delete" } %>
+<%= lui.button(icon: "plus") { "Add Item" } %>
+<%= lui.button(size: :small, icon: "pencil") { "Edit" } %>
 ```
 
 ### Form Components
@@ -78,13 +80,44 @@ Use the `lui` helper to render components:
 <% end %>
 ```
 
+### Table with Selection, Bulk Actions, and Sorting
+
+The table supports opt-in row selection, bulk actions, sortable columns, and clickable rows. Order the data in your controller with the whitelist-safe `lui_sort` helper — the table reads the current sort state from the request params automatically:
+
+```ruby
+class OrdersController < ApplicationController
+  include LightningUiKit::Sortable
+
+  def index
+    @orders = lui_sort(Order.all, allowed: %w[number total], default: :number)
+  end
+end
+```
+
+```erb
+<%= form_with url: bulk_orders_path, method: :post do %>
+  <%= lui.table(
+    data: @orders,
+    selectable: true,
+    row_url: ->(order) { order_path(order) },
+    sort_key: :number
+  ) do |table| %>
+    <% table.with_bulk_actions do %>
+      <%= lui.button(style: :outline, size: :small, type: :submit) { "Archive" } %>
+    <% end %>
+    <% table.with_column("Order", sort_key: :number) { |order| order.number } %>
+    <% table.with_column("Total", sort_key: :total, align: :right) { |order| order.total } %>
+  <% end %>
+<% end %>
+```
+
 ### Available Components
 
-**Form**: `button`, `input`, `textarea`, `select`, `checkbox`, `switch`, `radio_group`, `combobox`, `file_input`, `dropzone`
+**Form**: `button`, `input`, `input_otp`, `textarea`, `select`, `checkbox`, `switch`, `radio_group`, `combobox`, `file_input`, `dropzone`, `slider`, `toggle`, `toggle_group`, `calendar`, `date_picker`
 
-**Display**: `text`, `badge`, `avatar`, `alert`, `banner`, `toast`, `skeleton`, `spinner`
+**Display**: `text`, `badge`, `avatar`, `alert`, `banner`, `toast`, `skeleton`, `spinner`, `progress`, `chart`
 
-**Structure**: `card`, `tabs`, `accordion`, `table`, `pagination`, `description_list`, `dropdown`, `modal`, `tooltip`, `layout` (frosted glass sidebar with backdrop blur), `sidebar`, `sidebar_section`, `sidebar_link`, `link`
+**Structure**: `card`, `separator`, `aspect_ratio`, `breadcrumb`, `collapsible`, `popover`, `hover_card`, `sheet`, `scroll_area`, `resizable`, `carousel`, `tabs`, `accordion`, `table` (with optional selection, bulk actions, sortable columns), `pagination`, `description_list`, `dropdown`, `context_menu`, `command`, `navigation_menu`, `menubar`, `modal`, `tooltip`, `layout` (frosted glass sidebar with backdrop blur), `auth_layout` (centered layout for sign in/sign up pages), `sidebar_section`, `sidebar_link`, `link`
 
 ### Alternative Syntax
 

data/app/assets/stylesheets/lightning_ui_kit/application.css

@@ -1,4 +1,5 @@
 @import "tailwindcss" prefix(lui);
+@source "../../components/**/*.rb";
 @import "./themes.css";
 
 @theme inline {
@@ -49,6 +50,12 @@
   --color-spinner-primary: var(--lui-theme-spinner-primary);
   --color-spinner-secondary: var(--lui-theme-spinner-secondary);
 
+  --color-chart-1: var(--lui-theme-chart-1);
+  --color-chart-2: var(--lui-theme-chart-2);
+  --color-chart-3: var(--lui-theme-chart-3);
+  --color-chart-4: var(--lui-theme-chart-4);
+  --color-chart-5: var(--lui-theme-chart-5);
+
   --animate-icon-bounce: icon-bounce 350ms ease-out;
 }
 

data/app/assets/stylesheets/lightning_ui_kit/themes.css

@@ -71,6 +71,13 @@
   /* Spinner */
   --lui-theme-spinner-primary: oklch(0.552 0.016 285.938);
   --lui-theme-spinner-secondary: oklch(0.872 0.01 258.338);
+
+  /* Chart */
+  --lui-theme-chart-1: oklch(0.646 0.222 41.116);
+  --lui-theme-chart-2: oklch(0.6 0.118 184.704);
+  --lui-theme-chart-3: oklch(0.398 0.07 227.392);
+  --lui-theme-chart-4: oklch(0.828 0.189 84.429);
+  --lui-theme-chart-5: oklch(0.769 0.188 70.08);
 }
 
 /* ===== Dark Theme ===== */
@@ -130,6 +137,13 @@
   /* Spinner */
   --lui-theme-spinner-primary: oklch(0.705 0.015 286.067);
   --lui-theme-spinner-secondary: oklch(0.442 0.017 285.786);
+
+  /* Chart */
+  --lui-theme-chart-1: oklch(0.488 0.243 264.376);
+  --lui-theme-chart-2: oklch(0.696 0.17 162.48);
+  --lui-theme-chart-3: oklch(0.769 0.188 70.08);
+  --lui-theme-chart-4: oklch(0.627 0.265 303.9);
+  --lui-theme-chart-5: oklch(0.645 0.246 16.439);
 }
 
 /* ===== Page Background Gradient ===== */