"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
import {Tabs, TabList, Tab, TabPanels, TabPanel} from "@/components/ui/aria-css-tabs";
import {Form} from "@/components/ui/aria-css-tabs-utils/components-ui-Form";
import {TextField} from "@/components/ui/aria-css-tabs-utils/components-ui-TextField";
import {Button} from "@/components/ui/aria-css-tabs-utils/components-ui-Button";
import {RadioGroup, Radio} from "@/components/ui/aria-css-tabs-utils/components-ui-RadioGroup";
import {CheckboxGroup} from "@/components/ui/aria-css-tabs-utils/components-ui-CheckboxGroup";
import {Checkbox} from "@/components/ui/aria-css-tabs-utils/components-ui-Checkbox";
function SourceSpecimen(){return <>
<Tabs>
<TabList aria-label="Settings">
<Tab id="general">General</Tab>
<Tab id="appearance">Appearance</Tab>
<Tab id="notifications">Notifications</Tab>
<Tab id="profile">Profile</Tab>
</TabList>
<TabPanels>
<TabPanel id="general">
<Form>
<TextField label="Homepage" defaultValue="react-aria.adobe.com" />
<Checkbox defaultSelected>Show sidebar</Checkbox>
<Checkbox>Show status bar</Checkbox>
</Form>
</TabPanel>
<TabPanel id="appearance">
<Form>
<RadioGroup label="Theme" defaultValue="auto">
<Radio value="auto">Auto</Radio>
<Radio value="light">Light</Radio>
<Radio value="dark">Dark</Radio>
</RadioGroup>
<RadioGroup label="Font size" defaultValue="medium">
<Radio value="small">Small</Radio>
<Radio value="medium">Medium</Radio>
<Radio value="large">Large</Radio>
</RadioGroup>
</Form>
</TabPanel>
<TabPanel id="notifications">
<CheckboxGroup label="Notifications settings" defaultValue={['account', 'dms']}>
<Checkbox value="account">Account activity</Checkbox>
<Checkbox value="mentions">Mentions</Checkbox>
<Checkbox value="dms">Direct message</Checkbox>
<Checkbox value="marketing">Marketing emails</Checkbox>
</CheckboxGroup>
</TabPanel>
<TabPanel id="profile">
<Form>
<TextField label="Name" defaultValue="Devon Govett" />
<TextField label="Username" defaultValue="@devongovett" />
<Button>Update profile</Button>
</Form>
</TabPanel>
</TabPanels>
</Tabs>
</>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="light" enableSystem={false}><div data-component-demo data-demo-theme="source" data-theme="light" className="light" style={{background:"var(--background-color, #fff)",color:"var(--text-color, #171717)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}
