okonomi_ui_kit 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6b5c9889118d0c98bea77960f48a3ff9fb1fa514c5d4ebd9295efce29b63ab8
-  data.tar.gz: 11b96764a850723bc49e3219357525ef8027325b36877dac95b21cb727d0b336
+  metadata.gz: 551db2538043fad1c9fd39808d842e59677d1d24e63594062a5a9ef2192c8a4c
+  data.tar.gz: ca47522f33cb4bbbb4a41ebefc1f71ae456859f26a619ec1d710675d21f8bfd2
 SHA512:
-  metadata.gz: 2af055854b937f8e833e13faa2a9499442e0308c8f821dcaf3376c2127b37316320b0984e549e3a0f6a5d38693d4fac019ec13c4b329f2b04ba3a91e4fcc0597
-  data.tar.gz: 84f37782710b0c70b2f395cdd03735d0d0535beb0a1e640ca770b96620d1b14bdd93d382424f460f03d4adb701daf9894cc8a9078378c275e4544eb71f92393e
+  metadata.gz: 101472f2cb7772ae3d003d608350823f66aac3c72af5d83ffe4eb57034d946702d40444b632ac2ab23d1f593cdb075e98b4a228cd5387198533837734fea0d38
+  data.tar.gz: 0e9ec912fc8c2c1a4d1dbc867b1b6a991bcb4c18e45a739e3aef92e58978ece45d3e09419cbf4e52898475f1ea00e23d4aeb29ed321336c8a923c5a96afe1557

data/app/assets/builds/okonomi_ui_kit/application.tailwind.css

@@ -142,6 +142,7 @@
     --tracking-wider: 0.05em;
     --leading-tight: 1.25;
     --leading-relaxed: 1.625;
+    --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -1134,6 +1135,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .rounded-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
@@ -1347,6 +1351,9 @@
       background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
     }
   }
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -1832,6 +1839,9 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .mix-blend-difference {
+    mix-blend-mode: difference;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

data/app/helpers/okonomi_ui_kit/components/button_to.rb

@@ -9,7 +9,7 @@ module OkonomiUiKit
 
         variant = (html_options.delete(:variant) || "contained").to_sym
         color = (html_options.delete(:color) || "default").to_sym
-        
+
         # Extract icon configuration
         icon_config, html_options = extract_icon_config(html_options)
 

data/app/helpers/okonomi_ui_kit/components/navigation.rb

@@ -74,14 +74,22 @@ module OkonomiUiKit
         @links = []
       end
 
-      def nav_link(title, path, icon: nil, initials: nil, exact: false)
+      def nav_link(title, path, icon: nil, initials: nil, exact: false, target: nil)
+        options = {
+          exact: exact,
+          class: style(:link, :base),
+          active_class: style(:link, :active)
+        }
+
+        options[:target] = target if target.present?
+
         @links << view.tag.li do
           view.render "okonomi/components/navigation/link",
                       path: path,
                       title: title,
                       icon: icon,
                       initials: initials,
-                      exact: exact,
+                      options: options,
                       style_helper: self
         end
       end

data/app/helpers/okonomi_ui_kit/components/progress_bar.rb

@@ -0,0 +1,86 @@
+module OkonomiUiKit
+  module Components
+    class ProgressBar < OkonomiUiKit::Component
+      def render(value, options = {})
+        options = options.with_indifferent_access
+
+        # Extract options
+        color = (options.delete(:color) || :primary).to_sym
+        size = (options.delete(:size) || :md).to_sym
+        text = options.delete(:text)
+
+        # Ensure value is between 0 and 1
+        value = [ [ value.to_f, 0.0 ].max, 1.0 ].min
+        percentage = (value * 100).round
+
+        # Build classes
+        container_classes = tw_merge(
+          style(:container, :root),
+          style(:container, :sizes, size),
+          options.delete(:class)
+        )
+
+        bar_classes = tw_merge(
+          style(:bar, :root),
+          style(:bar, :colors, color),
+          style(:bar, :sizes, size),
+          percentage < 100 ? "animate-pulse" : nil
+        )
+
+        text_classes = tw_merge(
+          style(:text, :root),
+          style(:text, :sizes, size)
+        )
+
+        view.render(
+          template_path,
+          value: value,
+          percentage: percentage,
+          text: text,
+          container_classes: container_classes,
+          bar_classes: bar_classes,
+          text_classes: text_classes,
+          options: options
+        )
+      end
+
+      register_styles :default do
+        {
+          container: {
+            root: "w-full bg-gray-200 rounded-sm overflow-hidden relative",
+            sizes: {
+              sm: "h-2",
+              md: "h-4",
+              lg: "h-6"
+            }
+          },
+          bar: {
+            root: "h-full transition-all duration-300 ease-out",
+            colors: {
+              primary: "bg-primary-600",
+              secondary: "bg-secondary-600",
+              success: "bg-success-600",
+              danger: "bg-danger-600",
+              warning: "bg-warning-600",
+              info: "bg-info-600",
+              default: "bg-gray-600"
+            },
+            sizes: {
+              sm: "h-2",
+              md: "h-4",
+              lg: "h-6"
+            }
+          },
+          text: {
+            root: "absolute inset-0 flex items-center justify-center font-medium text-white mix-blend-difference",
+            sizes: {
+              sm: "text-xs",
+              md: "text-sm",
+              lg: "text-base"
+            }
+          }
+        }
+      end
+    end
+  end
+end

data/app/views/okonomi/components/navigation/_link.html.erb

@@ -1,13 +1,4 @@
-<%
-  # Get the main view context that has access to helpers
-  view_context = style_helper.view
-  
-  options = {
-    exact: defined?(exact) ? exact : false,
-    class: style_helper.style(:link, :base),
-    active_class: style_helper.style(:link, :active)
-  }
-%>
+<% view_context = style_helper.view %>
 <%= view_context.active_link_to path, options do %>
   <% if defined?(initials) && initials.present? %>
     <span class="<%= style_helper.style(:link, :initials, :base) %>"><%= initials %></span>

data/app/views/okonomi/components/progress_bar/_progress_bar.html.erb

@@ -0,0 +1,15 @@
+<div 
+  role="progressbar" 
+  aria-valuenow="<%= percentage %>"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  class="<%= container_classes %>"
+  <%= tag.attributes(options) %>
+>
+  <div class="<%= bar_classes %>" style="width: <%= percentage %>%"></div>
+  <% if text.present? %>
+    <div class="<%= text_classes %>">
+      <%= text %>
+    </div>
+  <% end %>
+</div>

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.11"
+  VERSION = "0.1.12"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.12
 platform: ruby
 authors:
 - Okonomi GmbH
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-05 00:00:00.000000000 Z
+date: 2025-08-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1397,6 +1397,7 @@ files:
 - app/helpers/okonomi_ui_kit/components/page.rb
 - app/helpers/okonomi_ui_kit/components/page_header.rb
 - app/helpers/okonomi_ui_kit/components/page_section.rb
+- app/helpers/okonomi_ui_kit/components/progress_bar.rb
 - app/helpers/okonomi_ui_kit/components/table.rb
 - app/helpers/okonomi_ui_kit/components/typography.rb
 - app/helpers/okonomi_ui_kit/config.rb
@@ -1434,6 +1435,7 @@ files:
 - app/views/okonomi/components/page/_page.html.erb
 - app/views/okonomi/components/page_header/_page_header.html.erb
 - app/views/okonomi/components/page_section/_page_section.html.erb
+- app/views/okonomi/components/progress_bar/_progress_bar.html.erb
 - app/views/okonomi/components/table/_table.html.erb
 - app/views/okonomi/components/typography/_typography.html.erb
 - app/views/okonomi/forms/tailwind/_checkbox_label.html.erb