shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/javascript/utils/floating_ui.js

@@ -0,0 +1,160 @@
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+  size,
+  arrow,
+} from "@floating-ui/dom";
+const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right",
+};
+const ARROW_TRANSFORM_ORIGIN = {
+  top: "",
+  right: "0 0",
+  bottom: "center 0",
+  left: "100% 0",
+};
+const ARROW_TRANSFORM = {
+  top: "translateY(100%)",
+  right: "translateY(50%) rotate(90deg) translateX(-50%)",
+  bottom: `rotate(180deg)`,
+  left: "translateY(50%) rotate(-90deg) translateX(50%)",
+};
+const initFloatingUi = ({
+  referenceElement,
+  floatingElement,
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  arrowElement,
+}) => {
+  let placement = `${side}-${align}`;
+  placement = placement.replace(/-center/g, "");
+  let arrowHeight = 0,
+    arrowWidth = 0;
+  if (arrowElement) {
+    const rect = arrowElement.getBoundingClientRect();
+    arrowWidth = rect.width;
+    arrowHeight = rect.height;
+  }
+  const middleware = [
+    transformOrigin({ arrowHeight, arrowWidth }),
+    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
+    size({
+      apply: ({ elements, rects, availableWidth, availableHeight }) => {
+        const { width: anchorWidth, height: anchorHeight } = rects.reference;
+        const contentStyle = elements.floating.style;
+        contentStyle.setProperty(
+          "--radix-popper-available-width",
+          `${availableWidth}px`,
+        );
+        contentStyle.setProperty(
+          "--radix-popper-available-height",
+          `${availableHeight}px`,
+        );
+        contentStyle.setProperty(
+          "--radix-popper-anchor-width",
+          `${anchorWidth}px`,
+        );
+        contentStyle.setProperty(
+          "--radix-popper-anchor-height",
+          `${anchorHeight}px`,
+        );
+      },
+    }),
+  ];
+  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,
+      strategy: "fixed",
+      middleware,
+    }).then(({ middlewareData, x, y }) => {
+      const arrowX = middlewareData.arrow?.x;
+      const arrowY = middlewareData.arrow?.y;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      floatingElement.style.setProperty(
+        "--radix-popper-transform-origin",
+        `${middlewareData.transformOrigin?.x} ${middlewareData.transformOrigin?.y}`,
+      );
+      if (arrowElement) {
+        const baseSide = OPPOSITE_SIDE[side];
+        const arrowStyle = {
+          position: "absolute",
+          left: arrowX ? `${arrowX}px` : undefined,
+          top: arrowY ? `${arrowY}px` : undefined,
+          [baseSide]: 0,
+          transformOrigin: ARROW_TRANSFORM_ORIGIN[side],
+          transform: ARROW_TRANSFORM[side],
+          visibility: cannotCenterArrow ? "hidden" : undefined,
+        };
+        Object.assign(arrowElement.style, arrowStyle);
+      }
+      Object.assign(floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  });
+};
+const transformOrigin = (options) => {
+  return {
+    name: "transformOrigin",
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[
+        placedAlign
+      ];
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+      let x = "";
+      let y = "";
+      if (placedSide === "bottom") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      } else if (placedSide === "top") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      } else if (placedSide === "right") {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      } else if (placedSide === "left") {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      return { data: { x, y } };
+    },
+  };
+};
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+export { initFloatingUi };

data/app/javascript/utils/index.js

@@ -0,0 +1,288 @@
+const ANIMATION_OUT_DELAY = 100;
+const ON_OPEN_FOCUS_DELAY = 100;
+const ON_CLOSE_FOCUS_DELAY = 50;
+const getScrollbarWidth = () => {
+  // Create a temporary div container and append it into the body
+  const outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll"; // force scrollbars
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  document.body.appendChild(outer);
+  // Create an inner div and place it inside the outer div
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+  // Calculate the scrollbar width
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  // Clean up
+  outer.remove();
+  return scrollbarWidth;
+};
+const lockScroll = (contentId) => {
+  if (window.innerHeight < document.documentElement.scrollHeight) {
+    document.body.dataset.scrollLocked = "1";
+    document.body.classList.add(
+      "data-[scroll-locked]:pointer-events-none",
+      "data-[scroll-locked]:!overflow-hidden",
+      "data-[scroll-locked]:!relative",
+      "data-[scroll-locked]:px-0",
+      "data-[scroll-locked]:pt-0",
+      "data-[scroll-locked]:ml-0",
+      "data-[scroll-locked]:mt-0",
+    );
+    document.body.style.marginRight = `${getScrollbarWidth()}px`;
+    const contentIdsString =
+      document.body.dataset.scrollLockedContentIds || "[]";
+    const contentIds = JSON.parse(contentIdsString);
+    contentIds.push(contentId);
+    document.body.dataset.scrollLockedContentIds = JSON.stringify(contentIds);
+  }
+};
+const unlockScroll = (contentId) => {
+  const contentIdsString = document.body.dataset.scrollLockedContentIds || "[]";
+  const contentIds = JSON.parse(contentIdsString);
+  const newContentIds = contentIds.filter((id) => id !== contentId);
+  document.body.dataset.scrollLockedContentIds = JSON.stringify(newContentIds);
+  if (newContentIds.length === 0) {
+    delete document.body.dataset.scrollLocked;
+    document.body.classList.remove(
+      "data-[scroll-locked]:pointer-events-none",
+      "data-[scroll-locked]:!overflow-hidden",
+      "data-[scroll-locked]:!relative",
+      "data-[scroll-locked]:px-0",
+      "data-[scroll-locked]:pt-0",
+      "data-[scroll-locked]:ml-0",
+      "data-[scroll-locked]:mt-0",
+    );
+    document.body.style.marginRight = "";
+  }
+};
+const focusTrigger = (triggerTarget) => {
+  setTimeout(() => {
+    if (triggerTarget.dataset.asChild === "false") {
+      const childElement = triggerTarget.firstElementChild;
+      if (childElement) {
+        childElement.focus();
+      }
+    } else {
+      triggerTarget.focus();
+    }
+  }, ON_CLOSE_FOCUS_DELAY);
+};
+const focusElement = (element) => {
+  setTimeout(() => {
+    if (element) {
+      element.focus();
+    }
+  }, ON_OPEN_FOCUS_DELAY);
+};
+const getFocusableElements = (container) => {
+  return Array.from(
+    container.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+};
+const getSameLevelItems = ({ content, items, closestContentSelector }) => {
+  const sameLevelItems = [];
+  items.forEach((i) => {
+    if (
+      i.closest(closestContentSelector) === content &&
+      i.dataset.disabled === undefined
+    ) {
+      sameLevelItems.push(i);
+    }
+  });
+  return sameLevelItems;
+};
+const showContent = ({
+  trigger,
+  content,
+  contentContainer,
+  setEqualWidth,
+  overlay,
+}) => {
+  contentContainer.style.display = "";
+  if (trigger) {
+    if (setEqualWidth) {
+      const triggerWidth = trigger.offsetWidth;
+      const contentContainerWidth = contentContainer.offsetWidth;
+      if (contentContainerWidth < triggerWidth) {
+        contentContainer.style.width = `${triggerWidth}px`;
+      }
+    }
+    trigger.ariaExpanded = "true";
+    trigger.dataset.state = "open";
+  }
+  content.dataset.state = "open";
+  if (overlay) {
+    overlay.style.display = "";
+    overlay.dataset.state = "open";
+    lockScroll(content.id);
+  }
+};
+const hideContent = ({ trigger, content, contentContainer, overlay }) => {
+  if (trigger) {
+    trigger.ariaExpanded = "false";
+    trigger.dataset.state = "closed";
+  }
+  content.dataset.state = "closed";
+  setTimeout(() => {
+    contentContainer.style.display = "none";
+    if (overlay) {
+      overlay.style.display = "none";
+      overlay.dataset.state = "closed";
+      unlockScroll(content.id);
+    }
+  }, ANIMATION_OUT_DELAY);
+};
+const getStimulusInstance = (controller, element) => {
+  if (!element) return;
+  return window.Stimulus.getControllerForElementAndIdentifier(
+    element,
+    controller,
+  );
+};
+const anyNestedComponentsOpen = (element) => {
+  const components = [];
+  const componentNames = [
+    "dialog",
+    "alert-dialog",
+    "dropdown-menu",
+    "popover",
+    "select",
+    "combobox",
+    "command",
+    "hover-card",
+    "tooltip",
+    "date-picker",
+    "date-range-picker",
+  ];
+  componentNames.forEach((name) => {
+    const triggers = Array.from(
+      element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${name}-trigger"]`,
+      ),
+    );
+    const controllerElements = Array.from(
+      element.querySelectorAll(`[data-controller="${name}"]`),
+    );
+    controllerElements.forEach((controller) => {
+      const stimulusInstance = getStimulusInstance(name, controller);
+      if (stimulusInstance) {
+        components.push(stimulusInstance);
+      }
+    });
+    triggers.forEach((trigger) => {
+      const stimulusInstance = getStimulusInstance(
+        name,
+        document.querySelector(`#${trigger.getAttribute("aria-controls")}`),
+      );
+      if (stimulusInstance) {
+        components.push(stimulusInstance);
+      }
+    });
+  });
+  return components.some((c) => c.isOpenValue);
+};
+const onClickOutside = (controller, event) => {
+  const target = event.target;
+  // Let trigger handle state
+  if (target === controller.triggerTarget) return;
+  if (controller.triggerTarget.contains(target)) return;
+  controller.close();
+};
+const setGroupLabelsId = (controller) => {
+  controller.groupTargets.forEach((g) => {
+    const label = g.querySelector(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-label"]`,
+    );
+    if (label) {
+      label.id = g.getAttribute("aria-labelledby");
+    }
+  });
+};
+const getNextEnabledIndex = ({ items, currentIndex, wrapAround, filterFn }) => {
+  let newIndex = null;
+  if (filterFn) {
+    newIndex = items.findIndex(
+      (item, index) => index > currentIndex && filterFn(item),
+    );
+    if (newIndex === -1) {
+      newIndex = currentIndex;
+    }
+  } else {
+    newIndex = currentIndex + 1;
+  }
+  if (newIndex > items.length - 1) {
+    if (wrapAround) {
+      newIndex = 0;
+    } else {
+      newIndex = items.length - 1;
+    }
+  }
+  return newIndex;
+};
+const getPreviousEnabledIndex = ({
+  items,
+  currentIndex,
+  wrapAround,
+  filterFn,
+}) => {
+  let newIndex = null;
+  if (filterFn) {
+    newIndex = items.findLastIndex(
+      (item, index) => index < currentIndex && filterFn(item),
+    );
+    if (newIndex === -1) {
+      newIndex = currentIndex;
+    }
+  } else {
+    newIndex = currentIndex - 1;
+  }
+  if (newIndex < 0) {
+    if (wrapAround) {
+      newIndex = items.length - 1;
+    } else {
+      newIndex = 0;
+    }
+  }
+  return newIndex;
+};
+const handleTabNavigation = (element, event) => {
+  const focusableElements = getFocusableElements(element);
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+  // If Shift + Tab pressed on first element, go to last element
+  if (event.shiftKey && document.activeElement === firstElement) {
+    event.preventDefault();
+    lastElement.focus();
+  }
+  // If Tab pressed on last element, go to first element
+  else if (!event.shiftKey && document.activeElement === lastElement) {
+    event.preventDefault();
+    firstElement.focus();
+  }
+};
+export {
+  ANIMATION_OUT_DELAY,
+  ON_CLOSE_FOCUS_DELAY,
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  unlockScroll,
+  focusTrigger,
+  focusElement,
+  getFocusableElements,
+  getSameLevelItems,
+  showContent,
+  hideContent,
+  getStimulusInstance,
+  anyNestedComponentsOpen,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  handleTabNavigation,
+};

data/app/stylesheets/date_picker.css

@@ -1,3 +1,48 @@
+[data-vc='calendar'] {
+  @apply relative flex flex-col outline-none;
+}
+
+[data-vc='controls'] {
+  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-1.5 px-1 pointer-events-none box-content;
+}
+
+[data-vc='grid'] {
+  @apply grid gap-4 grid-cols-1 md:grid-cols-2;
+}
+
+[data-vc='column'] {
+  @apply flex flex-col;
+}
+
+[data-vc='header'] {
+  @apply relative flex items-center mb-4;
+}
+
+[data-vc-header='content'] {
+  @apply grid grid-flow-col gap-x-1 auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
+}
+
+[data-vc='month'],
+[data-vc='year'] {
+  @apply inline-flex items-center justify-center whitespace-nowrap font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border;
+  @apply shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50;
+  @apply rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-xs h-7 bg-transparent;
+}
+
+[data-vc-arrow='prev'],
+[data-vc-arrow='next'] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium;
+  @apply transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none;
+  @apply [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring;
+  @apply focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20;
+  @apply dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border shadow-xs hover:bg-accent;
+  @apply hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 pointer-events-auto;
+  @apply size-7 bg-transparent p-0 opacity-50 hover:opacity-100;
+}
+
 [data-vc-arrow='next']:before {
   @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
@@ -8,6 +53,79 @@
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>');
 }
 
+[data-vc='wrapper'] {
+  @apply flex items-center content-center h-full;
+}
+
+[data-vc='content'] {
+  @apply flex flex-col grow h-full;
+}
+
+[data-vc='months'] {
+  @apply grid gap-2 grid-cols-4 items-center grow;
+}
+
+[data-vc='years'] {
+  @apply grid gap-2 grid-cols-5 items-center grow;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3;
+  @apply aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary;
+  @apply aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary;
+}
+
+[data-vc='week'] {
+  @apply grid mb-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center text-center;
+}
+
+[data-vc-week-day] {
+  @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];
+}
+
+[data-vc='dates'] {
+  @apply grid gap-y-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center;
+}
+
+[data-vc-date-btn] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 has-[>svg]:px-3 size-8 p-0 font-normal;
+  @apply aria-[disabled]:text-muted-foreground aria-[disabled]:opacity-50 aria-[disabled]:pointer-events-none;
+}
+
+[data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+
+[data-vc-date-today] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
+[data-vc-date-month='prev'] [data-vc-date-btn],
+[data-vc-date-month='next'] [data-vc-date-btn] {
+  @apply text-muted-foreground;
+}
+
+[data-vc-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
+[data-vc-date-selected='first'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground;
+}
+
+[data-vc-date-hover] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
 [data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
   pointer-events: none;
   opacity: 0.3;

data/app/typescript/controllers/accordion_controller.ts

@@ -0,0 +1,136 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  showContent,
+  hideContent,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+} from '../utils'
+
+const AccordionController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['item', 'trigger', 'content']
+  declare itemTargets: HTMLElement[]
+  declare triggerTargets: HTMLButtonElement[]
+  declare contentTargets: HTMLElement[]
+
+  // values
+  static values = { openItems: Array }
+  declare openItemsValue: string[]
+
+  // custom properties
+  declare multiple: boolean
+
+  connect() {
+    this.multiple = this.element.dataset.multiple === 'true'
+  }
+
+  contentTargetConnected(content: HTMLElement) {
+    setTimeout(() => {
+      this.setContentHeight(content)
+    }, 100)
+  }
+
+  toggle(event: MouseEvent) {
+    const trigger = event.currentTarget as HTMLElement
+
+    const item = this.itemTargets.find((item) => {
+      return item.contains(trigger)
+    })
+
+    if (!item) return
+
+    const value = item.dataset.value as string
+    const isOpen = this.openItemsValue.includes(value)
+
+    if (isOpen) {
+      this.openItemsValue = this.openItemsValue.filter((v) => v !== value)
+    } else {
+      if (this.multiple) {
+        this.openItemsValue = [...this.openItemsValue, value]
+      } else {
+        this.openItemsValue = [value]
+      }
+    }
+  }
+
+  focusTrigger(event: KeyboardEvent) {
+    const trigger = event.currentTarget as HTMLButtonElement
+    const key = event.key
+
+    const focusableTriggers = this.triggerTargets.filter(
+      (trigger) => !trigger.disabled,
+    )
+
+    const index = focusableTriggers.indexOf(trigger)
+    let newIndex = 0
+
+    if (key === 'ArrowUp') {
+      newIndex = getPreviousEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
+    } else {
+      newIndex = getNextEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
+    }
+
+    focusableTriggers[newIndex].focus()
+  }
+
+  openItemsValueChanged(openItems: string[]) {
+    this.itemTargets.forEach((item) => {
+      const itemValue = item.dataset.value as string
+
+      const trigger = this.triggerTargets.find((trigger) =>
+        item.contains(trigger),
+      ) as HTMLElement
+      const content = this.contentTargets.find((content) =>
+        item.contains(content),
+      ) as HTMLElement
+
+      if (openItems.includes(itemValue)) {
+        showContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      } else {
+        hideContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      }
+    })
+  }
+
+  protected setContentHeight(element: HTMLElement) {
+    const height =
+      this.getContentHeight(element) || element.getBoundingClientRect().height
+    element.style.setProperty('--radix-accordion-content-height', `${height}px`)
+  }
+
+  getContentHeight(el: HTMLElement) {
+    const clone = el.cloneNode(true) as HTMLElement
+    Object.assign(clone.style, {
+      display: 'block',
+      position: 'absolute',
+      visibility: 'hidden',
+    })
+
+    document.body.appendChild(clone)
+    const height = clone.getBoundingClientRect().height
+    document.body.removeChild(clone)
+
+    return height
+  }
+}
+
+type Accordion = InstanceType<typeof AccordionController>
+
+export { AccordionController }
+export type { Accordion }