shadcn-rails 0.1.0

data/app/components/shadcn/table_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table component for displaying tabular data
+  # Matches shadcn/ui Table component
+  #
+  # @example Basic table
+  #   <%= render Shadcn::TableComponent.new do |table| %>
+  #     <% table.with_header do |header| %>
+  #       <% header.with_row do |row| %>
+  #         <% row.with_head { "Name" } %>
+  #         <% row.with_head { "Email" } %>
+  #         <% row.with_head { "Role" } %>
+  #       <% end %>
+  #     <% end %>
+  #     <% table.with_body do |body| %>
+  #       <% @users.each do |user| %>
+  #         <% body.with_row do |row| %>
+  #           <% row.with_cell { user.name } %>
+  #           <% row.with_cell { user.email } %>
+  #           <% row.with_cell { user.role } %>
+  #         <% end %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class TableComponent < BaseComponent
+    BASE_CLASSES = "w-full caption-bottom text-sm"
+
+    renders_one :caption, lambda { |**options|
+      TableCaptionComponent.new(**options)
+    }
+    renders_one :header, lambda { |**options|
+      TableHeaderComponent.new(**options)
+    }
+    renders_one :body, lambda { |**options|
+      TableBodyComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      TableFooterComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, table_element, class: "relative w-full overflow-auto")
+    end
+
+    private
+
+    def table_element
+      content_tag(:table, table_content, class: merge_classes(BASE_CLASSES))
+    end
+
+    def table_content
+      safe_join([caption, header, body, footer, content].compact)
+    end
+  end
+end

data/app/components/shadcn/table_footer_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Footer component
+  class TableFooterComponent < BaseComponent
+    BASE_CLASSES = "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"
+
+    renders_many :rows, lambda { |**options, &block|
+      TableRowComponent.new(**options, &block)
+    }
+
+    def call
+      content_tag(:tfoot, safe_join([rows, content].compact.flatten), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/table_head_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Head component
+  class TableHeadComponent < BaseComponent
+    BASE_CLASSES = "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+
+    def call
+      content_tag(:th, content, class: merge_classes(BASE_CLASSES), **html_options)
+    end
+  end
+end

data/app/components/shadcn/table_header_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Header component
+  class TableHeaderComponent < BaseComponent
+    BASE_CLASSES = "[&_tr]:border-b"
+
+    renders_many :rows, lambda { |**options, &block|
+      TableRowComponent.new(**options, &block)
+    }
+
+    def call
+      content_tag(:thead, safe_join([rows, content].compact.flatten), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/table_row_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Row component
+  class TableRowComponent < BaseComponent
+    BASE_CLASSES = "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+
+    renders_many :heads, lambda { |**options, &block|
+      TableHeadComponent.new(**options, &block)
+    }
+    renders_many :cells, lambda { |**options, &block|
+      TableCellComponent.new(**options, &block)
+    }
+
+    # @param selected [Boolean] Whether row is selected
+    def initialize(selected: false, **options, &block)
+      super(**options, &block)
+      @selected = selected
+    end
+
+    def call
+      content_tag(:tr, row_content, row_attributes)
+    end
+
+    private
+
+    def row_content
+      safe_join([heads, cells, content].compact.flatten)
+    end
+
+    def row_attributes
+      attrs = {
+        class: merge_classes(BASE_CLASSES),
+        "data-state": @selected ? "selected" : nil
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/tabs_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Tabs component for tabbed interfaces
+  # Matches shadcn/ui Tabs component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic tabs
+  #   <%= render Shadcn::TabsComponent.new(default_value: "account") do |tabs| %>
+  #     <% tabs.with_list do |list| %>
+  #       <% list.with_trigger(value: "account") { "Account" } %>
+  #       <% list.with_trigger(value: "password") { "Password" } %>
+  #     <% end %>
+  #     <% tabs.with_panel(value: "account") do %>
+  #       Account settings content
+  #     <% end %>
+  #     <% tabs.with_panel(value: "password") do %>
+  #       Password settings content
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Tabs with URL sync
+  #   <%= render Shadcn::TabsComponent.new(default_value: "account", url_param: "tab") do |tabs| %>
+  #     <% tabs.with_list do |list| %>
+  #       <% list.with_trigger(value: "account") { "Account" } %>
+  #       <% list.with_trigger(value: "password") { "Password" } %>
+  #     <% end %>
+  #     <% tabs.with_panel(value: "account") do %>
+  #       Account settings content
+  #     <% end %>
+  #     <% tabs.with_panel(value: "password") do %>
+  #       Password settings content
+  #     <% end %>
+  #   <% end %>
+  #   # URL will update to ?tab=account or ?tab=password when tabs are clicked
+  #
+  class TabsComponent < BaseComponent
+    renders_one :list, lambda { |**options|
+      TabsListComponent.new(**options)
+    }
+    renders_many :panels, lambda { |value:, **options, &block|
+      TabsContentComponent.new(value: value, **options, &block)
+    }
+
+    # @param default_value [String] The value of the initially active tab
+    # @param orientation [Symbol] Orientation (:horizontal, :vertical)
+    # @param url_param [String, nil] Query parameter name to sync active tab with URL (e.g., "tab")
+    def initialize(default_value: nil, orientation: :horizontal, url_param: nil, **options)
+      super(**options)
+      @default_value = default_value
+      @orientation = orientation
+      @url_param = url_param
+    end
+
+    def call
+      content_tag(:div, tabs_content, tabs_attributes)
+    end
+
+    private
+
+    def tabs_content
+      safe_join([list, panels, content].compact.flatten)
+    end
+
+    def tabs_attributes
+      attrs = {
+        class: class_name,
+        "data-controller": "shadcn--tabs",
+        "data-shadcn--tabs-default-value": @default_value,
+        "data-shadcn--tabs-url-param-value": @url_param,
+        "data-orientation": @orientation.to_s
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/tabs_content_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Tabs Content component
+  class TabsContentComponent < BaseComponent
+    BASE_CLASSES = "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+
+    # @param value [String] The value that identifies this tab panel
+    def initialize(value:, **options)
+      super(**options)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, content, content_attributes)
+    end
+
+    private
+
+    def content_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "tabpanel",
+        "data-shadcn--tabs-target": "content",
+        "data-value": @value,
+        "data-state": "inactive",
+        hidden: true,
+        tabindex: "0"
+      }
+    end
+  end
+end

data/app/components/shadcn/tabs_list_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Tabs List component
+  class TabsListComponent < BaseComponent
+    BASE_CLASSES = "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
+
+    renders_many :triggers, lambda { |value:, **options, &block|
+      TabsTriggerComponent.new(value: value, **options, &block)
+    }
+
+    def call
+      content_tag(:div, list_content, list_attributes)
+    end
+
+    private
+
+    def list_content
+      safe_join([triggers, content].compact.flatten)
+    end
+
+    def list_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "tablist",
+        "data-shadcn--tabs-target": "list"
+      }
+    end
+  end
+end

data/app/components/shadcn/tabs_trigger_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Tabs Trigger component
+  class TabsTriggerComponent < BaseComponent
+    BASE_CLASSES = "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
+
+    # @param value [String] The value that identifies this tab
+    # @param disabled [Boolean] Whether the tab is disabled
+    def initialize(value:, disabled: false, **options)
+      super(**options)
+      @value = value
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:button, content, trigger_attributes)
+    end
+
+    private
+
+    def trigger_attributes
+      {
+        type: "button",
+        role: "tab",
+        class: merge_classes(BASE_CLASSES),
+        disabled: @disabled || nil,
+        "data-shadcn--tabs-target": "trigger",
+        "data-value": @value,
+        "data-state": "inactive",
+        "data-action": "click->shadcn--tabs#selectTab",
+        "aria-selected": "false",
+        tabindex: "-1"
+      }
+    end
+  end
+end

data/app/components/shadcn/textarea_component.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Textarea component for multi-line text input
+  # Matches shadcn/ui Textarea component
+  #
+  # @example Basic textarea
+  #   <%= render Shadcn::TextareaComponent.new(name: "bio", placeholder: "Tell us about yourself") %>
+  #
+  # @example With rows
+  #   <%= render Shadcn::TextareaComponent.new(name: "message", rows: 6) %>
+  #
+  class TextareaComponent < BaseComponent
+    BASE_CLASSES = "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+
+    # @param name [String, nil] Textarea name attribute
+    # @param id [String, nil] Textarea id attribute
+    # @param value [String, nil] Initial value
+    # @param placeholder [String, nil] Placeholder text
+    # @param rows [Integer] Number of visible rows
+    # @param cols [Integer, nil] Number of visible columns
+    # @param disabled [Boolean] Whether textarea is disabled
+    # @param required [Boolean] Whether textarea is required
+    # @param readonly [Boolean] Whether textarea is readonly
+    # @param autofocus [Boolean] Whether to autofocus
+    # @param minlength [Integer, nil] Minimum length
+    # @param maxlength [Integer, nil] Maximum length
+    def initialize(
+      name: nil,
+      id: nil,
+      value: nil,
+      placeholder: nil,
+      rows: 3,
+      cols: nil,
+      disabled: false,
+      required: false,
+      readonly: false,
+      autofocus: false,
+      minlength: nil,
+      maxlength: nil,
+      **options
+    )
+      super(**options)
+      @name = name
+      @id = id
+      @value = value
+      @placeholder = placeholder
+      @rows = rows
+      @cols = cols
+      @disabled = disabled
+      @required = required
+      @readonly = readonly
+      @autofocus = autofocus
+      @minlength = minlength
+      @maxlength = maxlength
+    end
+
+    def call
+      content_tag(:textarea, @value || content, textarea_attributes)
+    end
+
+    private
+
+    def textarea_attributes
+      attrs = {
+        name: @name,
+        id: @id,
+        placeholder: @placeholder,
+        rows: @rows,
+        cols: @cols,
+        disabled: @disabled || nil,
+        required: @required || nil,
+        readonly: @readonly || nil,
+        autofocus: @autofocus || nil,
+        minlength: @minlength,
+        maxlength: @maxlength,
+        class: merge_classes(BASE_CLASSES)
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/toast_action_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toast Action component
+  class ToastActionComponent < BaseComponent
+    BASE_CLASSES = "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive"
+
+    # @param alt_text [String] Alternative text for accessibility
+    def initialize(alt_text:, **options, &block)
+      super(**options, &block)
+      @alt_text = alt_text
+    end
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), "aria-label": @alt_text)
+    end
+  end
+end

data/app/components/shadcn/toast_component.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toast component for notifications
+  # Matches shadcn/ui Toast component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic toast (typically rendered via JavaScript/Turbo)
+  #   <%= render Shadcn::ToastComponent.new(variant: :default) do |toast| %>
+  #     <% toast.with_title { "Scheduled" } %>
+  #     <% toast.with_description { "Your message has been scheduled." } %>
+  #   <% end %>
+  #
+  # @example Destructive toast
+  #   <%= render Shadcn::ToastComponent.new(variant: :destructive) do |toast| %>
+  #     <% toast.with_title { "Error" } %>
+  #     <% toast.with_description { "Something went wrong." } %>
+  #     <% toast.with_action(alt_text: "Try again") do %>
+  #       <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :sm) { "Try again" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class ToastComponent < BaseComponent
+    VARIANTS = {
+      default: "border bg-background text-foreground",
+      destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
+    }.freeze
+
+    BASE_CLASSES = "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full"
+
+    renders_one :title, lambda { |**options|
+      ToastTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      ToastDescriptionComponent.new(**options)
+    }
+    renders_one :action, lambda { |alt_text:, **options, &block|
+      ToastActionComponent.new(alt_text: alt_text, **options, &block)
+    }
+    renders_one :close
+
+    # @param variant [Symbol] Toast variant (:default, :destructive)
+    # @param duration [Integer] Auto-dismiss duration in ms (0 for no auto-dismiss)
+    # @param open [Boolean] Whether toast is visible
+    def initialize(variant: :default, duration: 5000, open: true, **options)
+      super(**options)
+      @variant = variant.to_sym
+      @duration = duration
+      @open = open
+    end
+
+    def call
+      content_tag(:li, toast_content, toast_attributes)
+    end
+
+    private
+
+    def toast_content
+      safe_join([
+        content_wrapper,
+        action,
+        close_button
+      ].compact)
+    end
+
+    def content_wrapper
+      content_tag(:div, safe_join([title, description, content].compact), class: "grid gap-1")
+    end
+
+    def close_button
+      close || default_close_button
+    end
+
+    def default_close_button
+      content_tag(:button, close_icon, {
+        type: "button",
+        class: "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+        "data-action": "click->shadcn--toast#close",
+        "aria-label": "Close"
+      })
+    end
+
+    def close_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "M18 6 6 18M6 6l12 12", 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"
+      )
+    end
+
+    def toast_classes
+      cn(BASE_CLASSES, VARIANTS[@variant], class_name)
+    end
+
+    def toast_attributes
+      attrs = {
+        class: toast_classes,
+        role: "status",
+        "aria-live": "polite",
+        "data-controller": "shadcn--toast",
+        "data-shadcn--toast-duration-value": @duration,
+        "data-shadcn--toast-open-value": @open.to_s,
+        "data-state": @open ? "open" : "closed"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/toast_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toast Description component
+  class ToastDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm opacity-90"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/toast_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toast Title component
+  class ToastTitleComponent < BaseComponent
+    BASE_CLASSES = "text-sm font-semibold [&+div]:text-xs"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/toast_viewport_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toast Viewport (container for all toasts)
+  class ToastViewportComponent < BaseComponent
+    BASE_CLASSES = "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"
+
+    def call
+      content_tag(:ol, content, class: merge_classes(BASE_CLASSES), tabindex: "-1", "data-shadcn--toaster-target": "viewport")
+    end
+  end
+end

data/app/components/shadcn/toggle_component.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toggle component for a two-state button
+  # Matches shadcn/ui Toggle component
+  #
+  # @example Basic usage
+  #   <%= render Shadcn::ToggleComponent.new(aria_label: "Toggle bold") do %>
+  #     <svg>...</svg>
+  #   <% end %>
+  #
+  # @example Outline variant
+  #   <%= render Shadcn::ToggleComponent.new(variant: :outline, pressed: true) do %>
+  #     Italic
+  #   <% end %>
+  #
+  class ToggleComponent < BaseComponent
+    VARIANTS = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZES = {
+      sm: "h-8 px-2",
+      default: "h-9 px-3",
+      lg: "h-10 px-3"
+    }.freeze
+
+    BASE_CLASSES = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+
+    # @param variant [Symbol] :default or :outline
+    # @param size [Symbol] :sm, :default, or :lg
+    # @param pressed [Boolean] Initial pressed state
+    # @param disabled [Boolean] Whether toggle is disabled
+    # @param aria_label [String] Accessibility label
+    def initialize(
+      variant: :default,
+      size: :default,
+      pressed: false,
+      disabled: false,
+      aria_label: nil,
+      **options
+    )
+      super(**options)
+      @variant = variant
+      @size = size
+      @pressed = pressed
+      @disabled = disabled
+      @aria_label = aria_label
+    end
+
+    def call
+      content_tag(:button, toggle_attributes) do
+        content
+      end
+    end
+
+    private
+
+    def toggle_attributes
+      attrs = {
+        type: "button",
+        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name),
+        disabled: @disabled || nil,
+        "aria-pressed": @pressed.to_s,
+        "aria-label": @aria_label,
+        "data-state": @pressed ? "on" : "off",
+        "data-controller": "shadcn--toggle",
+        "data-action": "click->shadcn--toggle#toggle",
+        "data-shadcn--toggle-pressed-value": @pressed.to_s
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end