okonomi_ui_kit 0.1.11 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6b5c9889118d0c98bea77960f48a3ff9fb1fa514c5d4ebd9295efce29b63ab8
-  data.tar.gz: 11b96764a850723bc49e3219357525ef8027325b36877dac95b21cb727d0b336
+  metadata.gz: adca3d7c87bf516fc8f0e4d46eaab53f413939422d69d764333c4567c4cb851c
+  data.tar.gz: 229d5bad01930a081e3ed1350ef7c4aff21f00c00aa30603f0e63f6dc062d324
 SHA512:
-  metadata.gz: 2af055854b937f8e833e13faa2a9499442e0308c8f821dcaf3376c2127b37316320b0984e549e3a0f6a5d38693d4fac019ec13c4b329f2b04ba3a91e4fcc0597
-  data.tar.gz: 84f37782710b0c70b2f395cdd03735d0d0535beb0a1e640ca770b96620d1b14bdd93d382424f460f03d4adb701daf9894cc8a9078378c275e4544eb71f92393e
+  metadata.gz: 66ad9faf08d8102a80cd968b8866dc7969d8e96698ba34a1498cabaadac92cd8cf04e0e1720574bd199d2b45a73c664737ad1e834499a5cd9edd28cb7314ca00
+  data.tar.gz: 6877453a2cc1440568b5aa85e34b47597dfbeca1a1de7ba01b121ea79a500bcabb24d99aae9499bfaecc4e8e279cb6e4c53c424ef09d2b3d16ba333e85b18175

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;
@@ -659,6 +660,9 @@
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -1134,6 +1138,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 +1354,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);
   }
@@ -1356,6 +1366,9 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
@@ -1832,6 +1845,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);
@@ -1971,6 +1987,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .ease-in {
     --tw-ease: var(--ease-in);
     transition-timing-function: var(--ease-in);

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/javascript/okonomi_ui_kit/controllers/form_field_visibility_controller.js

@@ -4,7 +4,6 @@ export default class extends Controller {
   static values = { fieldId: String, equals: String }
 
   connect() {
-    console.log("FormFieldVisibilityController connected")
     this.field = document.getElementById(this.fieldIdValue)
     if (this.field) {
       this.toggle()
@@ -15,10 +14,10 @@ export default class extends Controller {
   toggle() {
     let currentValue
 
-    if (this.field.type === "checkbox") {
-      currentValue = this.field.checked ? this.field.value : null
+    if (this.field.type === "checkbox" || this.field.type === "radio") {
+      currentValue = this.field.checked ? this.field.value : null;
     } else {
-      currentValue = this.field.value
+      currentValue = this.field.value;
     }
 
     const shouldShow = currentValue === this.equalsValue

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.13"
 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.13
 platform: ruby
 authors:
 - Okonomi GmbH
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-05 00:00:00.000000000 Z
+date: 2025-08-07 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