lightning_ui_kit 0.3.5 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7e554be66f8c80814c1acb57071b7ebdd1f28fe1b95254388233308f0dedf7d
-  data.tar.gz: e7d309b1619323f7088b6bbb798dac6a924ffff6355a5bfa7bb13222d98805e1
+  metadata.gz: 77ac7997e0454f44628404c5dffa3b4137bb4ce16433be36427ac06ca6529fdd
+  data.tar.gz: e34e0a3c0a5b647fe7617cde5519155b668c1c80511f7db4703fc251c6a042f7
 SHA512:
-  metadata.gz: 6e99727767d4fbd1fcbbd0f815952ea870346272f403a846ecb3c7e9eb98ac20ca472059c2f3475dc520badae577a49a8afc7fb87f2e751f058fcb3492475488
-  data.tar.gz: 2622f9188c2877f6cc09f5d6ef31c59a67ab69687149bf41467bc3c07c85beb72d7c7a5dd7300524b362c4316d88559f9ee6c511a24063c724e0c0a76b0042bf
+  metadata.gz: 39d9f19c2d4a212f8d6eac51547e91d01ebf6b2b2728906c4d862d0ce0c6040db5350ecab201fd6c51818db865f08dd0c62f4b9ccbfe26af6344fee870c9d55d
+  data.tar.gz: 40d0ff1fff9115ec65111a32843e1900c568158314a003cc598b68cb5ebddb6866ad361ab89e1e487c5905a08e90918e33fac035820255cfbcef4a42b42e195e

data/README.md

@@ -80,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_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

@@ -50,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 ===== */