'use client';
import { useMemo, useState } from 'react';
import { compileSheet } from '@fayegram-ai/faye-ui/styles';
import { SheetInspector } from '@fayegram-ai/faye-ui/devtools/inspector';
import { buttonDescriptor } from '@fayegram-ai/faye-ui/controls/button.descriptor';
import { Slider } from '@fayegram-ai/faye-ui/controls/slider';
import { Checkbox } from '@fayegram-ai/faye-ui/controls/checkbox';
import { ControlLabel } from '@fayegram-ai/faye-ui/controls/field-layout';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { ThemeScope, ComponentStyleScope } from '@fayegram-ai/faye-ui/provider/provider';
import { Stack, Inline } from '@fayegram-ai/faye-ui/layout/layout';
import { Section, Result } from '../example';
export default function Customization() {
    const [weight, setWeight] = useState(500), [uppercase, setUppercase] = useState(false);
    const sheet = useMemo(() => compileSheet({ schemaVersion: 1, id: 'docs-button', component: 'button', defaults: { tone: 'accent' }, rules: [{ id: 'label', part: 'label', declarations: { fontWeight: weight, textTransform: uppercase ? 'uppercase' : 'none' } }, { id: 'root', part: 'root', when: { variant: 'solid' }, declarations: { borderRadius: { token: 'radius.control' }, paddingInline: { token: 'space.6' } } }] }, buttonDescriptor), [weight, uppercase]);
    return <Section title="Live, validated component sheet" note="This studio intentionally includes the authoring compiler. Ordinary precompiled consumers do not need it in the browser."><style>{sheet.css}</style><Stack gap="4"><Stack gap="3"><Slider.Root min={400} max={700} step={100} value={weight} onValueChange={setWeight}><span>Label weight: <Slider.Value/></span><Slider.Control><Slider.Track><Slider.Indicator/><Slider.Thumb aria-label="Label weight"/></Slider.Track></Slider.Control></Slider.Root><ControlLabel label="Uppercase labels">{attrs => <Checkbox.Root {...attrs} checked={uppercase} onCheckedChange={setUppercase}><Checkbox.Indicator/></Checkbox.Root>}</ControlLabel></Stack><ThemeScope profiles={[sheet.profile]}><ComponentStyleScope name="button" variants={{ size: 'sm' }}><Inline wrap><Button variant="solid">Profile default</Button><Button variant="outline">Outline</Button><Button tone="danger" variant="solid">Explicit intent wins</Button></Inline></ComponentStyleScope></ThemeScope><Result>{JSON.stringify(sheet.profile, null, 2)}</Result><SheetInspector sheet={sheet}/></Stack></Section>;
}