atomic_view 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9304b4d320231f95fcaa633cb938e0e59334060f9fc049b6a44330efe060bd02
-  data.tar.gz: b0ea7ce68cc879de04dd1b5a18f3330f53b9176ae36c7241d614984d912c78f8
+  metadata.gz: 710cd3a75e70122c759e7af3db35eadde82192422faa14e70bbe9cd3272769fb
+  data.tar.gz: 3301a83351ddf672355f276e44cf651747aa9c3f30a9295781ffbeb1a4a1005a
 SHA512:
-  metadata.gz: 0fd460d0a70893ada0fb8b13e83dfd50f4e5ed94a9be4cfcd6edbad94797f02778125b78458b413374fa0b31a472e2644ba09295c865b775bdfac4d7ba6a3b86
-  data.tar.gz: c82df0b66490e6ef914dcef8230ceed5d6b3e7b622edf7e083e5bf366256b8b26ba94bb03bb3cf6dd9109b33bb2bb102e99559e4b334ff589c78b2d382a1e9f7
+  metadata.gz: 44ec8863dd5c0d48190c459d308f77fcfd4f8bdfba92ab005e8116b794a8bd53037d3bce843e97427d2b8a7ddcc0e5359270b85c664674c2f5ed3b72d30de7ba
+  data.tar.gz: c4c9d5c05cc01ebdebbf0e4a77a7f26f6fba58302afb97660d60a9e58607b55fedf78f1e58e77b3c645864eb7b3dfdfb02a31e592671b5225a07fc49075eca13

data/app/assets/config/atomic_view_manifest.js

@@ -1,3 +1,2 @@
 //= link_directory ../stylesheets/atomic_view .css
 //= link_tree ../javascripts/atomic_view .js
-//= link_tree ../dist/atomic_view .css

data/app/assets/tailwind/atomic_view/engine.css

@@ -1,25 +1,89 @@
 @import "tailwindcss" source(none);
 @source "../../javascripts/**/*.js";
 @source "../../../views/**/*.{erb}";
-@source "../../../../lib/atomic_view//components/**/*.{erb,rb}";
+@source "../../../../lib/atomic_view/components/**/*.{erb,rb}";
+@source "../../../../previews/**/*.{erb,rb}";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+@theme {
+  --color-surface: var(--color-white);
+  --color-offset: var(--color-gray-50);
+  --color-backdrop: oklch(0 0 0 / 0.5);
+
+  --color-border: var(--color-gray-200);
+  --color-input: var(--color-gray-200);
+  --color-ring: var(--color-gray-950);
+
+  --color-primary: var(--color-neutral-800);
+  --color-primary-foreground: var(--color-white);
+
+  --color-secondary: var(--color-neutral-200);
+  --color-secondary-foreground: var(--color-neutral-950);
+
+  --color-muted: var(--color-neutral-200);
+  --color-muted-foreground: var(--color-neutral-800);
+
+  --color-accent: var(--color-green-800);
+  --color-accent-foreground: var(--color-green-50);
+
+  --color-destructive: var(--color-red-800);
+  --color-destructive-foreground: var(--color-red-50);
+
+  --color-disabled: var(--color-gray-50);
+  --color-disabled-foreground: var(--color-zinc-500);
+  --color-disabled-ring: var(--color-zinc-200);
+
+  --color-error: var(--color-red-900);
+  --color-error-ring: var(--color-red-300);
+  --color-error-placeholder: var(--color-red-300);
+  --color-error-focus-ring: var(--color-red-500);
+
+  --color-placeholder: var(--color-zinc-500);
+  --color-focus-ring: var(--color-neutral-700);
+}
+
+.dark {
+  --color-surface: var(--color-neutral-950);
+  --color-offset: var(--color-neutral-900);
+  --color-backdrop: oklch(0 0 0 / 0.5);
+
+  --color-border: var(--color-white);
+  --color-input: var(--color-white);
+  --color-ring: var(--color-white);
+
+  --color-primary: var(--color-white);
+  --color-primary-foreground: var(--color-neutral-800);
+
+  --color-secondary: var(--color-neutral-800);
+  --color-secondary-foreground: var(--color-neutral-100);
+
+  --color-muted: var(--color-neutral-800);
+  --color-muted-foreground: var(--color-neutral-200);
+
+  --color-accent: var(--color-green-50);
+  --color-accent-foreground: var(--color-green-800);
+
+  --color-destructive: var(--color-red-800);
+  --color-destructive-foreground: var(--color-red-50);
+
+  --color-disabled: var(--color-neutral-800);
+  --color-disabled-foreground: var(--color-neutral-400);
+  --color-disabled-ring: var(--color-neutral-600);
+
+  --color-error: var(--color-red-100);
+  --color-error-ring: var(--color-red-400);
+  --color-error-placeholder: var(--color-red-400);
+  --color-error-focus-ring: var(--color-red-500);
+
+  --color-placeholder: var(--color-neutral-400);
+  --color-focus-ring: var(--color-white/20);
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
   }
 }

data/lib/atomic_view/components/button_component.rb

@@ -4,23 +4,53 @@ module AtomicView
   module Components
     # Button
     class ButtonComponent < ViewComponent::Form::ButtonComponent
-      attr_reader :label
+      attr_reader :label, :variant, :size
 
       def initialize(form, label_or_options = nil, options = nil)
         super
 
         if label_or_options.is_a?(String)
           @label = label_or_options
+          @options ||= {}
+        elsif label_or_options.is_a?(Hash)
+          @options = label_or_options
         end
+
+        @variant = @options.delete(:variant) || :primary
       end
 
       def call
+        @options[:class] = class_names(base_classes, variant_classes, @options[:class])
+
         if content?
           content_tag(:button, @options) { content }
         else
           content_tag(:button, label, @options)
         end
       end
+
+      private
+
+      def base_classes
+        "h-8 rounded-md px-3 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+      end
+
+      def variant_classes
+        case variant
+        when :primary
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        when :secondary
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
+        when :destructive
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20"
+        when :muted
+          "bg-transparent text-muted-foreground hover:bg-muted"
+        when :link
+          "text-primary underline-offset-4 hover:underline"
+        else
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        end
+      end
     end
   end
 end

data/lib/atomic_view/components/check_box_component.rb

@@ -2,7 +2,7 @@ module AtomicView
   module Components
     class CheckBoxComponent < ViewComponent::Form::CheckBoxComponent
       def html_class
-        "h-4 w-4 rounded-sm border-neutral-300 text-blue-500 focus:ring-blue-700 hover:border-neutral-700"
+        "peer border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
       end
     end
   end

data/lib/atomic_view/components/collection_select_component.rb

@@ -4,9 +4,9 @@ module AtomicView
       def html_class
         class_names(
           *%W[block w-full h-9 min-w-0 flex-1 rounded-md border-0 py-1 text-sm shadow-xs ring-1],
-          "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-zinc-500 disabled:ring-zinc-200",
-          "bg-transparent dark:bg-white/5 text-zinc-950 ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:text-white focus:ring-neutral-700 focus:border-zinc-950/20 dark:focus:ring-white/20",
-          "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?
+          "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
+          "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
+          "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
         )
       end
     end

data/lib/atomic_view/components/date_field_component.rb

@@ -5,9 +5,9 @@ module AtomicView
         class_names(
           class_names(
             *%W[block w-full h-9 min-w-0 flex-1 rounded-sm border-0 py-1 text-sm shadow-xs ring-1],
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-zinc-500 disabled:ring-zinc-200",
-            "bg-transparent dark:bg-white/5 text-zinc-950 ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:text-white focus:ring-neutral-700 focus:border-zinc-950/20 dark:focus:ring-white/20",
-            "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?,
+            "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
+            "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
+            "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
           ),
           options[:class]
         )

data/lib/atomic_view/components/field_component.erb

@@ -1,7 +1,7 @@
 <%= content_tag :div, class: container_html_class do %>
   <% if left_section? %>
     <% if left_section_addon? %>
-      <span class="inline-flex items-center rounded-l-lg bg-transparent dark:bg-white/5 ring-1 ring-zinc-950/10 dark:ring-white/10 px-3 text-zinc-950 dark:text-white sm:text-sm"><%= left_section %></span>
+      <span class="inline-flex items-center rounded-l-lg bg-transparent dark:bg-white/5 ring-1 ring-ring/10 dark:ring-white/10 px-3 text-primary dark:text-white sm:text-sm"><%= left_section %></span>
     <% elsif left_section_interaction? %>
       <%= left_section %>
     <% else %>
@@ -13,7 +13,7 @@
   <%= tag_klass.new(@object_name, @method_name, @view_context, @options).render %>
   <% if right_section? %>
     <% if right_section_addon? %>
-      <span class="inline-flex items-center rounded-r-lg bg-transparent dark:bg-white/5 ring-1 ring-zinc-950/10 dark:ring-white/10 px-3 text-zinc-950 dark:text-white sm:text-sm"><%= right_section %></span>
+      <span class="inline-flex items-center rounded-r-lg bg-transparent dark:bg-white/5 ring-1 ring-ring/10 dark:ring-white/10 px-3 text-primary dark:text-white sm:text-sm"><%= right_section %></span>
     <% elsif right_section_interaction? %>
       <%= right_section %>
     <% else %>

data/lib/atomic_view/components/field_component.rb

@@ -11,13 +11,13 @@ module AtomicView
       def html_class
         class_names(
           "block w-full appearance-none h-9 min-w-0 z-10 flex-1 rounded-lg border-0 py-1 text-base shadow-xs ring-1",
-          "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-zinc-500 disabled:ring-zinc-200",
-          "bg-transparent dark:bg-white/5 text-zinc-950 ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:text-white focus:ring-neutral-700 focus:border-zinc-950/20 dark:focus:ring-white/20",
+          "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
+          "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
           "pl-10" => left_section? && !(left_section_addon? || left_section_interaction?),
           "pr-10" => right_section? && !(right_section_addon? || right_section_interaction?),
           "shadow-none rounded-none rounded-r-lg" => left_section_addon? || left_section_interaction?,
           "shadow-none rounded-none rounded-l-lg" => right_section_addon? || right_section_interaction?,
-          "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?
+          "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
         )
       end
 
@@ -46,7 +46,7 @@ module AtomicView
       end
 
       def right_section
-        options[:right_section] || method_errors? && raw(icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-red-500"}))
+        options[:right_section] || method_errors? && raw(icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-destructive"}))
       end
 
       def right_section?

data/lib/atomic_view/components/label_component.rb

@@ -2,7 +2,7 @@ module AtomicView
   module Components
     class LabelComponent < ViewComponent::Form::LabelComponent
       def html_class
-        "block text-sm font-medium leading-6 text-zinc-950 dark:text-white"
+        "block text-primary text-sm font-medium leading-6 mb-2"
       end
     end
   end

data/lib/atomic_view/components/select_component.rb

@@ -5,9 +5,9 @@ module AtomicView
         class_names(
           class_names(
             *%W[block w-full h-9 min-w-0 flex-1 rounded-md border-0 py-1 text-sm shadow-xs ring-1],
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-zinc-500 disabled:ring-zinc-200",
-            "bg-transparent dark:bg-white/5 text-zinc-950 ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:text-white focus:ring-neutral-700 focus:border-zinc-950/20 dark:focus:ring-white/20",
-            "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?,
+            "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
+            "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
+            "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
           ),
           options[:class]
         )

data/lib/atomic_view/components/submit_component.rb

@@ -1,8 +1,45 @@
 module AtomicView
   module Components
     class SubmitComponent < ViewComponent::Form::SubmitComponent
+      attr_reader :variant
+
+      def initialize(form, value_or_options = nil, options = nil)
+        super
+
+        if value_or_options.is_a?(Hash)
+          @options = value_or_options
+        else
+          @options ||= {}
+        end
+
+        @variant = @options.delete(:variant) || :primary
+      end
+
       def html_class
-        "cursor-pointer rounded-md bg-green-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-xs hover:bg-green-600/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700"
+        class_names(base_classes, variant_classes, @options[:class])
+      end
+
+      private
+
+      def base_classes
+        "h-8 rounded-md px-3 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+      end
+
+      def variant_classes
+        case variant
+        when :primary
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        when :secondary
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
+        when :destructive
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20"
+        when :muted
+          "bg-transparent text-muted-foreground hover:bg-muted"
+        when :link
+          "text-primary underline-offset-4 hover:underline"
+        else
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        end
       end
     end
   end

data/lib/atomic_view/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AtomicView
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Joel Warrington
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-15 00:00:00.000000000 Z
+date: 2025-09-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -136,7 +136,6 @@ files:
 - app/views/layouts/atomic_view/lookbook.html.erb
 - config/importmap.rb
 - config/routes.rb
-- config/tailwind.config.js
 - lib/atomic_view.rb
 - lib/atomic_view/component.rb
 - lib/atomic_view/components/button_component.rb

data/config/tailwind.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  safelist: [
-    {
-      pattern: /prose/,
-    },
-  ],
-  content: [
-    "./public/*.html",
-    "./app/helpers/**/*.rb",
-    "./app/assets/javascript/**/*.js",
-    "./app/views/**/*.{erb,haml,html,slim}",
-  ],
-};