okonomi_ui_kit 0.1.8 → 0.1.9

data/app/views/okonomi/forms/tailwind/_multi_select.html.erb

@@ -5,11 +5,9 @@
 <% associated_class = association.klass %>
 <% associated_records = options[:collection] || associated_class.all %>
 
-<% p associated_records %>
-
-<div class="grid grid-cols-2 gap-2">
+<div class="<%= component.style(:wrapper) %>">
   <% associated_records.each do |record| %>
-    <div class="flex items-center">
+    <div class="<%= component.style(:item) %>">
       <% id = "#{method}_#{record.id}" %>
       <%= form.check_box_with_label method, { label: record.send(options[:label] || :name), multiple: true, id: id, checked: form.object.send(method).include?(record) }, record.id, nil %>
     </div>

data/app/views/okonomi/forms/tailwind/_upload_field.html.erb

@@ -1,24 +1,24 @@
 <div
   data-controller="upload"
   data-upload-target="dropzone"
-  class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center cursor-pointer hover:bg-gray-50 relative"
+  class="<%= component.style(:dropzone) %>"
 >
-  <%= form.label method, class: "block cursor-pointer" do %>
-    <div class="flex flex-col items-center text-gray-600 space-y-2">
-      <div data-upload-target="preview" class="w-full flex justify-center items-center">
+  <%= form.label method, class: component.style(:label) do %>
+    <div class="<%= component.style(:content) %>">
+      <div data-upload-target="preview" class="<%= component.style(:preview) %>">
         <% if form.object.send(method).attached? %>
           <% blob = form.object.send(method).blob %>
           <% if blob.image? %>
-            <%= image_tag url_for(blob), class: "max-h-32" %>
+            <%= image_tag url_for(blob), class: component.style(:preview_image) %>
           <% else %>
-            <%= ui.icon("heroicons/solid/document", class: "size-12 text-gray-400") %>
+            <%= ui.icon("heroicons/solid/document", class: component.style(:icon)) %>
           <% end %>
         <% else %>
-          <%= ui.icon("heroicons/solid/plus", class: "size-12 w-12 text-gray-400") %>
+          <%= ui.icon("heroicons/solid/plus", class: component.style(:icon)) %>
         <% end %>
       </div>
 
-      <p class="text-sm text-gray-500" data-upload-target="filename">
+      <p class="<%= component.style(:filename) %>" data-upload-target="filename">
         <% if form.object.send(method).attached? %>
           <%= form.object.send(method).filename %>
         <% else %>
@@ -28,7 +28,7 @@
     </div>
 
     <%= form.file_field method,
-                        class: "hidden",
+                        class: component.style(:file_input),
                         data: {
                           upload_target: "input",
                           action: "change->upload#updatePreview"
@@ -39,7 +39,7 @@
 
   <button type="button"
           data-action="upload#clear"
-          class="absolute top-2 right-2 bg-red-100 text-red-700 px-2 py-1 text-xs rounded hover:bg-red-200">
+          class="<%= component.style(:clear_button) %>">
     Clear
   </button>
 </div>

data/config/importmap.rb

@@ -4,4 +4,4 @@ pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 
 pin "okonomi_ui_kit", to: "okonomi_ui_kit/application.js", preload: true
-pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"
+pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"

data/lib/okonomi_ui_kit/engine.rb

@@ -22,7 +22,6 @@ module OkonomiUiKit
       ActiveSupport.on_load(:action_view) do
         include OkonomiUiKit::ApplicationHelper
         include OkonomiUiKit::AttributeSectionHelper
-        include OkonomiUiKit::NavigationHelper
         include OkonomiUiKit::UiHelper
 
         ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.8"
+  VERSION = "0.1.9"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.9
 platform: ruby
 authors:
 - Okonomi GmbH
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-01 00:00:00.000000000 Z
+date: 2025-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1358,6 +1358,7 @@ files:
 - app/helpers/okonomi_ui_kit/application_helper.rb
 - app/helpers/okonomi_ui_kit/attribute_section_helper.rb
 - app/helpers/okonomi_ui_kit/component.rb
+- app/helpers/okonomi_ui_kit/components.rb
 - app/helpers/okonomi_ui_kit/components/alert.rb
 - app/helpers/okonomi_ui_kit/components/badge.rb
 - app/helpers/okonomi_ui_kit/components/breadcrumbs.rb
@@ -1365,18 +1366,41 @@ files:
 - app/helpers/okonomi_ui_kit/components/button_tag.rb
 - app/helpers/okonomi_ui_kit/components/button_to.rb
 - app/helpers/okonomi_ui_kit/components/code.rb
+- app/helpers/okonomi_ui_kit/components/confirmation_modal.rb
+- app/helpers/okonomi_ui_kit/components/forms.rb
+- app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb
+- app/helpers/okonomi_ui_kit/components/forms/collection_select.rb
+- app/helpers/okonomi_ui_kit/components/forms/date_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/email_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/field.rb
+- app/helpers/okonomi_ui_kit/components/forms/field_set.rb
+- app/helpers/okonomi_ui_kit/components/forms/input_base.rb
+- app/helpers/okonomi_ui_kit/components/forms/label.rb
+- app/helpers/okonomi_ui_kit/components/forms/multi_select.rb
+- app/helpers/okonomi_ui_kit/components/forms/number_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/password_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/search_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/select.rb
+- app/helpers/okonomi_ui_kit/components/forms/show_if.rb
+- app/helpers/okonomi_ui_kit/components/forms/telephone_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/text_area.rb
+- app/helpers/okonomi_ui_kit/components/forms/text_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/time_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/upload_field.rb
+- app/helpers/okonomi_ui_kit/components/forms/url_field.rb
 - app/helpers/okonomi_ui_kit/components/icon.rb
 - app/helpers/okonomi_ui_kit/components/link_to.rb
+- app/helpers/okonomi_ui_kit/components/navigation.rb
 - app/helpers/okonomi_ui_kit/components/page.rb
 - app/helpers/okonomi_ui_kit/components/table.rb
 - app/helpers/okonomi_ui_kit/components/typography.rb
 - app/helpers/okonomi_ui_kit/config.rb
+- app/helpers/okonomi_ui_kit/configs.rb
 - app/helpers/okonomi_ui_kit/form_builder.rb
-- app/helpers/okonomi_ui_kit/navigation_helper.rb
+- app/helpers/okonomi_ui_kit/form_component.rb
 - app/helpers/okonomi_ui_kit/svg_icons.rb
 - app/helpers/okonomi_ui_kit/t_w_merge.rb
-- app/helpers/okonomi_ui_kit/theme.rb
-- app/helpers/okonomi_ui_kit/theme_helper.rb
 - app/helpers/okonomi_ui_kit/ui_helper.rb
 - app/javascript/okonomi_ui_kit/application.js
 - app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js
@@ -1394,20 +1418,22 @@ files:
 - app/views/okonomi/components/alert/_alert.html.erb
 - app/views/okonomi/components/breadcrumbs/_breadcrumbs.html.erb
 - app/views/okonomi/components/code/_code.html.erb
+- app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb
+- app/views/okonomi/components/forms/check_box_with_label/_check_box_with_label.html.erb
+- app/views/okonomi/components/forms/field/_field.html.erb
+- app/views/okonomi/components/forms/field_set/_field_set.html.erb
+- app/views/okonomi/components/forms/upload_field/_upload_field.html.erb
 - app/views/okonomi/components/icon/_icon.html.erb
+- app/views/okonomi/components/navigation/_link.html.erb
+- app/views/okonomi/components/navigation/_navigation.html.erb
 - app/views/okonomi/components/page/_page.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
 - app/views/okonomi/forms/tailwind/_field.html.erb
-- app/views/okonomi/forms/tailwind/_field_set.html.erb
 - app/views/okonomi/forms/tailwind/_multi_select.html.erb
 - app/views/okonomi/forms/tailwind/_radio_button.html.erb
 - app/views/okonomi/forms/tailwind/_upload_field.html.erb
-- app/views/okonomi/modals/_confirmation_modal.html.erb
-- app/views/okonomi/navigation/_link.html.erb
-- app/views/okonomi/navigation/_menu.html.erb
-- app/views/okonomi/navigation/_navbar.html.erb
 - app/views/okonomi/page_builder/_page.html.erb
 - app/views/okonomi/tables/_table.html.erb
 - config/importmap.rb

data/app/helpers/okonomi_ui_kit/navigation_helper.rb

@@ -1,72 +0,0 @@
-module OkonomiUiKit
-  module NavigationHelper
-  def navigation_menu(**options, &block)
-    builder = NavigationBuilder.new(self)
-    render 'okonomi/navigation/menu', builder: builder, options: options, &block
-  end
-
-  class NavigationBuilder
-    include ActionView::Helpers::TagHelper
-    include ActionView::Helpers::CaptureHelper
-
-    def initialize(template)
-      @template = template
-    end
-
-    def group(title, &block)
-      group_builder = NavigationGroupBuilder.new(@template)
-      content = capture(group_builder, &block)
-      
-      tag.li do
-        tag.div(title, class: "text-xs/6 font-semibold text-gray-400") +
-        tag.ul(content, role: "list", class: "-mx-2 mt-2 space-y-1")
-      end
-    end
-
-    def profile_section(&block)
-      content = capture(&block)
-      tag.li(content, class: "-mx-6 mt-auto")
-    end
-
-    private
-
-    def tag
-      @template.tag
-    end
-
-    def capture(*args, &block)
-      @template.capture(*args, &block)
-    end
-  end
-
-  class NavigationGroupBuilder
-    include ActionView::Helpers::TagHelper
-    include ActionView::Helpers::CaptureHelper
-
-    def initialize(template)
-      @template = template
-    end
-
-    def nav_link(title, path, icon: nil, initials: nil, exact: false)
-      tag.li do
-        @template.render "okonomi/navigation/link",
-                        path: path, 
-                        title: title, 
-                        icon: icon,
-                        initials: initials,
-                        exact: exact
-      end
-    end
-
-    private
-
-    def tag
-      @template.tag
-    end
-
-    def capture(*args, &block)
-      @template.capture(*args, &block)
-    end
-  end
-  end
-end

data/app/helpers/okonomi_ui_kit/theme.rb

@@ -1,136 +0,0 @@
-module OkonomiUiKit
-  module Theme
-    LIGHT_THEME = {
-      components: {
-        link: {
-          root: "hover:cursor-pointer text-sm",
-          outlined: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
-            colors: {
-              default: "bg-white text-default-700 border-default-700 hover:bg-default-50",
-              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50",
-              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50",
-              success: "bg-white text-success-600 border-success-600 hover:bg-success-50",
-              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50",
-              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50",
-              info: "bg-white text-info-600 border-info-600 hover:bg-info-50"
-            }
-          },
-          contained: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
-            colors: {
-              default: "border-default-700 bg-default-600 text-white hover:bg-default-700",
-              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700",
-              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700",
-              success: "border-success-700 bg-success-600 text-white hover:bg-success-700",
-              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700",
-              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700",
-              info: "border-info-700 bg-info-600 text-white hover:bg-info-700"
-            }
-          },
-          text: {
-            root: "text-base",
-            colors: {
-              default: "text-default-700 hover:underline",
-              primary: "text-primary-600 hover:underline",
-              secondary: "text-secondary-600 hover:underline",
-              success: "text-success-600 hover:underline",
-              danger: "text-danger-600 hover:underline",
-              warning: "text-warning-600 hover:underline",
-              info: "text-info-600 hover:underline"
-            }
-          }
-        },
-        input: {
-          types: {
-            text: {
-              root: "w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none focus-within:ring-1",
-              error: "bg-danger-100 text-danger-400 ring-danger-400 focus:ring-danger-600",
-              valid: "text-default-700 ring-gray-300 focus-within:ring-gray-400",
-              disabled: "disabled:bg-gray-50 disabled:cursor-not-allowed"
-            }
-          }
-        },
-        select: {
-          root: "col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-8 pl-3 text-base outline-1 focus:outline-none sm:text-sm/6",
-          error: "bg-danger-100 text-danger-400 ring-1 ring-danger-400",
-          valid: "bg-white outline-default-300 text-default-700",
-          wrapper: "grid grid-cols-1",
-          icon: {
-            file: 'heroicons/solid/chevron-down',
-            class: "pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
-          }
-        },
-        label: {
-          root: "block text-sm/6 font-medium text-default-700"
-        },
-        checkbox: {
-          wrapper: "flex gap-4 items-center",
-          input: {
-            root: "cursor-pointer size-5 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600"
-          },
-          label: {
-            root: "cursor-pointer font-medium text-gray-700"
-          },
-          hint: {
-            root: "cursor-pointer text-sm text-gray-400"
-          }
-        },
-        modal: {
-          backdrop: "fixed inset-0 bg-gray-500/75 transition-opacity duration-300 ease-out opacity-0",
-          container: "fixed inset-0 z-10 w-screen overflow-y-auto",
-          wrapper: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0",
-          panel: {
-            base: "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all duration-300 ease-out sm:my-8 sm:w-full sm:p-6 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-            sizes: {
-              sm: "sm:max-w-sm",
-              md: "sm:max-w-lg", 
-              lg: "sm:max-w-2xl",
-              xl: "sm:max-w-4xl"
-            }
-          },
-          close_button: {
-            wrapper: "absolute top-0 right-0 hidden pt-4 pr-4 sm:block",
-            button: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
-            icon: {
-              file: "heroicons/outline/x-mark",
-              class: "size-6"
-            }
-          },
-          icon: {
-            wrapper: "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10",
-            class: "size-6",
-            variants: {
-              warning: {
-                wrapper: "bg-red-100",
-                icon: "text-red-600",
-                file: "heroicons/outline/exclamation-triangle"
-              },
-              info: {
-                wrapper: "bg-blue-100",
-                icon: "text-blue-600", 
-                file: "heroicons/outline/information-circle"
-              },
-              success: {
-                wrapper: "bg-green-100",
-                icon: "text-green-600",
-                file: "heroicons/outline/check-circle"
-              }
-            }
-          },
-          content: {
-            wrapper: "sm:flex sm:items-start",
-            text_wrapper: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left",
-            title: "text-base font-semibold text-gray-900",
-            message: "mt-2 text-sm text-gray-500"
-          },
-          actions: {
-            wrapper: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"
-          }
-        }
-      }
-    }
-
-    DEFAULT_THEME = LIGHT_THEME
-  end
-end

data/app/helpers/okonomi_ui_kit/theme_helper.rb

@@ -1,17 +0,0 @@
-module OkonomiUiKit
-  module ThemeHelper
-    def theme(t = {}, &block)
-      old_theme = theme
-
-      @_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
-
-      yield(@_okonomi_ui_kit_theme)
-
-      @_okonomi_ui_kit_theme = old_theme
-    end
-
-    def get_theme
-      @_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
-    end
-  end
-end

data/app/views/okonomi/forms/tailwind/_field_set.html.erb

@@ -1,3 +0,0 @@
-<div class="w-full flex flex-col gap-4 col-span-1 sm:col-span-3 md:col-span-5">
-  <%= yield %>
-</div>

data/app/views/okonomi/modals/_confirmation_modal.html.erb

@@ -1,77 +0,0 @@
-<div data-controller="modal" 
-     data-modal-size-value="<%= options[:size] %>" 
-     <% if options[:auto_open] %>data-modal-auto-open-value="true"<% end %>
-     class="relative z-10" 
-     style="display: none;" 
-     data-modal-target="container"
-     <%= ui.modal_data_attributes(options) %>>
-  
-  <!-- Backdrop -->
-  <div class="<%= ui.get_theme.dig(:components, :modal, :backdrop) %>" 
-       data-modal-target="backdrop" 
-       data-action="click->modal#close"
-       aria-hidden="true"></div>
-  
-  <!-- Modal container -->
-  <div class="<%= ui.get_theme.dig(:components, :modal, :container) %>">
-    <div class="<%= ui.get_theme.dig(:components, :modal, :wrapper) %>">
-      <!-- Modal panel -->
-      <div class="<%= ui.modal_panel_class(options[:size]) %>" 
-           data-modal-target="panel"
-           role="dialog" 
-           aria-modal="true" 
-           aria-labelledby="modal-title">
-        
-        <!-- Close button -->
-        <div class="<%= ui.get_theme.dig(:components, :modal, :close_button, :wrapper) %>">
-          <button type="button" 
-                  class="<%= ui.get_theme.dig(:components, :modal, :close_button, :button) %>" 
-                  data-action="click->modal#close">
-            <span class="sr-only">Close</span>
-            <%= ui.icon(ui.get_theme.dig(:components, :modal, :close_button, :icon, :file), 
-                         class: ui.get_theme.dig(:components, :modal, :close_button, :icon, :class)) %>
-          </button>
-        </div>
-        
-        <!-- Content -->
-        <div class="<%= ui.get_theme.dig(:components, :modal, :content, :wrapper) %>">
-          <!-- Icon -->
-          <div class="<%= ui.modal_icon_wrapper_class(options[:variant]) %>">
-            <%= ui.icon(ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :file), 
-                         class: [ui.get_theme.dig(:components, :modal, :icon, :class), 
-                                ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :icon)].join(' ')) %>
-          </div>
-          
-          <!-- Text content -->
-          <div class="<%= ui.get_theme.dig(:components, :modal, :content, :text_wrapper) %>">
-            <h3 id="modal-title" class="<%= ui.get_theme.dig(:components, :modal, :content, :title) %>">
-              <%= options[:title] %>
-            </h3>
-            <div class="<%= ui.get_theme.dig(:components, :modal, :content, :message) %>">
-              <p><%= options[:message] %></p>
-            </div>
-          </div>
-        </div>
-        
-        <!-- Actions -->
-        <div class="<%= ui.get_theme.dig(:components, :modal, :actions, :wrapper) %>">
-          <% if options[:has_custom_actions] %>
-            <%= yield %>
-          <% else %>
-            <% button_color = options[:variant] == :warning ? :danger : options[:variant] %>
-            <button type="button" 
-                    class="<%= ui.button_class(variant: :contained, color: button_color) %> sm:ml-3 sm:w-auto" 
-                    data-action="click->modal#confirm">
-              <%= options[:confirm_text] %>
-            </button>
-            <button type="button" 
-                    class="<%= ui.button_class(variant: :outlined, color: :default) %> mt-3 sm:mt-0 sm:w-auto" 
-                    data-action="click->modal#close">
-              <%= options[:cancel_text] %>
-            </button>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,15 +0,0 @@
-<%
-  options = {
-    exact: defined?(exact) ? exact : false,
-    class: "group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold hover:bg-gray-50 hover:text-primary-600 text-gray-700",
-    active_class: "group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold hover:bg-gray-50 hover:text-primary-600 bg-gray-50 text-primary-600",
-  }
-%>
-<%= active_link_to path, options do %>
-  <% if defined?(initials) && initials.present? %>
-    <span class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-primary-600 group-hover:text-primary-600"><%= initials %></span>
-  <% elsif defined?(icon) && icon.present? %>
-    <%= ui.icon icon, class: "size-6 text-gray-400 group-hover:text-primary-600" %>
-  <% end %>
-  <%= title %>
-<% end %>

data/app/views/okonomi/navigation/_menu.html.erb

@@ -1,3 +0,0 @@
-<ul role="list" class="flex flex-1 flex-col gap-y-7">
-  <%= yield(builder) %>
-</ul>

data/app/views/okonomi/navigation/_navbar.html.erb

@@ -1,105 +0,0 @@
-<nav class="border-b border-gray-200 bg-white">
-  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-    <div class="flex h-16 justify-between">
-      <div class="flex">
-        <div class="flex shrink-0 items-center">
-          <img class="block h-8 w-auto lg:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=primary&shade=600" alt="Your Company" />
-          <img class="hidden h-8 w-auto lg:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=primary&shade=600" alt="Your Company" />
-        </div>
-        <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
-          <!-- Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
-          <a href="#" class="inline-flex items-center border-b-2 border-primary-500 px-1 pt-1 text-sm font-medium text-gray-900" aria-current="page">Dashboard</a>
-          <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Team</a>
-          <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Projects</a>
-          <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Calendar</a>
-        </div>
-      </div>
-      <div class="hidden sm:ml-6 sm:flex sm:items-center">
-        <button type="button" class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-hidden">
-          <span class="absolute -inset-1.5"></span>
-          <span class="sr-only">View notifications</span>
-          <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
-          </svg>
-        </button>
-
-        <!-- Profile dropdown -->
-        <div class="relative ml-3">
-          <div>
-            <button type="button" class="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <span class="absolute -inset-1.5"></span>
-              <span class="sr-only">Open user menu</span>
-              <img class="size-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
-            </button>
-          </div>
-
-          <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-200"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
-          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-            <!-- Active: "bg-gray-100 outline-hidden", Not Active: "" -->
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
-          </div>
-        </div>
-      </div>
-      <div class="-mr-2 flex items-center sm:hidden">
-        <!-- Mobile menu button -->
-        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-hidden" aria-controls="mobile-menu" aria-expanded="false">
-          <span class="absolute -inset-0.5"></span>
-          <span class="sr-only">Open main menu</span>
-          <!-- Menu open: "hidden", Menu closed: "block" -->
-          <svg class="block size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <!-- Menu open: "block", Menu closed: "hidden" -->
-          <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="sm:hidden" id="mobile-menu">
-    <div class="space-y-1 pt-2 pb-3">
-      <!-- Current: "border-primary-500 bg-primary-50 text-primary-700", Default: "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" -->
-      <a href="#" class="block border-l-4 border-primary-500 bg-primary-50 py-2 pr-4 pl-3 text-base font-medium text-primary-700" aria-current="page">Dashboard</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Team</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Projects</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Calendar</a>
-    </div>
-    <div class="border-t border-gray-200 pt-4 pb-3">
-      <div class="flex items-center px-4">
-        <div class="shrink-0">
-          <img class="size-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
-        </div>
-        <div class="ml-3">
-          <div class="text-base font-medium text-gray-800">Tom Cook</div>
-          <div class="text-sm font-medium text-gray-500">tom@example.com</div>
-        </div>
-        <button type="button" class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-hidden">
-          <span class="absolute -inset-1.5"></span>
-          <span class="sr-only">View notifications</span>
-          <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
-          </svg>
-        </button>
-      </div>
-      <div class="mt-3 space-y-1">
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
-      </div>
-    </div>
-  </div>
-</nav>