"use client";
import { cn } from "./index3.js";
import { Label } from "./index10.js";
import { useControllableState } from "./index11.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Toggle } from "@base-ui/react/toggle";
import { ToggleGroup } from "@base-ui/react/toggle-group";
//#region src/components/atoms/buttons/Toggle/Toggle.tsx
var toggleVariants = cva("hover:text-foreground aria-pressed:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,background-color,box-shadow,transform] duration-200 [transition-timing-function:cubic-bezier(0.25,1,0.5,1)] active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:transition-shadow focus-visible:duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
	variants: {
		variant: {
			default: "bg-transparent",
			outline: "border-input hover:bg-muted border bg-transparent shadow-xs"
		},
		size: {
			default: "h-9 min-w-9 px-2",
			sm: "h-8 min-w-8 px-1.5",
			lg: "h-10 min-w-10 px-2.5"
		}
	},
	defaultVariants: {
		variant: "default",
		size: "default"
	}
});
function Toggle$1({ label, className, variant = "default", size = "default", pressed: controlledPressed, defaultPressed = false, onPressedChange, ...props }) {
	const id = React.useId();
	const [pressed, handlePressedChange] = useControllableState({
		value: controlledPressed,
		defaultValue: defaultPressed,
		onChange: onPressedChange
	});
	if (label) return /* @__PURE__ */ jsxs("div", {
		className: "flex items-center gap-2",
		"data-disabled": props.disabled || void 0,
		children: [/* @__PURE__ */ jsx(Toggle, {
			id,
			"data-slot": "toggle",
			className: cn(toggleVariants({
				variant,
				size,
				className
			})),
			pressed,
			onPressedChange: handlePressedChange,
			...props
		}), /* @__PURE__ */ jsx(Label, {
			htmlFor: id,
			className: "cursor-pointer",
			children: label
		})]
	});
	return /* @__PURE__ */ jsx(Toggle, {
		"data-slot": "toggle",
		className: cn(toggleVariants({
			variant,
			size,
			className
		})),
		pressed,
		onPressedChange: handlePressedChange,
		...props
	});
}
Toggle$1.displayName = "Toggle";
var ToggleGroupContext = React.createContext({
	size: "default",
	variant: "default",
	spacing: 0,
	orientation: "horizontal"
});
function ToggleGroup$1({ label, className, children, variant, size, spacing = 0, orientation = "horizontal", value: controlledValue, defaultValue, onValueChange, ...props }) {
	const [value, handleValueChange] = useControllableState({
		value: controlledValue,
		defaultValue: defaultValue ?? [],
		onChange: onValueChange
	});
	const groupContent = /* @__PURE__ */ jsx(ToggleGroup, {
		"data-slot": "toggle-group",
		"data-variant": variant,
		"data-size": size,
		"data-spacing": spacing,
		"data-orientation": orientation,
		"aria-orientation": void 0,
		style: { "--gap": spacing },
		className: cn("rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
		value,
		onValueChange: handleValueChange,
		...props,
		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
			value: {
				variant,
				size,
				spacing,
				orientation
			},
			children
		})
	});
	if (label) return /* @__PURE__ */ jsxs("div", {
		className: "space-y-2",
		children: [/* @__PURE__ */ jsx(Label, { children: label }), groupContent]
	});
	return groupContent;
}
ToggleGroup$1.displayName = "ToggleGroup";
function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
	const context = React.useContext(ToggleGroupContext);
	return /* @__PURE__ */ jsx(Toggle, {
		"data-slot": "toggle-group-item",
		"data-variant": context.variant || variant,
		"data-size": context.size || size,
		"data-spacing": context.spacing,
		className: cn("data-[state=on]:bg-accent group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
			variant: context.variant || variant,
			size: context.size || size
		}), className),
		...props,
		children
	});
}
ToggleGroupItem.displayName = "ToggleGroupItem";
//#endregion
export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup, ToggleGroupItem, toggleVariants };

//# sourceMappingURL=index12.js.map