nanoui 0.1.0

data/lib/generators/nanoui/component_generator.rb

@@ -0,0 +1,132 @@
+module Nanoui
+  module Generators
+    class ComponentGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      COMPONENT_ORDER = %w[
+        button
+        input
+        label
+        card
+        checkbox
+        radio
+        switch
+        select
+        badge
+        alert
+        dialog
+        dropdown
+        tooltip
+        toast
+        table
+        tabs
+        accordion
+        progress
+      ].freeze
+      COMPONENT_IMPORT_PATTERN = /^\s*@import "components\/_([^\"]+)\.css";\s*\n?/
+
+      argument :components, type: :array, default: [], banner: "component [component] ..."
+
+      class_option :group, type: :string, desc: "Install a component group"
+      class_option :all, type: :boolean, default: false, desc: "Install all components"
+
+      GROUPS = {
+        "essentials" => %w[button input label card badge alert],
+        "forms"      => %w[button input label checkbox radio switch select badge alert],
+        "overlays"   => %w[dialog dropdown tooltip toast],
+        "data"       => %w[table tabs accordion progress],
+      }.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]
+          GROUPS.values.flatten.uniq
+        elsif options[:group]
+          GROUPS.fetch(options[:group]) { abort "Unknown group: #{options[:group]}" }
+        else
+          components
+        end
+
+        abort "Specify components, --group, or --all" if @resolved.empty?
+      end
+
+      def copy_component_css
+        @resolved.each do |name|
+          copy_file "css/components/_#{name}.css",
+                    "app/assets/stylesheets/nanoui/components/_#{name}.css"
+        end
+      end
+
+      def copy_stimulus_controllers
+        @resolved.each do |name|
+          next unless STIMULUS_COMPONENTS.include?(name)
+          copy_file "js/controllers/#{name}_controller.js",
+                    "app/javascript/controllers/nanoui_#{name}_controller.js"
+        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
+        @resolved.each do |name|
+          parts = ["CSS"]
+          parts << "Stimulus" if STIMULUS_COMPONENTS.include?(name)
+          say "  ✓ #{name} (#{parts.join(", ")})"
+        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

@@ -0,0 +1,53 @@
+module Nanoui
+  module Generators
+    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 (tokens, base styles, fonts)"
+
+      def copy_tokens
+        directory "css/tokens", "app/assets/stylesheets/nanoui/tokens"
+      end
+
+      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
+        say ""
+        say "Next steps:"
+        say "  1. Run: rails generate nanoui:component --all"
+        say "     Or add components individually:"
+        say "     rails generate nanoui:component button input card"
+        say ""
+        say "  2. Customize your theme in:"
+        say "     app/assets/stylesheets/nanoui/tokens/_colors.css"
+        say ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+/* base/_globals.css */
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  src: url("../fonts/inter-variable.ttf") format("truetype");
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-optical-sizing: auto;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: hsl(var(--color-foreground));
+  background-color: hsl(var(--color-background));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:focus-visible {
+  outline: 2px solid hsl(var(--color-ring));
+  outline-offset: 2px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

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

@@ -0,0 +1,8 @@
+/* base/_reset.css */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,74 @@
+.accordion__trigger {
+  list-style: none;
+}
+
+.accordion__trigger::-webkit-details-marker {
+  display: none;
+}
+
+.accordion__trigger::marker {
+  content: none;
+}
+
+.accordion {
+  border: 1px solid hsl(var(--color-border));
+  border-radius: var(--radius-lg);
+}
+
+.accordion__item {
+  border-bottom: 1px solid hsl(var(--color-border));
+}
+
+.accordion__item:first-child {
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+
+.accordion__item:last-child {
+  border-bottom: none;
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+
+.accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: hsl(var(--color-foreground));
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.accordion__trigger:hover {
+  background-color: hsl(var(--color-muted) / 0.5);
+}
+
+.accordion__trigger:focus-visible {
+  outline: 2px solid hsl(var(--color-ring));
+  outline-offset: -2px;
+}
+
+.accordion__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: hsl(var(--color-muted-foreground));
+  transition: transform var(--duration-normal) var(--ease-default);
+}
+
+.accordion__item[open] .accordion__icon {
+  transform: rotate(180deg);
+}
+
+.accordion__content {
+  padding: 0 var(--space-4) var(--space-4);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: hsl(var(--color-muted-foreground));
+  display: grid;
+  grid-template-rows: 1fr;
+}

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

@@ -0,0 +1,78 @@
+.alert {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid hsl(var(--color-border));
+  background-color: hsl(var(--color-background));
+}
+
+.alert__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-top: var(--space-0-5);
+}
+
+.alert__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.alert__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.alert__title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-normal);
+  color: hsl(var(--color-foreground));
+}
+
+.alert__description {
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: hsl(var(--color-muted-foreground));
+}
+
+.alert--destructive {
+  border-color: hsl(var(--color-destructive) / 0.5);
+  background-color: hsl(var(--color-destructive) / 0.08);
+}
+
+.alert--destructive .alert__icon {
+  color: hsl(var(--color-destructive));
+}
+
+.alert--destructive .alert__title {
+  color: hsl(var(--color-destructive));
+}
+
+.alert--success {
+  border-color: hsl(var(--color-success) / 0.5);
+  background-color: hsl(var(--color-success) / 0.08);
+}
+
+.alert--success .alert__icon {
+  color: hsl(var(--color-success));
+}
+
+.alert--success .alert__title {
+  color: hsl(var(--color-success));
+}
+
+.alert--warning {
+  border-color: hsl(var(--color-warning) / 0.5);
+  background-color: hsl(var(--color-warning) / 0.08);
+}
+
+.alert--warning .alert__icon {
+  color: hsl(var(--color-warning));
+}
+
+.alert--warning .alert__title {
+  color: hsl(var(--color-warning));
+}

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

@@ -0,0 +1,48 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-none);
+  padding: var(--space-1) var(--space-2-5);
+  white-space: nowrap;
+}
+
+.badge--primary {
+  background-color: hsl(var(--color-primary));
+  color: hsl(var(--color-primary-foreground));
+}
+
+.badge--secondary {
+  background-color: hsl(var(--color-secondary));
+  color: hsl(var(--color-secondary-foreground));
+}
+
+.badge--destructive {
+  background-color: hsl(var(--color-destructive));
+  color: hsl(var(--color-destructive-foreground));
+}
+
+.badge--outline {
+  background-color: transparent;
+  border: 1px solid hsl(var(--color-border));
+  color: hsl(var(--color-foreground));
+}
+
+.badge--success {
+  background-color: hsl(var(--color-success));
+  color: hsl(var(--color-success-foreground));
+}
+
+.badge--warning {
+  background-color: hsl(var(--color-warning));
+  color: hsl(var(--color-warning-foreground));
+}
+
+.badge svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,116 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-none);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease-default),
+              color var(--duration-fast) var(--ease-default);
+  padding: var(--space-2-5) var(--space-4);
+}
+
+.button:focus-visible {
+  outline: 2px solid hsl(var(--color-ring));
+  outline-offset: 2px;
+}
+
+.button:disabled,
+.button[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.button--primary {
+  background-color: hsl(var(--color-primary));
+  color: hsl(var(--color-primary-foreground));
+}
+
+.button--primary:hover {
+  background-color: hsl(var(--color-primary) / 0.9);
+}
+
+.button--secondary {
+  background-color: hsl(var(--color-secondary));
+  color: hsl(var(--color-secondary-foreground));
+}
+
+.button--secondary:hover {
+  background-color: hsl(var(--color-secondary) / 0.8);
+}
+
+.button--destructive {
+  background-color: hsl(var(--color-destructive));
+  color: hsl(var(--color-destructive-foreground));
+}
+
+.button--destructive:hover {
+  background-color: hsl(var(--color-destructive) / 0.9);
+}
+
+.button--outline {
+  border: 1px solid hsl(var(--color-border));
+  background-color: transparent;
+  color: hsl(var(--color-foreground));
+}
+
+.button--outline:hover {
+  background-color: hsl(var(--color-muted));
+}
+
+.button--ghost {
+  background-color: transparent;
+  color: hsl(var(--color-foreground));
+}
+
+.button--ghost:hover {
+  background-color: hsl(var(--color-muted));
+}
+
+.button--link {
+  background-color: transparent;
+  color: hsl(var(--color-primary));
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  padding: 0;
+}
+
+.button--link:hover {
+  text-decoration-thickness: 2px;
+}
+
+.button--sm {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+.button--lg {
+  font-size: var(--text-base);
+  padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-md);
+}
+
+.button--icon {
+  padding: var(--space-2-5);
+  aspect-ratio: 1;
+}
+
+.button__spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+to { transform: rotate(360deg); }
+}
+
+.button svg {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,48 @@
+.card {
+  background-color: hsl(var(--color-card));
+  color: hsl(var(--color-card-foreground));
+  border: 1px solid hsl(var(--color-border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.card--elevated {
+  box-shadow: var(--shadow-md);
+  border: none;
+}
+
+.card--bordered {
+  border: 2px solid hsl(var(--color-border));
+  box-shadow: none;
+}
+
+.card__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+  padding: var(--space-6);
+  padding-bottom: 0;
+}
+
+.card__title {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-none);
+  letter-spacing: var(--tracking-tight);
+}
+
+.card__description {
+  font-size: var(--text-sm);
+  color: hsl(var(--color-muted-foreground));
+}
+
+.card__content {
+  padding: var(--space-6);
+}
+
+.card__footer {
+  display: flex;
+  align-items: center;
+  padding: var(--space-6);
+  padding-top: 0;
+}

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

@@ -0,0 +1,86 @@
+.checkbox {
+  position: relative;
+  display: inline-flex;
+}
+
+.checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.checkbox__label {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  gap: var(--space-2);
+  min-height: 1.125rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: hsl(var(--color-foreground));
+}
+
+.checkbox__label::before {
+  content: "";
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  border: 1.5px solid hsl(var(--color-input));
+  border-radius: var(--radius-sm);
+  background-color: hsl(var(--color-background));
+  transition: background-color var(--duration-fast) var(--ease-default),
+                  border-color var(--duration-fast) var(--ease-default);
+}
+
+.checkbox__label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  background-size: 0.75rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-default);
+}
+
+.checkbox__input:checked + .checkbox__label::before {
+  background-color: hsl(var(--color-primary));
+  border-color: hsl(var(--color-primary));
+}
+
+.checkbox__input:checked + .checkbox__label::after {
+  opacity: 1;
+}
+
+.checkbox__input:focus-visible + .checkbox__label::before {
+  outline: 2px solid hsl(var(--color-ring));
+  outline-offset: 2px;
+}
+
+.checkbox__input:disabled + .checkbox__label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox--error .checkbox__label::before {
+  border-color: hsl(var(--color-destructive));
+}
+
+.checkbox--error .checkbox__input:checked + .checkbox__label::before {
+  background-color: hsl(var(--color-destructive));
+  border-color: hsl(var(--color-destructive));
+}