nanoui 0.2.0 → 0.3.0

data/lib/generators/nanoui/component_generator.rb

@@ -23,7 +23,6 @@ module Nanoui
         accordion
         progress
       ].freeze
-      COMPONENT_IMPORT_PATTERN = /^\s*@import "components\/_?([^\"]+)\.css";\s*\n?/
 
       argument :components, type: :array, default: [], banner: "component [component] ..."
 
@@ -38,12 +37,6 @@ module Nanoui
       }.freeze
 
       STIMULUS_COMPONENTS = %w[dialog dropdown tooltip toast tabs accordion switch].freeze
-      PARTIAL_TEMPLATES = COMPONENT_ORDER.each_with_object({}) do |name, partials|
-        partials[name] = [name]
-      end.merge(
-        "radio" => %w[radio_group],
-        "toast" => %w[toast toast_container]
-      ).freeze
 
       def resolve_components
         @resolved = if options[:all]
@@ -72,34 +65,6 @@ module Nanoui
         end
       end
 
-      def copy_partials
-        @resolved.each do |name|
-          PARTIAL_TEMPLATES.fetch(name, [name]).each do |partial_name|
-            source = "views/components/_#{partial_name}.html.erb"
-            next unless File.exist?(File.join(self.class.source_root, source))
-
-            copy_file source, "app/views/components/_#{partial_name}.html.erb"
-          end
-        end
-      end
-
-      def update_nanoui_css
-        nanoui_css = "app/assets/stylesheets/nanoui/nanoui.css"
-        return unless File.exist?(nanoui_css)
-
-        content = File.read(nanoui_css)
-        content_without_component_imports = content.gsub(COMPONENT_IMPORT_PATTERN, "")
-        component_section = ["/* Components */", component_imports].reject(&:empty?).join("\n")
-
-        updated_content = if content_without_component_imports.include?("/* Components */")
-          content_without_component_imports.sub("/* Components */", component_section)
-        else
-          "#{content_without_component_imports.rstrip}\n\n#{component_section}\n"
-        end
-
-        File.write(nanoui_css, updated_content)
-      end
-
       def print_summary
         say ""
         say "NanoUI components installed:", :green
@@ -110,23 +75,6 @@ module Nanoui
         end
         say ""
       end
-
-      private
-
-      def component_imports
-        installed_components.map { |name| "@import \"components/#{name}.css\";" }.join("\n")
-      end
-
-      def installed_components
-        component_dir = "app/assets/stylesheets/nanoui/components"
-        names = Dir.glob(File.join(component_dir, "*.css")).map do |path|
-          File.basename(path, ".css").delete_prefix("_")
-        end
-
-        names.uniq.sort_by do |name|
-          [COMPONENT_ORDER.index(name) || COMPONENT_ORDER.length, name]
-        end
-      end
     end
   end
 end

data/lib/generators/nanoui/install_generator.rb

@@ -3,34 +3,16 @@ module Nanoui
     class InstallGenerator < Rails::Generators::Base
       source_root File.expand_path("templates", __dir__)
 
-      APPLICATION_IMPORT = '@import "nanoui/nanoui.css";'.freeze
-      LEADING_CSS_HEADER_PATTERN = /\A((?:\s|\/\*.*?\*\/\s*)*(?:@charset\s+[^;]+;\s*)?(?:@import\s+[^;]+;\s*)*)/m.freeze
-
       desc "Install NanoUI foundation (base styles, fonts)"
 
       def copy_base
         directory "css/base", "app/assets/stylesheets/nanoui/base"
       end
 
-      def copy_entry_point
-        copy_file "css/nanoui.install.css", "app/assets/stylesheets/nanoui/nanoui.css"
-      end
-
       def copy_fonts
         directory "css/fonts", "app/assets/stylesheets/nanoui/fonts"
       end
 
-      def add_import_to_application_css
-        application_css = "app/assets/stylesheets/application.css"
-        return unless File.exist?(application_css)
-
-        content = File.read(application_css)
-        return if content.include?(APPLICATION_IMPORT)
-
-        updated_content = content.sub(LEADING_CSS_HEADER_PATTERN, "\\1#{APPLICATION_IMPORT}\n")
-        File.write(application_css, updated_content)
-      end
-
       def print_instructions
         say ""
         say "NanoUI installed!", :green

data/lib/generators/nanoui/templates/css/components/alert.css

@@ -35,7 +35,7 @@
 .nano-alert__description {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
-  color: hsl(var(--color-muted-foreground));
+  color: hsl(var(--color-foreground));
 }
 
 .nano-alert--destructive {

data/lib/generators/nanoui/templates/css/components/button.css

@@ -1,4 +1,8 @@
-.nano-btn {
+.nano-btn,
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,15 +17,34 @@
   transition: background-color var(--duration-fast) var(--ease-default),
               color var(--duration-fast) var(--ease-default);
   padding: var(--space-2-5) var(--space-4);
+  background-color: hsl(var(--color-primary));
+  color: hsl(var(--color-primary-foreground));
 }
 
-.nano-btn:focus-visible {
+.nano-btn:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+  background-color: hsl(var(--color-primary) / 0.9);
+}
+
+.nano-btn:focus-visible,
+button:focus-visible,
+input[type="submit"]:focus-visible,
+input[type="button"]:focus-visible,
+input[type="reset"]:focus-visible {
   outline: 2px solid hsl(var(--color-ring));
   outline-offset: 2px;
 }
 
 .nano-btn:disabled,
-.nano-btn[aria-disabled="true"] {
+.nano-btn[aria-disabled="true"],
+button:disabled,
+button[aria-disabled="true"],
+input[type="submit"]:disabled,
+input[type="button"]:disabled,
+input[type="reset"]:disabled {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -38,10 +61,11 @@
 .nano-btn--secondary {
   background-color: hsl(var(--color-secondary));
   color: hsl(var(--color-secondary-foreground));
+  border: 1px solid hsl(var(--color-border));
 }
 
 .nano-btn--secondary:hover {
-  background-color: hsl(var(--color-secondary) / 0.8);
+  background-color: hsl(var(--color-muted-foreground) / 0.15);
 }
 
 .nano-btn--destructive {
@@ -75,13 +99,14 @@
 .nano-btn--link {
   background-color: transparent;
   color: hsl(var(--color-primary));
-  text-decoration: underline;
+  text-decoration: underline dashed;
   text-underline-offset: 4px;
   padding: 0;
 }
 
 .nano-btn--link:hover {
-  text-decoration-thickness: 2px;
+  background-color: transparent;
+  text-decoration-style: solid;
 }
 
 .nano-btn--sm {
@@ -109,7 +134,11 @@
 to { transform: rotate(360deg); }
 }
 
-.nano-btn svg {
+.nano-btn svg,
+button svg,
+input[type="submit"] svg,
+input[type="button"] svg,
+input[type="reset"] svg {
   width: 1em;
   height: 1em;
   flex-shrink: 0;

data/lib/generators/nanoui/templates/css/components/card.css

@@ -33,7 +33,7 @@
 
 .nano-card__description {
   font-size: var(--text-sm);
-  color: hsl(var(--color-muted-foreground));
+  color: hsl(var(--color-foreground));
 }
 
 .nano-card__content {
@@ -43,6 +43,7 @@
 .nano-card__footer {
   display: flex;
   align-items: center;
+  gap: var(--space-2);
   padding: var(--space-6);
   padding-top: 0;
 }

data/lib/generators/nanoui/templates/css/components/dialog.css

@@ -58,6 +58,7 @@
   gap: var(--space-1-5);
   padding: var(--space-6);
   padding-bottom: 0;
+  padding-right: var(--space-12);
 }
 
 .nano-dialog__title {
@@ -82,7 +83,6 @@
   justify-content: flex-end;
   gap: var(--space-2);
   padding: var(--space-6);
-  padding-top: 0;
 }
 
 .nano-dialog__close {

data/lib/generators/nanoui/templates/css/components/input.css

@@ -1,4 +1,17 @@
-.nano-input {
+.nano-input,
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+textarea {
   display: block;
   width: 100%;
   padding: var(--space-2) var(--space-3);
@@ -13,17 +26,56 @@
               box-shadow var(--duration-fast) var(--ease-default);
 }
 
-.nano-input::placeholder {
+.nano-input::placeholder,
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="password"]::placeholder,
+input[type="search"]::placeholder,
+input[type="tel"]::placeholder,
+input[type="url"]::placeholder,
+input[type="number"]::placeholder,
+input[type="date"]::placeholder,
+input[type="datetime-local"]::placeholder,
+input[type="month"]::placeholder,
+input[type="week"]::placeholder,
+input[type="time"]::placeholder,
+textarea::placeholder {
   color: hsl(var(--color-muted-foreground));
 }
 
-.nano-input:focus {
-  outline: none;
+.nano-input:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="datetime-local"]:focus,
+input[type="month"]:focus,
+input[type="week"]:focus,
+input[type="time"]:focus,
+textarea:focus {
   border-color: hsl(var(--color-input-focus));
-  box-shadow: 0 0 0 2px hsl(var(--color-ring) / 0.2);
+  outline: 2px solid hsl(var(--color-input-focus));
+  outline-offset: -1px;
 }
 
-.nano-input:disabled {
+.nano-input:disabled,
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="search"]:disabled,
+input[type="tel"]:disabled,
+input[type="url"]:disabled,
+input[type="number"]:disabled,
+input[type="date"]:disabled,
+input[type="datetime-local"]:disabled,
+input[type="month"]:disabled,
+input[type="week"]:disabled,
+input[type="time"]:disabled,
+textarea:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -36,10 +88,12 @@
 .nano-input--error:focus,
 .nano-input[aria-invalid="true"]:focus {
   border-color: hsl(var(--color-destructive));
-  box-shadow: 0 0 0 2px hsl(var(--color-destructive) / 0.2);
+  outline: 2px solid hsl(var(--color-destructive));
+  outline-offset: -1px;
 }
 
-textarea.nano-input {
+textarea.nano-input,
+textarea {
   min-height: 5rem;
   resize: vertical;
 }

data/lib/generators/nanoui/templates/css/components/label.css

@@ -1,4 +1,5 @@
-.nano-label {
+.nano-label,
+label {
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   line-height: var(--leading-none);

data/lib/generators/nanoui/templates/css/components/select.css

@@ -1,4 +1,5 @@
-.nano-select {
+.nano-select,
+select {
   display: block;
   width: 100%;
   padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
@@ -18,13 +19,15 @@
               box-shadow var(--duration-fast) var(--ease-default);
 }
 
-.nano-select:focus {
-  outline: none;
+.nano-select:focus,
+select:focus {
   border-color: hsl(var(--color-input-focus));
-  box-shadow: 0 0 0 2px hsl(var(--color-ring) / 0.2);
+  outline: 2px solid hsl(var(--color-input-focus));
+  outline-offset: -1px;
 }
 
-.nano-select:disabled {
+.nano-select:disabled,
+select:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -37,9 +40,11 @@
 .nano-select--error:focus,
 .nano-select[aria-invalid="true"]:focus {
   border-color: hsl(var(--color-destructive));
-  box-shadow: 0 0 0 2px hsl(var(--color-destructive) / 0.2);
+  outline: 2px solid hsl(var(--color-destructive));
+  outline-offset: -1px;
 }
 
-.dark .nano-select {
+.dark .nano-select,
+.dark select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 }

data/lib/nanoui/version.rb

@@ -1,3 +1,3 @@
 module Nanoui
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nanoui
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Denis Omerovic
@@ -79,8 +79,6 @@ files:
 - lib/generators/nanoui/templates/css/components/toast.css
 - lib/generators/nanoui/templates/css/components/tooltip.css
 - lib/generators/nanoui/templates/css/fonts/inter-variable.ttf
-- lib/generators/nanoui/templates/css/nanoui.css
-- lib/generators/nanoui/templates/css/nanoui.install.css
 - lib/generators/nanoui/templates/js/controllers/accordion_controller.js
 - lib/generators/nanoui/templates/js/controllers/dialog_controller.js
 - lib/generators/nanoui/templates/js/controllers/dropdown_controller.js
@@ -88,25 +86,6 @@ files:
 - lib/generators/nanoui/templates/js/controllers/tabs_controller.js
 - lib/generators/nanoui/templates/js/controllers/toast_controller.js
 - lib/generators/nanoui/templates/js/controllers/tooltip_controller.js
-- lib/generators/nanoui/templates/views/components/_accordion.html.erb
-- lib/generators/nanoui/templates/views/components/_alert.html.erb
-- lib/generators/nanoui/templates/views/components/_badge.html.erb
-- lib/generators/nanoui/templates/views/components/_button.html.erb
-- lib/generators/nanoui/templates/views/components/_card.html.erb
-- lib/generators/nanoui/templates/views/components/_checkbox.html.erb
-- lib/generators/nanoui/templates/views/components/_dialog.html.erb
-- lib/generators/nanoui/templates/views/components/_dropdown.html.erb
-- lib/generators/nanoui/templates/views/components/_input.html.erb
-- lib/generators/nanoui/templates/views/components/_label.html.erb
-- lib/generators/nanoui/templates/views/components/_progress.html.erb
-- lib/generators/nanoui/templates/views/components/_radio_group.html.erb
-- lib/generators/nanoui/templates/views/components/_select.html.erb
-- lib/generators/nanoui/templates/views/components/_switch.html.erb
-- lib/generators/nanoui/templates/views/components/_table.html.erb
-- lib/generators/nanoui/templates/views/components/_tabs.html.erb
-- lib/generators/nanoui/templates/views/components/_toast.html.erb
-- lib/generators/nanoui/templates/views/components/_toast_container.html.erb
-- lib/generators/nanoui/templates/views/components/_tooltip.html.erb
 - lib/nanoui.rb
 - lib/nanoui/version.rb
 homepage: https://github.com/chille1987/nanoui

data/lib/generators/nanoui/templates/css/nanoui.css

@@ -1,33 +0,0 @@
-/* NanoUI — Vanilla CSS + Stimulus Component Library */
-
-/* Base */
-@import "base/01_reset.css";
-@import "base/02_fonts.css";
-@import "base/03_colors.css";
-@import "base/04_typography.css";
-@import "base/05_spacing.css";
-@import "base/06_radius.css";
-@import "base/07_shadows.css";
-@import "base/08_transitions.css";
-@import "base/09_z-index.css";
-@import "base/10_globals.css";
-
-/* Components */
-@import "components/button.css";
-@import "components/input.css";
-@import "components/label.css";
-@import "components/card.css";
-@import "components/checkbox.css";
-@import "components/radio.css";
-@import "components/switch.css";
-@import "components/select.css";
-@import "components/badge.css";
-@import "components/alert.css";
-@import "components/dialog.css";
-@import "components/dropdown.css";
-@import "components/tooltip.css";
-@import "components/toast.css";
-@import "components/table.css";
-@import "components/tabs.css";
-@import "components/accordion.css";
-@import "components/progress.css";

data/lib/generators/nanoui/templates/css/nanoui.install.css

@@ -1,15 +0,0 @@
-/* NanoUI — Vanilla CSS + Stimulus Component Library */
-
-/* Base */
-@import "base/01_reset.css";
-@import "base/02_fonts.css";
-@import "base/03_colors.css";
-@import "base/04_typography.css";
-@import "base/05_spacing.css";
-@import "base/06_radius.css";
-@import "base/07_shadows.css";
-@import "base/08_transitions.css";
-@import "base/09_z-index.css";
-@import "base/10_globals.css";
-
-/* Components */

data/lib/generators/nanoui/templates/views/components/_accordion.html.erb

@@ -1,40 +0,0 @@
-<%# NanoUI Accordion (native <details>/<summary> with Stimulus)
-  Options: items (array of {title:, content:, open:}), single (false), class
-  Usage:
-    render "components/accordion", single: true, items: [
-      { title: "Is it free?", content: "Yes, MIT licensed.", open: true },
-      { title: "Build step?", content: "No, vanilla CSS." },
-      { title: "Dark mode?", content: "Add .dark class to html." }
-    ]
-%>
-<%
-  items   = local_assigns.fetch(:items, [])
-  single  = local_assigns.fetch(:single, false)
-  classes = local_assigns.fetch(:class, "")
-
-  css = "nano-accordion"
-  css += " #{classes}" if classes.present?
-%>
-
-<div class="<%= css.strip %>"
-     data-controller="nanoui-accordion"
-     data-nanoui-accordion-single-value="<%= single %>">
-  <% items.each do |item| %>
-    <details class="nano-accordion__item"
-             data-nanoui-accordion-target="item"
-             data-action="toggle->nanoui-accordion#toggle"
-             <%= "open" if item[:open] %>>
-      <summary class="nano-accordion__trigger">
-        <span><%= item[:title] %></span>
-        <svg class="nano-accordion__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="m6 9 6 6 6-6"/>
-        </svg>
-      </summary>
-      <div class="nano-accordion__content">
-        <p><%= item[:content] %></p>
-      </div>
-    </details>
-  <% end %>
-</div>

data/lib/generators/nanoui/templates/views/components/_alert.html.erb

@@ -1,33 +0,0 @@
-<%# NanoUI Alert
-  Variants: default, destructive, success, warning
-  Options: variant, title, icon, class
-  Usage:
-    render "components/alert", variant: "success", title: "Saved!" do
-      "Your changes have been saved."
-    end
-%>
-<%
-  variant = local_assigns.fetch(:variant, nil)
-  title   = local_assigns.fetch(:title, nil)
-  icon    = local_assigns.fetch(:icon, nil)
-  classes = local_assigns.fetch(:class, "")
-
-  css = ["nano-alert"]
-  css << "nano-alert--#{variant}" if variant
-  css << classes if classes.present?
-%>
-
-<div class="<%= css.join(" ").strip %>" role="alert">
-  <% if icon %>
-    <div class="nano-alert__icon">
-      <%= icon %>
-    </div>
-  <% end %>
-
-  <div class="nano-alert__content">
-    <% if title %>
-      <p class="nano-alert__title"><%= title %></p>
-    <% end %>
-    <p class="nano-alert__description"><%= yield %></p>
-  </div>
-</div>

data/lib/generators/nanoui/templates/views/components/_badge.html.erb

@@ -1,18 +0,0 @@
-<%# NanoUI Badge
-  Variants: primary (default), secondary, destructive, outline, success, warning
-  Options: variant, class, html
-  Usage:
-    render "components/badge", variant: "success" do "Active" end
-%>
-<%
-  variant = local_assigns.fetch(:variant, "primary")
-  classes = local_assigns.fetch(:class, "")
-  html    = local_assigns.fetch(:html, {}).symbolize_keys
-
-  css = "nano-badge nano-badge--#{variant}"
-  css += " #{classes}" if classes.present?
-%>
-
-<%= content_tag(:span, { class: css.strip }.merge(html)) do %>
-  <%= yield %>
-<% end %>

data/lib/generators/nanoui/templates/views/components/_button.html.erb

@@ -1,27 +0,0 @@
-<%# NanoUI Button
-  Variants: primary (default), secondary, destructive, outline, ghost, link
-  Sizes: sm, md (default), lg, icon
-  Options: tag (:button), href (auto-switches to :a), class, html (extra attrs)
-  Usage:
-    render "components/button", variant: "primary" do "Save" end
-    render "components/button", variant: "outline", size: "sm" do "Cancel" end
-    render "components/button", href: "/about" do "Learn More" end
-%>
-<%
-  variant = local_assigns.fetch(:variant, "primary")
-  size    = local_assigns.fetch(:size, nil)
-  tag     = local_assigns.fetch(:tag, :button)
-  href    = local_assigns.fetch(:href, nil)
-  classes = local_assigns.fetch(:class, "")
-  html    = local_assigns.fetch(:html, {}).symbolize_keys
-
-  css = ["nano-btn", "nano-btn--#{variant}"]
-  css << "nano-btn--#{size}" if size
-  css << classes if classes.present?
-  tag = :a if href
-  html[:type] = "button" if tag == :button && !html.key?(:type)
-%>
-
-<%= content_tag(tag, href: href, class: css.join(" ").strip, **html) do %>
-  <%= yield %>
-<% end %>

data/lib/generators/nanoui/templates/views/components/_card.html.erb

@@ -1,43 +0,0 @@
-<%# NanoUI Card
-  Variants: default, elevated, bordered
-  Options: variant, tag (:article), title, description, footer, class, html
-  Usage:
-    render "components/card",
-      title: "My Card",
-      description: "Subtitle",
-      footer: render("components/button", variant: "primary") { "Save" } do
-      "Card body content"
-    end
-%>
-<%
-  variant = local_assigns.fetch(:variant, nil)
-  tag     = local_assigns.fetch(:tag, :article)
-  title   = local_assigns.fetch(:title, nil)
-  desc    = local_assigns.fetch(:description, nil)
-  footer  = local_assigns.fetch(:footer, nil)
-  classes = local_assigns.fetch(:class, "")
-  html    = local_assigns.fetch(:html, {}).symbolize_keys
-
-  css = ["nano-card"]
-  css << "nano-card--#{variant}" if variant
-  css << classes if classes.present?
-%>
-
-<%= content_tag(tag, class: css.join(" ").strip, **html) do %>
-  <% if title || desc %>
-    <div class="nano-card__header">
-      <% if title %><h3 class="nano-card__title"><%= title %></h3><% end %>
-      <% if desc %><p class="nano-card__description"><%= desc %></p><% end %>
-    </div>
-  <% end %>
-
-  <div class="nano-card__content">
-    <%= yield %>
-  </div>
-
-  <% if footer %>
-    <div class="nano-card__footer">
-      <%= footer %>
-    </div>
-  <% end %>
-<% end %>