shadcn_view_component 0.3.3

data/app/components/shadcn/avatar/fallback/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Avatar
+    module Fallback
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"avatar-fallback"
+
+        style do
+          base {
+            "flex size-full items-center justify-center rounded-full bg-muted text-sm " \
+            "text-muted-foreground group-data-[size=sm]/avatar:text-xs"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--avatar-target" => "fallback" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/avatar/image/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Avatar
+    module Image
+      class Component < ApplicationViewComponent
+        default_tag :img
+        slot_name :"avatar-image"
+
+        style do
+          base { "aspect-square size-full" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--avatar-target" => "image" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/avatar/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Avatar
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/avatar/previews/default.html.erb

@@ -0,0 +1,13 @@
+<div class="flex items-center gap-4">
+  <% %i[sm default lg].each do |size| %>
+    <%= render(Shadcn::Avatar::Component.new(size:)) do |a| %>
+      <% a.with_fallback { "CN" } %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Avatar::Group::Component.new) do %>
+    <% 3.times do %>
+      <%= render(Shadcn::Avatar::Component.new) do |a| %><% a.with_fallback { "AB" } %><% end %>
+    <% end %>
+    <%= render(Shadcn::Avatar::GroupCount::Component.new) { "+3" } %>
+  <% end %>
+</div>

data/app/components/shadcn/avatar.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Avatar family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Avatar
+    extend Parts
+
+    part :badge, tag: :span, slot: "avatar-badge",
+                 classes: "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center " \
+                          "rounded-full bg-primary text-primary-foreground ring-2 ring-background " \
+                          "select-none group-data-[size=sm]/avatar:size-2 " \
+                          "group-data-[size=sm]/avatar:[&>svg]:hidden " \
+                          "group-data-[size=default]/avatar:size-2.5 " \
+                          "group-data-[size=default]/avatar:[&>svg]:size-2 " \
+                          "group-data-[size=lg]/avatar:size-3 " \
+                          "group-data-[size=lg]/avatar:[&>svg]:size-2"
+
+    part :group, slot: "avatar-group",
+                 classes: "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 " \
+                          "*:data-[slot=avatar]:ring-background"
+
+    part :group_count, slot: "avatar-group-count",
+                       classes: "relative flex size-8 shrink-0 items-center justify-center " \
+                                "rounded-full bg-muted text-sm text-muted-foreground ring-2 " \
+                                "ring-background group-has-data-[size=lg]/avatar-group:size-10 " \
+                                "group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 " \
+                                "group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 " \
+                                "group-has-data-[size=sm]/avatar-group:[&>svg]:size-3"
+  end
+end

data/app/components/shadcn/badge/component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Badge
+    # Port of registry/new-york-v4/ui/badge.tsx
+    class Component < ApplicationViewComponent
+      default_tag :span
+      slot_name :badge
+
+      style do
+        base {
+          "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden " \
+          "rounded-full border border-transparent px-2 py-0.5 text-xs font-medium " \
+          "whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring " \
+          "focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive " \
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+          "[&>svg]:pointer-events-none [&>svg]:size-3"
+        }
+
+        variants {
+          variant {
+            default { "bg-primary text-primary-foreground [a&]:hover:bg-primary/90" }
+            secondary { "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90" }
+            destructive {
+              "bg-destructive text-white focus-visible:ring-destructive/20 " \
+              "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 " \
+              "[a&]:hover:bg-destructive/90"
+            }
+            outline {
+              "border-border text-foreground [a&]:hover:bg-accent " \
+              "[a&]:hover:text-accent-foreground"
+            }
+            ghost { "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground" }
+            link { "text-primary underline-offset-4 [a&]:hover:underline" }
+          }
+        }
+
+        defaults { { variant: :default } }
+      end
+
+      attr_reader :variant
+
+      def initialize(variant: :default, **attributes)
+        @variant = variant&.to_sym || :default
+        super(**attributes)
+      end
+
+      def style_variants
+        { variant: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-variant" => variant }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/badge/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Badge
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/badge/previews/default.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center gap-2">
+  <% %i[default secondary destructive outline ghost link].each do |variant| %>
+    <%= render(Shadcn::Badge::Component.new(variant:)) { variant.to_s.capitalize } %>
+  <% end %>
+</div>

data/app/components/shadcn/breadcrumb/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Breadcrumb
+    # Port of registry/new-york-v4/ui/breadcrumb.tsx
+    class Component < ApplicationViewComponent
+      default_tag :nav
+      slot_name :breadcrumb
+
+      def element_attributes(**defaults)
+        super(**{ "aria-label" => shadcn_t("breadcrumb.label") }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb/ellipsis/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Breadcrumb
+    module Ellipsis
+      # BreadcrumbEllipsis — collapsed crumbs.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"breadcrumb-ellipsis"
+
+        style do
+          base { "flex size-9 items-center justify-center" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ role: "presentation", "aria-hidden" => "true" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("more-horizontal", class: "size-4")),
+            tag.span(shadcn_t("breadcrumb.more"), class: "sr-only")
+          ]))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb/page/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Breadcrumb
+    module Page
+      # BreadcrumbPage — the current, non-navigable crumb.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"breadcrumb-page"
+
+        style do
+          base { "font-normal text-foreground" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "link",
+            "aria-disabled" => "true",
+            "aria-current" => "page"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Breadcrumb
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Custom Separator".
+      def custom_separator
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb/previews/custom_separator.html.erb

@@ -0,0 +1,17 @@
+<%# Upstream's "Custom Separator": the separator draws a chevron when given
+    nothing, and whatever it is given when it is. %>
+<%= render(Shadcn::Breadcrumb::Component.new) do %>
+  <%= render(Shadcn::Breadcrumb::List::Component.new) do %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Link::Component.new(href: "#")) { "Home" } %>
+    <% end %>
+    <%= render(Shadcn::Breadcrumb::Separator::Component.new) { "/" } %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Link::Component.new(href: "#")) { "Docs" } %>
+    <% end %>
+    <%= render(Shadcn::Breadcrumb::Separator::Component.new) { "/" } %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Page::Component.new) { "Breadcrumb" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/breadcrumb/previews/default.html.erb

@@ -0,0 +1,15 @@
+<%= render(Shadcn::Breadcrumb::Component.new) do %>
+  <%= render(Shadcn::Breadcrumb::List::Component.new) do %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Link::Component.new(href: "#")) { "Home" } %>
+    <% end %>
+    <%= render(Shadcn::Breadcrumb::Separator::Component.new) %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Ellipsis::Component.new) %>
+    <% end %>
+    <%= render(Shadcn::Breadcrumb::Separator::Component.new) %>
+    <%= render(Shadcn::Breadcrumb::Item::Component.new) do %>
+      <%= render(Shadcn::Breadcrumb::Page::Component.new) { "Breadcrumb" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/breadcrumb/separator/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Breadcrumb
+    module Separator
+      # BreadcrumbSeparator — falls back to a chevron when given no content.
+      class Component < ApplicationViewComponent
+        default_tag :li
+        slot_name :"breadcrumb-separator"
+
+        style do
+          base { "[&>svg]:size-3.5" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ role: "presentation", "aria-hidden" => "true" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: content.presence || default_separator)
+        end
+
+        private
+
+        def default_separator
+          render(Icon::Component.new("chevron-right"))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Breadcrumb family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Breadcrumb
+    extend Parts
+
+    part :item, tag: :li, slot: "breadcrumb-item", classes: "inline-flex items-center gap-1.5"
+
+    part :link, tag: :a, slot: "breadcrumb-link", classes: "transition-colors hover:text-foreground"
+
+    part :list, tag: :ol, slot: "breadcrumb-list",
+                classes: "flex flex-wrap items-center gap-1.5 text-sm break-words " \
+                         "text-muted-foreground sm:gap-2.5"
+  end
+end

data/app/components/shadcn/bubble/component.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Bubble
+    # Port of registry/new-york-v4/ui/bubble.tsx
+    #
+    # Every variant here styles the *child* rather than this element: they are
+    # all `*:data-[slot=bubble-content]:…` selectors, so a Bubble with no
+    # Content inside it renders no colour at all. That is upstream's arrangement,
+    # not a simplification — the bubble owns the layout and the content owns the
+    # surface.
+    class Component < ApplicationViewComponent
+      slot_name :bubble
+
+      style do
+        base {
+          "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 " \
+          "group-data-[align=end]/message:self-end data-[align=end]:self-end " \
+          "data-[variant=ghost]:max-w-full"
+        }
+
+        variants {
+          variant {
+            default {
+              "*:data-[slot=bubble-content]:bg-primary " \
+              "*:data-[slot=bubble-content]:text-primary-foreground " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80"
+            }
+            secondary {
+              "*:data-[slot=bubble-content]:bg-secondary " \
+              "*:data-[slot=bubble-content]:text-secondary-foreground " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]"
+            }
+            muted {
+              "*:data-[slot=bubble-content]:bg-muted " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]"
+            }
+            tinted {
+              "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] " \
+              "*:data-[slot=bubble-content]:text-foreground " \
+              "dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] " \
+              "dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]"
+            }
+            outline {
+              "*:data-[slot=bubble-content]:border-border " \
+              "*:data-[slot=bubble-content]:bg-background " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground " \
+              "dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30"
+            }
+            ghost {
+              "border-none *:data-[slot=bubble-content]:rounded-none " \
+              "*:data-[slot=bubble-content]:bg-transparent " \
+              "*:data-[slot=bubble-content]:p-0 " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground " \
+              "dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50"
+            }
+            destructive {
+              "*:data-[slot=bubble-content]:bg-destructive/10 " \
+              "*:data-[slot=bubble-content]:text-destructive " \
+              "dark:*:data-[slot=bubble-content]:bg-destructive/20 " \
+              "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 " \
+              "dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+            }
+          }
+        }
+
+        defaults { { variant: :default } }
+      end
+
+      attr_reader :variant, :align
+
+      def initialize(variant: :default, align: :start, **attributes)
+        @variant = variant&.to_sym || :default
+        @align = align&.to_sym || :start
+        super(**attributes)
+      end
+
+      def style_variants
+        { variant: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-variant" => variant, "data-align" => align }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/bubble/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Bubble
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Alignment" and "Links and Buttons".
+      def alignment
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/bubble/previews/alignment.html.erb

@@ -0,0 +1,33 @@
+<%# Upstream's "Alignment" and "Links and Buttons".
+
+    `align:` is what makes a conversation read as one: the same bubble on the
+    start edge is what somebody else said, on the end edge is what you said.
+    It moves the bubble and the reactions that hang off its corner together.
+
+    And the content can *be* a link or a button rather than contain one — the
+    variants style for it, `[&>[data-slot=bubble-content]:is(button,a):hover]`
+    in every one of the seven — so the whole bubble is the target rather than a
+    word inside it. %>
+<div class="flex w-[420px] flex-col gap-3">
+  <%= render(Shadcn::Bubble::Group::Component.new) do %>
+    <%= render(Shadcn::Bubble::Component.new(variant: :muted)) do %>
+      <%= render(Shadcn::Bubble::Content::Component.new) { "Where did we land on the pricing page?" } %>
+    <% end %>
+    <%= render(Shadcn::Bubble::Component.new(align: :end)) do %>
+      <%= render(Shadcn::Bubble::Content::Component.new) { "Shipping it on Thursday." } %>
+    <% end %>
+    <%= render(Shadcn::Bubble::Component.new(align: :end, class: "mb-3")) do %>
+      <%= render(Shadcn::Bubble::Content::Component.new) { "The copy is signed off." } %>
+      <%= render(Shadcn::Bubble::Reactions::Component.new) { "🎉 1" } %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Bubble::Group::Component.new) do %>
+    <%= render(Shadcn::Bubble::Component.new(variant: :muted)) do %>
+      <%= render(Shadcn::Bubble::Content::Component.new(as: :a, href: "#")) { "The whole bubble is the link" } %>
+    <% end %>
+    <%= render(Shadcn::Bubble::Component.new(align: :end)) do %>
+      <%= render(Shadcn::Bubble::Content::Component.new(as: :button, type: "button")) { "And this one is the button" } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/bubble/previews/default.html.erb

@@ -0,0 +1,22 @@
+<%# Every variant, because every one of them styles the *child* rather than the
+    bubble itself — they are all `*:data-[slot=bubble-content]:…` selectors, so
+    a bubble rendered without its content shows nothing at all. Seeing them side
+    by side is what makes that arrangement visible.
+
+    The last one carries reactions, which overlap the bubble's corner and are
+    positioned by `side` and `align` rather than by where they sit in the
+    markup. %>
+<div class="flex w-[420px] flex-col gap-3">
+  <%= render(Shadcn::Bubble::Group::Component.new) do %>
+    <% %i[default secondary muted tinted outline ghost destructive].each do |variant| %>
+      <%= render(Shadcn::Bubble::Component.new(variant:)) do %>
+        <%= render(Shadcn::Bubble::Content::Component.new) { variant.to_s } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Bubble::Component.new(variant: :muted, class: "mb-3")) do %>
+    <%= render(Shadcn::Bubble::Content::Component.new) { "With a reaction on it." } %>
+    <%= render(Shadcn::Bubble::Reactions::Component.new) { "👍 2" } %>
+  <% end %>
+</div>

data/app/components/shadcn/bubble/reactions/component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Bubble
+    module Reactions
+      # BubbleReactions — the pill of emoji that overlaps a bubble's corner.
+      # Two independent axes, so two `variants` groups rather than one
+      # (bubble.tsx:85-103).
+      class Component < ApplicationViewComponent
+        slot_name :"bubble-reactions"
+
+        style do
+          base {
+            "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 " \
+            "rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0"
+          }
+
+          variants {
+            side {
+              top { "top-0 -translate-y-3/4" }
+              bottom { "bottom-0 translate-y-3/4" }
+            }
+
+            align {
+              start { "left-3" }
+              # `end` is a Ruby keyword, so it cannot be a block name here.
+              # `send` keeps the variant's name exactly upstream's, the way
+              # `button` declares `icon-xs`.
+              send(:end) { "right-3" }
+            }
+          }
+
+          defaults { { side: :bottom, align: :end } }
+        end
+
+        attr_reader :side, :align
+
+        def initialize(side: :bottom, align: :end, **attributes)
+          @side = side&.to_sym || :bottom
+          @align = align&.to_sym || :end
+          super(**attributes)
+        end
+
+        def style_variants
+          { side:, align: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-align" => align, "data-side" => side }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/bubble.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Bubble family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Bubble
+    extend Parts
+
+    part :group, slot: "bubble-group", classes: "flex min-w-0 flex-col gap-2"
+
+    # Upstream takes `asChild` here, to make the bubble a button or a link
+    # (bubble.tsx:64-71). `as:` answers that everywhere in this gem, so the part
+    # needs nothing of its own for it — and the classes below style exactly those
+    # two cases.
+    part :content, slot: "bubble-content",
+                   classes: "w-fit max-w-full min-w-0 overflow-hidden rounded-xl " \
+                            "border border-transparent px-3 py-2 text-sm leading-relaxed " \
+                            "wrap-break-word group-data-[align=end]/bubble:self-end " \
+                            "[button]:text-left [button,a]:transition-colors " \
+                            "[button,a]:outline-none [button,a]:focus-visible:border-ring " \
+                            "[button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50"
+  end
+end