import * as TabsPrimitive from '@radix-ui/react-tabs';
import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { transform, map, mergeWith, sortBy, findKey } from 'lodash-es';
import { createClassed, classed as classed$1 } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import clsx8 from 'clsx';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { motion, inView } from 'framer-motion';
import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { XMarkIcon } from '@heroicons/react/24/solid';
import useDimensions from 'react-cool-dimensions';
import { useImmer } from 'use-immer';
import { enableMapSet, castDraft } from 'immer';

var __defProp = Object.defineProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};

// src/components/Tabs/Tabs.tsx
var Tabs_exports = {};
__export(Tabs_exports, {
  List: () => List2,
  Root: () => Root2,
  Tab: () => Tab,
  View: () => View,
  ViewContainer: () => ViewContainer
});
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
var classedVariantMap = (variantMap) => variantMap;
function generateCompoundVariants(compoundVariantPropMap) {
  const { commonVariantProps, compoundVariantMapLists } = transform(
    compoundVariantPropMap,
    (result, value, key) => {
      if (typeof value === "boolean" || typeof value === "string") {
        result.commonVariantProps[key] = value;
        return result;
      }
      const compoundVariantMapList = map(value, (className, variantMapKey) => ({
        [key]: variantMapKey,
        class: className
      }));
      result.compoundVariantMapLists.push(compoundVariantMapList);
      return result;
    },
    {
      commonVariantProps: {},
      compoundVariantMapLists: []
    }
  );
  return compoundVariantMapLists.flat().map(({ class: cls, ...props }) => {
    return {
      ...commonVariantProps,
      class: twMerge(cls, compoundVariantPropMap.className),
      ...props
    };
  });
}
var expandVariant = createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var sizeVariants = {
  width: {
    xs: clsx8("w-28"),
    sm: clsx8("w-34"),
    md: clsx8("w-40"),
    lg: clsx8("w-48")
  },
  height: {
    xs: clsx8("h-28"),
    sm: clsx8("h-34"),
    md: clsx8("h-40"),
    lg: clsx8("h-48")
  },
  inlineWidth: {
    xs: clsx8("w-16 text-xs"),
    sm: clsx8("w-20 text-xs"),
    md: clsx8("w-22 text-xs"),
    lg: clsx8("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx8("h-16 text-xs"),
    sm: clsx8("h-20 text-xs"),
    md: clsx8("h-22 text-xs"),
    lg: clsx8("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx8("px-4"),
    sm: clsx8("px-6"),
    md: clsx8("px-8"),
    lg: clsx8("px-10")
  },
  extraPaddingX: {
    xs: clsx8("px-14"),
    sm: clsx8("px-16"),
    md: clsx8("px-18"),
    lg: clsx8("px-20")
  }
};

// src/styles/input-component.variants.ts
var inputComponentVariants = classedVariantMap({
  size: sizeVariants,
  rounded: {
    roundedLeft: "rounded-r-0 rounded-l-md",
    roundedRight: "rounded-l-0 rounded-r-md",
    rounded: "rounded-md"
  }
});
classed$1("div", {
  variants: {
    orientation: {
      horizontal: "inline-flex flex-row items-center ",
      vertical: "flex flex-col justify-center"
    }
  }
});
var inputComponentWidths = {
  xs: clsx8("w-168"),
  sm: clsx8("w-184"),
  md: clsx8("w-216"),
  lg: clsx8("w-400")
};
var inputComponentMinWidths = {
  none: "",
  xs: clsx8("min-w-[168px]"),
  sm: clsx8("min-w-[184px]"),
  md: clsx8("min-w-[216px]"),
  lg: clsx8("min-w-[400px]")
};
classed$1("div", {
  variants: {
    size: {
      xs: "",
      sm: "",
      md: "",
      lg: ""
    },
    minWidth: inputComponentMinWidths,
    width: {
      autoWidth: "w-auto",
      fullWidth: "!w-full",
      fixedWidth: ""
    }
  },
  defaultVariants: {
    width: "fixedWidth",
    size: "md"
  },
  compoundVariants: [
    { size: "xs", width: "fixedWidth", class: inputComponentWidths.xs },
    { size: "sm", width: "fixedWidth", class: inputComponentWidths.sm },
    { size: "md", width: "fixedWidth", class: inputComponentWidths.md },
    { size: "lg", width: "fixedWidth", class: inputComponentWidths.lg }
  ]
});
var inputSizeVariants = mergeVariants([
  inputComponentVariants.size.lineHeight,
  inputComponentVariants.size.paddingX,
  inputComponentVariants.size.paddingY,
  inputComponentVariants.size.textSize
]);
classed$1("div", "inline-flex", {
  variants: {
    size: inputSizeVariants
  }
});
var highlightBackdropContrastClass = clsx8(
  "group-[.is-surface]:backdrop-contrast-100",
  "group-[.is-surface-dark]:backdrop-contrast-75 dark:group-[.is-surface-dark]:backdrop-contrast-100",
  "group-[.is-surface-neutral]:backdrop-contrast-150"
);
var TabsContainerElement = classed(
  TabsPrimitive.Root,
  "group",
  "gap-16",
  "flex",
  "radix-orientation-horizontal:flex-col",
  "radix-orientation-vertical:flex-row",
  "relative"
);
var TabsListElement = classed(
  motion(TabsPrimitive.List),
  "border-highlight-tint border-[0.5px] relative z-0 ",
  "bg-highlight-ghost",
  "items-center gap-4 justify-center p-[3px]",
  "whitespace-nowrap",
  expandVariant(`
  radix-orientation-horizontal:(flex,flex-row,rounded-md,min-w-fit)
  radix-orientation-vertical:(inline-flex,flex-col,rounded-[0.185rem],h-auto,min-h-fit)
  `),
  "flex-start",
  "shrink-0",
  {
    variants: {
      size: mergeVariants([
        inputComponentVariants.size.lineHeight
        // inputComponentVariants.size.height,
      ]),
      contrast: {
        true: highlightBackdropContrastClass
      },
      fullWidth: {
        true: "w-full flex"
      }
    },
    defaultVariants: {
      size: "md",
      contrast: true
    }
  }
);
var MotionTrigger = motion(TabsPrimitive.Trigger);
var activeTabVariant = clsx8(
  "radix-state-active:text-content-intense",
  "radix-state-active:ring-1",
  "radix-state-active:ring-boundary-weak/30",
  "radix-state-active:bg-surface-soft",
  "radix-state-active:shadow-sm",
  "radix-state-active:shadow-surface-dark/30",
  "radix-state-active:sm:sticky",
  "radix-state-active:z-20",
  "radix-state-active:left-[3px]",
  "radix-state-active:right-[3px]"
);
var inactiveTabVariant = clsx8(
  "radix-state-inactive:text-content-subtle",
  "radix-state-inactive:transition-none",
  "radix-state-inactive:hover:bg-highlight-ghost"
);
var disabledTabVariant = clsx8("disabled:pointer-events-none");
var TabsListItemElement = classed(
  MotionTrigger,
  "group",
  "relative",
  "z-10",
  "shrink-0",
  "flex-grow",
  "min-w-[104px]",
  "p-4 px-16",
  "inline-flex",
  "justify-center",
  "items-center",
  "rounded-[0.185rem]",
  "select-none",
  "font-medium",
  "border-[1.5px]",
  "border-transparent",
  "transition-all",
  "duration-75",
  activeTabVariant,
  inactiveTabVariant,
  disabledTabVariant
);
var TabsViewContainerElement = classed("div", "grow");
function Wrap({
  children,
  if: conditionProp,
  wrap: wrapper,
  fallback
}) {
  const fallbackWrapperFn = fallback ?? ((c) => /* @__PURE__ */ jsx(Fragment, { children: c }));
  if (!Boolean(conditionProp))
    return fallbackWrapperFn(children);
  const getCondition = () => {
    if (typeof conditionProp === "object") {
      return findKey(conditionProp, (e) => Boolean(e));
    }
    return conditionProp;
  };
  const condition = getCondition();
  const getWrapperFn = () => {
    if (typeof wrapper === "function")
      return wrapper;
    if (typeof wrapper === "object" && typeof condition === "string" && condition in wrapper) {
      return wrapper[condition];
    }
    return fallbackWrapperFn;
  };
  const wrapperFn = getWrapperFn();
  if (typeof condition === "boolean") {
    return Boolean(condition) ? wrapperFn(children) : /* @__PURE__ */ jsx(Fragment, { children });
  }
  return wrapperFn(children);
}
var headingTextSize = {
  h1: clsx8("text-h1"),
  h2: clsx8("text-h2"),
  h3: clsx8("text-h3"),
  h4: clsx8("text-h4"),
  h5: clsx8("text-h5"),
  h6: clsx8("text-h6")
};
var textSize = {
  xs: clsx8("text-xs"),
  sm: clsx8("text-sm"),
  md: clsx8("text-md"),
  lg: clsx8("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx8("font-regular"),
    medium: clsx8("font-medium"),
    bold: clsx8("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx8("leading-none"),
    xs: clsx8("leading-xs"),
    sm: clsx8("leading-sm"),
    md: clsx8("leading-md"),
    lg: clsx8("leading-lg"),
    h1: clsx8("leading-h1"),
    h2: clsx8("leading-h2"),
    h3: clsx8("leading-h3"),
    h4: clsx8("leading-h4"),
    h5: clsx8("leading-h5"),
    h6: clsx8("leading-h6")
  },
  spaceY: {
    xs: clsx8("space-y-4"),
    sm: clsx8("space-y-6"),
    md: clsx8("space-y-8"),
    lg: clsx8("space-y-16")
  },
  spaceX: {
    xs: clsx8("space-x-4"),
    sm: clsx8("space-x-6"),
    md: clsx8("space-x-8"),
    lg: clsx8("space-x-16")
  },
  color: {
    inherit: clsx8("text-inherit"),
    current: clsx8("text-current"),
    tint: clsx8("text-content-tint"),
    ghost: clsx8("text-content-ghost"),
    subtle: clsx8("text-content-subtle"),
    medium: clsx8("text-content"),
    weak: clsx8("text-content-weak"),
    moderate: clsx8("text-content-moderate"),
    high: clsx8("text-content-high"),
    intense: clsx8("text-content-intense"),
    strong: clsx8("text-content-intense"),
    inverse: clsx8("text-inverse"),
    danger: clsx8("text-danger")
  },
  align: {
    center: clsx8("text-center"),
    right: clsx8("text-right"),
    left: clsx8("text-left"),
    start: clsx8("text-left"),
    end: clsx8("text-end")
  },
  maxLines: {
    1: "line-clamp-1",
    2: "line-clamp-2",
    3: "line-clamp-3",
    4: "line-clamp-4",
    5: "line-clamp-5",
    6: "line-clamp-6"
  }
};

// src/components/Button/Button.styles.tsx
var buttonVariants = {
  variants: {
    loading: {
      true: "cursor-default"
    },
    cursorPointer: {
      false: "cursor-auto"
    },
    size: mergeVariants(
      [inputComponentVariants.size.paddingX, inputComponentVariants.size.paddingY],
      {
        xs: "text-xs px-6",
        sm: "text-sm",
        md: "text-sm",
        lg: "text-sm"
      }
    ),
    fontWeight: textVariants.fontWeight,
    noWrap: {
      true: "whitespace-nowrap"
    },
    inline: {
      true: "inline"
    },
    justify: {
      center: "justify-center",
      start: "justify-start",
      end: "justify-end"
    },
    fullWidth: {
      true: "w-full"
    },
    hoverable: {
      true: ""
    },
    variant: {
      filled: "",
      outlined: "ring-[1.35px] ring-inset",
      glass: "",
      text: "",
      ghost: ""
    },
    rounded: {
      sm: clsx8("rounded "),
      default: clsx8("rounded"),
      true: "rounded-full"
    },
    gradient: {
      true: ""
    },
    coloredShadow: {
      true: ""
    },
    extraRoundedPadding: {
      true: ""
    },
    color: {
      primary: "",
      secondary: "",
      surface: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    hoverBackgroundColor: {
      primary: "",
      secondary: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    backgroundNoise: {
      true: "noisy-surface-texture"
    },
    gap: {
      true: ""
    }
  },
  compoundVariants: [
    ...generateCompoundVariants({
      gap: true,
      size: {
        xs: clsx8("gap-4"),
        sm: clsx8("gap-6"),
        md: clsx8("gap-6"),
        lg: clsx8("gap-6")
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      color: {
        primary: "filled-accent-primary",
        secondary: "filled-accent-secondary",
        inverse: "filled-accent-inverse",
        heart: "filled-accent-heart",
        info: "filled-accent-info",
        success: "filled-accent-success",
        danger: "filled-accent-danger",
        caution: "filled-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverable: true,
      color: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverBackgroundColor: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      hoverBackgroundColor: {
        primary: "hover:glass-accent-primary",
        secondary: "hover:glass-accent-secondary",
        inverse: "hover:glass-accent-inverse",
        heart: "hover:glass-accent-heart",
        info: "hover:glass-accent-info",
        success: "hover:glass-accent-success",
        danger: "hover:glass-accent-danger",
        caution: "hover:glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      className: "overflow-hidden",
      color: {
        primary: "glass-accent-primary",
        secondary: "glass-accent-secondary",
        inverse: "glass-accent-inverse",
        heart: "glass-accent-heart",
        info: "glass-accent-info",
        success: "glass-accent-success",
        danger: "glass-accent-danger",
        caution: "glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "ghost",
      className: "overflow-hidden bg-transparent",
      color: {
        primary: "ghost-accent-primary",
        secondary: "ghost-accent-secondary",
        inverse: "ghost-accent-inverse",
        heart: "ghost-accent-heart",
        info: "ghost-accent-info",
        success: "ghost-accent-success",
        danger: "ghost-accent-danger",
        caution: "ghost-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "outlined",
      className: "overflow-hidden z-0 bg-surface-soft",
      color: {
        primary: "ring-boundary-weak",
        secondary: "ring-boundary-weak",
        inverse: "text-inverse ring-inverse",
        heart: "text-heart ring-heart",
        info: "text-info ring-info",
        success: "text-success ring-success",
        danger: "text-danger ring-danger",
        caution: "text-caution ring-caution"
      }
    }),
    // Colored Shadow
    ...generateCompoundVariants({
      coloredShadow: true,
      className: clsx8("shadow-lg "),
      color: {
        primary: "shadow-primary/70",
        secondary: "shadow-secondary/70",
        inverse: "shadow-inverse/70",
        heart: "shadow-heart/70",
        info: "shadow-info/70",
        success: "shadow-success/70",
        danger: "shadow-danger/70",
        caution: "shadow-caution/70"
      }
    }),
    // Gradient
    ...generateCompoundVariants({
      gradient: true,
      variant: "filled",
      className: clsx8("border-none transition-all hover:brightness-[1.05]"),
      color: {
        primary: clsx8("bg-gradient-primary-dark-to-light-tr"),
        secondary: clsx8("bg-gradient-secondary-dark-to-light-tr"),
        inverse: clsx8("bg-gradient-inverse-dark-to-light-tr"),
        heart: clsx8("bg-gradient-heart-dark-to-light-tr"),
        info: clsx8("bg-gradient-info-dark-to-light-tr"),
        success: clsx8("bg-gradient-success-dark-to-light-tr"),
        danger: clsx8("bg-gradient-danger-dark-to-light-tr"),
        caution: clsx8("bg-gradient-caution-dark-to-light-tr")
      }
    }),
    // Extra Padding X
    ...generateCompoundVariants({
      rounded: true,
      extraRoundedPadding: true,
      size: sizeVariants.extraPaddingX
    })
  ]
};
var ButtonElement = classed.button(
  "inline-flex font-medium items-center justify-center select-none align-middle",
  "disabled:text-content-tint disabled:cursor-default disabled:pointer-events-none relative",
  "transition-colors duration-100",
  "box-border",
  "shrink-0",
  {
    defaultVariants: {
      size: "md",
      rounded: "default",
      noWrap: true,
      fontWeight: "medium",
      hoverable: true,
      color: "primary",
      justify: "center",
      variant: "filled",
      extraRoundedPadding: true,
      gap: true
    },
    variants: buttonVariants.variants,
    compoundVariants: buttonVariants.compoundVariants
  }
);
var IconButtonElement = classed("button", ButtonElement, "p-8 shrink-0", {
  variants: {
    size: mergeVariants([sizeVariants.width, sizeVariants.height])
  }
});
var IconButton = forwardRef(
  ({ className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx(IconButtonElement, { ...props, className, ref, extraRoundedPadding: false, children });
  }
);
forwardRef(
  ({ className, animated, color = "secondary", ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      IconButton,
      {
        ref,
        size: "sm",
        variant: "ghost",
        color,
        rounded: true,
        ...props,
        className: twMerge$1(
          clsx8("text-content-subtle hover:text-content-weak", {
            "opacity-50 transition-opacity duration-300 ease-in-out group-hover:opacity-100": animated
          }),
          className
        ),
        children: /* @__PURE__ */ jsx(XMarkIcon, { className: clsx8("fill-current") })
      }
    );
  }
);

// src/utils/getElement.ts
function getElement(elementOrRef) {
  if (!elementOrRef)
    return void 0;
  if (elementOrRef instanceof HTMLElement || elementOrRef instanceof Element) {
    return elementOrRef;
  }
  return elementOrRef.current;
}

// src/utils/viewport/getOverflowData.ts
function getOverflowData(elementRef) {
  const element = getElement(elementRef);
  const {
    scrollWidth = NaN,
    scrollHeight = NaN,
    scrollTop = NaN,
    scrollLeft = NaN,
    clientWidth = NaN,
    clientHeight = NaN
  } = element ?? {};
  const hasOverflowX = scrollWidth > clientWidth;
  const hasOverflowY = scrollHeight > clientHeight;
  const hasOverflow = hasOverflowX || hasOverflowY;
  const isScrollAtTopBoundary = scrollTop === 0;
  const isScrollAtBottomBoundary = scrollHeight - scrollTop === clientHeight;
  const isScrollAtLeftBoundary = scrollLeft === 0;
  const isScrollAtRightBoundary = scrollWidth - scrollLeft === clientWidth;
  const isScrollAtXBoundary = isScrollAtLeftBoundary && isScrollAtRightBoundary;
  const isScrollAtYBoundary = isScrollAtTopBoundary && isScrollAtBottomBoundary;
  return {
    hasOverflowX,
    hasOverflowY,
    hasOverflow,
    isScrollAtTopBoundary,
    isScrollAtBottomBoundary,
    isScrollAtLeftBoundary,
    isScrollAtRightBoundary,
    isScrollAtXBoundary,
    isScrollAtYBoundary
  };
}
enableMapSet();
function useScrollIntoView(options) {
  const {
    elements,
    // viewport,
    // inViewMargin = '20px',
    shouldUpdate = true,
    updateDependency
  } = options;
  const viewportRef = useRef(null);
  const [inViewState, updateInViewState] = useImmer({ overflowData: getOverflowData(), inViewChildren: [] });
  const {
    observe: observeViewport,
    width: viewportWidth,
    unobserve
  } = useDimensions({
    onResize: () => {
      updateInViewState((draft) => {
        draft.overflowData = getOverflowData(viewportRef);
      });
    }
  });
  useEffect(() => {
    if (viewportRef.current) {
      observeViewport(viewportRef.current);
    }
    return () => {
      unobserve();
    };
  }, [observeViewport, unobserve]);
  useEffect(() => {
    if (viewportRef.current) {
      updateInViewState((draft) => {
        draft.overflowData = getOverflowData(viewportRef.current);
      });
    }
  }, [updateInViewState]);
  useEffect(() => {
    const viewportElement = viewportRef.current;
    if (!elements || !viewportElement || !shouldUpdate)
      return;
    const unobserveList = elements.map((element, index) => {
      const unobserve2 = inView(
        element,
        (entry) => {
          updateInViewState((draft) => {
            const { id } = entry.target;
            if (!draft.inViewChildren.some((e) => e.id === id)) {
              const item = castDraft({ id, index, entry, element });
              draft.inViewChildren.push(item);
              const newArr = sortBy(draft.inViewChildren, (e) => e.index);
              draft.inViewChildren = newArr;
              draft.overflowData = getOverflowData(viewportRef);
            }
          });
          return (entry2) => {
            const { id } = entry2.target;
            updateInViewState((draft) => {
              const newArr = draft.inViewChildren.filter((e) => e.id !== id);
              draft.inViewChildren = sortBy(newArr, (e) => e.index);
            });
          };
        },
        {
          root: viewportElement,
          amount: "all"
        }
      );
      return unobserve2;
    });
    return () => {
      unobserveList.forEach((unobserve2) => {
        unobserve2();
      });
    };
  }, [elements, viewportRef, updateDependency, viewportWidth, shouldUpdate, updateInViewState]);
  const { nextLeftDirectionData, nextRightDirectionData } = useMemo(() => {
    const elementsList = elements ?? [];
    const { inViewChildren, previousElementId } = inViewState;
    const left = {
      nextIndexDelta: -1,
      boundingIndex: 0,
      inViewWindowStartIndex: 0,
      leftScrollOffset: 0,
      clampIndex: (x) => Math.max(x, 0)
    };
    const right = {
      nextIndexDelta: 1,
      boundingIndex: elementsList.length - 1,
      inViewWindowStartIndex: inViewChildren.length - 1,
      leftScrollOffset: viewportRef.current?.scrollWidth,
      clampIndex: (x) => Math.min(x, elementsList.length - 1)
    };
    const [nextLeftDirectionData2, nextRightDirectionData2] = [left, right].map((directionData) => {
      const {
        inViewWindowStartIndex,
        nextIndexDelta,
        clampIndex,
        boundingIndex,
        leftScrollOffset
      } = directionData;
      const { index: inViewIndex = NaN } = inViewChildren[inViewWindowStartIndex] ?? {};
      const nextIndex = clampIndex(inViewIndex + nextIndexDelta);
      const nextIndexIsSameAsBefore = Boolean(elementsList[nextIndex]?.id === previousElementId);
      const isBoundaryReached = nextIndex === boundingIndex;
      const nextElement = elementsList[nextIndexIsSameAsBefore ? nextIndex + nextIndexDelta : nextIndex];
      const nextElementId = nextElement?.id;
      return {
        nextElementId,
        nextIndex,
        nextElement,
        leftScrollOffset,
        isBoundaryReached,
        elements: elementsList,
        nextIsSameAsBefore: nextIndexIsSameAsBefore,
        meta: directionData
      };
    });
    return {
      nextLeftDirectionData: nextLeftDirectionData2,
      nextRightDirectionData: nextRightDirectionData2
    };
  }, [elements, inViewState]);
  function handleScroll(direction) {
    const { nextElement, nextElementId, isBoundaryReached, leftScrollOffset } = direction === "left" ? nextLeftDirectionData : nextRightDirectionData;
    if (isBoundaryReached) {
      viewportRef.current?.scrollTo({
        left: leftScrollOffset,
        behavior: "smooth"
      });
    } else {
      nextElement?.scrollIntoView({
        behavior: "smooth"
      });
    }
    updateInViewState((draft) => {
      draft.previousElementId = nextElementId;
    });
  }
  const { allElementsInView, inViewElementsCount } = useMemo(() => {
    const inViewElementsCount2 = inViewState.inViewChildren.length;
    const allElementsInView2 = (elements?.length ?? NaN) === inViewState.inViewChildren.length;
    return { allElementsInView: allElementsInView2, inViewElementsCount: inViewElementsCount2 };
  }, [inViewState, elements]);
  return {
    handleScroll,
    allElementsInView,
    inViewElementsCount,
    inViewChildren: inViewState.inViewChildren,
    viewportRef,
    viewportOverflowData: inViewState.overflowData,
    isLeftBoundaryReached: nextLeftDirectionData.isBoundaryReached,
    isRightBoundaryReached: nextRightDirectionData.isBoundaryReached
  };
}
var TabsRoot = (props) => {
  return /* @__PURE__ */ jsx(TabsContainerElement, { ...props });
};
var TabsListItem = (props) => {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current?.ariaSelected === "true") {
      ref.current.scrollIntoView({ behavior: "smooth" });
    }
  }, []);
  return /* @__PURE__ */ jsx(
    TabsListItemElement,
    {
      ...props,
      ref,
      initial: false,
      className: twMerge$1(props.className),
      onClick: () => {
        ref.current?.scrollIntoView({ behavior: "smooth" });
      },
      children: props.children
    }
  );
};
var TabsList = ({ children, className, size = "md", ...props }) => {
  const tabListRef = useRef(null);
  const leftButtonRef = useRef(null);
  const rightButtonRef = useRef(null);
  const {
    handleScroll,
    viewportRef,
    viewportOverflowData
  } = useScrollIntoView({
    elements: tabListRef.current ? Array.from(tabListRef.current.children) : void 0
    // viewportElement,
  });
  const { hasOverflow, isScrollAtLeftBoundary, isScrollAtRightBoundary } = viewportOverflowData;
  return /* @__PURE__ */ jsx(
    Wrap,
    {
      if: hasOverflow,
      wrap: (c) => /* @__PURE__ */ jsxs(motion.div, { className: "flex items-center gap-x-8", initial: false, children: [
        /* @__PURE__ */ jsx(
          OverflowScrollButton,
          {
            position: "left",
            enabled: !isScrollAtLeftBoundary,
            ref: leftButtonRef,
            onClick: () => {
              handleScroll("left");
            }
          }
        ),
        c,
        /* @__PURE__ */ jsx(
          OverflowScrollButton,
          {
            enabled: !isScrollAtRightBoundary,
            position: "right",
            ref: rightButtonRef,
            onClick: () => {
              handleScroll("right");
            }
          }
        )
      ] }),
      children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
        motion.div,
        {
          className: "group-radix-orientation-horizontal:overflow-hidden rounded-[0.185rem] relative",
          ref: viewportRef,
          initial: false,
          layout: true,
          transition: { bounce: 0 },
          style: { scrollSnapType: "x mandatory" },
          children: /* @__PURE__ */ jsx(
            TabsListElement,
            {
              size,
              ref: tabListRef,
              ...props,
              transition: { bounce: 0 },
              loop: false,
              layout: "preserve-aspect",
              children
            }
          )
        },
        "viewport"
      ) })
    }
  );
};
var Chevron = classed("span", "h-full w-full", {
  variants: {
    position: {
      right: "i-heroicons-chevron-right-20-solid",
      left: "i-heroicons-chevron-left-20-solid"
    }
  }
});
var OverflowScrollButton = React.forwardRef(({ position, enabled, ...props }, ref) => {
  return /* @__PURE__ */ jsx(
    IconButton,
    {
      color: "secondary",
      className: "group-radix-orientation-vertical:hidden",
      variant: "ghost",
      size: "sm",
      disabled: !enabled,
      ref,
      ...props,
      children: /* @__PURE__ */ jsx(Chevron, { position })
    }
  );
});
var TabsView = (props) => {
  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ...props });
};
var TabsViewContainer = (props) => {
  return /* @__PURE__ */ jsx(TabsViewContainerElement, { ...props });
};
var Root2 = TabsRoot;
var List2 = TabsList;
var Tab = TabsListItem;
var View = TabsView;
var ViewContainer = TabsViewContainer;

export { Tabs_exports as Tabs };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map