"use client";
import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { createContext, useContext } from "react";
import { cn } from "@open-mercato/shared/lib/utils";
import { Button } from "./button.js";
const TabsContext = createContext(void 0);
function useTabsContext() {
  const context = useContext(TabsContext);
  if (!context) {
    throw new Error("Tabs components must be used within a Tabs provider");
  }
  return context;
}
function Tabs({
  value: controlledValue,
  defaultValue,
  onValueChange,
  children,
  className
}) {
  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? "");
  const isControlled = controlledValue !== void 0;
  const value = isControlled ? controlledValue : uncontrolledValue;
  const handleValueChange = React.useCallback(
    (newValue) => {
      if (!isControlled) {
        setUncontrolledValue(newValue);
      }
      onValueChange?.(newValue);
    },
    [isControlled, onValueChange]
  );
  const contextValue = React.useMemo(
    () => ({ value, onValueChange: handleValueChange }),
    [value, handleValueChange]
  );
  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className, children }) });
}
function TabsList({ children, className }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "inline-flex h-9 items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground",
        className
      ),
      role: "tablist",
      children
    }
  );
}
function TabsTrigger({ value, children, className, disabled }) {
  const { value: selectedValue, onValueChange } = useTabsContext();
  const isSelected = selectedValue === value;
  return /* @__PURE__ */ jsx(
    Button,
    {
      type: "button",
      variant: "ghost",
      size: "sm",
      role: "tab",
      "aria-selected": isSelected,
      disabled,
      onClick: () => onValueChange(value),
      className: cn(
        isSelected ? "bg-background text-foreground shadow" : "hover:bg-background/80 hover:text-foreground",
        className
      ),
      children
    }
  );
}
function TabsContent({ value, children, className }) {
  const { value: selectedValue } = useTabsContext();
  if (selectedValue !== value) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "tabpanel",
      className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className),
      children
    }
  );
}
export {
  Tabs,
  TabsContent,
  TabsContext,
  TabsList,
  TabsTrigger,
  useTabsContext
};
//# sourceMappingURL=tabs.js.map
