/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { cn } from "../../utils/cn.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
//#region src/core/ToggleButtonGroup/ToggleButtonGroup.tsx
/** Per-size padding + type scale for a segment. */
var SIZE = {
	sm: "px-2 py-0.5 text-xs",
	md: "px-3 py-1.25 text-[13px]",
	lg: "px-4 py-2 text-sm"
};
/**
* ToggleButtonGroup — a pill-shaped row of options with a filled active segment
* (iOS-style). A thin, token-driven skin over React Aria's `ToggleButtonGroup`,
* so it inherits keyboard navigation, focus management, and RAC's selection
* model verbatim: single or multiple selection, controlled or uncontrolled,
* with an optional empty selection.
*
* Chrome is token-driven via `--primary` / `--text-*` / `--border-1`, so themes
* reskin it without touching the component.
*
* @example
* // Single-select view switcher (uncontrolled)
* <ToggleButtonGroup
*   aria-label="View"
*   options={[
*     { value: 'grid', label: 'Grid' },
*     { value: 'list', label: 'List' },
*   ]}
*   defaultSelectedKeys={['grid']}
*   onSelectionChange={(keys) => setView([...keys][0])}
* />
*
* @example
* // Multi-select filter with counts
* <ToggleButtonGroup
*   selectionMode="multiple"
*   options={[
*     { value: 'open', label: 'Open', count: 12 },
*     { value: 'closed', label: 'Closed', count: 4 },
*   ]}
* />
*/
function ToggleButtonGroup$1({ options, size = "md", fullWidth = false, selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disallowEmptySelection, isDisabled, value, onChange, "aria-label": ariaLabel, className, testId }) {
	const controlledKeys = selectedKeys !== void 0 ? selectedKeys : value !== void 0 ? value == null ? [] : [value] : void 0;
	const selectionProps = controlledKeys !== void 0 ? { selectedKeys: controlledKeys } : { defaultSelectedKeys };
	const handleSelectionChange = (keys) => {
		onSelectionChange?.(keys);
		if (selectionMode === "single") onChange?.(keys.size ? String([...keys][0]) : null);
	};
	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
		selectionMode,
		...selectionProps,
		onSelectionChange: handleSelectionChange,
		disallowEmptySelection,
		isDisabled,
		"aria-label": ariaLabel,
		"data-testid": testId,
		className: cn("inline-flex gap-1 p-0.75 rounded-full border border-border-1 bg-[color-mix(in_srgb,var(--text)_7%,transparent)]", fullWidth && "flex w-full", className),
		children: options.map((option) => /* @__PURE__ */ jsx(ToggleButton, {
			id: option.value,
			isDisabled: option.isDisabled,
			"aria-label": typeof option.label === "string" ? void 0 : option.title,
			className: ({ isSelected, isHovered, isFocusVisible, isDisabled: segDisabled }) => cn("inline-flex items-center justify-center rounded-full border-0 font-semibold cursor-pointer whitespace-nowrap outline-none transition-colors duration-150", SIZE[size], fullWidth && "flex-1", isSelected ? "text-(--text-on-primary) bg-(--primary)" : "text-(--text-muted)", !isSelected && isHovered && "text-(--text) bg-[color-mix(in_srgb,var(--text)_5%,transparent)]", isFocusVisible && "ring-2 ring-(--focus-ring)", segDisabled && "opacity-50 cursor-not-allowed"),
			children: /* @__PURE__ */ jsxs("span", {
				className: "inline-flex items-center gap-1.5",
				title: option.title,
				children: [option.label, option.count !== void 0 && /* @__PURE__ */ jsxs("span", {
					className: "text-xs font-medium",
					children: [
						"(",
						option.count,
						")"
					]
				})]
			})
		}, option.value))
	});
}
//#endregion
export { ToggleButtonGroup$1 as ToggleButtonGroup };

//# sourceMappingURL=ToggleButtonGroup.js.map