phlex_kit 0.2.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f6988a4f8e3f47462f9f83824ed6542cafded9d656adb10340e7eb618156063
-  data.tar.gz: ca293b01074cfa84962df3c80683e3df5ae36cf5a919b1e8c0bcd1861948b52c
+  metadata.gz: dabd58e18372455c16ef319dc2f6270469ea2bbacfa42f2418f1e82f127d57cb
+  data.tar.gz: 04b6f68484015c542bfb65d24322c9342ec029d4d3d322f80dca0f571bbdcba0
 SHA512:
-  metadata.gz: fd26ed3b6aef6bf015c7fbdf574516a68e8eb10fe1cfe1356a4292420d01917977428d2b35a301b65e6a8ff19c73daf5ac9ffdfb9af6abae6f96afd4818d7c81
-  data.tar.gz: 6d6c3d42730c2ce500a6f8c8e49afab8e11ec192f87bf9d87434761d334b40e1a762cc157ad7b38b2914edbffeae9fea501235f1cdc0ec6937c88a8f843399fa
+  metadata.gz: d7ffa228298fa3583da83586982aa28404e1c87979b5c839123c6f493da0e6ce8502b9df6a40b58ba73cd11276a06c3e2c96a081bd82057b903dfd5f9d4dddab
+  data.tar.gz: fee2a8edf8f4ad0da4ab8ee42da82316ee0a6674f689f9f1c6025b7efd097c4a557e788dbe725683c5ecdbe49635735cab086a798c39d104550bc17dbb017b70

data/README.md

@@ -9,6 +9,16 @@ instead of Tailwind**. The full [ruby_ui](https://ruby-ui.com) catalog plus
 shadcn's own additions — 70 component families, 38 Stimulus controllers —
 with the default theme lifted verbatim from shadcn/ui's current token system.
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/create-page-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/create-page-light.png">
+  <img alt="The docs site's /create page — shadcn/ui's theme-builder demo rebuilt entirely from PhlexKit components" src="docs/images/create-page-light.png">
+</picture>
+
+*Every pixel above is PhlexKit: [shadcn's /create demo](https://ui.shadcn.com/create)
+rebuilt in the dummy app from kit components — cards, charts, sliders,
+switches, nav menu, command palette — at `/create` in [the docs site](#the-docs-site).*
+
 - **No build step.** Components are plain Ruby classes with co-located vanilla
   CSS, served precompiled-static through Propshaft. No Tailwind, no Node, no
   PostCSS.
@@ -52,6 +62,11 @@ registerPhlexKitControllers(application)
 
 That's it — no Tailwind config, no content globs, no bundler.
 
+For a full step-by-step walkthrough on the default Propshaft + importmap stack —
+including how the `@import` chain and the Stimulus registration wire up, and how
+to verify the install — see
+[docs/05-PROPSHAFT-INSTALL.md](docs/05-PROPSHAFT-INSTALL.md).
+
 ## Usage
 
 ```ruby
@@ -136,7 +151,11 @@ stylesheet_link_tag "phlex_kit/themes/neutral"
 
 The three knobs from ui.shadcn.com/create map directly: **Radius** →
 `--pk-radius`; **Icon Library** → `PhlexKit.config.icon_library` (see Icons
-below); **Menu** → `PhlexKit::Sidebar.new(menu: :default | :solid)`.
+below); **Menu** → `PhlexKit::Sidebar.new(menu: :default | :solid)`. For an
+off-canvas sidebar, `PhlexKit::SidebarWrapper.new(collapsible: :offcanvas)` +
+a `PhlexKit::SidebarTrigger` anywhere inside it: desktop slides the rail out
+of the layout, below 768px it overlays as a drawer behind a scrim (Escape /
+scrim-click closes; state is DOM-only so Turbo caches restore closed).
 
 ## Icons
 
@@ -184,6 +203,11 @@ render PhlexKit::Chart.new(options: {
 No `window.Chart`? The controller dispatches `phlex-kit--chart:connect` with
 `{ canvas, options }` so you can drive any other library.
 
+For the full walkthrough — pinning Chart.js through **importmap** (and the
+gotcha that makes the obvious `bin/importmap pin chart.js` fail), the UMD
+alternative, and end-to-end verification — see
+[docs/06-CHARTS.md](docs/06-CHARTS.md).
+
 ## phlex-reactive (optional)
 
 For components that own server-state behavior, add phlex-reactive and include
@@ -207,8 +231,14 @@ Want to own and edit a component's source? Eject it into your app:
 bin/rails g phlex_kit:component button
 ```
 
-This copies `button.rb` + `button.css` into `app/components/phlex_kit/button/`
-and wires its `@import`. Your copy shadows the gem's.
+This copies the whole component folder — `button.rb` (+ any parts), `button.css`,
+and, for interactive components, `button_controller.js` — into
+`app/components/phlex_kit/button/`, prepends its `@import`, and wires
+`config/application.rb` once so your copy fully shadows the gem's — **Ruby, CSS,
+and JS**. (It Zeitwerk-collapses the folder so `button/button.rb` autoloads as
+`PhlexKit::Button`, and puts `app/components` ahead of the gem on Propshaft's
+asset path so the ejected CSS/JS resolve to your copy, not the gem's.) Re-running
+for another component reuses the same wiring — it's injected only once.
 
 ## The docs site
 
@@ -278,8 +308,9 @@ fully mirrored overlay alignment in RTL may need small host-side overrides.
 Four engine initializers make the zero-build story hold:
 
 1. `app/components`, the stylesheet dir, and `app/javascript` go on
-   Propshaft's load path, so CSS sits beside each `.rb` and the importmap pins
-   resolve.
+   Propshaft's load path, so each component's `.css` and `_controller.js` sit
+   beside its `.rb` and the importmap pins resolve (`app/javascript` still serves
+   the central `controllers/index.js` registry).
 2. Component folders are Zeitwerk-`collapse`d, so `button/button.rb` is
    `PhlexKit::Button` and `card/card_header.rb` is `PhlexKit::CardHeader`.
 3. A guard keeps Propshaft from serving Ruby source out of `public/assets/`.

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

@@ -158,3 +158,60 @@
 .pk-input.pk-sidebar-input { height: 2rem; width: 100%; background: var(--pk-bg); box-shadow: none; }
 
 .pk-sidebar-inset { flex: 1; min-width: 0; }
+
+/* --- Offcanvas mode (SidebarWrapper collapsible: :offcanvas) ---------------
+   Desktop: the rail slides out of the layout (data-collapsed on the wrapper).
+   Mobile (<768px): the rail is a fixed overlay drawer behind a scrim
+   (data-open). The trigger only shows inside an offcanvas wrapper. The 767px
+   cutoff matches sidebar_controller.js. */
+.pk-sidebar-wrapper.collapsible-offcanvas .pk-sidebar {
+  transition: margin-left .2s ease, transform .2s ease;
+}
+.pk-sidebar-wrapper.collapsible-offcanvas[data-collapsed] .pk-sidebar { margin-left: -16rem; }
+
+.pk-sidebar-trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+}
+.pk-sidebar-trigger:hover { background: var(--pk-accent); }
+.pk-sidebar-trigger svg { width: 1rem; height: 1rem; }
+.collapsible-offcanvas .pk-sidebar-trigger { display: inline-flex; }
+
+.pk-sidebar-scrim { display: none; }
+
+@media (max-width: 767px) {
+  .pk-sidebar-wrapper.collapsible-offcanvas .pk-sidebar {
+    position: fixed;
+    inset-block: 0;
+    left: 0;
+    z-index: 50;
+    height: 100dvh;
+    margin-left: 0;
+    transform: translateX(-100%);
+    box-shadow: 0 8px 30px rgb(0 0 0 / .35);
+  }
+  .pk-sidebar-wrapper.collapsible-offcanvas[data-open] .pk-sidebar { transform: none; }
+  .pk-sidebar-wrapper.collapsible-offcanvas[data-open] .pk-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 49;
+    background: rgb(0 0 0 / .5);
+    border: 0;
+    padding: 0;
+    cursor: default;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pk-sidebar-wrapper.collapsible-offcanvas .pk-sidebar { transition: none; }
+}

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

@@ -1,9 +1,9 @@
 module PhlexKit
-  # Sidebar shell, ported from ruby_ui's RubyUI::Sidebar at `collapsible: :none`
-  # (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. The static part set matches shadcn/ui's Sidebar:
+  # Sidebar shell, ported from ruby_ui's RubyUI::Sidebar: a flex-column rail.
+  # Static by default; SidebarWrapper(collapsible: :offcanvas) + SidebarTrigger
+  # give it shadcn's offcanvas behavior (desktop slide-away, mobile overlay
+  # drawer with scrim — see sidebar_wrapper.rb / sidebar_controller.js).
+  # The 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 /

data/app/components/phlex_kit/sidebar/sidebar_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--sidebar" — set by SidebarWrapper when
+// collapsible: :offcanvas. One attribute per surface, both DOM-only so Turbo's
+// page cache never restores an open drawer (the wrapper also closes on
+// turbo:before-cache): `data-open` shows the mobile overlay drawer,
+// `data-collapsed` slides the desktop rail out of the layout. The 767px cutoff
+// matches sidebar.css's offcanvas media query.
+export default class extends Controller {
+  static MOBILE = "(max-width: 767px)"
+
+  toggle() {
+    if (this.mobile) this.element.toggleAttribute("data-open")
+    else this.element.toggleAttribute("data-collapsed")
+  }
+
+  closeMobile() {
+    this.element.removeAttribute("data-open")
+  }
+
+  get mobile() {
+    return window.matchMedia(this.constructor.MOBILE).matches
+  }
+}

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

@@ -0,0 +1,23 @@
+module PhlexKit
+  # The hamburger that toggles an offcanvas sidebar, ported from shadcn/ui's
+  # SidebarTrigger. Place it anywhere inside a
+  # SidebarWrapper(collapsible: :offcanvas) — typically at the top of the
+  # SidebarInset. Renders the :menu icon unless a block supplies its own
+  # content. Hidden by CSS unless the wrapper is offcanvas. See sidebar.rb.
+  class SidebarTrigger < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({
+        type: :button,
+        class: "pk-sidebar-trigger",
+        aria_label: "Toggle sidebar",
+        data: { action: "click->phlex-kit--sidebar#toggle" }
+      }, @attrs)) do
+        block ? yield : render(Icon.new(:menu, size: nil))
+      end
+    end
+  end
+end

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

@@ -1,13 +1,48 @@
 module PhlexKit
   # The page-level flex row that holds a PhlexKit::Sidebar + a PhlexKit::SidebarInset.
+  #
+  # `collapsible:` (shadcn/ui's Sidebar `collapsible` prop, held here because the
+  # wrapper is the Stimulus scope shared by rail, trigger and scrim):
+  #   :none      — static rail (default).
+  #   :offcanvas — the rail hides/reveals via a PhlexKit::SidebarTrigger. On
+  #                desktop it slides out of the layout; below 768px it overlays
+  #                as a fixed drawer behind a click-to-close scrim, closed by
+  #                Escape and before Turbo caches the page. State is DOM-only:
+  #                `data-collapsed` (desktop) / `data-open` (mobile drawer).
   # See sidebar.rb.
   class SidebarWrapper < BaseComponent
-    def initialize(**attrs)
+    COLLAPSIBLE = { none: nil, offcanvas: "collapsible-offcanvas" }.freeze
+
+    def initialize(collapsible: :none, **attrs)
+      @collapsible = collapsible.to_sym
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(**mix({ class: "pk-sidebar-wrapper" }, @attrs), &block)
+      unless offcanvas?
+        return div(**mix({ class: classes }, @attrs), &block)
+      end
+
+      div(**mix({
+        class: classes,
+        data: {
+          controller: "phlex-kit--sidebar",
+          action: "keydown.esc@window->phlex-kit--sidebar#closeMobile " \
+                  "turbo:before-cache@window->phlex-kit--sidebar#closeMobile"
+        }
+      }, @attrs)) do
+        yield if block
+        button(type: :button, class: "pk-sidebar-scrim", aria_label: "Close sidebar",
+               tabindex: "-1", data: { action: "click->phlex-kit--sidebar#closeMobile" })
+      end
+    end
+
+    private
+
+    def offcanvas? = @collapsible == :offcanvas
+
+    def classes
+      [ "pk-sidebar-wrapper", COLLAPSIBLE.fetch(@collapsible) ].compact.join(" ")
     end
   end
 end

data/app/javascript/phlex_kit/controllers/index.js

@@ -39,6 +39,7 @@ import SelectController from "phlex_kit/controllers/select_controller"
 import SelectItemController from "phlex_kit/controllers/select_item_controller"
 import SheetController from "phlex_kit/controllers/sheet_controller"
 import SheetContentController from "phlex_kit/controllers/sheet_content_controller"
+import SidebarController from "phlex_kit/controllers/sidebar_controller"
 import SliderController from "phlex_kit/controllers/slider_controller"
 import TabsController from "phlex_kit/controllers/tabs_controller"
 import ThemeToggleController from "phlex_kit/controllers/theme_toggle_controller"
@@ -79,6 +80,7 @@ export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--select-item", SelectItemController)
   application.register("phlex-kit--sheet", SheetController)
   application.register("phlex-kit--sheet-content", SheetContentController)
+  application.register("phlex-kit--sidebar", SidebarController)
   application.register("phlex-kit--slider", SliderController)
   application.register("phlex-kit--tabs", TabsController)
   application.register("phlex-kit--theme-toggle", ThemeToggleController)

data/config/importmap.rb

@@ -2,6 +2,20 @@
 
 # Pins the PhlexKit Stimulus controllers so importmap-rails hosts can register
 # them. The engine appends this file to the host's importmap paths.
-pin_all_from PhlexKit::Engine.root.join("app/javascript/phlex_kit/controllers"),
-  under: "phlex_kit/controllers",
-  to: "phlex_kit/controllers"
+#
+# Each controller is co-located with its component under
+# app/components/phlex_kit/<name>/<name>_controller.js, but we keep the flat
+# `phlex_kit/controllers/*` module namespace stable so index.js imports and the
+# host-facing API (`import … from "phlex_kit/controllers"`) never change. Basenames
+# are globally unique, so the flat module IDs don't collide. app/components is
+# already on the asset path (see Engine), so these logical paths resolve and
+# get fingerprinted.
+components_root = PhlexKit::Engine.root.join("app/components")
+Dir.glob(components_root.join("phlex_kit/*/*_controller.js")).sort.each do |path|
+  name = File.basename(path, ".js")               # e.g. "button_controller"
+  logical = path.sub("#{components_root}/", "")    # e.g. "phlex_kit/button/button_controller.js"
+  pin "phlex_kit/controllers/#{name}", to: logical
+end
+
+# The aggregator that hosts import from ("phlex_kit/controllers"); stays central.
+pin "phlex_kit/controllers", to: "phlex_kit/controllers/index.js"

data/lib/generators/phlex_kit/component/component_generator.rb

@@ -5,13 +5,17 @@ require "rails/generators/named_base"
 module PhlexKit
   module Generators
     # `rails g phlex_kit:component button` — the shadcn-style "eject": copies a
-    # component's folder (.rb parts + co-located .css) out of the gem and into the
-    # host app so the team owns and can edit the source. Appends its @import to
-    # application.css. The ejected copy keeps the PhlexKit namespace; the host's
-    # copy shadows the gem's via Zeitwerk load-path order.
+    # component's folder (.rb parts + co-located .css + _controller.js) out of the
+    # gem and into the host app so the team owns and can edit the source. Appends
+    # its @import to application.css and wires config/application.rb (once) so the
+    # ejected copy fully shadows the gem's — Ruby, CSS, and JS alike.
     class ComponentGenerator < Rails::Generators::NamedBase
       source_root PhlexKit::Engine.root.join("app/components/phlex_kit").to_s
 
+      # Marker that `wire_host_app` is idempotent against — presence means an
+      # earlier eject already wired config/application.rb.
+      COLLAPSE_LINE = %(Rails.autoloaders.main.collapse(Rails.root.join("app/components/phlex_kit/*")))
+
       def eject_component
         unless File.directory?(File.join(self.class.source_root, file_name))
           say_status :error, "no PhlexKit component named '#{file_name}'", :red
@@ -27,14 +31,42 @@ module PhlexKit
         prepend_to_file(css, line) unless File.read(css).include?(line.strip)
       end
 
-      def remind_collapse
-        say <<~MSG
-          Ejected phlex_kit/#{file_name}. Ensure your app collapses ejected
-          component folders (config/application.rb):
+      # Make an ejected component fully editable, in one step. Two things are
+      # needed and neither is on by default in a host app:
+      #   1. Zeitwerk collapse — so app/components/phlex_kit/button/button.rb
+      #      autoloads as PhlexKit::Button (not ::Button::Button). Fixes Ruby.
+      #   2. Host app/components ahead of the gem on Propshaft's asset path — so
+      #      the ejected <name>.css and <name>_controller.js resolve to the host
+      #      copy instead of the gem's. Without this the Ruby shadows but the CSS
+      #      and JS silently keep serving the gem's originals.
+      # Injected once (idempotent) right after config.load_defaults, where
+      # config.assets is available.
+      def wire_host_app
+        app_rb = "config/application.rb"
+        unless File.exist?(app_rb)
+          say_status :skip, "#{app_rb} not found — wire ejected components manually (see docs/05-PROPSHAFT-INSTALL.md)", :yellow
+          return
+        end
+        if File.read(app_rb).include?(COLLAPSE_LINE)
+          say_status :identical, "#{app_rb} already wired for ejected components", :blue
+          return
+        end
+        inject_into_file app_rb, after: /^\s*config\.load_defaults.*\n/ do
+          # Indent only non-empty lines so the blank separator carries no trailing space.
+          <<~RUBY.gsub(/^(?=.)/, "    ")
 
-              Rails.autoloaders.main.collapse("app/components/phlex_kit/*")
+            # PhlexKit: make ejected components under app/components/phlex_kit/
+            # fully editable — collapse so <name>/<name>.rb autoloads as
+            # PhlexKit::<Name>, and put the dir ahead of the gem on the asset path
+            # so the ejected <name>.css and <name>_controller.js shadow the gem's.
+            #{COLLAPSE_LINE}
+            config.assets.paths.unshift(Rails.root.join("app/components"))
+          RUBY
+        end
+      end
 
-        MSG
+      def confirm
+        say_status :phlex_kit, "ejected phlex_kit/#{file_name} — your copy now shadows the gem (Ruby, CSS, JS)", :green
       end
     end
   end

data/lib/phlex_kit/engine.rb

@@ -14,8 +14,10 @@ module PhlexKit
       if app.config.respond_to?(:assets)
         app.config.assets.paths << root.join("app/components")
         app.config.assets.paths << root.join("app/assets/stylesheets")
-        # The Stimulus controllers must be servable too, or every importmap pin
-        # from (4) resolves to a missing asset and gets silently skipped.
+        # The Stimulus controllers are co-located under app/components (served via
+        # the path above); this keeps the central registry (controllers/index.js)
+        # servable too, or the "phlex_kit/controllers" pin from (4) resolves to a
+        # missing asset and gets silently skipped.
         app.config.assets.paths << root.join("app/javascript")
       end
     end
@@ -38,6 +40,9 @@ module PhlexKit
     initializer "phlex_kit.importmap", before: "importmap" do |app|
       if app.respond_to?(:config) && app.config.respond_to?(:importmap)
         app.config.importmap.paths << root.join("config/importmap.rb")
+        # Colocated controllers change under app/components; the central registry
+        # lives under app/javascript. Sweep both so edits bust the importmap cache.
+        app.config.importmap.cache_sweepers << root.join("app/components")
         app.config.importmap.cache_sweepers << root.join("app/javascript")
       end
     end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.2.2"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Matt Kennedy
@@ -126,6 +126,7 @@ files:
 - app/components/phlex_kit/accordion/accordion.css
 - app/components/phlex_kit/accordion/accordion.rb
 - app/components/phlex_kit/accordion/accordion_content.rb
+- app/components/phlex_kit/accordion/accordion_controller.js
 - app/components/phlex_kit/accordion/accordion_default_content.rb
 - app/components/phlex_kit/accordion/accordion_default_trigger.rb
 - app/components/phlex_kit/accordion/accordion_icon.rb
@@ -140,6 +141,7 @@ files:
 - app/components/phlex_kit/alert_dialog/alert_dialog_action.rb
 - app/components/phlex_kit/alert_dialog/alert_dialog_cancel.rb
 - app/components/phlex_kit/alert_dialog/alert_dialog_content.rb
+- app/components/phlex_kit/alert_dialog/alert_dialog_controller.js
 - app/components/phlex_kit/alert_dialog/alert_dialog_description.rb
 - app/components/phlex_kit/alert_dialog/alert_dialog_footer.rb
 - app/components/phlex_kit/alert_dialog/alert_dialog_header.rb
@@ -158,8 +160,10 @@ files:
 - app/components/phlex_kit/attachment/attachment_media.rb
 - app/components/phlex_kit/attachment/attachment_title.rb
 - app/components/phlex_kit/attachment/attachment_trigger.rb
+- app/components/phlex_kit/attachment/scroll_fade_controller.js
 - app/components/phlex_kit/avatar/avatar.css
 - app/components/phlex_kit/avatar/avatar.rb
+- app/components/phlex_kit/avatar/avatar_controller.js
 - app/components/phlex_kit/avatar/avatar_fallback.rb
 - app/components/phlex_kit/avatar/avatar_group.rb
 - app/components/phlex_kit/avatar/avatar_image.rb
@@ -185,8 +189,10 @@ files:
 - app/components/phlex_kit/calendar/calendar.css
 - app/components/phlex_kit/calendar/calendar.rb
 - app/components/phlex_kit/calendar/calendar_body.rb
+- app/components/phlex_kit/calendar/calendar_controller.js
 - app/components/phlex_kit/calendar/calendar_days.rb
 - app/components/phlex_kit/calendar/calendar_header.rb
+- app/components/phlex_kit/calendar/calendar_input_controller.js
 - app/components/phlex_kit/calendar/calendar_next.rb
 - app/components/phlex_kit/calendar/calendar_prev.rb
 - app/components/phlex_kit/calendar/calendar_title.rb
@@ -202,15 +208,18 @@ files:
 - app/components/phlex_kit/carousel/carousel.css
 - app/components/phlex_kit/carousel/carousel.rb
 - app/components/phlex_kit/carousel/carousel_content.rb
+- app/components/phlex_kit/carousel/carousel_controller.js
 - app/components/phlex_kit/carousel/carousel_item.rb
 - app/components/phlex_kit/carousel/carousel_next.rb
 - app/components/phlex_kit/carousel/carousel_previous.rb
 - app/components/phlex_kit/chart/chart.css
 - app/components/phlex_kit/chart/chart.rb
+- app/components/phlex_kit/chart/chart_controller.js
 - app/components/phlex_kit/checkbox/checkbox.css
 - app/components/phlex_kit/checkbox/checkbox.rb
 - app/components/phlex_kit/clipboard/clipboard.css
 - app/components/phlex_kit/clipboard/clipboard.rb
+- app/components/phlex_kit/clipboard/clipboard_controller.js
 - app/components/phlex_kit/clipboard/clipboard_popover.rb
 - app/components/phlex_kit/clipboard/clipboard_source.rb
 - app/components/phlex_kit/clipboard/clipboard_trigger.rb
@@ -219,6 +228,7 @@ files:
 - app/components/phlex_kit/collapsible/collapsible.css
 - app/components/phlex_kit/collapsible/collapsible.rb
 - app/components/phlex_kit/collapsible/collapsible_content.rb
+- app/components/phlex_kit/collapsible/collapsible_controller.js
 - app/components/phlex_kit/collapsible/collapsible_trigger.rb
 - app/components/phlex_kit/combobox/combobox.css
 - app/components/phlex_kit/combobox/combobox.rb
@@ -226,6 +236,7 @@ files:
 - app/components/phlex_kit/combobox/combobox_badge_trigger.rb
 - app/components/phlex_kit/combobox/combobox_checkbox.rb
 - app/components/phlex_kit/combobox/combobox_clear_button.rb
+- app/components/phlex_kit/combobox/combobox_controller.js
 - app/components/phlex_kit/combobox/combobox_empty_state.rb
 - app/components/phlex_kit/combobox/combobox_input_trigger.rb
 - app/components/phlex_kit/combobox/combobox_item.rb
@@ -239,8 +250,10 @@ files:
 - app/components/phlex_kit/combobox/combobox_trigger.rb
 - app/components/phlex_kit/command/command.css
 - app/components/phlex_kit/command/command.rb
+- app/components/phlex_kit/command/command_controller.js
 - app/components/phlex_kit/command/command_dialog.rb
 - app/components/phlex_kit/command/command_dialog_content.rb
+- app/components/phlex_kit/command/command_dialog_controller.js
 - app/components/phlex_kit/command/command_dialog_trigger.rb
 - app/components/phlex_kit/command/command_empty.rb
 - app/components/phlex_kit/command/command_group.rb
@@ -250,6 +263,7 @@ files:
 - app/components/phlex_kit/context_menu/context_menu.css
 - app/components/phlex_kit/context_menu/context_menu.rb
 - app/components/phlex_kit/context_menu/context_menu_content.rb
+- app/components/phlex_kit/context_menu/context_menu_controller.js
 - app/components/phlex_kit/context_menu/context_menu_item.rb
 - app/components/phlex_kit/context_menu/context_menu_label.rb
 - app/components/phlex_kit/context_menu/context_menu_separator.rb
@@ -258,6 +272,8 @@ files:
 - app/components/phlex_kit/data_table/data_table.rb
 - app/components/phlex_kit/data_table/data_table_bulk_actions.rb
 - app/components/phlex_kit/data_table/data_table_column_toggle.rb
+- app/components/phlex_kit/data_table/data_table_column_visibility_controller.js
+- app/components/phlex_kit/data_table/data_table_controller.js
 - app/components/phlex_kit/data_table/data_table_expand_toggle.rb
 - app/components/phlex_kit/data_table/data_table_form.rb
 - app/components/phlex_kit/data_table/data_table_kaminari_adapter.rb
@@ -268,6 +284,7 @@ files:
 - app/components/phlex_kit/data_table/data_table_per_page_select.rb
 - app/components/phlex_kit/data_table/data_table_row_checkbox.rb
 - app/components/phlex_kit/data_table/data_table_search.rb
+- app/components/phlex_kit/data_table/data_table_search_controller.js
 - app/components/phlex_kit/data_table/data_table_select_all_checkbox.rb
 - app/components/phlex_kit/data_table/data_table_selection_summary.rb
 - app/components/phlex_kit/data_table/data_table_sort_head.rb
@@ -277,6 +294,7 @@ files:
 - app/components/phlex_kit/dialog/dialog.css
 - app/components/phlex_kit/dialog/dialog.rb
 - app/components/phlex_kit/dialog/dialog_content.rb
+- app/components/phlex_kit/dialog/dialog_controller.js
 - app/components/phlex_kit/dialog/dialog_description.rb
 - app/components/phlex_kit/dialog/dialog_footer.rb
 - app/components/phlex_kit/dialog/dialog_header.rb
@@ -296,6 +314,7 @@ files:
 - app/components/phlex_kit/dropdown_menu/dropdown_menu.rb
 - app/components/phlex_kit/dropdown_menu/dropdown_menu_checkbox_item.rb
 - app/components/phlex_kit/dropdown_menu/dropdown_menu_content.rb
+- app/components/phlex_kit/dropdown_menu/dropdown_menu_controller.js
 - app/components/phlex_kit/dropdown_menu/dropdown_menu_group.rb
 - app/components/phlex_kit/dropdown_menu/dropdown_menu_item.rb
 - app/components/phlex_kit/dropdown_menu/dropdown_menu_label.rb
@@ -318,12 +337,14 @@ files:
 - app/components/phlex_kit/form/form.rb
 - app/components/phlex_kit/form_field/form_field.css
 - app/components/phlex_kit/form_field/form_field.rb
+- app/components/phlex_kit/form_field/form_field_controller.js
 - app/components/phlex_kit/form_field/form_field_error.rb
 - app/components/phlex_kit/form_field/form_field_hint.rb
 - app/components/phlex_kit/form_field/form_field_label.rb
 - app/components/phlex_kit/hover_card/hover_card.css
 - app/components/phlex_kit/hover_card/hover_card.rb
 - app/components/phlex_kit/hover_card/hover_card_content.rb
+- app/components/phlex_kit/hover_card/hover_card_controller.js
 - app/components/phlex_kit/hover_card/hover_card_trigger.rb
 - app/components/phlex_kit/icon/icon.rb
 - app/components/phlex_kit/input/input.css
@@ -334,6 +355,7 @@ files:
 - app/components/phlex_kit/input_group/input_group_text.rb
 - app/components/phlex_kit/input_otp/input_otp.css
 - app/components/phlex_kit/input_otp/input_otp.rb
+- app/components/phlex_kit/input_otp/input_otp_controller.js
 - app/components/phlex_kit/input_otp/input_otp_group.rb
 - app/components/phlex_kit/input_otp/input_otp_separator.rb
 - app/components/phlex_kit/input_otp/input_otp_slot.rb
@@ -357,9 +379,11 @@ files:
 - app/components/phlex_kit/marker/marker_content.rb
 - app/components/phlex_kit/marker/marker_icon.rb
 - app/components/phlex_kit/masked_input/masked_input.rb
+- app/components/phlex_kit/masked_input/masked_input_controller.js
 - app/components/phlex_kit/menubar/menubar.css
 - app/components/phlex_kit/menubar/menubar.rb
 - app/components/phlex_kit/menubar/menubar_content.rb
+- app/components/phlex_kit/menubar/menubar_controller.js
 - app/components/phlex_kit/menubar/menubar_item.rb
 - app/components/phlex_kit/menubar/menubar_menu.rb
 - app/components/phlex_kit/menubar/menubar_separator.rb
@@ -373,6 +397,7 @@ files:
 - app/components/phlex_kit/message/message_header.rb
 - app/components/phlex_kit/message_scroller/message_scroller.css
 - app/components/phlex_kit/message_scroller/message_scroller.rb
+- app/components/phlex_kit/message_scroller/message_scroller_controller.js
 - app/components/phlex_kit/native_select/native_select.css
 - app/components/phlex_kit/native_select/native_select.rb
 - app/components/phlex_kit/native_select/native_select_group.rb
@@ -393,6 +418,7 @@ files:
 - app/components/phlex_kit/popover/popover.css
 - app/components/phlex_kit/popover/popover.rb
 - app/components/phlex_kit/popover/popover_content.rb
+- app/components/phlex_kit/popover/popover_controller.js
 - app/components/phlex_kit/popover/popover_trigger.rb
 - app/components/phlex_kit/progress/progress.css
 - app/components/phlex_kit/progress/progress.rb
@@ -401,6 +427,7 @@ files:
 - app/components/phlex_kit/radio_group/radio_group.css
 - app/components/phlex_kit/radio_group/radio_group.rb
 - app/components/phlex_kit/resizable/resizable.css
+- app/components/phlex_kit/resizable/resizable_controller.js
 - app/components/phlex_kit/resizable/resizable_handle.rb
 - app/components/phlex_kit/resizable/resizable_panel.rb
 - app/components/phlex_kit/resizable/resizable_panel_group.rb
@@ -409,9 +436,11 @@ files:
 - app/components/phlex_kit/select/select.css
 - app/components/phlex_kit/select/select.rb
 - app/components/phlex_kit/select/select_content.rb
+- app/components/phlex_kit/select/select_controller.js
 - app/components/phlex_kit/select/select_group.rb
 - app/components/phlex_kit/select/select_input.rb
 - app/components/phlex_kit/select/select_item.rb
+- app/components/phlex_kit/select/select_item_controller.js
 - app/components/phlex_kit/select/select_label.rb
 - app/components/phlex_kit/select/select_trigger.rb
 - app/components/phlex_kit/select/select_value.rb
@@ -420,6 +449,8 @@ files:
 - app/components/phlex_kit/sheet/sheet.css
 - app/components/phlex_kit/sheet/sheet.rb
 - app/components/phlex_kit/sheet/sheet_content.rb
+- app/components/phlex_kit/sheet/sheet_content_controller.js
+- app/components/phlex_kit/sheet/sheet_controller.js
 - app/components/phlex_kit/sheet/sheet_description.rb
 - app/components/phlex_kit/sheet/sheet_footer.rb
 - app/components/phlex_kit/sheet/sheet_header.rb
@@ -431,6 +462,7 @@ files:
 - app/components/phlex_kit/sidebar/sidebar.css
 - app/components/phlex_kit/sidebar/sidebar.rb
 - app/components/phlex_kit/sidebar/sidebar_content.rb
+- app/components/phlex_kit/sidebar/sidebar_controller.js
 - app/components/phlex_kit/sidebar/sidebar_footer.rb
 - app/components/phlex_kit/sidebar/sidebar_group.rb
 - app/components/phlex_kit/sidebar/sidebar_group_action.rb
@@ -449,11 +481,13 @@ files:
 - app/components/phlex_kit/sidebar/sidebar_menu_sub_button.rb
 - app/components/phlex_kit/sidebar/sidebar_menu_sub_item.rb
 - app/components/phlex_kit/sidebar/sidebar_separator.rb
+- app/components/phlex_kit/sidebar/sidebar_trigger.rb
 - app/components/phlex_kit/sidebar/sidebar_wrapper.rb
 - app/components/phlex_kit/skeleton/skeleton.css
 - app/components/phlex_kit/skeleton/skeleton.rb
 - app/components/phlex_kit/slider/slider.css
 - app/components/phlex_kit/slider/slider.rb
+- app/components/phlex_kit/slider/slider_controller.js
 - app/components/phlex_kit/spinner/spinner.css
 - app/components/phlex_kit/spinner/spinner.rb
 - app/components/phlex_kit/switch/switch.css
@@ -470,25 +504,31 @@ files:
 - app/components/phlex_kit/tabs/tabs.css
 - app/components/phlex_kit/tabs/tabs.rb
 - app/components/phlex_kit/tabs/tabs_content.rb
+- app/components/phlex_kit/tabs/tabs_controller.js
 - app/components/phlex_kit/tabs/tabs_list.rb
 - app/components/phlex_kit/tabs/tabs_trigger.rb
 - app/components/phlex_kit/textarea/textarea.css
 - app/components/phlex_kit/textarea/textarea.rb
 - app/components/phlex_kit/theme_toggle/theme_toggle.rb
+- app/components/phlex_kit/theme_toggle/theme_toggle_controller.js
 - app/components/phlex_kit/toast/toast.css
 - app/components/phlex_kit/toast/toast.rb
 - app/components/phlex_kit/toast/toast_action.rb
 - app/components/phlex_kit/toast/toast_cancel.rb
 - app/components/phlex_kit/toast/toast_close.rb
+- app/components/phlex_kit/toast/toast_controller.js
 - app/components/phlex_kit/toast/toast_description.rb
 - app/components/phlex_kit/toast/toast_icon.rb
 - app/components/phlex_kit/toast/toast_item.rb
 - app/components/phlex_kit/toast/toast_region.rb
 - app/components/phlex_kit/toast/toast_title.rb
+- app/components/phlex_kit/toast/toaster_controller.js
 - app/components/phlex_kit/toggle/toggle.css
 - app/components/phlex_kit/toggle/toggle.rb
+- app/components/phlex_kit/toggle/toggle_controller.js
 - app/components/phlex_kit/toggle_group/toggle_group.css
 - app/components/phlex_kit/toggle_group/toggle_group.rb
+- app/components/phlex_kit/toggle_group/toggle_group_controller.js
 - app/components/phlex_kit/toggle_group/toggle_group_item.rb
 - app/components/phlex_kit/tooltip/tooltip.css
 - app/components/phlex_kit/tooltip/tooltip.rb
@@ -500,45 +540,7 @@ files:
 - app/components/phlex_kit/typography/inline_link.rb
 - app/components/phlex_kit/typography/text.rb
 - app/components/phlex_kit/typography/typography.css
-- app/javascript/phlex_kit/controllers/accordion_controller.js
-- app/javascript/phlex_kit/controllers/alert_dialog_controller.js
-- app/javascript/phlex_kit/controllers/avatar_controller.js
-- app/javascript/phlex_kit/controllers/calendar_controller.js
-- app/javascript/phlex_kit/controllers/calendar_input_controller.js
-- app/javascript/phlex_kit/controllers/carousel_controller.js
-- app/javascript/phlex_kit/controllers/chart_controller.js
-- app/javascript/phlex_kit/controllers/clipboard_controller.js
-- app/javascript/phlex_kit/controllers/collapsible_controller.js
-- app/javascript/phlex_kit/controllers/combobox_controller.js
-- app/javascript/phlex_kit/controllers/command_controller.js
-- app/javascript/phlex_kit/controllers/command_dialog_controller.js
-- app/javascript/phlex_kit/controllers/context_menu_controller.js
-- app/javascript/phlex_kit/controllers/data_table_column_visibility_controller.js
-- app/javascript/phlex_kit/controllers/data_table_controller.js
-- app/javascript/phlex_kit/controllers/data_table_search_controller.js
-- app/javascript/phlex_kit/controllers/dialog_controller.js
-- app/javascript/phlex_kit/controllers/dropdown_menu_controller.js
-- app/javascript/phlex_kit/controllers/form_field_controller.js
-- app/javascript/phlex_kit/controllers/hover_card_controller.js
 - app/javascript/phlex_kit/controllers/index.js
-- app/javascript/phlex_kit/controllers/input_otp_controller.js
-- app/javascript/phlex_kit/controllers/masked_input_controller.js
-- app/javascript/phlex_kit/controllers/menubar_controller.js
-- app/javascript/phlex_kit/controllers/message_scroller_controller.js
-- app/javascript/phlex_kit/controllers/popover_controller.js
-- app/javascript/phlex_kit/controllers/resizable_controller.js
-- app/javascript/phlex_kit/controllers/scroll_fade_controller.js
-- app/javascript/phlex_kit/controllers/select_controller.js
-- app/javascript/phlex_kit/controllers/select_item_controller.js
-- app/javascript/phlex_kit/controllers/sheet_content_controller.js
-- app/javascript/phlex_kit/controllers/sheet_controller.js
-- app/javascript/phlex_kit/controllers/slider_controller.js
-- app/javascript/phlex_kit/controllers/tabs_controller.js
-- app/javascript/phlex_kit/controllers/theme_toggle_controller.js
-- app/javascript/phlex_kit/controllers/toast_controller.js
-- app/javascript/phlex_kit/controllers/toaster_controller.js
-- app/javascript/phlex_kit/controllers/toggle_controller.js
-- app/javascript/phlex_kit/controllers/toggle_group_controller.js
 - config/importmap.rb
 - lib/generators/phlex_kit/component/component_generator.rb
 - lib/generators/phlex_kit/install/install_generator.rb