'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SettingsToggleRow } from './components.js';
import { AVAILABLE_FONTS } from '../../components/ThemeProvider.js';
export function TypographyMotionCard({ s, canEdit, }) {
    return (_jsxs("section", { className: "border-border bg-card rounded-lg border p-6", children: [_jsxs("header", { className: "mb-4", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: "Typography & motion" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: "Admin UI font and motion preferences." })] }), _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "content-font", className: "text-foreground mb-1 block text-base font-medium", children: "Content font" }), _jsx("p", { className: "text-muted-foreground mb-2 text-sm", children: "Applies to the admin UI. Falls back to the system font if not installed." }), _jsxs("select", { id: "content-font", value: s.appearance.font, disabled: !canEdit, onChange: (e) => s.setFont(e.target.value), className: "border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50", children: [AVAILABLE_FONTS.map((font) => (_jsx("option", { value: font, children: font }, font))), !AVAILABLE_FONTS.includes(s.appearance.font) && (_jsx("option", { value: s.appearance.font, children: s.appearance.font }))] })] }), _jsx("div", { className: "border-border border-t pt-4", children: _jsx(SettingsToggleRow, { label: "Reduce motion", description: "Minimize animations and transitions across the admin. Focus and state changes are preserved.", checked: s.appearance.reduceMotion, onChange: s.setReduceMotion, disabled: !canEdit }) })] })] }));
}
//# sourceMappingURL=TypographyMotionCard.js.map