phlex_kit 0.2.0 → 0.2.2

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_shortcut.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Right-aligned keyboard hint in a menu row. Ported from shadcn/ui's
+  # DropdownMenuShortcut. See dropdown_menu.rb.
+  class DropdownMenuShortcut < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      span(**mix({ class: "pk-dropdown-menu-shortcut" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_sub.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Nested submenu wrapper: SubTrigger row + SubContent panel, revealed on
+  # hover/focus with pure CSS (no extra controller). Ported from shadcn/ui's
+  # DropdownMenuSub. See dropdown_menu.rb.
+  class DropdownMenuSub < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-sub" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_sub_content.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The nested panel of a DropdownMenuSub — opens beside the trigger.
+  # See dropdown_menu.rb.
+  class DropdownMenuSubContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-sub-content", role: "menu" }, @attrs)) do
+        div(class: "pk-dropdown-menu-viewport", &)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_sub_trigger.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # The row that opens a DropdownMenuSub (trailing ▸ chevron). See
+  # dropdown_menu.rb.
+  class DropdownMenuSubTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      div(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-sub-trigger",
+        role: "menuitem",
+        tabindex: "0",
+        aria: { haspopup: "menu" }
+      }, @attrs)) do
+        block&.call
+        render Icon.new(:chevron_right, size: nil, class: "pk-dropdown-menu-sub-chevron")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/icon/icon.rb

@@ -0,0 +1,51 @@
+module PhlexKit
+  # A glyph from the configured icon library (ui.shadcn.com/create's "Icon
+  # Library" option): :lucide (default), :tabler, :phosphor, or :remix — set
+  # kit-wide via PhlexKit.config.icon_library or per-instance with `library:`.
+  # Names are PhlexKit's canonical semantic set (PhlexKit::Icons.names);
+  # unknown names/libraries fail loud (KeyError).
+  #
+  # `size:` emits width/height attributes (default 16, shadcn's size-4); pass
+  # `size: nil` to defer sizing to CSS (existing `.pk-x svg { … }` rules).
+  # Stroke libraries (lucide/tabler) render stroke="currentColor"; fill
+  # libraries (phosphor/remix) render fill="currentColor" — both follow text
+  # color. Attrs pass through via mix.
+  class Icon < BaseComponent
+    def initialize(name, library: nil, size: 16, **attrs)
+      @name = name
+      @library = library
+      @size = size
+      @attrs = attrs
+    end
+
+    def view_template
+      icon = Icons.fetch(@name, library: @library || PhlexKit.config.icon_library)
+      svg(**mix(base_attrs(icon), @attrs)) do |s|
+        icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }
+      end
+    end
+
+    private
+
+    def base_attrs(icon)
+      base = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: icon[:view_box],
+        class: "pk-icon",
+        "aria-hidden": "true"
+      }
+      base[:width] = base[:height] = @size.to_s if @size
+      if icon[:mode] == :stroke
+        base.merge(
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": icon[:stroke_width].to_s,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        )
+      else
+        base.merge(fill: "currentColor")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/marker/marker.css

@@ -0,0 +1,25 @@
+/* Co-located with marker.rb — UI::Marker, shadcn parity: muted inline status,
+   bordered system-note row, or labeled separator in a conversation. */
+.pk-marker {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  min-height: 1.25rem;
+  color: var(--pk-muted);
+  font-size: .875rem;
+}
+.pk-marker-icon { display: inline-flex; flex: none; }
+.pk-marker-icon svg { width: 1rem; height: 1rem; }
+.pk-marker-content { min-width: 0; }
+.pk-marker.border {
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  padding: .5rem .625rem;
+}
+.pk-marker.separator { justify-content: center; }
+.pk-marker.separator::before, .pk-marker.separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--pk-border);
+}

data/app/components/phlex_kit/marker/marker.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Conversation annotation, ported from shadcn/ui's Marker (an AI-chat-era
+  # addition): an inline status line, bordered system-note row, or labeled
+  # separator. Compose Marker(variant:) > [MarkerIcon +] MarkerContent.
+  # `.pk-marker*` (marker.css).
+  class Marker < BaseComponent
+    VARIANTS = { default: nil, border: "border", separator: "separator" }.freeze
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: [ "pk-marker", VARIANTS.fetch(@variant) ].compact.join(" ") }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/marker/marker_content.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Text of a Marker. See marker.rb.
+  class MarkerContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = span(**mix({ class: "pk-marker-content" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/marker/marker_icon.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # 16px muted icon slot of a Marker. See marker.rb.
+  class MarkerIcon < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = span(**mix({ class: "pk-marker-icon" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/native_select/native_select_icon.rb

@@ -17,16 +17,7 @@ module PhlexKit
     private
 
     def chevron
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "aria-hidden": "true"
-      ) { |s| s.path(d: "m6 9 6 6 6-6") }
+      render Icon.new(:chevron_down, size: nil)
     end
   end
 end

data/app/components/phlex_kit/navigation_menu/navigation_menu_trigger.rb

@@ -17,11 +17,7 @@ module PhlexKit
     private
 
     def chevron
-      svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none",
-          stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round",
-          "stroke-linejoin": "round", class: "pk-navigation-menu-chevron", "aria-hidden": "true") do |s|
-        s.path(d: "m6 9 6 6 6-6")
-      end
+      render Icon.new(:chevron_down, size: nil, class: "pk-navigation-menu-chevron")
     end
   end
 end

data/app/components/phlex_kit/pagination/pagination_ellipsis.rb

@@ -4,11 +4,7 @@ module PhlexKit
     def view_template
       li do
         span(**mix({ class: "pk-pagination-ellipsis", aria: { hidden: true } }, @attrs)) do
-          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round") do |s|
-            s.circle(cx: "12", cy: "12", r: "1")
-            s.circle(cx: "19", cy: "12", r: "1")
-            s.circle(cx: "5", cy: "12", r: "1")
-          end
+          render Icon.new(:ellipsis, size: nil)
           span(class: "pk-sr-only") { "More pages" }
         end
       end

data/app/components/phlex_kit/select/select_item.rb

@@ -36,17 +36,7 @@ module PhlexKit
     private
 
     def check_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-select-item-check",
-        "aria-hidden": "true"
-      ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+      render Icon.new(:check, size: nil, class: "pk-select-item-check")
     end
   end
 end

data/app/components/phlex_kit/select/select_trigger.rb

@@ -23,20 +23,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-select-trigger-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(d: "m7 15 5 5 5-5")
-        s.path(d: "m7 9 5-5 5 5")
-      end
+      render Icon.new(:chevrons_up_down, size: nil, class: "pk-select-trigger-icon")
     end
   end
 end

data/app/components/phlex_kit/sheet/sheet.css

@@ -1,6 +1,6 @@
 /* Co-located with sheet.rb. Theme tokens from the global stylesheet. */
 .pk-sheet-trigger { display: inline-block; }
-.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
+.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); }
 .pk-sheet-content {
   position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
   background: var(--pk-surface); color: var(--pk-text); padding: 1.5rem;

data/app/components/phlex_kit/sheet/sheet_content.rb

@@ -12,9 +12,7 @@ module PhlexKit
           div(**mix({ class: ["pk-sheet-content", SIDES.fetch(@side)].join(" ") }, @attrs)) do
             block&.call
             button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--sheet-content#close" }) do
-              svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
-          s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z")
-        end
+              render Icon.new(:x, size: 15)
               span(class: "pk-sr-only") { "Close" }
             end
           end

data/app/components/phlex_kit/sidebar/sidebar.css

@@ -1,23 +1,59 @@
 /* Co-located with sidebar.rb — UI::Sidebar (+ Wrapper / Header / Content / Footer
-   / Group / Menu / MenuItem / MenuButton / Inset). ruby_ui's structure at
-   collapsible:none, Tailwind → vanilla CSS on the palette tokens. The collapsible/
-   offcanvas/icon modes (+ their Stimulus/cookie/Sheet) are deliberately not ported.
-   Theme tokens come from the global stylesheet. */
+   / Group / GroupLabel / GroupContent / GroupAction / Menu / MenuItem / MenuButton
+   / MenuAction / MenuBadge / MenuSkeleton / MenuSub / MenuSubItem / MenuSubButton
+   / Separator / Input / Inset). ruby_ui's structure at collapsible:none, extended
+   to shadcn/ui's static part set; Tailwind → vanilla CSS on the palette tokens.
+   The collapsible/offcanvas/icon modes (+ their trigger/rail/Stimulus/cookie/
+   Sheet) are deliberately not ported.
+   Theme tokens come from the global stylesheet. The sidebar reads the shared
+   palette by default; --pk-sidebar[-text|-accent|-border|-primary|-primary-ink]
+   are optional per-role overrides (shadcn sidebar-* parity), undefined by
+   default. shadcn's sidebar-ring / sidebar-accent-foreground have no consumption
+   site here and stay unmapped. */
 .pk-sidebar-wrapper { display: flex; min-height: 100dvh; width: 100%; }
 
 .pk-sidebar {
   display: flex;
   flex-direction: column;
-  width: 14rem;
+  width: 16rem;
   flex-shrink: 0;
-  background: var(--pk-surface);
-  border-right: 1px solid var(--pk-border);
+  background: var(--pk-sidebar, var(--pk-surface));
+  border-right: 1px solid var(--pk-sidebar-border, var(--pk-border));
 }
 
 .pk-sidebar-header { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .75rem .25rem; }
 .pk-sidebar-content { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-height: 0; overflow: auto; padding: .5rem .75rem; }
 .pk-sidebar-footer { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
-.pk-sidebar-group { display: flex; flex-direction: column; gap: .125rem; }
+.pk-sidebar-group { position: relative; display: flex; flex-direction: column; gap: .125rem; }
+.pk-sidebar-group-label {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 2rem;
+  padding: 0 .5rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  font-size: .75rem;
+  font-weight: 500;
+  color: color-mix(in oklab, var(--pk-sidebar-text, var(--pk-text)) 70%, transparent);
+}
+.pk-sidebar-group-content { width: 100%; font-size: .875rem; }
+.pk-sidebar-group-action {
+  position: absolute;
+  top: .375rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  cursor: pointer;
+}
+.pk-sidebar-group-action:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); }
 
 .pk-sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; width: 100%; }
 .pk-sidebar-menu-item { position: relative; }
@@ -30,13 +66,95 @@
   border: 0;
   border-radius: 8px;
   background: transparent;
-  color: var(--pk-text);
+  color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;
   font-size: .9rem;
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
-.pk-sidebar-menu-button:hover { background: var(--pk-accent); text-decoration: none; }
-.pk-sidebar-menu-button[data-active="true"] { background: var(--pk-brand); color: var(--pk-brand-ink); font-weight: 600; }
+.pk-sidebar-menu-button:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); text-decoration: none; }
+/* Active item: shadcn's stock "Default" menu look (accent tint). The create
+   page's "Solid" mode is the .menu-solid modifier on the sidebar root. */
+.pk-sidebar-menu-button[data-active="true"] { background: var(--pk-sidebar-accent, var(--pk-accent)); color: var(--pk-sidebar-text, var(--pk-text)); font-weight: 500; }
+.pk-sidebar.menu-solid .pk-sidebar-menu-button[data-active="true"] { background: var(--pk-sidebar-primary, var(--pk-brand)); color: var(--pk-sidebar-primary-ink, var(--pk-brand-ink)); font-weight: 600; }
+
+/* Anchored to the top of the item (the button row) — the item may also
+   contain a submenu, so 50%-of-item would drift. */
+.pk-sidebar-menu-action {
+  position: absolute;
+  top: .5rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  cursor: pointer;
+}
+.pk-sidebar-menu-action:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); }
+.pk-sidebar-menu-badge {
+  pointer-events: none;
+  user-select: none;
+  position: absolute;
+  top: .5rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 .25rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  font-size: .75rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--pk-sidebar-text, var(--pk-text));
+}
+.pk-sidebar-menu-skeleton { display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .5rem; border-radius: calc(var(--pk-radius) - 2px); }
+.pk-sidebar-menu-skeleton .pk-skeleton.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
+.pk-sidebar-menu-skeleton .pk-skeleton.text { height: 1rem; flex: 1; max-width: var(--pk-skeleton-width, 70%); }
+
+.pk-sidebar-menu-sub {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  min-width: 0;
+  margin: 0 .875rem;
+  padding: .125rem .625rem;
+  border-left: 1px solid var(--pk-sidebar-border, var(--pk-border));
+}
+.pk-sidebar-menu-sub-item { position: relative; }
+.pk-sidebar-menu-sub-button {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  height: 1.75rem;
+  min-width: 0;
+  width: 100%;
+  padding: 0 .5rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  font: inherit;
+  font-size: .875rem;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.pk-sidebar-menu-sub-button:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); text-decoration: none; }
+/* shadcn highlights active sub-items with the accent role, not primary. */
+.pk-sidebar-menu-sub-button[data-active="true"] { background: var(--pk-sidebar-accent, var(--pk-accent)); font-weight: 600; }
+
+.pk-separator.pk-sidebar-separator { width: auto; margin: 0 .5rem; background: var(--pk-sidebar-border, var(--pk-border)); }
+.pk-input.pk-sidebar-input { height: 2rem; width: 100%; background: var(--pk-bg); box-shadow: none; }
 
 .pk-sidebar-inset { flex: 1; min-width: 0; }

data/app/components/phlex_kit/sidebar/sidebar.rb

@@ -3,17 +3,30 @@ module PhlexKit
   # (the NonCollapsibleSidebar path): a static flex-column rail. Deliberately
   # WITHOUT ruby_ui's collapsible/offcanvas Stimulus controller + cookie state +
   # mobile Sheet (the admin sidebar is static) — those can be added later if a
-  # collapsible chrome is wanted. Compose with SidebarWrapper (the page root) +
-  # SidebarHeader / SidebarContent / SidebarMenu (+ Item / Button) / SidebarFooter,
-  # alongside a SidebarInset for the main content. Tailwind → vanilla `.pk-sidebar*`
-  # (sidebar.css).
+  # collapsible chrome is wanted. The static part set matches shadcn/ui's Sidebar:
+  # compose with SidebarWrapper (the page root) + SidebarHeader / SidebarContent /
+  # SidebarGroup (+ Label / Content / Action) / SidebarMenu (+ Item / Button /
+  # Action / Badge / Skeleton / Sub / SubItem / SubButton) / SidebarSeparator /
+  # SidebarInput / SidebarFooter, alongside a SidebarInset for the main content.
+  # Tailwind → vanilla `.pk-sidebar*` (sidebar.css).
   class Sidebar < BaseComponent
-    def initialize(**attrs)
+    # Active-item treatment (ui.shadcn.com/create's "Menu" option): :default is
+    # shadcn's stock accent tint; :solid fills with the primary/brand role.
+    MENUS = { default: nil, solid: "menu-solid" }.freeze
+
+    def initialize(menu: :default, **attrs)
+      @menu = menu.to_sym
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(**mix({ class: "pk-sidebar" }, @attrs), &block)
+      div(**mix({ class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-sidebar", MENUS.fetch(@menu) ].compact.join(" ")
     end
   end
 end

data/app/components/phlex_kit/sidebar/sidebar_group_action.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Action button pinned to the top-right of a SidebarGroup (the group is the
+  # positioning context), ported from shadcn/ui's SidebarGroupAction.
+  # See sidebar.rb.
+  class SidebarGroupAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ class: "pk-sidebar-group-action", type: "button" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_group_content.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Content container within a SidebarGroup, ported from shadcn/ui's
+  # SidebarGroupContent. See sidebar.rb.
+  class SidebarGroupContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-group-content" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_group_label.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Heading for a SidebarGroup, ported from shadcn/ui's SidebarGroupLabel.
+  # See sidebar.rb.
+  class SidebarGroupLabel < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-group-label" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_input.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Search/filter input for the sidebar, ported from shadcn/ui's SidebarInput:
+  # the kit Input on the page background, sized to the sidebar's control height.
+  # See sidebar.rb.
+  class SidebarInput < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Input.new(**mix({ class: "pk-sidebar-input" }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_action.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Secondary action pinned to the right edge of a SidebarMenuItem (the item is
+  # position:relative), ported from shadcn/ui's SidebarMenuAction. See sidebar.rb.
+  class SidebarMenuAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ class: "pk-sidebar-menu-action", type: "button" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_badge.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Non-interactive count/status pinned to the right edge of a SidebarMenuItem,
+  # ported from shadcn/ui's SidebarMenuBadge. See sidebar.rb.
+  class SidebarMenuBadge < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-sidebar-menu-badge" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_skeleton.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Loading placeholder for a menu item, ported from shadcn/ui's
+  # SidebarMenuSkeleton: an optional icon shimmer plus a text shimmer whose
+  # width randomises 50–90% per render (their --skeleton-width trick).
+  # `show_icon:` mirrors shadcn's showIcon. See sidebar.rb.
+  class SidebarMenuSkeleton < BaseComponent
+    def initialize(show_icon: false, **attrs)
+      @show_icon = show_icon
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({ class: "pk-sidebar-menu-skeleton" }, @attrs)) do
+        render Skeleton.new(class: "icon") if @show_icon
+        render Skeleton.new(class: "text", style: "--pk-skeleton-width: #{rand(50..90)}%;")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_sub.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Nested submenu list under a SidebarMenuItem, ported from shadcn/ui's
+  # SidebarMenuSub. See sidebar.rb.
+  class SidebarMenuSub < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      ul(**mix({ class: "pk-sidebar-menu-sub" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_sub_button.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # The interactive element of a SidebarMenuSubItem, ported from shadcn/ui's
+  # SidebarMenuSubButton. `as:` is :a (their default — pass `href:`) or :button;
+  # `active: true` highlights with the accent role (shadcn subs use accent, not
+  # primary). Kwarg rather than attr for the same mix-merge reason as
+  # SidebarMenuButton. See sidebar.rb.
+  class SidebarMenuSubButton < BaseComponent
+    def initialize(as: :a, active: false, **attrs)
+      @as = as
+      @active = active
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      send(@as, **mix({ class: "pk-sidebar-menu-sub-button", "data-active": (@active ? "true" : "false") }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_sub_item.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # An item within a SidebarMenuSub, ported from shadcn/ui's SidebarMenuSubItem.
+  # See sidebar.rb.
+  class SidebarMenuSubItem < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      li(**mix({ class: "pk-sidebar-menu-sub-item" }, @attrs), &block)
+    end
+  end
+end