shadcn_view_component 0.3.3

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Field
+    module Separator
+      # FieldSeparator — a rule with optional centred content.
+      class Component < ApplicationViewComponent
+        CONTENT_CLASSES = "relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+
+        slot_name :"field-separator"
+
+        style do
+          base {
+            "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-content" => content.present? }.merge(defaults))
+        end
+
+        def call
+          body = [ render(Shadcn::Separator::Component.new(class: "absolute inset-0 top-1/2")) ]
+
+          if content.present?
+            body << tag.span(content, class: CONTENT_CLASSES,
+                                      "data-slot": "field-separator-content")
+          end
+
+          render_element(body: safe_join(body))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/field.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Field 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 Field
+    extend Parts
+
+    part :content, slot: "field-content",
+                   classes: "group/field-content flex flex-1 flex-col gap-1.5 leading-snug"
+
+    part :description, tag: :p, slot: "field-description",
+                       classes: "text-sm leading-normal font-normal text-muted-foreground " \
+                                "group-has-[[data-orientation=horizontal]]/field:text-balance " \
+                                "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 " \
+                                "[&>a]:underline [&>a]:underline-offset-4 " \
+                                "[&>a:hover]:text-primary"
+
+    part :group, slot: "field-group",
+                 classes: "group/field-group @container/field-group flex w-full flex-col gap-7 " \
+                          "data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4"
+
+    part :label, tag: :label, slot: "field-label",
+                 classes: "flex items-center gap-2 text-sm leading-none font-medium select-none " \
+                          "group-data-[disabled=true]:pointer-events-none " \
+                          "group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed " \
+                          "peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit " \
+                          "gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 " \
+                          "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col " \
+                          "has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border " \
+                          "[&>*]:data-[slot=field]:p-4 has-data-[state=checked]:border-primary " \
+                          "has-data-[state=checked]:bg-primary/5 " \
+                          "dark:has-data-[state=checked]:bg-primary/10"
+
+    part :set, tag: :fieldset, slot: "field-set",
+               classes: "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 " \
+                        "has-[>[data-slot=radio-group]]:gap-3"
+
+    part :title, slot: "field-label",
+                 classes: "flex w-fit items-center gap-2 text-sm leading-snug font-medium " \
+                          "group-data-[disabled=true]/field:opacity-50"
+  end
+end

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module HoverCard
+    # Port of registry/new-york-v4/ui/hover-card.tsx, whose behaviour is Radix's
+    # `HoverCard` — vendored at `vendor/radix/ui/hover-card.tsx`.
+    #
+    # A tooltip's larger relative, and the difference is what the delays are
+    # for: this content is meant to be *entered*. Moving the pointer from the
+    # trigger onto the card keeps it open, which is why the card carries the
+    # same enter and leave handlers the trigger does.
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::HoverCard::Trigger::Component"
+      renders_one :hover_card_content, "Shadcn::HoverCard::Content::Component"
+
+      slot_name :"hover-card"
+
+      attr_reader :side, :align, :side_offset, :open_delay, :close_delay
+
+      # `open_delay` and `close_delay` are Radix's own defaults
+      # (vendor/radix/ui/hover-card.tsx:59-60), not numbers chosen here. The
+      # closing one is the longer-lived decision of the two: it is the window in
+      # which you can cross the gap between the trigger and the card.
+      def initialize(side: :bottom, align: :center, side_offset: 4,
+                     open_delay: 700, close_delay: 300, **attributes)
+        @side = side&.to_sym || :bottom
+        @align = align&.to_sym || :center
+        @side_offset = side_offset
+        @open_delay = open_delay
+        @close_delay = close_delay
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--hover-card",
+          "data-shadcn--hover-card-side-value" => side,
+          "data-shadcn--hover-card-align-value" => align,
+          "data-shadcn--hover-card-side-offset-value" => side_offset,
+          "data-shadcn--hover-card-open-delay-value" => open_delay,
+          "data-shadcn--hover-card-close-delay-value" => close_delay
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, hover_card_content, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/hover_card/content/component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module HoverCard
+    module Content
+      # HoverCardContent.
+      #
+      # It carries the same pointer handlers as the trigger, and that is the
+      # component rather than a detail: without them, moving onto the card is
+      # leaving the trigger and the card closes under the pointer that went for
+      # it (hover-card.tsx:220-221).
+      #
+      # No `role` and no `aria-*`, which is Radix's own — measured, there is not
+      # one of either in the whole primitive. The card is a sighted-hover
+      # affordance, and nothing in it is announced. That is also why every
+      # tabbable inside it is taken out of the tab order; the controller does
+      # that, since the content is a host's markup rather than this component's.
+      class Component < ApplicationViewComponent
+        slot_name :"hover-card-content"
+
+        style do
+          base {
+            "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md " \
+            "border bg-popover p-4 text-popover-foreground shadow-md outline-hidden " \
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " \
+            "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 " \
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " \
+            "data-[state=closed]:zoom-out-95 data-[state=open]:animate-in " \
+            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            hidden: true,
+            "data-state" => "closed",
+            "data-shadcn--hover-card-target" => "content",
+            "data-action" => "pointerenter->shadcn--hover-card#open " \
+                             "pointerleave->shadcn--hover-card#close"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module HoverCard
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Sides" and "Trigger Delays".
+      def sides
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+<%# The card upstream's example builds: a link that, held under the pointer for
+    a moment, explains what it points at.
+
+    The trigger is `as: :a` — a hover card usually hangs off something already
+    in the text — and it stays focusable, because Radix opens on focus as well
+    as on hover (hover-card.tsx:138-141) and that is the only way a keyboard
+    reaches it at all.
+
+    Nothing inside the card is reachable by keyboard: the controller takes every
+    tabbable in it out of the tab order, which is Radix's own behaviour and
+    follows from the card having no way to be tabbed *into*. Put nothing in one
+    that is only available there. %>
+<div class="flex h-64 items-start justify-center pt-12">
+  <%= render(Shadcn::HoverCard::Component.new) do |card| %>
+    <% card.with_trigger(as: :a, href: "#", class: "text-sm font-medium underline underline-offset-4") do %>
+      @shadcn
+    <% end %>
+    <% card.with_hover_card_content do %>
+      <div class="flex gap-4">
+        <%= render(Shadcn::Avatar::Component.new) do |avatar| %>
+          <% avatar.with_fallback { "SC" } %>
+        <% end %>
+        <div class="space-y-1">
+          <h4 class="text-sm font-semibold">@shadcn</h4>
+          <p class="text-sm">The React framework — created and maintained by @vercel.</p>
+          <p class="text-xs text-muted-foreground">Joined December 2021</p>
+          <%# A link, on purpose: it is what the tab-order behaviour has to act
+              on, and a card with nothing focusable in it would make that
+              assertion vacuous. It is also the realistic case — the reason to
+              build a card rather than a tooltip is that it can hold one. %>
+          <a href="#" class="text-xs font-medium underline underline-offset-4">View profile</a>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/hover_card/previews/sides.html.erb

@@ -0,0 +1,15 @@
+<%# Upstream's "Sides" and "Trigger Delays". The delays are the part worth
+    seeing: a hover card that opened instantly would fire on every pointer that
+    crossed it, and one that closed instantly could not be reached. %>
+<div class="flex h-48 items-center justify-center gap-2">
+  <% [[:top, 0, 0], [:right, 700, 300], [:bottom, 0, 0], [:left, 700, 300]].each do |side, open_delay, close_delay| %>
+    <%= render(Shadcn::HoverCard::Component.new(side:, open_delay:, close_delay:)) do |h| %>
+      <% h.with_trigger(as: :button, class: Shadcn::Button::Component.variant_classes(variant: :outline)) { side.to_s.capitalize } %>
+      <% h.with_hover_card_content(class: "w-56") do %>
+        <p class="text-sm">
+          On the <%= side %>, after <%= open_delay %>ms.
+        </p>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/hover_card/trigger/component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module HoverCard
+    module Trigger
+      # HoverCardTrigger. Radix opens on hover *and* on focus and closes on blur
+      # (hover-card.tsx:138-141), so a keyboard reaches the card even though it
+      # cannot be tabbed into — see the content for the other half of that.
+      #
+      # `default_tag :button` because the demo's trigger is one and a hoverable
+      # affordance needs to be focusable to open on focus at all; `as: :a` is
+      # the usual override, which is what upstream's example passes.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"hover-card-trigger"
+
+        def element_attributes(**defaults)
+          attributes = {
+            "data-state" => "closed",
+            "data-shadcn--hover-card-target" => "trigger",
+            "data-action" => "pointerenter->shadcn--hover-card#open " \
+                             "pointerleave->shadcn--hover-card#close " \
+                             "focus->shadcn--hover-card#open " \
+                             "blur->shadcn--hover-card#close"
+          }
+          attributes[:type] = "button" if tag_name.to_sym == :button
+
+          super(**attributes.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Icon
+    # Inline replacement for the `lucide-react` icons the components import.
+    #
+    #   <%= render Shadcn::Icon::Component.new(:"chevron-down", class: "size-4") %>
+    #
+    # Emits the same SVG lucide does — 24×24 viewBox, `currentColor` stroke,
+    # `lucide lucide-<name>` classes — so the `[&_svg:not([class*='size-'])]:size-4`
+    # rules on the surrounding components behave identically.
+    class Component < ApplicationViewComponent
+      # The drawings live in `vendor/lucide/icons` as the files lucide
+      # publishes, and `rake icons:build` turns them into
+      # `ShadcnViewComponent::Icons::PATHS`. They used to be typed into this
+      # file by hand, which went exactly as that always goes: the count in the
+      # README said eleven of twenty-two, and `search` had been drawn from an
+      # older lucide — a magnifier with a shorter handle than the one every
+      # other icon in the set was drawn with.
+      SVG_ATTRIBUTES = {
+        "xmlns" => "http://www.w3.org/2000/svg",
+        "width" => "24",
+        "height" => "24",
+        "viewBox" => "0 0 24 24",
+        "fill" => "none",
+        "stroke" => "currentColor",
+        "stroke-width" => "2",
+        "stroke-linecap" => "round",
+        "stroke-linejoin" => "round"
+      }.freeze
+
+      default_tag :svg
+
+      def initialize(name, **attributes)
+        # Resolved through the registry, which owns the alias table: a host
+        # registering `"more-horizontal"` and this rendering `"ellipsis"` have
+        # to meet somewhere, and the file that stores the drawings is the only
+        # place both can.
+        @name = ShadcnViewComponent::IconRegistry.canonical(name)
+
+        # Loud where it can be fixed, silent where it cannot. An icon is
+        # decorative, and a gem should not be able to take down a page in an
+        # application it has never seen — the same trade Rails makes with a
+        # missing translation.
+        raise ArgumentError, "unknown lucide icon: #{name}" if path.nil? && Rails.env.local?
+
+        super(**attributes)
+      end
+
+      attr_reader :name
+
+      # The registry is read first so a host can replace one of the bundled
+      # eleven and not only add a twelfth. The other order ignored
+      # `register("check", …)` in silence — nothing raised, nothing logged, the
+      # gem's own tick still rendering — which leaves a host staring at an icon
+      # that will not change with no way to find out why.
+      def path
+        @path ||= Shadcn::Icon.registered[name] || ShadcnViewComponent::Icons::PATHS[name]
+      end
+
+      def call
+        return "".html_safe if path.nil?
+
+        render_element(body: path.html_safe)
+      end
+
+      def element_attributes(**defaults)
+        super(**SVG_ATTRIBUTES.merge(defaults))
+      end
+
+      def css_classes(extra = nil)
+        ShadcnViewComponent.cn("lucide", "lucide-#{name}", extra)
+      end
+    end
+  end
+end

data/app/components/shadcn/icon.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # `Shadcn::Icon.register` / `.registered`, kept in this sibling file — the
+  # same split every other family uses between its shared module and
+  # `component.rb` — so `Shadcn::Icon` resolves without first loading
+  # `Icon::Component`, and these read naturally from a view or another
+  # component without going through it. That does *not* extend to a host's
+  # initializer: no autoloadable constant, this one included, resolves there
+  # — `ShadcnViewComponent::IconRegistry`, required directly in
+  # `lib/shadcn_view_component.rb`, is the entry point the README documents
+  # for that case.
+  #
+  # The storage itself lives in `ShadcnViewComponent::IconRegistry`, under
+  # `lib/`, rather than on this module: `app/components` reloads in
+  # development, and a hash held here would be discarded — and every
+  # registered icon un-registered — on the next code reload.
+  module Icon
+    def self.registered
+      ShadcnViewComponent::IconRegistry.registered
+    end
+
+    # Every lucide alias this gem knows — `more-horizontal` for `ellipsis`,
+    # `loader-2` for `loader-circle`. Registering under either spelling reaches
+    # both, because the registry stores one entry per icon rather than one per
+    # name.
+    def self.aliases
+      ShadcnViewComponent::IconRegistry::ALIASES
+    end
+
+    # The ported components import a couple of dozen lucide icons; lucide has
+    # about 1,500. The exact set is `ShadcnViewComponent::Icons::PATHS`, and a
+    # spec keeps it equal to what the components render — no number is written
+    # in prose here, because that is what went stale last time.
+    # A host reaches this pair from a view, a component or anywhere else
+    # autoloading has already run — not from an initializer, which is what
+    # `ShadcnViewComponent::IconRegistry` is for. Registering a bundled name
+    # replaces it.
+    def self.register(name, path)
+      ShadcnViewComponent::IconRegistry.register(name, path)
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Input
+    # Port of registry/new-york-v4/ui/input.tsx
+    class Component < ApplicationViewComponent
+      default_tag :input
+      slot_name :input
+
+      style do
+        base {
+          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 " \
+          "py-1 text-base shadow-xs transition-[color,box-shadow] outline-none " \
+          "selection:bg-primary selection:text-primary-foreground file:inline-flex " \
+          "file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium " \
+          "file:text-foreground placeholder:text-muted-foreground " \
+          "disabled:pointer-events-none disabled:cursor-not-allowed " \
+          "disabled:opacity-50 md:text-sm dark:bg-input/30 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"
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Input
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Disabled", "Invalid", "File" and "Required", together: each is an attribute passed straight through rather than a variant.
+      def states
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="flex w-[320px] flex-col gap-4">
+  <%= render(Shadcn::Input::Component.new(type: "email", placeholder: "m@example.com")) %>
+  <%= render(Shadcn::Input::Component.new(placeholder: "Disabled", disabled: true)) %>
+  <%= render(Shadcn::Input::Component.new(placeholder: "Invalid", "aria-invalid": "true")) %>
+</div>

data/app/components/shadcn/input/previews/states.html.erb

@@ -0,0 +1,20 @@
+<%# Upstream shows these as four examples — "Disabled", "Invalid", "File" and
+    "Required". They are one page here because none of them is a variant: each
+    is an attribute the caller passes straight through, and seeing them beside
+    one another is what shows that.
+
+    Every control is labelled. axe takes a placeholder as an accessible name, so
+    a placeholder-less input is the one that fails — which is what the invalid
+    example needs to be, since it carries a value rather than a placeholder. %>
+<div class="flex w-[320px] flex-col gap-4">
+  <% [["ordinary", "Ordinary", {}],
+      ["disabled", "Disabled", { disabled: true }],
+      ["invalid", "Invalid", { value: "not-an-email", "aria-invalid": "true" }],
+      ["file", "File", { type: "file" }],
+      ["required", "Required", { required: true }]].each do |id, label, options| %>
+    <div class="flex flex-col gap-2">
+      <%= render(Shadcn::Label::Component.new(for: "input-#{id}")) { label } %>
+      <%= render(Shadcn::Input::Component.new(id: "input-#{id}", **options)) %>
+    </div>
+  <% end %>
+</div>

data/app/components/shadcn/input_group/addon/component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module InputGroup
+    module Addon
+      # InputGroupAddon. The one part of this family that is not just markup:
+      # upstream gives it an `onClick` that focuses the group's input, unless
+      # the click landed on a button. That is the `focusControl` action.
+      class Component < ApplicationViewComponent
+        slot_name :"input-group-addon"
+
+        style do
+          base {
+            "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm " \
+            "font-medium text-muted-foreground select-none " \
+            "group-data-[disabled=true]/input-group:opacity-50 " \
+            "[&>kbd]:rounded-[calc(var(--radius)-5px)] " \
+            "[&>svg:not([class*='size-'])]:size-4"
+          }
+
+          variants {
+            align {
+              # The keys keep upstream's spelling, which is not valid Ruby.
+              send(:"inline-start") {
+                "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]"
+              }
+              send(:"inline-end") {
+                "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]"
+              }
+              send(:"block-start") {
+                "order-first w-full justify-start px-3 pt-3 " \
+                "group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3"
+              }
+              send(:"block-end") {
+                "order-last w-full justify-start px-3 pb-3 " \
+                "group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+              }
+            }
+          }
+
+          defaults { { align: :"inline-start" } }
+        end
+
+        attr_reader :align
+
+        def initialize(align: :"inline-start", **attributes)
+          @align = align&.to_sym || :"inline-start"
+          super(**attributes)
+        end
+
+        def style_variants
+          { align: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "group",
+            "data-align" => align,
+            "data-action" => "click->shadcn--input-group#focusControl"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/input_group/button/component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module InputGroup
+    module Button
+      # InputGroupButton renders a Button with its own size scale layered on
+      # top, and forces three of the button's props.
+      #
+      # Those three are *defaults*, not overrides: they go through `super`, so
+      # a caller asking for `variant: :destructive` still gets it. Ranking them
+      # above the caller would make the button un-restylable.
+      class Component < Shadcn::Button::Component
+        SIZES = {
+          xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 " \
+              "[&>svg:not([class*='size-'])]:size-3.5",
+          sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+          "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+          "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+        }.freeze
+
+        attr_reader :group_size
+
+        def initialize(variant: :ghost, size: :xs, **attributes)
+          @group_size = size&.to_sym || :xs
+          # The button's own size scale is not this one, so it keeps its
+          # default; the group's scale is applied as classes instead.
+          super(variant:, **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ type: "button", "data-size" => group_size }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          super([ SIZES.fetch(group_size), extra ].compact.join(" "))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module InputGroup
+    # Port of registry/new-york-v4/ui/input-group.tsx
+    #
+    # `group/input-group` is a named Tailwind group the addon's classes reach
+    # back into (`group-has-[>input]/input-group:…`), so the two halves only
+    # work as a pair.
+    class Component < ApplicationViewComponent
+      slot_name :"input-group"
+
+      style do
+        base {
+          "group/input-group relative flex w-full items-center rounded-md border " \
+          "border-input shadow-xs transition-[color,box-shadow] outline-none " \
+          "dark:bg-input/30 h-9 min-w-0 has-[>textarea]:h-auto " \
+          "has-[>[data-align=inline-start]]:[&>input]:pl-2 " \
+          "has-[>[data-align=inline-end]]:[&>input]:pr-2 " \
+          "has-[>[data-align=block-start]]:h-auto " \
+          "has-[>[data-align=block-start]]:flex-col " \
+          "has-[>[data-align=block-start]]:[&>input]:pb-3 " \
+          "has-[>[data-align=block-end]]:h-auto " \
+          "has-[>[data-align=block-end]]:flex-col " \
+          "has-[>[data-align=block-end]]:[&>input]:pt-3 " \
+          "has-[[data-slot=input-group-control]:focus-visible]:border-ring " \
+          "has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] " \
+          "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 " \
+          "has-[[data-slot][aria-invalid=true]]:border-destructive " \
+          "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 " \
+          "dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40"
+        }
+      end
+
+      # The controller lives on the group rather than on the addon, so that
+      # `this.element` is the group and the lookup matches upstream's
+      # `currentTarget.parentElement.querySelector("input")`.
+      def element_attributes(**defaults)
+        super(**{ role: "group", "data-controller" => "shadcn--input-group" }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/input_group/input/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module InputGroup
+    module Input
+      # InputGroupInput renders the ported Input, stripped of its own border and
+      # ring so the group's box provides both.
+      #
+      # Its `data-slot` is `input-group-control`, which it shares with
+      # InputGroupTextarea. That is deliberate upstream: the group's
+      # `has-[[data-slot=input-group-control]:focus-visible]:…` classes have to
+      # match either one, so disambiguating them would break the focus ring.
+      class Component < Shadcn::Input::Component
+        slot_name :"input-group-control"
+
+        EXTRA_CLASSES = "flex-1 rounded-none border-0 bg-transparent shadow-none " \
+                        "focus-visible:ring-0 dark:bg-transparent"
+
+        def css_classes(extra = nil)
+          super([ EXTRA_CLASSES, extra ].compact.join(" "))
+        end
+      end
+    end
+  end
+end