shadcn_view_component 0.3.3

data/app/components/shadcn/sidebar/menu_action/component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module MenuAction
+      # SidebarMenuAction — the small button that sits on a menu item. It has a
+      # variant, which is why it is a component rather than a `sidebar_part`.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"sidebar-menu-action"
+
+        style do
+          base {
+            "absolute top-1.5 right-1 flex aspect-square w-5 items-center " \
+            "justify-center rounded-md p-0 text-sidebar-foreground " \
+            "ring-sidebar-ring outline-hidden transition-transform " \
+            "peer-hover/menu-button:text-sidebar-accent-foreground " \
+            "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+            "focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute " \
+            "after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 " \
+            "peer-data-[size=default]/menu-button:top-1.5 " \
+            "peer-data-[size=lg]/menu-button:top-2.5 " \
+            "group-data-[collapsible=icon]:hidden"
+          }
+
+          variants {
+            show_on_hover {
+              yes {
+                "group-focus-within/menu-item:opacity-100 " \
+                  "group-hover/menu-item:opacity-100 " \
+                  "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground " \
+                  "data-[state=open]:opacity-100 md:opacity-0"
+              }
+              no { "" }
+            }
+          }
+
+          defaults { { show_on_hover: :no } }
+        end
+
+        attr_reader :show_on_hover
+
+        def initialize(show_on_hover: false, **attributes)
+          @show_on_hover = show_on_hover
+          super(**attributes)
+        end
+
+        def style_variants
+          { show_on_hover: show_on_hover ? :yes : :no }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ type: "button", "data-sidebar" => "menu-action" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sidebar/menu_button/component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module MenuButton
+      # SidebarMenuButton — the row a sidebar is mostly made of.
+      #
+      # `tooltip:` wraps the button in a Tooltip, as upstream does
+      # (vendor/shadcn/ui/sidebar.tsx:534-542). Upstream decides whether to show
+      # it with a runtime prop — `hidden={state !== "collapsed" || isMobile}` —
+      # which a server cannot evaluate. Here the same two conditions are CSS,
+      # read off the panel's own `group`: `data-state` is what the controller
+      # already writes, and `data-mobile` is what it sets while the mobile sheet
+      # is open. Same result, decided by the browser rather than by the render.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"sidebar-menu-button"
+
+        style do
+          base {
+            "peer/menu-button flex w-full items-center gap-2 overflow-hidden " \
+              "rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden " \
+              "transition-[width,height,padding] " \
+              "group-has-data-[sidebar=menu-action]/menu-item:pr-8 " \
+              "group-data-[collapsible=icon]:size-8! " \
+              "group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent " \
+              "hover:text-sidebar-accent-foreground focus-visible:ring-2 " \
+              "active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
+              "disabled:pointer-events-none disabled:opacity-50 " \
+              "aria-disabled:pointer-events-none aria-disabled:opacity-50 " \
+              "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium " \
+              "data-[active=true]:text-sidebar-accent-foreground " \
+              "data-[state=open]:hover:bg-sidebar-accent " \
+              "data-[state=open]:hover:text-sidebar-accent-foreground " \
+              "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
+          }
+
+          variants {
+            variant {
+              default { "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground" }
+              outline {
+                "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] " \
+                  "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+                  "hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+              }
+            }
+
+            size {
+              default { "h-8 text-sm" }
+              sm { "h-7 text-xs" }
+              lg { "h-12 text-sm group-data-[collapsible=icon]:p-0!" }
+            }
+          }
+
+          defaults { { variant: :default, size: :default } }
+        end
+
+        # A tooltip is only of use when the label beside the icon is gone, so it
+        # is hidden while the sidebar is expanded, and while the mobile sheet is
+        # showing the full labels anyway.
+        TOOLTIP_CLASSES = "group-data-[state=expanded]:hidden group-data-[mobile=true]:hidden"
+
+        attr_reader :variant, :size, :active, :tooltip
+
+        def initialize(variant: :default, size: :default, active: false, tooltip: nil, **attributes)
+          @variant = variant&.to_sym || :default
+          @size = size&.to_sym || :default
+          @active = active
+          @tooltip = tooltip
+          super(**attributes)
+        end
+
+        def call
+          return render_element(body: content) if tooltip.blank?
+
+          render(Shadcn::Tooltip::Component.new(side: :right, align: :center)) do |wrapper|
+            # The trigger takes this button's own attributes, `data-slot`
+            # included, so the element in the document is still a
+            # `sidebar-menu-button` — which is what upstream's `asChild` does.
+            wrapper.with_trigger(as: tag_name, **element_attributes.transform_keys(&:to_sym)) { content }
+            wrapper.with_tooltip_content(class: TOOLTIP_CLASSES) { tooltip }
+          end
+        end
+
+        def style_variants
+          { variant:, size: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-sidebar" => "menu-button",
+            "data-size" => size,
+            "data-active" => active.to_s
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sidebar/menu_skeleton/component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module MenuSkeleton
+      # SidebarMenuSkeleton — a placeholder row. Upstream randomises the text
+      # width between 50% and 90% so a column of them does not look like a
+      # barcode (vendor/shadcn/ui/sidebar.tsx:611-613); the same range is used
+      # here, drawn once per instance.
+      class Component < ApplicationViewComponent
+        slot_name :"sidebar-menu-skeleton"
+
+        style do
+          base { "flex h-8 items-center gap-2 rounded-md px-2" }
+        end
+
+        attr_reader :show_icon
+
+        def initialize(show_icon: false, **attributes)
+          @show_icon = show_icon
+          @width = "#{rand(50..89)}%"
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-sidebar" => "menu-skeleton" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ icon, text ].compact))
+        end
+
+        private
+
+        def icon
+          return unless show_icon
+
+          render(Skeleton::Component.new(class: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon"))
+        end
+
+        def text
+          render(Skeleton::Component.new(
+                   class: "h-4 max-w-(--skeleton-width) flex-1",
+                   "data-sidebar": "menu-skeleton-text",
+                   style: "--skeleton-width: #{@width};"
+                 ))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sidebar/menu_sub_button/component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module MenuSubButton
+      # SidebarMenuSubButton — an `<a>` rather than a button, because a submenu
+      # row is a link upstream (vendor/shadcn/ui/sidebar.tsx:680).
+      class Component < ApplicationViewComponent
+        default_tag :a
+        slot_name :"sidebar-menu-sub-button"
+
+        style do
+          base {
+            "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden " \
+            "rounded-md px-2 text-sidebar-foreground ring-sidebar-ring " \
+            "outline-hidden hover:bg-sidebar-accent " \
+            "hover:text-sidebar-accent-foreground focus-visible:ring-2 " \
+            "active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
+            "disabled:pointer-events-none disabled:opacity-50 " \
+            "aria-disabled:pointer-events-none aria-disabled:opacity-50 " \
+            "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 " \
+            "[&>svg]:text-sidebar-accent-foreground " \
+            "data-[active=true]:bg-sidebar-accent " \
+            "data-[active=true]:text-sidebar-accent-foreground sm md " \
+            "group-data-[collapsible=icon]:hidden"
+          }
+
+          variants {
+            size {
+              sm { "text-xs" }
+              md { "text-sm" }
+            }
+          }
+
+          defaults { { size: :md } }
+        end
+
+        attr_reader :size, :active
+
+        def initialize(size: :md, active: false, **attributes)
+          @size = size&.to_sym || :md
+          @active = active
+          super(**attributes)
+        end
+
+        def style_variants
+          { size: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-sidebar" => "menu-sub-button",
+            "data-size" => size,
+            "data-active" => active.to_s
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's `floating` variant. Its own page: the panel is `fixed`, so
+      # two of them cannot share one.
+      def floating
+        render_with_template
+      end
+
+      # Upstream's `inset` variant, for the same reason.
+      def inset
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,189 @@
+<%# shadcn's own `sidebar-demo`, read from the iframe it renders in —
+    ui.shadcn.com/view/radix-nova/sidebar-demo — with `collapsible: :icon`,
+    which is what that demo uses: collapsing leaves a rail of icons rather than
+    sliding the whole panel away.
+
+    The icons are inlined rather than bundled. `Icon::Component`'s PATHS holds
+    the icons the *components* need; these are a demo's decoration, and putting
+    eight of them into a library's payload for one preview is the wrong trade.
+    Their paths were read from upstream's rendered demo rather than recalled.
+
+    The Projects rows carry `tooltip:`, which is what labels their icons once
+    the sidebar collapses. The Platform rows cannot: each is a Collapsible
+    trigger wearing the menu button's classes rather than a MenuButton, so it
+    takes a plain `title:` — the browser's own tooltip — instead. That
+    difference is upstream's too, and the reason is the same on both sides. %>
+<%
+  icons = {
+    "gallery-vertical-end" => %(<path d="M7 2h10"/><path d="M5 6h14"/><rect width="18" height="12" x="3" y="10" rx="2"/>),
+    "square-terminal" => %(<path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>),
+    "bot" => %(<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>),
+    "book-open" => %(<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>),
+    "settings-2" => %(<path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/>),
+    "frame" => %(<line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/>),
+    "chart-pie" => %(<path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/>),
+    "map" => %(<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/>),
+  }
+
+  glyph = ->(name, extra = nil) do
+    tag.svg(
+      icons.fetch(name).html_safe,
+      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",
+      class: [ "size-4 shrink-0", extra ].compact.join(" "), "aria-hidden": true
+    )
+  end
+
+  platform = {
+    "Playground" => [ "square-terminal", %w[History Starred Settings] ],
+    "Models" => [ "bot", %w[Genesis Explorer Quantum] ],
+    "Documentation" => [ "book-open", [ "Introduction", "Get Started", "Tutorials" ] ],
+    "Settings" => [ "settings-2", %w[General Team Billing] ]
+  }
+  projects = [ [ "Design Engineering", "frame" ], [ "Sales & Marketing", "chart-pie" ], [ "Travel", "map" ] ]
+%>
+<%= render(Shadcn::Sidebar::Provider::Component.new) do %>
+  <%= render(Shadcn::Sidebar::Component.new(collapsible: :icon)) do %>
+    <%= render(Shadcn::Sidebar::Header::Component.new) do %>
+      <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+        <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+          <%= render(Shadcn::DropdownMenu::Component.new) do |menu| %>
+            <% menu.with_trigger(
+                 class: Shadcn::Sidebar::MenuButton::Component.new(size: :lg).css_classes,
+                 "data-size": "lg"
+               ) do %>
+              <div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <%= glyph.call("gallery-vertical-end") %>
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+              <%= render(Shadcn::Icon::Component.new("chevrons-up-down", class: "ml-auto")) %>
+            <% end %>
+            <% menu.with_menu_content(class: "w-56") do %>
+              <%= render(Shadcn::DropdownMenu::Label::Component.new) { "Teams" } %>
+              <% [ "Acme Inc", "Acme Corp.", "Evil Corp." ].each do |team| %>
+                <%= render(Shadcn::DropdownMenu::Item::Component.new) { team } %>
+              <% end %>
+              <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+              <%= render(Shadcn::DropdownMenu::Item::Component.new) { "Add team" } %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Sidebar::Content::Component.new) do %>
+      <%= render(Shadcn::Sidebar::Group::Component.new) do %>
+        <%= render(Shadcn::Sidebar::GroupLabel::Component.new) { "Platform" } %>
+        <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+          <% platform.each_with_index do |(section, (name, pages)), index| %>
+            <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+              <%= render(Shadcn::Collapsible::Component.new(open: index.zero?, class: "group/collapsible")) do %>
+                <%# Neither slot is used, and that is deliberate. Slot content
+                    renders before block content, so `with_panel` would put the
+                    submenu above its own trigger; and the trigger has to *be*
+                    the MenuButton, not a plain trigger wearing its classes,
+                    because that is where `tooltip:` lives and a collapsed rail
+                    of icons has nothing else to label it. Upstream composes it
+                    the same way: `<CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={…}>`. %>
+                <%= render(Shadcn::Sidebar::MenuButton::Component.new(
+                      tooltip: section,
+                      "data-shadcn--collapsible-target": "trigger",
+                      "data-action": "shadcn--collapsible#toggle",
+                      "aria-expanded": index.zero?.to_s
+                    )) do %>
+                  <%= glyph.call(name) %>
+                  <span><%= section %></span>
+                  <%= render(Shadcn::Icon::Component.new(
+                        "chevron-right",
+                        class: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
+                      )) %>
+                <% end %>
+
+                <%= render(Shadcn::Collapsible::Content::Component.new) do %>
+                  <%= render(Shadcn::Sidebar::MenuSub::Component.new) do %>
+                    <% pages.each do |page| %>
+                      <%= render(Shadcn::Sidebar::MenuSubItem::Component.new) do %>
+                        <%= render(Shadcn::Sidebar::MenuSubButton::Component.new(href: "#")) do %>
+                          <span><%= page %></span>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <%= render(Shadcn::Sidebar::Group::Component.new(class: "group-data-[collapsible=icon]:hidden")) do %>
+        <%= render(Shadcn::Sidebar::GroupLabel::Component.new) { "Projects" } %>
+        <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+          <% projects.each do |(project, name)| %>
+            <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+              <%= render(Shadcn::Sidebar::MenuButton::Component.new(as: :a, href: "#", tooltip: project)) do %>
+                <%= glyph.call(name) %>
+                <span><%= project %></span>
+              <% end %>
+              <%= render(Shadcn::Sidebar::MenuAction::Component.new(show_on_hover: true, "aria-label": "More")) do %>
+                <%= render(Shadcn::Icon::Component.new("more-horizontal")) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Sidebar::Footer::Component.new) do %>
+      <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+        <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+          <%= render(Shadcn::DropdownMenu::Component.new(side: :top)) do |menu| %>
+            <% menu.with_trigger(
+                 class: Shadcn::Sidebar::MenuButton::Component.new(size: :lg).css_classes,
+                 "data-size": "lg"
+               ) do %>
+              <%= render(Shadcn::Avatar::Component.new(class: "size-8 shrink-0 rounded-lg")) do |avatar| %>
+                <% avatar.with_fallback { "SC" } %>
+              <% end %>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">shadcn</span>
+                <span class="truncate text-xs">m@example.com</span>
+              </div>
+              <%= render(Shadcn::Icon::Component.new("chevrons-up-down", class: "ml-auto")) %>
+            <% end %>
+            <% menu.with_menu_content(class: "w-56") do %>
+              <%= render(Shadcn::DropdownMenu::Label::Component.new) { "m@example.com" } %>
+              <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+              <% [ "Account", "Billing", "Notifications" ].each do |entry| %>
+                <%= render(Shadcn::DropdownMenu::Item::Component.new) { entry } %>
+              <% end %>
+              <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+              <%= render(Shadcn::DropdownMenu::Item::Component.new) { "Log out" } %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%# Inside the panel, last, exactly where upstream puts it: its `absolute`
+        is meant to resolve against `sidebar-container`, and its
+        `group-data-[side=left]:-right-4` against the panel's own `group`.
+        Rendered as a sibling instead it positions against the page and draws a
+        line straight through the icons. %>
+    <%= render(Shadcn::Sidebar::Rail::Component.new) %>
+  <% end %>
+
+  <%= render(Shadcn::Sidebar::Inset::Component.new) do %>
+    <div class="flex items-center gap-2 border-b p-2">
+      <%= render(Shadcn::Sidebar::Trigger::Component.new) %>
+      <%= render(Shadcn::Sidebar::Separator::Component.new(orientation: :vertical, class: "h-4")) %>
+      <span class="text-sm font-medium">Dashboard</span>
+    </div>
+    <p class="p-4 text-sm text-muted-foreground">Page content.</p>
+  <% end %>
+<% end %>

data/app/components/shadcn/sidebar/previews/floating.html.erb

@@ -0,0 +1,39 @@
+<%# Upstream's `floating` variant, which the default preview does not show.
+
+    A page of its own, and that is forced rather than chosen: the desktop panel
+    is `fixed inset-y-0 … h-svh` (sidebar.tsx), so it is measured against the
+    viewport and cannot be put in a box. The first version of this preview put
+    two providers in two bordered `h-64` divs to compare the variants side by
+    side; both panels escaped their boxes, one covered the other, and the label
+    beside each said the wrong thing. Lookbook gives every preview its own
+    iframe, which is the only frame a sidebar can be shown in.
+
+    `floating` gives the panel its own rounded border and shadow and stands it
+    off the edge; `inset` leaves the panel flush and pulls the page's container
+    in beside it. Both read `group-data-[variant=…]` off the provider, so the
+    difference is on `SidebarInset` as much as on the panel. %>
+<%= render(Shadcn::Sidebar::Provider::Component.new) do %>
+  <%= render(Shadcn::Sidebar::Component.new(variant: :floating, collapsible: :icon)) do %>
+    <%= render(Shadcn::Sidebar::Content::Component.new) do %>
+      <%= render(Shadcn::Sidebar::Group::Component.new) do %>
+        <%= render(Shadcn::Sidebar::GroupLabel::Component.new) { "Workspace" } %>
+        <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+          <% [["search", "Search"], ["circle", "Projects"], ["check", "Done"]].each do |icon, label| %>
+            <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+              <%= render(Shadcn::Sidebar::MenuButton::Component.new(tooltip: label)) do %>
+                <%= render(Shadcn::Icon::Component.new(icon)) %>
+                <span><%= label %></span>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Sidebar::Inset::Component.new) do %>
+    <div class="flex items-center gap-2 border-b p-4">
+      <%= render(Shadcn::Sidebar::Trigger::Component.new) %>
+      <span class="text-sm text-muted-foreground">The page beside a floating panel — the trigger collapses it to a rail.</span>
+    </div>
+  <% end %>
+<% end %>

data/app/components/shadcn/sidebar/previews/inset.html.erb

@@ -0,0 +1,48 @@
+<%# Upstream's `inset` variant, which the default preview does not show.
+
+    A page of its own, and that is forced rather than chosen: the desktop panel
+    is `fixed inset-y-0 … h-svh` (sidebar.tsx), so it is measured against the
+    viewport and cannot be put in a box. The first version of this preview put
+    two providers in two bordered `h-64` divs to compare the variants side by
+    side; both panels escaped their boxes, one covered the other, and the label
+    beside each said the wrong thing. Lookbook gives every preview its own
+    iframe, which is the only frame a sidebar can be shown in.
+
+    `inset` leaves the panel flush and pulls the page's container in beside it,
+    which reads `group-data-[variant=inset]` off the provider — so the variant
+    shows on `SidebarInset` as much as on the panel.
+
+    **The wrapper's background is overridden here, and that is a divergence.**
+    Upstream puts `has-data-[variant=inset]:bg-sidebar` on it (sidebar.tsx:142),
+    which is what makes the panel and the page look like two cards floating on
+    the sidebar's own colour — the whole idea of the variant. This preview asks
+    for `bg-background` instead. It is the caller's class, not the component's:
+    `cn` replaces the conflicting one, `parity_spec` still sees upstream's
+    string in the component source, and a host that says nothing still gets
+    upstream's look. `bg-background` rather than a literal white, so it follows
+    the theme instead of turning into a white slab in the dark one. %>
+<%= render(Shadcn::Sidebar::Provider::Component.new(class: "has-data-[variant=inset]:bg-background")) do %>
+  <%= render(Shadcn::Sidebar::Component.new(variant: :inset, collapsible: :icon)) do %>
+    <%= render(Shadcn::Sidebar::Content::Component.new) do %>
+      <%= render(Shadcn::Sidebar::Group::Component.new) do %>
+        <%= render(Shadcn::Sidebar::GroupLabel::Component.new) { "Workspace" } %>
+        <%= render(Shadcn::Sidebar::Menu::Component.new) do %>
+          <% [["search", "Search"], ["circle", "Projects"], ["check", "Done"]].each do |icon, label| %>
+            <%= render(Shadcn::Sidebar::MenuItem::Component.new) do %>
+              <%= render(Shadcn::Sidebar::MenuButton::Component.new(tooltip: label)) do %>
+                <%= render(Shadcn::Icon::Component.new(icon)) %>
+                <span><%= label %></span>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Sidebar::Inset::Component.new) do %>
+    <div class="flex items-center gap-2 border-b p-4">
+      <%= render(Shadcn::Sidebar::Trigger::Component.new) %>
+      <span class="text-sm text-muted-foreground">The page beside a inset panel — the trigger collapses it to a rail.</span>
+    </div>
+  <% end %>
+<% end %>

data/app/components/shadcn/sidebar/provider/component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module Provider
+      # SidebarProvider — the wrapper that holds the state for everything below
+      # it. In React that state is a context (vendor/shadcn/ui/sidebar.tsx:56);
+      # here it is the Stimulus controller, which is why this element and not
+      # the panel carries `data-controller`.
+      #
+      # Upstream also wraps its children in a `TooltipProvider` with
+      # `delayDuration={0}`, so a collapsed sidebar's icons can explain
+      # themselves. This port has no provider component — each Tooltip carries
+      # its own delay — so there is nothing to reproduce here.
+      class Component < ApplicationViewComponent
+        WIDTH = "16rem"
+        WIDTH_ICON = "3rem"
+        # Upstream's `SIDEBAR_WIDTH_MOBILE` (sidebar.tsx:31), which it applies by
+        # overriding `--sidebar-width` on the Sheet it renders instead of the
+        # panel. There is no second element here to override it on, so it is
+        # published as its own variable and the panel reaches for it directly.
+        WIDTH_MOBILE = "18rem"
+
+        slot_name :"sidebar-wrapper"
+
+        style do
+          base { "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar" }
+        end
+
+        attr_reader :open
+
+        # `open:` is what a Rails layout passes after reading the
+        # `sidebar_state` cookie, the way a Next.js layout passes `defaultOpen`.
+        # It defaults to open, as upstream's does.
+        def initialize(open: true, **attributes)
+          @open = open
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(
+              "--sidebar-width: #{WIDTH}; --sidebar-width-icon: #{WIDTH_ICON}; " \
+              "--sidebar-width-mobile: #{WIDTH_MOBILE};"
+            ),
+            "data-controller" => "shadcn--sidebar",
+            "data-shadcn--sidebar-open-value" => open
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end