keystone_ui 0.11.1 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24cf791aa7574c54fce5bde514cd2c23c9f1ed4ea3d1f8b878ed13bc544ec380
-  data.tar.gz: f36f715a3d2423e4cf94480785088673f481d3cbe5f9d46d8bd3013c977a4e2f
+  metadata.gz: 1ba08014c8024c4d2be934c04bf5986fabf96067a28816c89b27a68593865878
+  data.tar.gz: 22c8e2fe139a1cb802d7c7e694f54aa95f627f2a8eb0808f9ec65db78a5762ab
 SHA512:
-  metadata.gz: cefa7a60ca4be4b4aa123e60d26f623729f2c970fa3f581f17024858c713623484dc95f74bb0366f9d6c928c0a5c6f7480975403c65a5ceed1ccb81dd6b4ea33
-  data.tar.gz: 227693a252c9131d146089eaf36530a68d6994278233d81fd9c716f51a66af3bf4286fb3f0dc2f930f4589bac2f9bc82818c56ffba2abd18486610b77aa2544d
+  metadata.gz: 8115ce638bb73b100305498b251d5ce6a8d4993d82587061f74dfe24f04f5c039f5bfc33158661daf8d6e305e8c9b866c78ef70102be03e1a7da892b02170ffe
+  data.tar.gz: 7f92473cf68ce1eda055362700d86ac278844b4825763ea7b304dad3ddc0d2a2661b1572b8808a9d5043b36fafaf3518ebb00908b04f01f09910d9c74d08ce70

data/app/components/keystone/ui/alert_component.rb

@@ -3,35 +3,30 @@
 module Keystone
   module Ui
     class AlertComponent < ViewComponent::Base
-      BASE_CLASSES = "rounded-md p-4"
-
       TYPE_CLASSES = {
-        success: "bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300",
-        warning: "bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
-        error: "bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300"
+        info: "ks-alert-info",
+        success: "ks-alert-success",
+        warning: "ks-alert-warning",
+        error: "ks-alert-error"
       }.freeze
 
-      OUTER_CLASSES = "flex"
-      INNER_CLASSES = "flex-1"
-      TITLE_CLASSES = "font-semibold"
-      MESSAGE_CLASSES = "text-sm"
-      MESSAGE_WITH_TITLE_CLASSES = "text-sm mt-1"
-      DISMISS_CLASSES = "ml-auto -mr-1.5 -mt-1.5 inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer"
+      OUTER_CLASSES = "ks-alert-body"
+      INNER_CLASSES = "ks-alert-content"
+      TITLE_CLASSES = "ks-alert-title"
+      MESSAGE_CLASSES = "ks-alert-message"
+      MESSAGE_WITH_TITLE_CLASSES = "ks-alert-message-titled"
+      DISMISS_CLASSES = "ks-alert-dismiss"
 
-      def initialize(message:, type: :info, title: nil, dismissible: false)
+      def initialize(message:, type: :info, title: nil, dismissible: false, class: nil)
         @message = message
         @type = type
         @title = title
         @dismissible = dismissible
+        @extra_classes = binding.local_variable_get(:class)
       end
 
       def classes
-        type_css = if @type == :info
-          "bg-accent-50 text-accent-800 dark:bg-accent-900/30 dark:text-accent-300"
-        else
-          TYPE_CLASSES.fetch(@type)
-        end
-        "#{BASE_CLASSES} #{type_css}"
+        [ "ks-alert", TYPE_CLASSES.fetch(@type), @extra_classes ].compact.join(" ")
       end
 
       def message_text

data/app/components/keystone/ui/badge_component.rb

@@ -3,25 +3,24 @@
 module Keystone
   module Ui
     class BadgeComponent < ViewComponent::Base
-      BASE_CLASSES = "inline-flex items-center rounded-full px-2 py-1 text-xs font-medium"
-
       VARIANT_CLASSES = {
-        neutral: "bg-gray-100 text-gray-700 dark:bg-zinc-700 dark:text-gray-300",
-        success: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400",
-        danger: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400",
-        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400",
-        info: "bg-accent-100 text-accent-700 dark:bg-accent-900/50 dark:text-accent-400"
+        neutral: "ks-badge-neutral",
+        success: "ks-badge-success",
+        danger: "ks-badge-danger",
+        warning: "ks-badge-warning",
+        info: "ks-badge-info"
       }.freeze
 
       attr_reader :label
 
-      def initialize(label:, variant: :neutral)
+      def initialize(label:, variant: :neutral, class: nil)
         @label = label
         @variant = variant
+        @extra_classes = binding.local_variable_get(:class)
       end
 
       def classes
-        "#{BASE_CLASSES} #{VARIANT_CLASSES.fetch(@variant)}"
+        [ "ks-badge", VARIANT_CLASSES.fetch(@variant), @extra_classes ].compact.join(" ")
       end
     end
   end

data/app/components/keystone/ui/card_component.rb

@@ -3,30 +3,31 @@
 module Keystone
   module Ui
     class CardComponent < ViewComponent::Base
-      CARD_CLASSES = "overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700"
-      CARD_EDGE_CLASSES = "overflow-hidden border-y border-gray-200 bg-white sm:rounded-lg sm:border-x dark:bg-zinc-900 dark:border-zinc-700"
-      BODY_CLASSES = "px-4 py-4 sm:px-6 sm:pt-6 sm:pb-4"
-      CTA_CLASSES = "px-4 pb-4 sm:px-6 sm:pb-6"
-      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-white m-0"
-      SUMMARY_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400 mb-0"
-      LINK_BASE_CLASSES = "text-sm font-medium no-underline"
+      CARD_CLASSES = "ks-card"
+      CARD_EDGE_CLASSES = "ks-card-edge"
+      BODY_CLASSES = "ks-card-body"
+      CTA_CLASSES = "ks-card-cta"
+      TITLE_CLASSES = "ks-card-title"
+      SUMMARY_CLASSES = "ks-card-summary"
+      LINK_CLASSES = "ks-card-link"
 
-      def initialize(title:, summary:, link:, cta: "Read more", edge_to_edge: false)
+      def initialize(title:, summary:, link:, cta: "Read more", edge_to_edge: false, class: nil)
         @title = title
         @summary = summary
         @link = link
         @cta = cta
         @edge_to_edge = edge_to_edge
+        @extra_classes = binding.local_variable_get(:class)
       end
 
       def link_classes
-        "#{LINK_BASE_CLASSES} text-accent-600 hover:text-accent-900 dark:text-accent-400"
+        LINK_CLASSES
       end
 
       private
 
       def card_classes
-        @edge_to_edge ? CARD_EDGE_CLASSES : CARD_CLASSES
+        [ @edge_to_edge ? CARD_EDGE_CLASSES : CARD_CLASSES, @extra_classes ].compact.join(" ")
       end
     end
   end

data/app/components/keystone/ui/page_component.rb

@@ -4,26 +4,27 @@ module Keystone
   module Ui
     class PageComponent < ViewComponent::Base
       MAX_WIDTH_CLASSES = {
-        sm: "max-w-2xl",
-        md: "max-w-4xl",
-        lg: "max-w-6xl",
-        xl: "max-w-7xl",
+        sm: "ks-page-sm",
+        md: "ks-page-md",
+        lg: "ks-page-lg",
+        xl: "ks-page-xl",
         full: ""
       }.freeze
 
-      PADDING_CLASSES = "px-4 py-4 sm:px-6 lg:px-8"
+      PADDING_CLASSES = "ks-page"
 
       TOP_OFFSET_CLASSES = {
-        sm: "pt-12",
-        md: "pt-16",
-        lg: "pt-20",
-        xl: "pt-24"
+        sm: "ks-page-offset-sm",
+        md: "ks-page-offset-md",
+        lg: "ks-page-offset-lg",
+        xl: "ks-page-offset-xl"
       }.freeze
 
-      def initialize(max_width: :full, padding: :standard, top_offset: nil)
+      def initialize(max_width: :full, padding: :standard, top_offset: nil, class: nil)
         @max_width = max_width
         @padding = padding
         @top_offset = top_offset
+        @extra_classes = binding.local_variable_get(:class)
       end
 
       def classes
@@ -32,7 +33,7 @@ module Keystone
         tokens << TOP_OFFSET_CLASSES.fetch(@top_offset) if @top_offset
         width_class = MAX_WIDTH_CLASSES.fetch(@max_width)
         tokens << width_class unless width_class.empty?
-        tokens << "mx-auto" unless @max_width == :full
+        tokens << @extra_classes if @extra_classes
         tokens.join(" ")
       end
     end

data/app/components/keystone/ui/page_header_component.html.erb

@@ -2,7 +2,7 @@
   <% content_for :mobile_action_url, action_url %>
   <% content_for :mobile_action_label, action_label %>
 <% end %>
-<div class="<%= WRAPPER_CLASSES %>">
+<div class="<%= wrapper_classes %>">
   <div>
     <h1 class="<%= TITLE_CLASSES %>"><%= @title %></h1>
     <% if subtitle? %>

data/app/components/keystone/ui/page_header_component.rb

@@ -3,19 +3,24 @@
 module Keystone
   module Ui
     class PageHeaderComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "hidden sm:block mb-6 sm:flex sm:items-center sm:justify-between"
-      TITLE_CLASSES = "text-2xl font-bold text-gray-900 dark:text-white"
-      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
-      ACTIONS_CLASSES = "page-header-actions hidden sm:block mt-4 sm:mt-0 sm:ml-4 flex-shrink-0"
+      WRAPPER_CLASSES = "ks-page-header"
+      TITLE_CLASSES = "ks-page-header-title"
+      SUBTITLE_CLASSES = "ks-page-header-subtitle"
+      ACTIONS_CLASSES = "page-header-actions ks-page-header-actions"
 
       attr_reader :title, :action_url, :action_label
 
-      def initialize(title:, subtitle: nil, action_url: nil, action_label: "Add new")
+      def initialize(title:, subtitle: nil, action_url: nil, action_label: "Add new", class: nil)
         @title = title
         @subtitle = subtitle
         @action_url = action_url
         @action_label = action_label
         @action_block = nil
+        @extra_classes = binding.local_variable_get(:class)
+      end
+
+      def wrapper_classes
+        [ WRAPPER_CLASSES, @extra_classes ].compact.join(" ")
       end
 
       def before_render

data/app/components/keystone/ui/section_component.html.erb

@@ -1,4 +1,4 @@
-<div class="<%= spacing_class %>">
+<div class="<%= classes %>">
   <% if header? %>
     <div class="<%= HEADER_CLASSES %>">
       <div>

data/app/components/keystone/ui/section_component.rb

@@ -3,25 +3,30 @@
 module Keystone
   module Ui
     class SectionComponent < ViewComponent::Base
-      SPACING_CLASSES = { sm: "mt-4", md: "mt-6", lg: "mt-8" }.freeze
-      HEADER_CLASSES = "flex items-center justify-between mb-4"
-      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-white"
-      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
-      ACTION_BASE_CLASSES = "text-sm"
+      SPACING_CLASSES = { sm: "ks-section-sm", md: "ks-section-md", lg: "ks-section-lg" }.freeze
+      HEADER_CLASSES = "ks-section-header"
+      TITLE_CLASSES = "ks-section-title"
+      SUBTITLE_CLASSES = "ks-section-subtitle"
+      ACTION_CLASSES = "ks-section-action"
 
-      def initialize(title: nil, subtitle: nil, action: nil, spacing: :md)
+      def initialize(title: nil, subtitle: nil, action: nil, spacing: :md, class: nil)
         @title = title
         @subtitle = subtitle
         @action = action
         @spacing = spacing
+        @extra_classes = binding.local_variable_get(:class)
       end
 
       def spacing_class
         SPACING_CLASSES.fetch(@spacing)
       end
 
+      def classes
+        [ spacing_class, @extra_classes ].compact.join(" ")
+      end
+
       def action_classes
-        "#{ACTION_BASE_CLASSES} text-accent-600 hover:text-accent-900 dark:text-accent-400 dark:hover:text-accent-300"
+        ACTION_CLASSES
       end
 
       def header?

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.11.1"
+  VERSION = "0.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.1
+  version: 0.12.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.1.1
+        version: 0.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.1.1
+        version: 0.2.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement