shadcn_phlexcomponents 0.1.17 → 0.1.19

data/app/javascript/controllers/toggle_group_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 const ToggleController = class extends Controller {
+  static name = "toggle-group";
   // values
   static values = {
     isOn: Boolean,

data/app/javascript/controllers/tooltip_controller.js

@@ -3,6 +3,7 @@ import { useHover } from "stimulus-use";
 import { initFloatingUi } from "../utils/floating_ui";
 import { showContent, hideContent } from "../utils";
 const TooltipController = class extends Controller {
+  static name = "tooltip";
   // targets
   static targets = ["trigger", "content", "contentContainer", "arrow"];
   // values
@@ -46,7 +47,7 @@ const TooltipController = class extends Controller {
         arrowElement: this.arrowTarget,
         side: this.contentTarget.dataset.side,
         align: this.contentTarget.dataset.align,
-        sideOffset: 8,
+        sideOffset: 4,
       });
     } else {
       hideContent({

data/app/javascript/shadcn_phlexcomponents.js

@@ -1,60 +1,27 @@
-import { AccordionController } from "./controllers/accordion_controller";
-import { AlertDialogController } from "./controllers/alert_dialog_controller";
-import { AvatarController } from "./controllers/avatar_controller";
-import { CheckboxController } from "./controllers/checkbox_controller";
-import { CollapsibleController } from "./controllers/collapsible_controller";
-import { ComboboxController } from "./controllers/combobox_controller";
-import { CommandController } from "./controllers/command_controller";
-import { DatePickerController } from "./controllers/date_picker_controller";
-import { DateRangePickerController } from "./controllers/date_range_picker_controller";
-import { DialogController } from "./controllers/dialog_controller";
-import { DropdownMenuController } from "./controllers/dropdown_menu_controller";
-import { DropdownMenuSubController } from "./controllers/dropdown_menu_sub_controller";
-import { FormFieldController } from "./controllers/form_field_controller";
-import { HoverCardController } from "./controllers/hover_card_controller";
-import { LoadingButtonController } from "./controllers/loading_button_controller";
-import { PopoverController } from "./controllers/popover_controller";
-import { ProgressController } from "./controllers/progress_controller";
-import { RadioGroupController } from "./controllers/radio_group_controller";
-import { SelectController } from "./controllers/select_controller";
-import SidebarController from "./controllers/sidebar_controller";
-import SidebarTriggerController from "./controllers/sidebar_trigger_controller";
-import { SliderController } from "./controllers/slider_controller";
-import { SwitchController } from "./controllers/switch_controller";
-import { TabsController } from "./controllers/tabs_controller";
-import { ThemeSwitcherController } from "./controllers/theme_switcher_controller";
-import { ToastContainerController } from "./controllers/toast_container_controller";
-import { ToastController } from "./controllers/toast_controller";
-import { ToggleController } from "./controllers/toggle_controller";
-import { TooltipController } from "./controllers/tooltip_controller";
-export default {
-  accordion: AccordionController,
-  "alert-dialog": AlertDialogController,
-  avatar: AvatarController,
-  checkbox: CheckboxController,
-  collapsible: CollapsibleController,
-  combobox: ComboboxController,
-  command: CommandController,
-  "date-picker": DatePickerController,
-  "date-range-picker": DateRangePickerController,
-  dialog: DialogController,
-  "dropdown-menu": DropdownMenuController,
-  "dropdown-menu-sub": DropdownMenuSubController,
-  "form-field": FormFieldController,
-  "hover-card": HoverCardController,
-  "loading-button": LoadingButtonController,
-  popover: PopoverController,
-  progress: ProgressController,
-  "radio-group": RadioGroupController,
-  select: SelectController,
-  sidebar: SidebarController,
-  "sidebar-trigger": SidebarTriggerController,
-  slider: SliderController,
-  switch: SwitchController,
-  tabs: TabsController,
-  "theme-switcher": ThemeSwitcherController,
-  "toast-container": ToastContainerController,
-  toast: ToastController,
-  toggle: ToggleController,
-  tooltip: TooltipController,
-};
+export { AccordionController } from "./controllers/accordion_controller";
+export { AlertDialogController } from "./controllers/alert_dialog_controller";
+export { AvatarController } from "./controllers/avatar_controller";
+export { CheckboxController } from "./controllers/checkbox_controller";
+export { CollapsibleController } from "./controllers/collapsible_controller";
+export { ComboboxController } from "./controllers/combobox_controller";
+export { CommandController } from "./controllers/command_controller";
+export { DatePickerController } from "./controllers/date_picker_controller";
+export { DateRangePickerController } from "./controllers/date_range_picker_controller";
+export { DialogController } from "./controllers/dialog_controller";
+export { DropdownMenuController } from "./controllers/dropdown_menu_controller";
+export { DropdownMenuSubController } from "./controllers/dropdown_menu_sub_controller";
+export { FormFieldController } from "./controllers/form_field_controller";
+export { HoverCardController } from "./controllers/hover_card_controller";
+export { LoadingButtonController } from "./controllers/loading_button_controller";
+export { PopoverController } from "./controllers/popover_controller";
+export { ProgressController } from "./controllers/progress_controller";
+export { RadioGroupController } from "./controllers/radio_group_controller";
+export { SelectController } from "./controllers/select_controller";
+export { SliderController } from "./controllers/slider_controller";
+export { SwitchController } from "./controllers/switch_controller";
+export { TabsController } from "./controllers/tabs_controller";
+export { ThemeSwitcherController } from "./controllers/theme_switcher_controller";
+export { ToastContainerController } from "./controllers/toast_container_controller";
+export { ToastController } from "./controllers/toast_controller";
+export { ToggleController } from "./controllers/toggle_controller";
+export { TooltipController } from "./controllers/tooltip_controller";

data/app/javascript/utils/command.js

@@ -262,7 +262,6 @@ const performRemoteSearch = async (controller, query) => {
   }
 };
 const renderRemoteResults = (controller, data) => {
-  console.log("data", data);
   data.forEach((item) => {
     const tempDiv = document.createElement("div");
     tempDiv.innerHTML = item.html;
@@ -322,7 +321,6 @@ const renderRemoteResults = (controller, data) => {
     ),
   );
   controller.highlightItemByIndex(0);
-  console.log("controller.filteredItems", controller.filteredItems);
   if (controller.filteredItems.length > 0) {
     hideEmpty(controller);
   } else {

data/app/javascript/utils/floating_ui.js

@@ -6,7 +6,9 @@ import {
   autoUpdate,
   size,
   arrow,
+  limitShift,
 } from "@floating-ui/dom";
+// https://github.com/radix-ui/primitives/blob/13e76f08f7afdea623aebfd3c55a7e41ae8d8078/packages/react/popper/src/popper.tsx
 const OPPOSITE_SIDE = {
   top: "bottom",
   right: "left",
@@ -44,8 +46,14 @@ const initFloatingUi = ({
     arrowHeight = rect.height;
   }
   const middleware = [
+    offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+    shift({
+      mainAxis: true,
+      crossAxis: false,
+      limiter: limitShift(),
+    }),
+    flip({ crossAxis: "alignment", fallbackAxisSideDirection: "end" }),
     transformOrigin({ arrowHeight, arrowWidth }),
-    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
     size({
       apply: ({ elements, rects, availableWidth, availableHeight }) => {
         const { width: anchorWidth, height: anchorHeight } = rects.reference;
@@ -68,23 +76,8 @@ const initFloatingUi = ({
         );
       },
     }),
+    arrowElement && arrow({ element: arrowElement, padding: 0 }),
   ];
-  const flipMiddleware = flip({
-    // Ensure we flip to the perpendicular axis if it doesn't fit
-    // on narrow viewports.
-    crossAxis: "alignment",
-    fallbackAxisSideDirection: "end", // or 'start'
-  });
-  const shiftMiddleware = shift();
-  // Prioritize flip over shift for edge-aligned placements only.
-  if (placement.includes("-")) {
-    middleware.push(flipMiddleware, shiftMiddleware);
-  } else {
-    middleware.push(shiftMiddleware, flipMiddleware);
-  }
-  if (arrowElement) {
-    middleware.push(arrow({ element: arrowElement, padding: 0 }));
-  }
   return autoUpdate(referenceElement, floatingElement, () => {
     computePosition(referenceElement, floatingElement, {
       placement: placement,

data/app/stylesheets/date_picker.css

@@ -54,7 +54,7 @@
 }
 
 [data-vc='wrapper'] {
-  @apply flex items-center content-center h-full;
+  @apply flex items-center h-full;
 }
 
 [data-vc='content'] {

data/app/stylesheets/shadcn_phlexcomponents.css

@@ -0,0 +1,173 @@
+@import './tw-animate.css';
+@import './date_picker.css';
+@import './nouislider.css';
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant fixed (&:is(.layout-fixed *));
+
+@theme inline {
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: var(--foreground);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.96 0 0);
+  --code-number: oklch(0.56 0 0);
+  --selection: oklch(0.145 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.27 0 0);
+  --code-number: oklch(0.72 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  ::selection {
+    @apply bg-selection text-selection-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

data/app/typescript/controllers/accordion_controller.ts

@@ -7,6 +7,8 @@ import {
 } from '../utils'
 
 const AccordionController = class extends Controller<HTMLElement> {
+  static name = 'accordion'
+
   // targets
   static targets = ['item', 'trigger', 'content']
   declare itemTargets: HTMLElement[]

data/app/typescript/controllers/alert_dialog_controller.ts

@@ -1,6 +1,8 @@
 import { DialogController } from './dialog_controller'
 
 const AlertDialogController = class extends DialogController {
+  static name = 'alert-dialog'
+
   protected onDOMClick() {
     return
   }

data/app/typescript/controllers/avatar_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const AvatarController = class extends Controller {
+  static name = 'avatar'
+
   // targets
   static targets = ['image', 'fallback']
   declare readonly imageTarget: HTMLElement

data/app/typescript/controllers/checkbox_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const CheckboxController = class extends Controller<HTMLElement> {
+  static name = 'checkbox'
+
   // targets
   static targets = ['input', 'indicator']
   declare readonly inputTarget: HTMLInputElement

data/app/typescript/controllers/collapsible_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { hideContent, showContent } from '../utils'
 
 const CollapsibleController = class extends Controller {
+  static name = 'collapsible'
+
   // targets
   static targets = ['trigger', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/combobox_controller.ts

@@ -25,6 +25,8 @@ import {
 import { useClickOutside, useDebounce } from 'stimulus-use'
 
 const ComboboxController = class extends Controller<HTMLElement> {
+  static name = 'combobox'
+
   // targets
   static targets = [
     'trigger',
@@ -115,7 +117,6 @@ const ComboboxController = class extends Controller<HTMLElement> {
       this.searchInputTarget.focus()
 
       let index = 0
-      console.log('this.selectedValue', this.selectedValue)
       if (this.selectedValue) {
         const item = this.filteredItems.find(
           (i) => i.dataset.value === this.selectedValue,

data/app/typescript/controllers/command_controller.ts

@@ -31,6 +31,8 @@ declare global {
 }
 
 const CommandController = class extends Controller<HTMLElement> {
+  static name = 'command'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/date_picker_controller.ts

@@ -19,9 +19,17 @@ import utc from 'dayjs/plugin/utc'
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
 
+const SMALL_SCREEN_BREAKPOINT = 768
+
+const isSmallScreen = () => {
+  return window.innerWidth < SMALL_SCREEN_BREAKPOINT
+}
+
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
 const DatePickerController = class extends Controller<HTMLElement> {
+  static name = 'date-picker'
+
   // targets
   static targets = [
     'trigger',
@@ -55,7 +63,6 @@ const DatePickerController = class extends Controller<HTMLElement> {
   declare format: string
   declare mask: boolean
   declare calendar: Calendar
-  declare isMobile: boolean
   declare DOMKeydownListener: (event: KeyboardEvent) => void
   declare cleanup: () => void
   declare onClickDateListener: (self: Calendar) => void
@@ -81,9 +88,23 @@ const DatePickerController = class extends Controller<HTMLElement> {
   }
 
   contentContainerTargetConnected() {
-    // Datepicker is shown as a dialog on small screens
-    const styles = window.getComputedStyle(this.contentContainerTarget)
-    this.isMobile = styles.translate === '-50%'
+    if (isSmallScreen()) {
+      const windowHeight = window.innerHeight
+      const datePickerHeight = this.identifier === 'date-picker' ? 300 : 600
+
+      let topOffset = 0
+
+      if (windowHeight > datePickerHeight) {
+        topOffset = (windowHeight - datePickerHeight) / 2
+      }
+
+      Object.assign(this.contentContainerTarget.style, {
+        top: `${topOffset}px`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        pointerEvents: 'auto',
+      })
+    }
   }
 
   toggle() {
@@ -154,12 +175,11 @@ const DatePickerController = class extends Controller<HTMLElement> {
       if (!this.contentTarget.dataset.width) {
         const contentWidth = this.contentTarget.offsetWidth
         this.contentTarget.dataset.width = `${contentWidth}`
-
         this.contentTarget.style.maxWidth = `${contentWidth}px`
         this.contentTarget.style.minWidth = `${contentWidth}px`
       }
 
-      if (this.isMobile) {
+      if (isSmallScreen()) {
         lockScroll(this.contentTarget.id)
         this.overlayTarget.style.display = ''
         this.overlayTarget.dataset.state = 'open'
@@ -206,7 +226,7 @@ const DatePickerController = class extends Controller<HTMLElement> {
         contentContainer: this.contentContainerTarget,
       })
 
-      if (this.isMobile) {
+      if (isSmallScreen()) {
         unlockScroll(this.contentTarget.id)
         this.overlayTarget.style.display = 'none'
         this.overlayTarget.dataset.state = 'closed'

data/app/typescript/controllers/date_range_picker_controller.ts

@@ -10,6 +10,8 @@ const DELIMITER = ' - '
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
 const DateRangePickerController = class extends DatePickerController {
+  static name = 'date-range-picker'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/dialog_controller.ts

@@ -10,6 +10,8 @@ import {
 } from '../utils'
 
 const DialogController = class extends Controller<HTMLElement> {
+  static name = 'dialog'
+
   // targets
   static targets = ['trigger', 'content', 'overlay']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/dropdown_menu_controller.ts

@@ -49,6 +49,8 @@ const focusItemByIndex = (
 }
 
 const DropdownMenuController = class extends Controller<HTMLElement> {
+  static name = 'dropdown-menu'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content', 'item']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/dropdown_menu_sub_controller.ts

@@ -9,6 +9,8 @@ import {
 } from '../utils'
 
 const DropdownMenuSubController = class extends Controller<HTMLElement> {
+  static name = 'dropdown-menu-sub'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/form_field_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const FormFieldController = class extends Controller {
+  static name = 'form-field'
+
   connect() {
     const hintContainer = this.element.querySelector('[data-remove-label]')
     const labelContainer = this.element.querySelector('[data-remove-hint]')

data/app/typescript/controllers/hover_card_controller.ts

@@ -4,6 +4,8 @@ import { initFloatingUi } from '../utils/floating_ui'
 import { showContent, hideContent } from '../utils'
 
 const HoverCardController = class extends Controller<HTMLElement> {
+  static name = 'hover-card'
+
   // targets
   static targets = ['trigger', 'content', 'contentContainer']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/loading_button_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const LoadingButtonController = class extends Controller<HTMLButtonElement> {
+  static name = 'loading-button'
+
   connect() {
     const el = this.element
     const form = el.closest('form')

data/app/typescript/controllers/popover_controller.ts

@@ -12,6 +12,8 @@ import {
 } from '../utils'
 
 const PopoverController = class extends Controller<HTMLElement> {
+  static name = 'popover'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/progress_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const ProgressController = class extends Controller {
+  static name = 'progress'
+
   // targets
   static targets = ['indicator']
   declare readonly indicatorTarget: HTMLElement

data/app/typescript/controllers/radio_group_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const RadioGroupController = class extends Controller<HTMLElement> {
+  static name = 'radio-group'
+
   // targets
   static targets = ['item', 'input', 'indicator']
   declare readonly itemTargets: HTMLInputElement[]

data/app/typescript/controllers/select_controller.ts

@@ -17,6 +17,8 @@ import {
 import { Controller } from '@hotwired/stimulus'
 
 const SelectController = class extends Controller<HTMLElement> {
+  static name = 'select'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/slider_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import noUiSlider, { API, Options } from 'nouislider'
 
 const SliderController = class extends Controller<HTMLElement> {
+  static name = 'slider'
+
   // targets
   static targets = ['slider', 'hiddenInput', 'endHiddenInput']
   declare readonly sliderTarget: HTMLInputElement

data/app/typescript/controllers/switch_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const SwitchController = class extends Controller<HTMLElement> {
+  static name = 'switch'
+
   // targets
   static targets = ['input', 'thumb']
   declare readonly inputTarget: HTMLInputElement

data/app/typescript/controllers/tabs_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils'
 
 const TabsController = class extends Controller {
+  static name = 'tabs'
+
   // targets
   static targets = ['trigger', 'content']
   declare readonly triggerTargets: HTMLButtonElement[]