diff options
| author | 2026-03-26 09:04:01 +0800 | |
|---|---|---|
| committer | 2026-03-26 09:04:01 +0800 | |
| commit | b762558df79a9bae7ec67f1f98caa9ccebcda861 (patch) | |
| tree | 16827311b50249b06c13cae3f723a378e7f68364 /packages | |
| parent | 7d0e92e6d3b172adfe552ffae9b97f8dad6f63ae (diff) | |
| download | DropOut-b762558df79a9bae7ec67f1f98caa9ccebcda861.tar.gz DropOut-b762558df79a9bae7ec67f1f98caa9ccebcda861.zip | |
chore: update shadcn components
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/ui/src/components/ui/field.tsx | 34 | ||||
| -rw-r--r-- | packages/ui/src/components/ui/label.tsx | 2 | ||||
| -rw-r--r-- | packages/ui/src/components/ui/radio-group.tsx | 14 |
3 files changed, 25 insertions, 25 deletions
diff --git a/packages/ui/src/components/ui/field.tsx b/packages/ui/src/components/ui/field.tsx index ab9fb71..10bd9c9 100644 --- a/packages/ui/src/components/ui/field.tsx +++ b/packages/ui/src/components/ui/field.tsx @@ -9,7 +9,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { <fieldset data-slot="field-set" className={cn( - "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", + "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className, )} {...props} @@ -40,7 +40,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { <div data-slot="field-group" className={cn( - "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col", + "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className, )} {...props} @@ -49,15 +49,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { } const fieldVariants = cva( - "data-[invalid=true]:text-destructive gap-2 group/field flex w-full", + "group/field flex w-full gap-2 data-[invalid=true]:text-destructive", { variants: { orientation: { vertical: "flex-col *:w-full [&>.sr-only]:w-auto", horizontal: - "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", + "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", responsive: - "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", + "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", }, }, defaultVariants: { @@ -72,7 +72,9 @@ function Field({ ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) { return ( + // biome-ignore lint/a11y/useSemanticElements: shadcn component <div + role="group" data-slot="field" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} @@ -86,7 +88,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) { <div data-slot="field-content" className={cn( - "gap-0.5 group/field-content flex flex-1 flex-col leading-snug", + "group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className, )} {...props} @@ -102,7 +104,7 @@ function FieldLabel({ <Label data-slot="field-label" className={cn( - "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug", + "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className, )} @@ -116,7 +118,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { <div data-slot="field-label" className={cn( - "gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", + "flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50", className, )} {...props} @@ -129,9 +131,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { <p data-slot="field-description" className={cn( - "text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance", + "text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", - "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", + "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className, )} {...props} @@ -151,7 +153,7 @@ function FieldSeparator({ data-slot="field-separator" data-content={!!children} className={cn( - "-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative", + "relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2", className, )} {...props} @@ -159,7 +161,7 @@ function FieldSeparator({ <Separator className="absolute inset-0 top-1/2" /> {children && ( <span - className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit" + className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground" data-slot="field-separator-content" > {children} @@ -197,11 +199,9 @@ function FieldError({ return ( <ul className="ml-4 flex list-disc flex-col gap-1"> {uniqueErrors.map( - (error, index) => + (error) => error?.message && ( - <li key={`${error.message.slice(6)}-${index}`}> - {error.message} - </li> + <li key={`field-error-${error}`}>{error.message}</li> ), )} </ul> @@ -216,7 +216,7 @@ function FieldError({ <div role="alert" data-slot="field-error" - className={cn("text-destructive text-xs font-normal", className)} + className={cn("text-xs font-normal text-destructive", className)} {...props} > {content} diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx index 9a998c7..0d40c81 100644 --- a/packages/ui/src/components/ui/label.tsx +++ b/packages/ui/src/components/ui/label.tsx @@ -8,7 +8,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) { <label data-slot="label" className={cn( - "gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed", + "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className, )} {...props} diff --git a/packages/ui/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx index d8b39dd..df831e8 100644 --- a/packages/ui/src/components/ui/radio-group.tsx +++ b/packages/ui/src/components/ui/radio-group.tsx @@ -1,7 +1,7 @@ -import { Radio as RadioPrimitive } from "@base-ui/react/radio" -import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group" +import { Radio as RadioPrimitive } from "@base-ui/react/radio"; +import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { return ( @@ -10,7 +10,7 @@ function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { className={cn("grid w-full gap-2", className)} {...props} /> - ) + ); } function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) { @@ -19,7 +19,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) { data-slot="radio-group-item" className={cn( "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", - className + className, )} {...props} > @@ -30,7 +30,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) { <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" /> </RadioPrimitive.Indicator> </RadioPrimitive.Root> - ) + ); } -export { RadioGroup, RadioGroupItem } +export { RadioGroup, RadioGroupItem }; |