shadcn-rails 0.1.0

data/app/assets/javascripts/shadcn/controllers/toast_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toast controller for notification toasts
+ */
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 5000 },
+    open: { type: Boolean, default: true }
+  }
+
+  connect() {
+    if (this.openValue && this.durationValue > 0) {
+      this.startDismissTimer()
+    }
+  }
+
+  disconnect() {
+    this.clearDismissTimer()
+  }
+
+  close() {
+    this.openValue = false
+    this.element.dataset.state = "closed"
+
+    // Remove after animation
+    setTimeout(() => {
+      this.element.remove()
+      this.dispatch("closed")
+    }, 200)
+  }
+
+  startDismissTimer() {
+    this.clearDismissTimer()
+    this.dismissTimeout = setTimeout(() => {
+      this.close()
+    }, this.durationValue)
+  }
+
+  clearDismissTimer() {
+    if (this.dismissTimeout) {
+      clearTimeout(this.dismissTimeout)
+      this.dismissTimeout = null
+    }
+  }
+
+  // Pause timer on hover
+  pause() {
+    this.clearDismissTimer()
+  }
+
+  // Resume timer when hover ends
+  resume() {
+    if (this.openValue && this.durationValue > 0) {
+      this.startDismissTimer()
+    }
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toggle_controller.d.ts

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Toggle Controller
+ * Handles toggle button state management
+ */
+export default class ToggleController extends Controller {
+  static values: {
+    pressed: { type: "Boolean"; default: false };
+  };
+
+  /** Whether the toggle is pressed */
+  pressedValue: boolean;
+  readonly hasPressedValue: boolean;
+
+  /** Toggle the pressed state */
+  toggle(): void;
+
+  /** Update visual state */
+  updateState(): void;
+
+  /** Dispatch change event */
+  dispatchChange(): void;
+
+  /** Called when pressedValue changes */
+  pressedValueChanged(): void;
+}

data/app/assets/javascripts/shadcn/controllers/toggle_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Controller
+ *
+ * Handles toggle button state management
+ *
+ * Values:
+ * - pressed: Boolean indicating if toggle is pressed
+ */
+export default class extends Controller {
+  static values = {
+    pressed: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  toggle() {
+    if (this.element.disabled) return
+
+    this.pressedValue = !this.pressedValue
+    this.updateState()
+    this.dispatchChange()
+  }
+
+  updateState() {
+    this.element.setAttribute("aria-pressed", this.pressedValue.toString())
+    this.element.dataset.state = this.pressedValue ? "on" : "off"
+  }
+
+  dispatchChange() {
+    this.dispatch("change", {
+      detail: { pressed: this.pressedValue }
+    })
+  }
+
+  pressedValueChanged() {
+    this.updateState()
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toggle_group_controller.d.ts

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Toggle Group Controller
+ * Handles single or multiple selection of toggle items
+ */
+export default class ToggleGroupController extends Controller {
+  static targets: ["item", "input"];
+  static values: {
+    type: { type: "String"; default: "single" };
+    value: { type: "String"; default: "" };
+  };
+
+  /** Toggle item targets */
+  readonly itemTargets: HTMLElement[];
+  readonly hasItemTarget: boolean;
+
+  /** Hidden input target */
+  readonly inputTarget: HTMLInputElement;
+  readonly hasInputTarget: boolean;
+
+  /** Selection type: "single" or "multiple" */
+  typeValue: "single" | "multiple";
+  readonly hasTypeValue: boolean;
+
+  /** Current value(s) as comma-separated string */
+  valueValue: string;
+  readonly hasValueValue: boolean;
+
+  /** Toggle an item's selection */
+  toggle(event: Event): void;
+
+  /** Get current values as array */
+  getValues(): string[];
+
+  /** Update visual states of all items */
+  updateStates(): void;
+
+  /** Update hidden input value */
+  updateInput(): void;
+
+  /** Called when valueValue changes */
+  valueValueChanged(): void;
+}

data/app/assets/javascripts/shadcn/controllers/toggle_group_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Group Controller
+ * Handles single or multiple selection of toggle items
+ */
+export default class extends Controller {
+  static targets = ["item", "input"]
+  static values = {
+    type: { type: String, default: "single" }, // "single" or "multiple"
+    value: { type: String, default: "" }
+  }
+
+  connect() {
+    this.updateStates()
+  }
+
+  toggle(event) {
+    const item = event.currentTarget
+    const value = item.dataset.value
+    const currentValues = this.getValues()
+
+    if (this.typeValue === "single") {
+      // Single selection - toggle or select new
+      if (currentValues.includes(value)) {
+        this.valueValue = ""
+      } else {
+        this.valueValue = value
+      }
+    } else {
+      // Multiple selection - toggle individual item
+      if (currentValues.includes(value)) {
+        this.valueValue = currentValues.filter(v => v !== value).join(",")
+      } else {
+        this.valueValue = [...currentValues, value].filter(Boolean).join(",")
+      }
+    }
+
+    this.updateStates()
+    this.updateInput()
+    this.dispatch("change", { detail: { value: this.getValues() } })
+  }
+
+  getValues() {
+    return this.valueValue.split(",").filter(Boolean)
+  }
+
+  updateStates() {
+    const values = this.getValues()
+
+    this.itemTargets.forEach(item => {
+      const isOn = values.includes(item.dataset.value)
+      item.setAttribute("data-state", isOn ? "on" : "off")
+      item.setAttribute("aria-pressed", isOn.toString())
+    })
+  }
+
+  updateInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = this.valueValue
+    }
+  }
+
+  valueValueChanged() {
+    this.updateStates()
+    this.updateInput()
+  }
+}

data/app/assets/javascripts/shadcn/controllers/tooltip_controller.d.ts

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Tooltip controller for contextual information
+ */
+export default class TooltipController extends Controller {
+  static targets: ["trigger", "content"];
+  static values: {
+    side: { type: "String"; default: "top" };
+    align: { type: "String"; default: "center" };
+    delay: { type: "Number"; default: 200 };
+    skipDelay: { type: "Number"; default: 300 };
+  };
+
+  /** Tooltip trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Tooltip content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Side to display: "top", "bottom", "left", "right" */
+  sideValue: "top" | "bottom" | "left" | "right";
+  readonly hasSideValue: boolean;
+
+  /** Alignment: "start", "center", "end" */
+  alignValue: "start" | "center" | "end";
+  readonly hasAlignValue: boolean;
+
+  /** Delay before showing tooltip (ms) */
+  delayValue: number;
+  readonly hasDelayValue: boolean;
+
+  /** Skip delay threshold (ms) */
+  skipDelayValue: number;
+  readonly hasSkipDelayValue: boolean;
+
+  /** Show timeout handle */
+  showTimeout: ReturnType<typeof setTimeout> | null;
+
+  /** Hide timeout handle */
+  hideTimeout: ReturnType<typeof setTimeout> | null;
+
+  /** Show the tooltip */
+  show(): void;
+
+  /** Hide the tooltip */
+  hide(): void;
+
+  /** Clear all timeouts */
+  clearTimeouts(): void;
+
+  /** Position the tooltip */
+  positionTooltip(): void;
+}

data/app/assets/javascripts/shadcn/controllers/tooltip_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Tooltip controller for contextual information
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    side: { type: String, default: "top" },
+    align: { type: String, default: "center" },
+    delay: { type: Number, default: 200 },
+    skipDelay: { type: Number, default: 300 }
+  }
+
+  connect() {
+    this.showTimeout = null
+    this.hideTimeout = null
+  }
+
+  disconnect() {
+    this.clearTimeouts()
+  }
+
+  show() {
+    this.clearTimeouts()
+
+    this.showTimeout = setTimeout(() => {
+      if (this.hasContentTarget) {
+        this.contentTarget.hidden = false
+        this.contentTarget.dataset.state = "open"
+        this.positionTooltip()
+      }
+    }, this.delayValue)
+  }
+
+  hide() {
+    this.clearTimeouts()
+
+    this.hideTimeout = setTimeout(() => {
+      if (this.hasContentTarget) {
+        this.contentTarget.dataset.state = "closed"
+        setTimeout(() => {
+          this.contentTarget.hidden = true
+        }, 100)
+      }
+    }, 0)
+  }
+
+  clearTimeouts() {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout)
+      this.showTimeout = null
+    }
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  positionTooltip() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    const trigger = this.triggerTarget.getBoundingClientRect()
+    const tooltip = this.contentTarget
+    const tooltipRect = tooltip.getBoundingClientRect()
+
+    // Reset positioning
+    tooltip.style.position = "absolute"
+    tooltip.style.top = ""
+    tooltip.style.bottom = ""
+    tooltip.style.left = ""
+    tooltip.style.right = ""
+    tooltip.style.transform = ""
+
+    const gap = 8
+
+    switch (this.sideValue) {
+      case "top":
+        tooltip.style.bottom = "100%"
+        tooltip.style.marginBottom = `${gap}px`
+        break
+      case "bottom":
+        tooltip.style.top = "100%"
+        tooltip.style.marginTop = `${gap}px`
+        break
+      case "left":
+        tooltip.style.right = "100%"
+        tooltip.style.marginRight = `${gap}px`
+        tooltip.style.top = "50%"
+        tooltip.style.transform = "translateY(-50%)"
+        break
+      case "right":
+        tooltip.style.left = "100%"
+        tooltip.style.marginLeft = `${gap}px`
+        tooltip.style.top = "50%"
+        tooltip.style.transform = "translateY(-50%)"
+        break
+    }
+
+    if (this.sideValue === "top" || this.sideValue === "bottom") {
+      switch (this.alignValue) {
+        case "start":
+          tooltip.style.left = "0"
+          break
+        case "center":
+          tooltip.style.left = "50%"
+          tooltip.style.transform = "translateX(-50%)"
+          break
+        case "end":
+          tooltip.style.right = "0"
+          break
+      }
+    }
+
+    tooltip.dataset.side = this.sideValue
+  }
+}

data/app/assets/javascripts/shadcn/index.d.ts

@@ -0,0 +1,74 @@
+/**
+ * shadcn-rails Stimulus Controllers - TypeScript Type Definitions
+ *
+ * This file provides TypeScript type definitions for all shadcn-rails
+ * Stimulus controllers without requiring TypeScript compilation.
+ */
+
+import { Application } from "@hotwired/stimulus";
+
+// Re-export individual controllers
+export { default as AccordionController } from "./controllers/accordion_controller";
+export { default as AvatarController } from "./controllers/avatar_controller";
+export { default as CheckboxController } from "./controllers/checkbox_controller";
+export { default as CollapsibleController } from "./controllers/collapsible_controller";
+export { default as DialogController } from "./controllers/dialog_controller";
+export { default as DrawerController } from "./controllers/drawer_controller";
+export { default as DropdownController } from "./controllers/dropdown_controller";
+export { default as HoverCardController } from "./controllers/hover_card_controller";
+export { default as InputOtpController } from "./controllers/input_otp_controller";
+export { default as PopoverController } from "./controllers/popover_controller";
+export { default as RadioGroupController } from "./controllers/radio_group_controller";
+export { default as ScrollAreaController } from "./controllers/scroll_area_controller";
+export { default as SelectController } from "./controllers/select_controller";
+export { default as SheetController } from "./controllers/sheet_controller";
+export { default as SliderController } from "./controllers/slider_controller";
+export { default as SwitchController } from "./controllers/switch_controller";
+export { default as TabsController } from "./controllers/tabs_controller";
+export { default as ToastController } from "./controllers/toast_controller";
+export { default as ToggleController } from "./controllers/toggle_controller";
+export { default as ToggleGroupController } from "./controllers/toggle_group_controller";
+export { default as TooltipController } from "./controllers/tooltip_controller";
+
+/**
+ * Controller name to controller class mapping
+ */
+export const controllers: {
+  "shadcn--accordion": typeof AccordionController;
+  "shadcn--avatar": typeof AvatarController;
+  "shadcn--checkbox": typeof CheckboxController;
+  "shadcn--collapsible": typeof CollapsibleController;
+  "shadcn--dialog": typeof DialogController;
+  "shadcn--drawer": typeof DrawerController;
+  "shadcn--dropdown": typeof DropdownController;
+  "shadcn--hover-card": typeof HoverCardController;
+  "shadcn--input-otp": typeof InputOtpController;
+  "shadcn--popover": typeof PopoverController;
+  "shadcn--radio-group": typeof RadioGroupController;
+  "shadcn--scroll-area": typeof ScrollAreaController;
+  "shadcn--select": typeof SelectController;
+  "shadcn--sheet": typeof SheetController;
+  "shadcn--slider": typeof SliderController;
+  "shadcn--switch": typeof SwitchController;
+  "shadcn--tabs": typeof TabsController;
+  "shadcn--toast": typeof ToastController;
+  "shadcn--toggle": typeof ToggleController;
+  "shadcn--toggle-group": typeof ToggleGroupController;
+  "shadcn--tooltip": typeof TooltipController;
+};
+
+/**
+ * Register all shadcn controllers with a Stimulus application
+ * @param application - The Stimulus application instance
+ */
+export function registerShadcnControllers(application: Application): void;
+
+/**
+ * Default export containing controllers and registration function
+ */
+declare const _default: {
+  controllers: typeof controllers;
+  registerShadcnControllers: typeof registerShadcnControllers;
+};
+
+export default _default;

data/app/assets/javascripts/shadcn/index.js

@@ -0,0 +1,133 @@
+/**
+ * shadcn-rails Stimulus Controllers
+ *
+ * This file exports all Stimulus controllers for the shadcn-rails gem.
+ * Import this file to register all controllers with your Stimulus application.
+ *
+ * Usage with importmaps:
+ *   import { registerShadcnControllers } from "shadcn"
+ *   registerShadcnControllers(application)
+ *
+ * Usage with esbuild/webpack:
+ *   import { registerShadcnControllers } from "shadcn-rails"
+ *   registerShadcnControllers(application)
+ */
+
+// Import all controllers
+import AccordionController from "./controllers/accordion_controller"
+import AvatarController from "./controllers/avatar_controller"
+import CalendarController from "./controllers/calendar_controller"
+import CarouselController from "./controllers/carousel_controller"
+import DatePickerController from "./controllers/date_picker_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 CommandDialogController from "./controllers/command_dialog_controller"
+import ContextMenuController from "./controllers/context_menu_controller"
+import DialogController from "./controllers/dialog_controller"
+import DrawerController from "./controllers/drawer_controller"
+import DropdownController from "./controllers/dropdown_controller"
+import HoverCardController from "./controllers/hover_card_controller"
+import MenubarController from "./controllers/menubar_controller"
+import NavigationMenuController from "./controllers/navigation_menu_controller"
+import PopoverController from "./controllers/popover_controller"
+import ResizableController from "./controllers/resizable_controller"
+import RadioGroupController from "./controllers/radio_group_controller"
+import ScrollAreaController from "./controllers/scroll_area_controller"
+import SelectController from "./controllers/select_controller"
+import SheetController from "./controllers/sheet_controller"
+import SliderController from "./controllers/slider_controller"
+import SwitchController from "./controllers/switch_controller"
+import TabsController from "./controllers/tabs_controller"
+import ToastController from "./controllers/toast_controller"
+import ToggleController from "./controllers/toggle_controller"
+import ToggleGroupController from "./controllers/toggle_group_controller"
+import TooltipController from "./controllers/tooltip_controller"
+import InputOtpController from "./controllers/input_otp_controller"
+import SidebarController from "./controllers/sidebar_controller"
+
+// Export individual controllers
+export {
+  AccordionController,
+  AvatarController,
+  CalendarController,
+  CarouselController,
+  DatePickerController,
+  CheckboxController,
+  CollapsibleController,
+  ComboboxController,
+  CommandController,
+  CommandDialogController,
+  ContextMenuController,
+  DialogController,
+  DrawerController,
+  DropdownController,
+  HoverCardController,
+  InputOtpController,
+  MenubarController,
+  NavigationMenuController,
+  PopoverController,
+  RadioGroupController,
+  ResizableController,
+  ScrollAreaController,
+  SelectController,
+  SheetController,
+  SliderController,
+  SwitchController,
+  TabsController,
+  ToastController,
+  ToggleController,
+  ToggleGroupController,
+  TooltipController,
+  SidebarController
+}
+
+// Controller definitions for registration
+export const controllers = {
+  "shadcn--accordion": AccordionController,
+  "shadcn--avatar": AvatarController,
+  "shadcn--calendar": CalendarController,
+  "shadcn--carousel": CarouselController,
+  "shadcn--date-picker": DatePickerController,
+  "shadcn--checkbox": CheckboxController,
+  "shadcn--collapsible": CollapsibleController,
+  "shadcn--combobox": ComboboxController,
+  "shadcn--command": CommandController,
+  "shadcn--command-dialog": CommandDialogController,
+  "shadcn--context-menu": ContextMenuController,
+  "shadcn--dialog": DialogController,
+  "shadcn--drawer": DrawerController,
+  "shadcn--dropdown": DropdownController,
+  "shadcn--hover-card": HoverCardController,
+  "shadcn--input-otp": InputOtpController,
+  "shadcn--menubar": MenubarController,
+  "shadcn--navigation-menu": NavigationMenuController,
+  "shadcn--popover": PopoverController,
+  "shadcn--radio-group": RadioGroupController,
+  "shadcn--resizable": ResizableController,
+  "shadcn--scroll-area": ScrollAreaController,
+  "shadcn--select": SelectController,
+  "shadcn--sheet": SheetController,
+  "shadcn--slider": SliderController,
+  "shadcn--switch": SwitchController,
+  "shadcn--tabs": TabsController,
+  "shadcn--toast": ToastController,
+  "shadcn--toggle": ToggleController,
+  "shadcn--toggle-group": ToggleGroupController,
+  "shadcn--tooltip": TooltipController,
+  "shadcn--sidebar": SidebarController
+}
+
+/**
+ * Register all shadcn controllers with a Stimulus application
+ * @param {Application} application - The Stimulus application instance
+ */
+export function registerShadcnControllers(application) {
+  for (const [name, controller] of Object.entries(controllers)) {
+    application.register(name, controller)
+  }
+}
+
+// Default export for convenience
+export default { controllers, registerShadcnControllers }