Files
zeekay 16c4453cc1 feat: sync with upstream shadcn/ui (through [email protected])
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in:
- [email protected] through [email protected] releases
- New apps/v4 directory structure
- Registry system improvements and MCP server
- Framework support (Vue, Svelte, React Native)
- New templates (vite-app, monorepo-next, laravel)
- Zod 4 compatibility (scoped override for zod@>4)
- Test fixture corrections for alias resolution

All 867 merge conflicts resolved preserving Hanzo customizations.
1020/1020 shadcn tests pass.
2026-02-09 10:44:26 -08:00

97 lines
2.9 KiB
TypeScript

"use client"
import * as React from "react"
import { Checkbox } from "@/examples/radix/ui-rtl/checkbox"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldTitle,
} from "@/examples/radix/ui-rtl/field"
import { Label } from "@/examples/radix/ui-rtl/label"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
const translations: Translations = {
en: {
dir: "ltr",
values: {
acceptTerms: "Accept terms and conditions",
acceptTermsDescription:
"By clicking this checkbox, you agree to the terms.",
enableNotifications: "Enable notifications",
enableNotificationsDescription:
"You can enable or disable notifications at any time.",
},
},
ar: {
dir: "rtl",
values: {
acceptTerms: "قبول الشروط والأحكام",
acceptTermsDescription: "بالنقر على هذا المربع، فإنك توافق على الشروط.",
enableNotifications: "تفعيل الإشعارات",
enableNotificationsDescription:
"يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.",
},
},
he: {
dir: "rtl",
values: {
acceptTerms: "קבל תנאים והגבלות",
acceptTermsDescription:
"על ידי לחיצה על תיבת הסימון הזו, אתה מסכים לתנאים.",
enableNotifications: "הפעל התראות",
enableNotificationsDescription:
"אתה יכול להפעיל או להשבית התראות בכל עת.",
},
},
}
export function CheckboxRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<FieldGroup className="max-w-sm" dir={dir}>
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-rtl" name="terms-checkbox" />
<Label htmlFor="terms-checkbox-rtl">{t.acceptTerms}</Label>
</Field>
<Field orientation="horizontal">
<Checkbox
id="terms-checkbox-2-rtl"
name="terms-checkbox-2"
defaultChecked
/>
<FieldContent>
<FieldLabel htmlFor="terms-checkbox-2-rtl">
{t.acceptTerms}
</FieldLabel>
<FieldDescription>{t.acceptTermsDescription}</FieldDescription>
</FieldContent>
</Field>
<Field orientation="horizontal" data-disabled>
<Checkbox id="toggle-checkbox-rtl" name="toggle-checkbox" disabled />
<FieldLabel htmlFor="toggle-checkbox-rtl">
{t.enableNotifications}
</FieldLabel>
</Field>
<FieldLabel>
<Field orientation="horizontal">
<Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
<FieldContent>
<FieldTitle>{t.enableNotifications}</FieldTitle>
<FieldDescription>
{t.enableNotificationsDescription}
</FieldDescription>
</FieldContent>
</Field>
</FieldLabel>
</FieldGroup>
)
}