shadcn-rails 0.1.0

data/app/assets/stylesheets/shadcn/themes/stone.css

@@ -0,0 +1,68 @@
+/**
+ * Stone Theme for shadcn-rails
+ *
+ * Import this file to use the Stone color theme:
+ *   @import "shadcn/themes/stone";
+ */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --primary: 24 9.8% 10%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --primary: 60 9.1% 97.8%;
+  --primary-foreground: 24 9.8% 10%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 24 5.7% 82.9%;
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Zinc Theme for shadcn-rails
+ *
+ * Import this file to use the Zinc color theme:
+ *   @import "shadcn/themes/zinc";
+ */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}

data/app/components/shadcn/accordion_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Accordion component for collapsible content sections
+  # Matches shadcn/ui Accordion component
+  # Uses Stimulus for interactivity
+  #
+  # @example Single accordion
+  #   <%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true) do |accordion| %>
+  #     <% accordion.with_item(value: "item-1") do |item| %>
+  #       <% item.with_trigger { "Is it accessible?" } %>
+  #       <% item.with_body { "Yes. It adheres to the WAI-ARIA design pattern." } %>
+  #     <% end %>
+  #     <% accordion.with_item(value: "item-2") do |item| %>
+  #       <% item.with_trigger { "Is it styled?" } %>
+  #       <% item.with_body { "Yes. It comes with default styles." } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Multiple accordion
+  #   <%= render Shadcn::AccordionComponent.new(type: :multiple) do |accordion| %>
+  #     ...
+  #   <% end %>
+  #
+  class AccordionComponent < BaseComponent
+    renders_many :items, lambda { |value:, **options, &block|
+      AccordionItemComponent.new(value: value, **options, &block)
+    }
+
+    # @param type [Symbol] Accordion type (:single, :multiple)
+    # @param collapsible [Boolean] For single type, whether all items can be collapsed
+    # @param default_value [String, Array] Initially expanded item(s)
+    def initialize(type: :single, collapsible: false, default_value: nil, **options)
+      super(**options)
+      @type = type.to_sym
+      @collapsible = collapsible
+      @default_value = default_value
+    end
+
+    def call
+      content_tag(:div, accordion_content, accordion_attributes)
+    end
+
+    private
+
+    def accordion_content
+      safe_join([items, content].compact.flatten)
+    end
+
+    def accordion_attributes
+      attrs = {
+        class: class_name,
+        "data-controller": "shadcn--accordion",
+        "data-shadcn--accordion-type-value": @type.to_s,
+        "data-shadcn--accordion-collapsible-value": @collapsible.to_s,
+        "data-shadcn--accordion-default-value": Array(@default_value).join(",")
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/accordion_content_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Accordion Content component
+  class AccordionContentComponent < BaseComponent
+    BASE_CLASSES = "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    INNER_CLASSES = "pb-4 pt-0"
+
+    def call
+      content_tag(:div, inner_content, content_attributes)
+    end
+
+    private
+
+    def inner_content
+      content_tag(:div, content, class: INNER_CLASSES)
+    end
+
+    def content_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "region",
+        "data-shadcn--accordion-target": "content",
+        "data-state": "closed",
+        hidden: true
+      }
+    end
+  end
+end

data/app/components/shadcn/accordion_item_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Accordion Item component
+  class AccordionItemComponent < BaseComponent
+    BASE_CLASSES = "border-b"
+
+    renders_one :trigger, lambda { |**options, &block|
+      AccordionTriggerComponent.new(**options, &block)
+    }
+    renders_one :body, lambda { |**options, &block|
+      AccordionContentComponent.new(**options, &block)
+    }
+
+    # @param value [String] Unique value identifying this item
+    def initialize(value:, **options)
+      super(**options)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([trigger, body].compact)
+    end
+
+    def item_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        "data-shadcn--accordion-target": "item",
+        "data-value": @value,
+        "data-state": "closed"
+      }
+    end
+  end
+end

data/app/components/shadcn/accordion_trigger_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Accordion Trigger component
+  class AccordionTriggerComponent < BaseComponent
+    HEADER_CLASSES = "flex"
+    TRIGGER_CLASSES = "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180"
+
+    def call
+      content_tag(:h3, trigger_button, class: HEADER_CLASSES, "data-orientation": "vertical")
+    end
+
+    private
+
+    def trigger_button
+      content_tag(:button, button_content, trigger_attributes)
+    end
+
+    def button_content
+      safe_join([
+        content_tag(:span, content),
+        chevron_icon
+      ])
+    end
+
+    def chevron_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "m6 9 6 6 6-6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        class: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      )
+    end
+
+    def trigger_attributes
+      {
+        type: "button",
+        class: cn(TRIGGER_CLASSES, class_name),
+        "data-shadcn--accordion-target": "trigger",
+        "data-action": "click->shadcn--accordion#toggle",
+        "data-state": "closed",
+        "aria-expanded": "false"
+      }
+    end
+  end
+end

data/app/components/shadcn/alert_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert component for displaying important messages
+  # Matches shadcn/ui Alert component
+  #
+  # @example Basic alert
+  #   <%= render Shadcn::AlertComponent.new do |alert| %>
+  #     <% alert.with_title { "Heads up!" } %>
+  #     <% alert.with_description { "You can add components to your app using the cli." } %>
+  #   <% end %>
+  #
+  # @example Destructive alert
+  #   <%= render Shadcn::AlertComponent.new(variant: :destructive) do |alert| %>
+  #     <% alert.with_title { "Error" } %>
+  #     <% alert.with_description { "Something went wrong." } %>
+  #   <% end %>
+  #
+  # @example With icon
+  #   <%= render Shadcn::AlertComponent.new do |alert| %>
+  #     <% alert.with_icon do %>
+  #       <%= icon "info" %>
+  #     <% end %>
+  #     <% alert.with_title { "Note" } %>
+  #     <% alert.with_description { "This is an informational message." } %>
+  #   <% end %>
+  #
+  class AlertComponent < BaseComponent
+    # Available alert variants
+    VARIANTS = {
+      default: "bg-background text-foreground",
+      destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+    }.freeze
+
+    BASE_CLASSES = "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7"
+
+    renders_one :icon
+    renders_one :title, lambda { |**options|
+      AlertTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      AlertDescriptionComponent.new(**options)
+    }
+
+    # @param variant [Symbol] Alert style variant (:default, :destructive)
+    def initialize(variant: :default, **options)
+      super(**options)
+      @variant = variant.to_sym
+    end
+
+    def call
+      content_tag(:div, alert_content, alert_attributes)
+    end
+
+    private
+
+    def alert_content
+      safe_join([icon, title, description, content].compact)
+    end
+
+    def alert_classes
+      cn(BASE_CLASSES, VARIANTS[@variant], class_name)
+    end
+
+    def alert_attributes
+      attrs = {
+        class: alert_classes,
+        role: "alert"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/alert_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Description component
+  class AlertDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm [&_p]:leading-relaxed"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options)
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_action_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Action button component
+  class AlertDialogActionComponent < BaseComponent
+    BASE_CLASSES = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
+
+    def call
+      content_tag(:button, content, button_attributes)
+    end
+
+    private
+
+    def button_attributes
+      attrs = {
+        type: "button",
+        class: merge_classes(BASE_CLASSES),
+        "data-action": "click->shadcn--dialog#close"
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_cancel_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Cancel button component
+  class AlertDialogCancelComponent < BaseComponent
+    BASE_CLASSES = "mt-2 sm:mt-0 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
+
+    def call
+      content_tag(:button, content, button_attributes)
+    end
+
+    private
+
+    def button_attributes
+      attrs = {
+        type: "button",
+        class: merge_classes(BASE_CLASSES),
+        "data-action": "click->shadcn--dialog#close"
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog component for important confirmation dialogs
+  # Matches shadcn/ui AlertDialog component
+  # Uses Stimulus for interactivity (reuses dialog controller)
+  #
+  # @example Basic alert dialog
+  #   <%= render Shadcn::AlertDialogComponent.new do |dialog| %>
+  #     <% dialog.with_trigger do %>
+  #       <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Delete Account" } %>
+  #     <% end %>
+  #     <% dialog.with_body do |body| %>
+  #       <% body.with_header do |header| %>
+  #         <% header.with_title { "Are you absolutely sure?" } %>
+  #         <% header.with_description { "This action cannot be undone." } %>
+  #       <% end %>
+  #       <% body.with_footer do |footer| %>
+  #         <% footer.with_cancel { "Cancel" } %>
+  #         <% footer.with_action { "Continue" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class AlertDialogComponent < BaseComponent
+    renders_one :trigger
+    renders_one :body, lambda { |**options|
+      AlertDialogContentComponent.new(**options)
+    }
+
+    # @param open [Boolean] Whether dialog starts open
+    def initialize(open: false, **options)
+      super(**options)
+      @open = open
+    end
+
+    def call
+      content_tag(:div, dialog_content, dialog_attributes)
+    end
+
+    private
+
+    def dialog_content
+      safe_join([
+        trigger_wrapper,
+        body
+      ].compact)
+    end
+
+    def trigger_wrapper
+      return unless trigger
+
+      content_tag(:div, trigger, {
+        "data-shadcn--dialog-target": "trigger",
+        "data-action": "click->shadcn--dialog#open"
+      })
+    end
+
+    def dialog_attributes
+      attrs = {
+        class: class_name,
+        "data-controller": "shadcn--dialog",
+        "data-shadcn--dialog-open-value": @open.to_s,
+        "data-shadcn--dialog-modal-value": "true"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_content_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Content component
+  class AlertDialogContentComponent < BaseComponent
+    OVERLAY_CLASSES = "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    CONTENT_CLASSES = "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+
+    renders_one :header, lambda { |**options|
+      AlertDialogHeaderComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      AlertDialogFooterComponent.new(**options)
+    }
+
+    def call
+      content_tag(:template, content_wrapper, { "data-shadcn--dialog-target": "template" })
+    end
+
+    private
+
+    def content_wrapper
+      safe_join([
+        overlay,
+        dialog_panel
+      ])
+    end
+
+    def overlay
+      content_tag(:div, "", {
+        class: OVERLAY_CLASSES,
+        "data-shadcn--dialog-target": "overlay",
+        "data-state": "closed",
+        "aria-hidden": "true"
+      })
+    end
+
+    def dialog_panel
+      content_tag(:div, panel_content, {
+        class: cn(CONTENT_CLASSES, class_name),
+        role: "alertdialog",
+        "aria-modal": "true",
+        "data-shadcn--dialog-target": "content",
+        "data-state": "closed",
+        tabindex: "-1"
+      })
+    end
+
+    def panel_content
+      safe_join([
+        header,
+        content,
+        footer
+      ].compact)
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Description component
+  class AlertDialogDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm text-muted-foreground"
+
+    def call
+      content_tag(:p, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_footer_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Footer component
+  class AlertDialogFooterComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+
+    renders_one :cancel, lambda { |**options|
+      AlertDialogCancelComponent.new(**options)
+    }
+    renders_one :action, lambda { |**options|
+      AlertDialogActionComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, safe_join([cancel, action, content].compact), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_header_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Header component
+  class AlertDialogHeaderComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col space-y-2 text-center sm:text-left"
+
+    renders_one :title, lambda { |**options|
+      AlertDialogTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      AlertDialogDescriptionComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, safe_join([title, description, content].compact), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/alert_dialog_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Dialog Title component
+  class AlertDialogTitleComponent < BaseComponent
+    BASE_CLASSES = "text-lg font-semibold"
+
+    def call
+      content_tag(:h2, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/alert_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Alert Title component
+  class AlertTitleComponent < BaseComponent
+    BASE_CLASSES = "mb-1 font-medium leading-none tracking-tight"
+
+    def call
+      content_tag(:h5, content, class: merge_classes(BASE_CLASSES), **html_options)
+    end
+  end
+end