"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { useRoleSelector } from "./useRoleSelector";
/**
 * Styled radio-group for selecting an IAM role.
 *
 * Displays all grantable roles for the given resource kind as
 * selectable pills, each showing the role name and description.
 *
 * For a headless alternative, use {@link useRoleSelector} directly.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <RoleSelector
 *   kind={ApiResourceKind.organization}
 *   onSelect={(role) => setRole(role)}
 * />
 * ```
 */
export function RoleSelector({ kind, onSelect, selected: controlledSelected, defaultRole, disabled = false, className, }) {
    const { options, selected: internalSelected, select } = useRoleSelector(kind, defaultRole);
    const currentSelected = controlledSelected !== undefined
        ? controlledSelected
        : internalSelected;
    const handleSelect = (role) => {
        select(role);
        onSelect?.(role);
    };
    if (options.length === 0) {
        return null;
    }
    return (_jsxs("fieldset", { className: cn("space-y-1.5", className), children: [_jsx("legend", { className: "text-xs font-medium text-foreground", children: "Role" }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
                    const isChecked = currentSelected === opt.role;
                    return (_jsxs("label", { title: opt.description, className: cn("inline-flex cursor-pointer flex-col rounded-md border px-3 py-1.5 text-xs transition-colors", isChecked
                            ? "border-primary bg-primary-subtle text-primary font-medium"
                            : "border-input bg-background text-muted-foreground hover:border-border hover:text-foreground", disabled && "pointer-events-none opacity-50"), children: [_jsx("input", { type: "radio", name: "stgm-role-selector", value: opt.value, checked: isChecked, disabled: disabled, onChange: () => handleSelect(opt.role), className: "sr-only" }), _jsx("span", { children: opt.label }), _jsx("span", { className: "text-[0.625rem] text-muted-foreground font-normal mt-0.5", children: opt.description })] }, opt.value));
                }) })] }));
}
//# sourceMappingURL=RoleSelector.js.map