"use client";

// src/components/ui/view-segmented-control.tsx
import * as React from "react";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/tooltip.tsx
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { jsx, jsxs } from "react/jsx-runtime";
function Tooltip({
  ...props
}) {
  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
}
function TooltipTrigger({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TooltipPrimitive.Trigger,
    {
      "data-slot": "tooltip-trigger",
      suppressHydrationWarning: true,
      className: cn("cursor-pointer", className),
      ...props
    }
  );
}
function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
    TooltipPrimitive.Content,
    {
      "data-slot": "tooltip-content",
      sideOffset,
      className: cn(
        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
        className
      ),
      ...props,
      children: [
        children,
        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
      ]
    }
  ) });
}

// src/components/ui/tip.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function Tip({ label, children, side = "top" }) {
  return /* @__PURE__ */ jsxs2(Tooltip, { children: [
    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children }),
    /* @__PURE__ */ jsx2(TooltipContent, { side, className: "flex flex-wrap items-center gap-1.5", children: label })
  ] });
}

// src/components/ui/view-segmented-control.tsx
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
function viewSegmentedToolbarClass(className) {
  return cn(
    "inline-flex items-center gap-0.5 rounded-lg bg-muted/60 p-[3px]",
    className
  );
}
function viewSegmentedButtonClass(isActive, opts) {
  return cn(
    "inline-flex items-center rounded-md transition-all whitespace-nowrap",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
    opts?.iconOnly ? "size-8 min-h-8 min-w-8 shrink-0 justify-center p-0 text-xs" : "gap-1.5 px-2.5 py-1 text-xs min-h-8",
    isActive ? "bg-background text-foreground font-medium shadow-sm" : "text-muted-foreground hover:text-interactive-hover-foreground"
  );
}
function ViewSegmentedControl({
  value,
  onValueChange,
  options,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedBy,
  iconOnly = false,
  className,
  showTooltips,
  tooltipSide = "top"
}) {
  const tips = showTooltips ?? iconOnly;
  const itemRefs = React.useRef([]);
  React.useLayoutEffect(() => {
    itemRefs.current = itemRefs.current.slice(0, options.length);
  }, [options.length]);
  const focusIndex = React.useCallback(
    (index) => {
      const len = options.length;
      if (len === 0) return;
      const i = (index % len + len) % len;
      onValueChange(options[i].value);
      requestAnimationFrame(() => {
        itemRefs.current[i]?.focus();
      });
    },
    [onValueChange, options]
  );
  const onRadioKeyDown = React.useCallback(
    (e, index) => {
      const len = options.length;
      if (len === 0) return;
      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
        e.preventDefault();
        focusIndex(index + 1);
      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
        e.preventDefault();
        focusIndex(index - 1);
      } else if (e.key === "Home") {
        e.preventDefault();
        focusIndex(0);
      } else if (e.key === "End") {
        e.preventDefault();
        focusIndex(len - 1);
      }
    },
    [focusIndex, options.length]
  );
  return /* @__PURE__ */ jsx3(
    "div",
    {
      role: "radiogroup",
      "aria-label": ariaLabel,
      "aria-describedby": ariaDescribedBy,
      "data-slot": "view-segmented-toolbar",
      className: cn(viewSegmentedToolbarClass(), "w-fit min-w-0 shrink-0", className),
      children: options.map((opt, index) => {
        const isActive = opt.value === value;
        const tabIndex = isActive ? 0 : -1;
        const button = /* @__PURE__ */ jsxs3(
          "button",
          {
            ref: (el) => {
              itemRefs.current[index] = el;
            },
            type: "button",
            role: "radio",
            "aria-checked": isActive,
            "aria-label": iconOnly ? opt.label : void 0,
            tabIndex,
            onKeyDown: (e) => onRadioKeyDown(e, index),
            onClick: () => onValueChange(opt.value),
            "data-slot": "view-segmented-item",
            className: viewSegmentedButtonClass(isActive, { iconOnly }),
            children: [
              opt.icon ? /* @__PURE__ */ jsx3(
                "i",
                {
                  className: cn(opt.icon, iconOnly ? "text-[13px]" : "text-xs"),
                  "aria-hidden": "true"
                }
              ) : null,
              !iconOnly ? opt.label : null
            ]
          }
        );
        return tips ? /* @__PURE__ */ jsx3(Tip, { label: opt.label, side: tooltipSide, children: button }, opt.value) : /* @__PURE__ */ jsx3(React.Fragment, { children: button }, opt.value);
      })
    }
  );
}
export {
  ViewSegmentedControl,
  viewSegmentedButtonClass,
  viewSegmentedToolbarClass
};
//# sourceMappingURL=view-segmented-control.js.map