mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
/* eslint-disable react/no-children-prop */
|
|
"use client"
|
|
|
|
import { useForm } from "@tanstack/react-form"
|
|
import { toast } from "sonner"
|
|
import * as z from "zod"
|
|
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/new-york-v4/ui/card"
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/registry/new-york-v4/ui/field"
|
|
import { Switch } from "@/registry/new-york-v4/ui/switch"
|
|
|
|
const formSchema = z.object({
|
|
twoFactor: z.boolean().refine((val) => val === true, {
|
|
message: "It is highly recommended to enable two-factor authentication.",
|
|
}),
|
|
})
|
|
|
|
export default function FormTanstackSwitch() {
|
|
const form = useForm({
|
|
defaultValues: {
|
|
twoFactor: false,
|
|
},
|
|
validators: {
|
|
onSubmit: formSchema,
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
toast("You submitted the following values:", {
|
|
description: (
|
|
<pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
|
|
<code>{JSON.stringify(value, null, 2)}</code>
|
|
</pre>
|
|
),
|
|
position: "bottom-right",
|
|
classNames: {
|
|
content: "flex flex-col gap-2",
|
|
},
|
|
style: {
|
|
"--border-radius": "calc(var(--radius) + 4px)",
|
|
} as React.CSSProperties,
|
|
})
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Card className="w-full sm:max-w-md">
|
|
<CardHeader>
|
|
<CardTitle>Security Settings</CardTitle>
|
|
<CardDescription>
|
|
Manage your account security preferences.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form
|
|
id="form-tanstack-switch"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
form.handleSubmit()
|
|
}}
|
|
>
|
|
<FieldGroup>
|
|
<form.Field
|
|
name="twoFactor"
|
|
children={(field) => {
|
|
const isInvalid =
|
|
field.state.meta.isTouched && !field.state.meta.isValid
|
|
return (
|
|
<Field orientation="horizontal" data-invalid={isInvalid}>
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="form-tanstack-switch-twoFactor">
|
|
Multi-factor authentication
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enable multi-factor authentication to secure your
|
|
account.
|
|
</FieldDescription>
|
|
{isInvalid && (
|
|
<FieldError errors={field.state.meta.errors} />
|
|
)}
|
|
</FieldContent>
|
|
<Switch
|
|
id="form-tanstack-switch-twoFactor"
|
|
name={field.name}
|
|
checked={field.state.value}
|
|
onCheckedChange={field.handleChange}
|
|
aria-invalid={isInvalid}
|
|
/>
|
|
</Field>
|
|
)
|
|
}}
|
|
/>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Field orientation="horizontal">
|
|
<Button type="button" variant="outline" onClick={() => form.reset()}>
|
|
Reset
|
|
</Button>
|
|
<Button type="submit" form="form-tanstack-switch">
|
|
Save
|
|
</Button>
|
|
</Field>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|