aeros 0.0.1 → 0.0.2

data/app/assets/stylesheets/aeros/themes/slate.css

@@ -0,0 +1,163 @@
+/* =============================================================================
+   Theme: Slate
+   ============================================================================= */
+
+[data-theme="slate"] {
+  /* Background & Foreground */
+  --ui-background: #ffffff;
+  --ui-foreground: #0f172a;
+
+  /* Generic */
+  --ui-border: #e2e8f0;
+  --ui-destructive: #dc2626;
+  --ui-primary: #0f172a;
+  --ui-accent: #f1f5f9;
+  --ui-accent-foreground: #0f172a;
+  --ui-popover: #ffffff;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Muted */
+  --ui-muted: #f1f5f9;
+  --ui-muted-foreground: #64748b;
+
+  /* Card */
+  --ui-card-bg: #ffffff;
+  --ui-card-fg: #0f172a;
+  --ui-card-border: #e2e8f0;
+  --ui-card-radius: 0.75rem;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* Area */
+  --ui-area-bg: #f8fafc;
+  --ui-area-fg: #0f172a;
+  --ui-area-border: #e2e8f0;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #f8fafc;
+  --ui-sidebar-fg: #0f172a;
+  --ui-sidebar-border: #e2e8f0;
+  --ui-sidebar-hover: #f1f5f9;
+  --ui-sidebar-active: #e2e8f0;
+
+  /* Button */
+  --ui-button-bg: #0f172a;
+  --ui-button-bg-hover: #1e293b;
+  --ui-button-fg: #ffffff;
+  --ui-button-border: #0f172a;
+  --ui-button-secondary-bg: #f1f5f9;
+  --ui-button-secondary-bg-hover: #e2e8f0;
+  --ui-button-secondary-fg: #0f172a;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #b91c1c;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #f1f5f9;
+  --ui-button-ghost-fg: #0f172a;
+  --ui-button-outline-bg-hover: #f1f5f9;
+  --ui-button-outline-fg: #0f172a;
+
+  /* Input */
+  --ui-input-bg: #ffffff;
+  --ui-input-fg: #0f172a;
+  --ui-input-border: #e2e8f0;
+  --ui-input-border-focus: #94a3b8;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #94a3b8;
+
+  /* Typography */
+  --ui-heading-color: #0f172a;
+  --ui-body-color: #334155;
+  --ui-muted-color: #64748b;
+  --ui-link-color: #2563eb;
+  --ui-link-hover: #1d4ed8;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #ffffff;
+  --ui-menu-fg: #0f172a;
+  --ui-menu-border: #e2e8f0;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}
+
+/* Dark mode */
+[data-theme="slate"][data-mode="dark"] {
+  /* Background & Foreground */
+  --ui-background: #0f172a;
+  --ui-foreground: #f8fafc;
+
+  /* Generic */
+  --ui-border: #334155;
+  --ui-destructive: #dc2626;
+  --ui-primary: #f8fafc;
+  --ui-accent: #1e293b;
+  --ui-accent-foreground: #f8fafc;
+  --ui-popover: #1e293b;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3);
+
+  /* Muted */
+  --ui-muted: #1e293b;
+  --ui-muted-foreground: #94a3b8;
+
+  /* Card */
+  --ui-card-bg: #1e293b;
+  --ui-card-fg: #f8fafc;
+  --ui-card-border: #334155;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+
+  /* Area */
+  --ui-area-bg: #1e293b;
+  --ui-area-fg: #f8fafc;
+  --ui-area-border: #334155;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #1e293b;
+  --ui-sidebar-fg: #f8fafc;
+  --ui-sidebar-border: #334155;
+  --ui-sidebar-hover: #334155;
+  --ui-sidebar-active: #475569;
+
+  /* Button */
+  --ui-button-bg: #f8fafc;
+  --ui-button-bg-hover: #e2e8f0;
+  --ui-button-fg: #0f172a;
+  --ui-button-border: #f8fafc;
+  --ui-button-secondary-bg: #334155;
+  --ui-button-secondary-bg-hover: #475569;
+  --ui-button-secondary-fg: #f8fafc;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #ef4444;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #334155;
+  --ui-button-ghost-fg: #f8fafc;
+  --ui-button-outline-bg-hover: #334155;
+  --ui-button-outline-fg: #f8fafc;
+
+  /* Input */
+  --ui-input-bg: #1e293b;
+  --ui-input-fg: #f8fafc;
+  --ui-input-border: #334155;
+  --ui-input-border-focus: #64748b;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #64748b;
+
+  /* Typography */
+  --ui-heading-color: #f8fafc;
+  --ui-body-color: #cbd5e1;
+  --ui-muted-color: #94a3b8;
+  --ui-link-color: #60a5fa;
+  --ui-link-hover: #93c5fd;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #1e293b;
+  --ui-menu-fg: #f8fafc;
+  --ui-menu-border: #334155;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}

data/app/assets/stylesheets/aeros/themes/zinc.css

@@ -0,0 +1,163 @@
+/* =============================================================================
+   Theme: Zinc
+   ============================================================================= */
+
+[data-theme="zinc"] {
+  /* Background & Foreground */
+  --ui-background: #ffffff;
+  --ui-foreground: #18181b;
+
+  /* Generic */
+  --ui-border: #e4e4e7;
+  --ui-destructive: #dc2626;
+  --ui-primary: #18181b;
+  --ui-accent: #f4f4f5;
+  --ui-accent-foreground: #18181b;
+  --ui-popover: #ffffff;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Muted */
+  --ui-muted: #f4f4f5;
+  --ui-muted-foreground: #71717a;
+
+  /* Card */
+  --ui-card-bg: #ffffff;
+  --ui-card-fg: #18181b;
+  --ui-card-border: #e4e4e7;
+  --ui-card-radius: 0.75rem;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* Area */
+  --ui-area-bg: #fafafa;
+  --ui-area-fg: #18181b;
+  --ui-area-border: #e4e4e7;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #fafafa;
+  --ui-sidebar-fg: #18181b;
+  --ui-sidebar-border: #e4e4e7;
+  --ui-sidebar-hover: #f4f4f5;
+  --ui-sidebar-active: #e4e4e7;
+
+  /* Button */
+  --ui-button-bg: #18181b;
+  --ui-button-bg-hover: #27272a;
+  --ui-button-fg: #ffffff;
+  --ui-button-border: #18181b;
+  --ui-button-secondary-bg: #f4f4f5;
+  --ui-button-secondary-bg-hover: #e4e4e7;
+  --ui-button-secondary-fg: #18181b;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #b91c1c;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #f4f4f5;
+  --ui-button-ghost-fg: #18181b;
+  --ui-button-outline-bg-hover: #f4f4f5;
+  --ui-button-outline-fg: #18181b;
+
+  /* Input */
+  --ui-input-bg: #ffffff;
+  --ui-input-fg: #18181b;
+  --ui-input-border: #e4e4e7;
+  --ui-input-border-focus: #a1a1aa;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #a1a1aa;
+
+  /* Typography */
+  --ui-heading-color: #18181b;
+  --ui-body-color: #3f3f46;
+  --ui-muted-color: #71717a;
+  --ui-link-color: #2563eb;
+  --ui-link-hover: #1d4ed8;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #ffffff;
+  --ui-menu-fg: #18181b;
+  --ui-menu-border: #e4e4e7;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}
+
+/* Dark mode */
+[data-theme="zinc"][data-mode="dark"] {
+  /* Background & Foreground */
+  --ui-background: #09090b;
+  --ui-foreground: #fafafa;
+
+  /* Generic */
+  --ui-border: #27272a;
+  --ui-destructive: #dc2626;
+  --ui-primary: #fafafa;
+  --ui-accent: #27272a;
+  --ui-accent-foreground: #fafafa;
+  --ui-popover: #18181b;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3);
+
+  /* Muted */
+  --ui-muted: #27272a;
+  --ui-muted-foreground: #a1a1aa;
+
+  /* Card */
+  --ui-card-bg: #18181b;
+  --ui-card-fg: #fafafa;
+  --ui-card-border: #27272a;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+
+  /* Area */
+  --ui-area-bg: #18181b;
+  --ui-area-fg: #fafafa;
+  --ui-area-border: #27272a;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #18181b;
+  --ui-sidebar-fg: #fafafa;
+  --ui-sidebar-border: #27272a;
+  --ui-sidebar-hover: #27272a;
+  --ui-sidebar-active: #3f3f46;
+
+  /* Button */
+  --ui-button-bg: #fafafa;
+  --ui-button-bg-hover: #e4e4e7;
+  --ui-button-fg: #18181b;
+  --ui-button-border: #fafafa;
+  --ui-button-secondary-bg: #27272a;
+  --ui-button-secondary-bg-hover: #3f3f46;
+  --ui-button-secondary-fg: #fafafa;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #ef4444;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #27272a;
+  --ui-button-ghost-fg: #fafafa;
+  --ui-button-outline-bg-hover: #27272a;
+  --ui-button-outline-fg: #fafafa;
+
+  /* Input */
+  --ui-input-bg: #18181b;
+  --ui-input-fg: #fafafa;
+  --ui-input-border: #27272a;
+  --ui-input-border-focus: #52525b;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #52525b;
+
+  /* Typography */
+  --ui-heading-color: #fafafa;
+  --ui-body-color: #d4d4d8;
+  --ui-muted-color: #a1a1aa;
+  --ui-link-color: #60a5fa;
+  --ui-link-hover: #93c5fd;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #18181b;
+  --ui-menu-fg: #fafafa;
+  --ui-menu-border: #27272a;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}

data/app/assets/stylesheets/aeros/utilities.css

@@ -0,0 +1,23 @@
+/* Padding */
+.pad-1 { padding: var(--ui-spacing); }
+.pad-2 { padding: calc(var(--ui-spacing) * 2); }
+.pad-3 { padding: calc(var(--ui-spacing) * 3); }
+.pad-4 { padding: calc(var(--ui-spacing) * 4); }
+
+/* Text size */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+
+/* Text color */
+.text-muted { color: var(--ui-muted-color); }
+
+/* Fixed positioning */
+.cg-theme-toggle {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 50;
+}

data/app/components/aeros/application_view_component.rb

@@ -1,22 +1,152 @@
 module Aeros
   class ApplicationViewComponent < ViewComponentContrib::Base
     extend(Dry::Initializer)
+    include(Turbo::StreamsHelper)
+    include(Turbo::FramesHelper)
     include(Aeros::ApplicationHelper)
-    include(ViewComponentContrib::StyleVariants)
+    include(LucideRails::RailsHelper)
 
-    style_config.postprocess_with do |classes|
-      TailwindMerge::Merger.new.merge(classes.join(" "))
+    # ═══════════════════════════════════════════════════════════════════════════
+    # PROPS DSL
+    # ═══════════════════════════════════════════════════════════════════════════
+
+    def self.prop_definitions
+      @prop_definitions ||= {}
+    end
+
+    def self.prop(name, description:, values: nil, **opts)
+      prop_definitions[name] = { description:, values: }.compact
+      option(name, **opts)
+    end
+
+    def self.props
+      ancestors
+        .select { |a| a.respond_to?(:prop_definitions) }
+        .reverse
+        .reduce({}) { |h, a| h.merge(a.prop_definitions) }
+    end
+
+    # ═══════════════════════════════════════════════════════════════════════════
+    # EXAMPLES DSL
+    # ═══════════════════════════════════════════════════════════════════════════
+
+    class ExamplePreview
+      attr_reader :props
+
+      def initialize(props)
+        @props = props
+      end
+    end
+
+    class Example
+      attr_reader :key, :title, :description, :previews
+
+      def initialize(key, title:, description: nil)
+        @key = key
+        @title = title
+        @description = description
+        @previews = []
+      end
+
+      def preview(**props)
+        @previews << ExamplePreview.new(props)
+      end
+    end
+
+    class ExamplesBuilder
+      attr_reader :examples
+
+      def initialize
+        @examples = []
+      end
+
+      def example(key, title:, description: nil, &block)
+        ex = Example.new(key, title: title, description: description)
+        block.call(ex) if block
+        @examples << ex
+      end
+    end
+
+    def self.examples_config
+      @examples_config ||= { title: nil, description: nil, examples: [] }
+    end
+
+    def self.examples(title, description: nil, &block)
+      @examples_config = { title: title, description: description, examples: [] }
+      builder = ExamplesBuilder.new
+      block.call(builder) if block
+      @examples_config[:examples] = builder.examples
+    end
+
+    def self.examples_title
+      examples_config[:title]
+    end
+
+    def self.examples_description
+      examples_config[:description]
+    end
+
+    def self.examples_list
+      examples_config[:examples]
     end
 
     option(:css, optional: true)
-    def default_styles
-      [style, css].join(" ")
+    option(:style, optional: true)
+
+    # Override in components: def default_style = { height: "300px" }
+    def default_style = {}
+
+    # Hash - for passing to child components
+    def style_hash
+      @style_hash ||= default_style.merge(style || {}).compact
+    end
+
+    # String - for HTML style attribute
+    def merged_style
+      @merged_style ||= style_hash
+        .map { |k, v| "#{k.to_s.dasherize}: #{v}" }
+        .join("; ")
+        .presence
     end
 
     class << self
       def named
         @named ||= self.name.sub(/::Component$/, "").underscore.split("/").join("--").gsub("_", "-")
       end
+
+      PREFIXES = {
+        "Primitives" => "cp",
+        "Blocks" => "cb",
+        "Pages" => "cg"
+      }.freeze
+
+      # Component identifier for CSS scoping (e.g., "cp-card", "cb-sidebar")
+      # Note: Can't use @identifier - ViewComponent uses it for file paths
+      def css_identifier
+        parts = self.name.to_s.sub(/::Component$/, "").split("::")
+        prefix = PREFIXES[parts[-2]] || "c"
+        component = parts.last.underscore.gsub("_", "-")
+        "#{prefix}-#{component}"
+      end
+    end
+
+    # Generate scoped CSS class name (e.g., "cp-card", "cp-card--centered")
+    def class_for(name = nil)
+      return self.class.css_identifier if name.nil? || name == "base"
+      "#{self.class.css_identifier}--#{name}"
+    end
+
+    # Build classes from modifiers
+    # Usage: classes(variant:, size:, disabled:, full:)
+    # - symbol values: class_for(value) e.g. variant: :default → cp-button--default
+    # - true: class_for(key) e.g. disabled: true → cp-button--disabled
+    # - false/nil: skipped
+    def classes(**mods)
+      [
+        class_for,
+        *mods.filter_map { |k, v| v && class_for(v == true ? k.to_s : v.to_s) },
+        css
+      ].join(" ")
     end
 
     def controller_name
@@ -71,5 +201,19 @@ module Aeros
     def default_data
       { controller: controller_name }
     end
+
+    # Shared helper for rendering clickable elements
+    # - button_to for non-GET methods (creates form)
+    # - link_to for GET links
+    # - button_tag for action buttons
+    def action_tag(href: nil, method: nil, data: {}, form_data: {}, **opts, &block)
+      if method && href
+        helpers.button_to(href, method: method, data: data, form: { data: form_data }, **opts, &block)
+      elsif href
+        helpers.link_to(href, data: data, **opts, &block)
+      else
+        helpers.button_tag(type: "button", data: data, **opts, &block)
+      end
+    end
   end
 end

data/app/components/aeros/blocks/component_preview/component.html.erb

@@ -0,0 +1,7 @@
+<div class="cb-component-preview">
+  <% if title %><h2 class="cb-component-preview__title"><%= title %></h2><% end %>
+  <% if description %><p class="cb-component-preview__description text-muted"><%= description %></p><% end %>
+  <%= ui("card", style: style_hash, centered: true) do %>
+    <%= content %>
+  <% end %>
+</div>

data/app/components/aeros/blocks/component_preview/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Aeros::Blocks::ComponentPreview
+  class Component < ::Aeros::ApplicationViewComponent
+    option(:title, optional: true)
+    option(:description, optional: true)
+
+    def default_style = { height: "300px" }
+  end
+end

data/app/components/aeros/blocks/component_preview/styles.css

@@ -0,0 +1,10 @@
+.cb-component-preview {
+  &__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ui-muted-color);
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+}

data/app/components/aeros/form_builder.rb

@@ -5,19 +5,19 @@ class Aeros::FormBuilder < ActionView::Helpers::FormBuilder
     INPUT_BASE_CLASSES = %w[
       block
       w-full
-      rounded-md
-      bg-white
+      rounded-input
+      bg-input-bg
       px-3
       py-2
       text-sm
-      text-gray-900
-      placeholder:text-gray-400
+      text-input-text
+      placeholder:text-input-placeholder
       outline-none
       border
-      border-gray-300
-      focus:border-indigo-500
+      border-input-border
+      focus:border-input-border-focus
       focus:ring-1
-      focus:ring-indigo-500
+      focus:ring-input-ring
       shadow-sm
     ].freeze
 
@@ -35,7 +35,7 @@ class Aeros::FormBuilder < ActionView::Helpers::FormBuilder
   end
 
   def field(field_type, name, options = {}, &block)
-    klass = "Aeros::Input#{field_type.to_s.classify}::Component".constantize
+    klass = "::Aeros::Primitives::Input#{field_type.to_s.camelize}::Component".constantize
     resolved_name = resolve_name(name)
     error_text = @object&.errors&.[](name)&.first
 
@@ -63,6 +63,22 @@ class Aeros::FormBuilder < ActionView::Helpers::FormBuilder
     field(:select, name, options, &block)
   end
 
+  def text_area_field(name, options = {})
+    field(:text_area, name, options)
+  end
+
+  def tagging_field(name, options = {})
+    field(:tagging, name, options)
+  end
+
+  def attachments_field(name, options = {})
+    field(:attachments, name, options)
+  end
+
+  def text_area_ai_field(name, options = {})
+    field(:text_area_ai, name, options)
+  end
+
   private
 
     def resolve_name(name)

data/app/components/aeros/pages/showcase/index/component.html.erb

@@ -0,0 +1,53 @@
+<div class="cg-showcase">
+  <h1>Button</h1>
+
+  <%= block("component_preview", title: "Preview") do %>
+    <%= ui("button", label: "Click me", variant: :default) %>
+  <% end %>
+
+  <%= block("component_preview", title: "Variants") do %>
+    <%= ui("button", label: "Default", variant: :default) %>
+    <%= ui("button", label: "Secondary", variant: :secondary) %>
+    <%= ui("button", label: "Destructive", variant: :destructive) %>
+    <%= ui("button", label: "Outline", variant: :outline) %>
+    <%= ui("button", label: "Ghost", variant: :ghost) %>
+    <%= ui("button", label: "Link", variant: :link) %>
+  <% end %>
+
+  <%= block("component_preview", title: "Sizes") do %>
+    <%= ui("button", label: "XSmall", size: :xsmall) %>
+    <%= ui("button", label: "Small", size: :small) %>
+    <%= ui("button", label: "Default") %>
+    <%= ui("button", label: "Large", size: :large) %>
+  <% end %>
+
+  <%= block("component_preview", title: "With Icons") do %>
+    <%= ui("button", label: "Settings", icon: "settings") %>
+    <%= ui("button", label: "Download", icon: "download", variant: :secondary) %>
+    <%= ui("button", label: "Delete", icon: "trash-2", variant: :destructive) %>
+  <% end %>
+
+  <%= ui("card") do %>
+    <h2>Props</h2>
+    <%= ui("card") do %>
+      <%= ui("table") do |t| %>
+        <% t.with_header do |h| %>
+          <% h.with_column do %>Name<% end %>
+          <% h.with_column do %>Description<% end %>
+          <% h.with_column do %>Values<% end %>
+        <% end %>
+        <% component_class(:button).props.each do |name, meta| %>
+          <% t.with_row do |r| %>
+            <% r.with_cell do %><code><%= name %></code><% end %>
+            <% r.with_cell do %><%= meta[:description] %><% end %>
+            <% r.with_cell do %>
+              <% if meta[:values] %>
+                <% meta[:values].each do |v| %><code><%= v %></code> <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/aeros/pages/showcase/index/component.rb

@@ -0,0 +1,7 @@
+module Aeros::Pages::Showcase::Index
+  class Component < ::Aeros::ApplicationViewComponent
+    def component_class(name)
+      "Aeros::Primitives::#{name.to_s.camelize}::Component".constantize
+    end
+  end
+end