shadcn_view_component 0.3.3

data/app/components/shadcn/item/previews/outline.html.erb

@@ -0,0 +1,8 @@
+<%= render(Shadcn::Item::Component.new(variant: :outline, class: "w-full max-w-md")) do %>
+  <%= render(Shadcn::Item::Media::Component.new(variant: :image)) do %>
+    <img src="https://placehold.co/40" alt="">
+  <% end %>
+  <%= render(Shadcn::Item::Content::Component.new) do %>
+    <%= render(Shadcn::Item::Title::Component.new) { "Outline, with an image" } %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Item
+    module Separator
+      # ItemSeparator renders a Separator with its own `data-slot` and one class
+      # on top, the way ButtonGroupSeparator does. Upstream pins the orientation
+      # to horizontal rather than defaulting it, so it is not a keyword here.
+      class Component < Shadcn::Separator::Component
+        slot_name :"item-separator"
+
+        EXTRA_CLASSES = "my-0"
+
+        def initialize(**attributes)
+          super(orientation: :horizontal, **attributes)
+        end
+
+        def css_classes(extra = nil)
+          super([ EXTRA_CLASSES, extra ].compact.join(" "))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/item.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Item family that are just an element with a `data-slot`
+  # and a fixed set of classes. `Item`, `ItemGroup`, `ItemMedia` and
+  # `ItemSeparator` each need more than that, so they keep their own
+  # `component.rb`.
+  #
+  # `ItemDescription` really is a `<p>` here — unlike Empty's, which upstream
+  # types as `"p"` while rendering a `<div>`.
+  module Item
+    extend Parts
+
+    part :content, slot: "item-content",
+                   classes: "flex flex-1 flex-col gap-1 " \
+                            "[&+[data-slot=item-content]]:flex-none"
+
+    part :title, slot: "item-title",
+                 classes: "flex w-fit items-center gap-2 text-sm leading-snug font-medium"
+
+    part :description, slot: "item-description", tag: :p,
+                       classes: "line-clamp-2 text-sm leading-normal font-normal " \
+                                "text-balance text-muted-foreground [&>a]:underline " \
+                                "[&>a]:underline-offset-4 [&>a:hover]:text-primary"
+
+    part :actions, slot: "item-actions", classes: "flex items-center gap-2"
+
+    part :header, slot: "item-header",
+                  classes: "flex basis-full items-center justify-between gap-2"
+
+    part :footer, slot: "item-footer",
+                  classes: "flex basis-full items-center justify-between gap-2"
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Kbd
+    # Port of registry/new-york-v4/ui/kbd.tsx
+    class Component < ApplicationViewComponent
+      default_tag :kbd
+      slot_name :kbd
+
+      style do
+        base {
+          "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center " \
+          "gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium " \
+          "text-muted-foreground select-none " \
+          "[&_svg:not([class*='size-'])]:size-3 " \
+          "[[data-slot=tooltip-content]_&]:bg-background/20 " \
+          "[[data-slot=tooltip-content]_&]:text-background " \
+          "dark:[[data-slot=tooltip-content]_&]:bg-background/10"
+        }
+      end
+    end
+  end
+end

data/app/components/shadcn/kbd/group/component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Kbd
+    module Group
+      # KbdGroup — note shadcn types it as a div but renders a <kbd>.
+      class Component < ApplicationViewComponent
+        default_tag :kbd
+        slot_name :"kbd-group"
+
+        style do
+          base { "inline-flex items-center gap-1" }
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,4 @@
+<%= render(Shadcn::Kbd::Group::Component.new) do %>
+  <%= render(Shadcn::Kbd::Component.new) { "\u2318" } %>
+  <%= render(Shadcn::Kbd::Component.new) { "K" } %>
+<% end %>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Label
+    # Port of registry/new-york-v4/ui/label.tsx
+    class Component < ApplicationViewComponent
+      default_tag :label
+      slot_name :label
+
+      style do
+        base {
+          "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"
+        }
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,4 @@
+<div class="flex items-center gap-2">
+  <%= render(Shadcn::Checkbox::Component.new(id: "terms")) %>
+  <%= render(Shadcn::Label::Component.new(for: "terms")) { "Accept terms and conditions" } %>
+</div>

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Marker
+    # Port of registry/new-york-v4/ui/marker.tsx
+    class Component < ApplicationViewComponent
+      slot_name :marker
+
+      style do
+        base {
+          "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm " \
+          "text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline " \
+          "[a]:underline-offset-3 [a]:hover:text-foreground"
+        }
+
+        variants {
+          variant {
+            default { "" }
+            separator {
+              "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border " \
+              "after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border"
+            }
+            border { "border-b border-border pb-2" }
+          }
+        }
+
+        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/marker/icon/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Marker
+    module Icon
+      # MarkerIcon. Its own file rather than a `part` declaration for one
+      # reason: upstream stamps `aria-hidden` on it (marker.tsx:46), and `part`
+      # declares a slot, classes and a tag and deliberately no other attribute.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"marker-icon"
+
+        style do
+          base { "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "aria-hidden" => "true" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Marker
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Status" and "Shimmer" — and the only place in the gallery
+      # that renders the `shimmer` utility.
+      def status
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<%# The three variants, which is all this family has: a row of muted text with
+    an optional icon, ruled off in one of three ways. %>
+<div class="flex w-[420px] flex-col gap-4">
+  <%= render(Shadcn::Marker::Component.new) do %>
+    <%= render(Shadcn::Marker::Icon::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("check")) %>
+    <% end %>
+    <%= render(Shadcn::Marker::Content::Component.new) { "Delivered · 9:41 AM" } %>
+  <% end %>
+
+  <%= render(Shadcn::Marker::Component.new(variant: :separator)) do %>
+    <%= render(Shadcn::Marker::Content::Component.new) { "Today" } %>
+  <% end %>
+
+  <%= render(Shadcn::Marker::Component.new(variant: :border)) do %>
+    <%= render(Shadcn::Marker::Content::Component.new) { "Unread messages" } %>
+  <% end %>
+</div>

data/app/components/shadcn/marker/previews/status.html.erb

@@ -0,0 +1,32 @@
+<%# Upstream's "Status" and "Shimmer": a marker saying what is happening right
+    now, with the text lit by a band that travels across it.
+
+    `shimmer` is one of the six utilities in `shadcn.css` that are shadcn's own
+    CSS rather than Tailwind's — they were read from the stylesheet
+    ui.shadcn.com serves, because no vendored source here defines them, and
+    until this preview nothing in the gallery rendered one. A utility nobody
+    looks at is a utility nobody notices breaking. %>
+<div class="flex w-[420px] flex-col gap-4">
+  <%= render(Shadcn::Marker::Component.new) do %>
+    <%= render(Shadcn::Marker::Icon::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("loader-circle", class: "animate-spin")) %>
+    <% end %>
+    <%= render(Shadcn::Marker::Content::Component.new(class: "shimmer")) { "Thinking…" } %>
+  <% end %>
+
+  <%= render(Shadcn::Marker::Component.new) do %>
+    <%= render(Shadcn::Marker::Icon::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("search")) %>
+    <% end %>
+    <%= render(Shadcn::Marker::Content::Component.new(class: "shimmer")) { "Searching the archive" } %>
+  <% end %>
+
+  <%# And the same row once it is over, which is what the shimmer is the
+      absence of. %>
+  <%= render(Shadcn::Marker::Component.new) do %>
+    <%= render(Shadcn::Marker::Icon::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("check")) %>
+    <% end %>
+    <%= render(Shadcn::Marker::Content::Component.new) { "Found 12 matches" } %>
+  <% end %>
+</div>

data/app/components/shadcn/marker.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Marker 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 Marker
+    extend Parts
+
+    part :content, slot: "marker-content", tag: :span,
+                   classes: "min-w-0 wrap-break-word " \
+                            "group-data-[variant=separator]/marker:flex-none " \
+                            "group-data-[variant=separator]/marker:text-center " \
+                            "*:[a]:underline *:[a]:underline-offset-3 " \
+                            "*:[a]:hover:text-foreground"
+  end
+end

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    # Port of registry/new-york-v4/ui/menubar.tsx — the bar itself.
+    #
+    # Each menu inside it is a `shadcn--dropdown-menu`, as the context menu's
+    # submenus are: what this controller adds is the *bar* — one menu open at a
+    # time, arrows moving between the triggers, and a menu already open turning
+    # the rest into things you merely hover to reach.
+    class Component < ApplicationViewComponent
+      slot_name :menubar
+
+      style do
+        base { "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs" }
+      end
+
+      attr_reader :loop
+
+      # Radix's `loop` defaults to **true** here (menubar.tsx:76), unlike the
+      # dropdown's, where it is false. A bar is a ring; a list is not.
+      def initialize(loop: true, **attributes)
+        @loop = loop
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          role: "menubar",
+          "data-controller" => "shadcn--menubar",
+          "data-shadcn--menubar-loop-value" => loop
+        }.merge(defaults))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module Content
+      # A menu's panel. Wider than the dropdown's (`min-w-[12rem]` against
+      # `min-w-[8rem]`), and it reads `--radix-menubar-*`, which is why it is
+      # written out rather than inherited.
+      #
+      # It carries no `data-[state=closed]:animate-out`, which the dropdown's
+      # does. That is upstream's string as vendored, not an omission here.
+      class Component < ApplicationViewComponent
+        slot_name :"menubar-content"
+
+        style do
+          base {
+            "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) " \
+            "overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground " \
+            "shadow-md 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]: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(**{
+            role: "menu",
+            # Neither is upstream's markup — Radix's FocusScope and Menu add
+            # them at runtime, which is why they are in the dropdown's content
+            # and not in either vendored file. The `tabindex` is load-bearing:
+            # without it `focus()` on the panel is silently a no-op, so the
+            # panel never holds the focus, and Escape, the typeahead and the
+            # arrow keys are all left listening on an element nothing types
+            # into.
+            tabindex: "-1",
+            "aria-orientation" => "vertical",
+            hidden: true,
+            "data-state" => "closed",
+            "data-shadcn--dropdown-menu-target" => "content",
+            "data-action" => "keydown->shadcn--dropdown-menu#contentKeydown " \
+                             "keydown->shadcn--menubar#contentKeydown"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/menubar/menu/component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module Menu
+      # One menu in the bar: its trigger and its panel. Upstream gives it no
+      # classes (menubar.tsx:28) — it is a grouping, not a box.
+      #
+      # A `shadcn--dropdown-menu` of its own, carrying the prefix so `popper.js`
+      # writes the `--radix-menubar-*` properties the panel reads.
+      class Component < ApplicationViewComponent
+        renders_one :trigger, "Shadcn::Menubar::Trigger::Component"
+        renders_one :menu_content, "Shadcn::Menubar::Content::Component"
+
+        slot_name :"menubar-menu"
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(CONTENTS_STYLE),
+            "data-controller" => "shadcn--dropdown-menu",
+            "data-shadcn--dropdown-menu-prefix-value" => "menubar",
+            "data-shadcn--menubar-target" => "menu",
+            # Upstream's own defaults for a menubar panel (menubar.tsx:68-70):
+            # it hangs below the bar, aligned to its trigger's left edge and
+            # pulled back by the bar's own padding.
+            "data-shadcn--dropdown-menu-side-value" => "bottom",
+            "data-shadcn--dropdown-menu-align-value" => "start",
+            "data-shadcn--dropdown-menu-side-offset-value" => 8,
+            "data-shadcn--dropdown-menu-align-offset-value" => -4
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ trigger, menu_content, content ].compact))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Radio" and "With Icons".
+      def items
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+<%# Three menus, which is the smallest number at which the bar behaves like one:
+    with two, "next" and "previous" land on the same name and neither the arrows
+    nor the wrap-around can be told apart.
+
+    Everything inside a menu is the dropdown's — items, submenu, checkbox and
+    radio — and the bar is what this component adds on top. %>
+<div class="flex h-72 items-start justify-center pt-6">
+  <%= render(Shadcn::Menubar::Component.new) do %>
+    <%= render(Shadcn::Menubar::Menu::Component.new) do |menu| %>
+      <% menu.with_trigger { "File" } %>
+      <% menu.with_menu_content do %>
+        <%= render(Shadcn::Menubar::Item::Component.new) do %>
+          New tab
+          <%= render(Shadcn::Menubar::Shortcut::Component.new) { "⌘T" } %>
+        <% end %>
+        <%= render(Shadcn::Menubar::Item::Component.new) { "New window" } %>
+        <%= render(Shadcn::Menubar::Separator::Component.new) %>
+        <%= render(Shadcn::Menubar::Sub::Component.new) do |sub| %>
+          <% sub.with_trigger { "Share" } %>
+          <% sub.with_menu_content do %>
+            <%= render(Shadcn::Menubar::Item::Component.new) { "Email link" } %>
+            <%= render(Shadcn::Menubar::Item::Component.new) { "Messages" } %>
+          <% end %>
+        <% end %>
+        <%= render(Shadcn::Menubar::Separator::Component.new) %>
+        <%= render(Shadcn::Menubar::Item::Component.new) do %>
+          Print
+          <%= render(Shadcn::Menubar::Shortcut::Component.new) { "⌘P" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Menubar::Menu::Component.new) do |menu| %>
+      <% menu.with_trigger { "Edit" } %>
+      <% menu.with_menu_content do %>
+        <%= render(Shadcn::Menubar::Item::Component.new) do %>
+          Undo
+          <%= render(Shadcn::Menubar::Shortcut::Component.new) { "⌘Z" } %>
+        <% end %>
+        <%= render(Shadcn::Menubar::Item::Component.new) { "Redo" } %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Menubar::Menu::Component.new) do |menu| %>
+      <% menu.with_trigger { "View" } %>
+      <% menu.with_menu_content do %>
+        <%= render(Shadcn::Menubar::CheckboxItem::Component.new(checked: true)) { "Always show bookmarks" } %>
+        <%= render(Shadcn::Menubar::CheckboxItem::Component.new) { "Always show full URLs" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/menubar/previews/items.html.erb

@@ -0,0 +1,38 @@
+<%# Upstream's "Radio" and "With Icons": the two kinds of item the default
+    preview leaves out, which has the plain items, the shortcuts, a submenu and
+    the checkboxes.
+
+    Both are the dropdown's, restamped — the bar's own behaviour is in the
+    default preview, which is where three menus are needed to see it. %>
+<%= render(Shadcn::Menubar::Component.new) do %>
+  <%= render(Shadcn::Menubar::Menu::Component.new) do |menu| %>
+    <% menu.with_trigger { "View" } %>
+    <% menu.with_menu_content do %>
+      <%= render(Shadcn::Menubar::Label::Component.new) { "Sort by" } %>
+      <%= render(Shadcn::Menubar::RadioGroup::Component.new) do %>
+        <% %w[Name Date Size].each do |option| %>
+          <%= render(Shadcn::Menubar::RadioItem::Component.new(value: option.downcase, checked: option == "Date")) { option } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Menubar::Menu::Component.new) do |menu| %>
+    <% menu.with_trigger { "Go" } %>
+    <% menu.with_menu_content do %>
+      <%= render(Shadcn::Menubar::Item::Component.new) do %>
+        <%= render(Shadcn::Icon::Component.new("chevron-left")) %>
+        Back
+      <% end %>
+      <%= render(Shadcn::Menubar::Item::Component.new) do %>
+        <%= render(Shadcn::Icon::Component.new("chevron-right")) %>
+        Forward
+      <% end %>
+      <%= render(Shadcn::Menubar::Separator::Component.new) %>
+      <%= render(Shadcn::Menubar::Item::Component.new) do %>
+        <%= render(Shadcn::Icon::Component.new("search")) %>
+        Find…
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/menubar/sub/component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module Sub
+      # A nested menu. Written out rather than subclassed, because ViewComponent
+      # refuses to redeclare an inherited slot and this one holds *this*
+      # family's sub-content.
+      class Component < ApplicationViewComponent
+        renders_one :trigger, "Shadcn::Menubar::SubTrigger::Component"
+        renders_one :menu_content, "Shadcn::Menubar::SubContent::Component"
+
+        slot_name :"menubar-sub"
+
+        attr_reader :open, :side, :align, :side_offset
+
+        def initialize(open: false, side: :right, align: :start, side_offset: 0, **attributes)
+          @open = open
+          @side = side&.to_sym || :right
+          @align = align&.to_sym || :start
+          @side_offset = side_offset
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(CONTENTS_STYLE),
+            "data-controller" => "shadcn--dropdown-menu",
+            "data-shadcn--dropdown-menu-prefix-value" => "menubar",
+            "data-shadcn--dropdown-menu-open-value" => open,
+            "data-shadcn--dropdown-menu-side-value" => side,
+            "data-shadcn--dropdown-menu-align-value" => align,
+            "data-shadcn--dropdown-menu-side-offset-value" => side_offset
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ trigger, menu_content, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/menubar/sub_content/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module SubContent
+      # A submenu's panel. Byte-identical to the dropdown's but for the
+      # `--radix-*` prefix, which is exactly why it cannot be inherited: those
+      # are the properties `popper.js` writes under the controller's prefix, and
+      # borrowing the dropdown's string would leave this reading variables
+      # nothing sets. `parity_spec` would not catch it — it asks whether a token
+      # appears anywhere in the family, not whether it appears on the right
+      # element.
+      class Component < Shadcn::DropdownMenu::SubContent::Component
+        slot_name :"menubar-sub-content"
+
+        style do
+          base {
+            "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) " \
+            "overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground " \
+            "shadow-lg 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
+      end
+    end
+  end
+end