import * as React from "react"; import { tv, type VariantProps } from "tailwind-variants"; const diffVariants = tv({ slots: { root: "diff", item1: "diff-item-1", item2: "diff-item-2", resizer: "diff-resizer", }, variants: { aspect: { "16/9": { root: "aspect-16/9" }, "4/3": { root: "aspect-4/3" }, "1/1": { root: "aspect-square" }, }, rounded: { true: { root: "rounded-field" }, }, }, defaultVariants: { aspect: "16/9", rounded: true, }, }); type DiffVariants = VariantProps; export type DiffProps = Omit, "color"> & DiffVariants; const Diff = React.forwardRef( ({ aspect, rounded, className, ...props }, ref) => { const { root } = diffVariants({ aspect, rounded }); return

; } ); Diff.displayName = "Diff"; export type DiffItem1Props = Omit, "color">; const DiffItem1 = React.forwardRef( ({ className, ...props }, ref) => { const { item1 } = diffVariants(); return

; } ); DiffItem1.displayName = "DiffItem1"; export type DiffItem2Props = Omit, "color">; const DiffItem2 = React.forwardRef( ({ className, ...props }, ref) => { const { item2 } = diffVariants(); return

; } ); DiffItem2.displayName = "DiffItem2"; export type DiffResizerProps = Omit, "color">; const DiffResizer = React.forwardRef( ({ className }, ref) => { const { resizer } = diffVariants(); return

; } ); DiffResizer.displayName = "DiffResizer"; const DiffComponent = Object.assign(Diff, { Item1: DiffItem1, Item2: DiffItem2, Resizer: DiffResizer, }); export { DiffComponent as Diff };

Prop	Type	Default	Description
`aspect`	`'16/9' \| '4/3' \| '1/1'`	`'16/9'`	Aspect ratio of the diff container.
`rounded`	`boolean`	`true`	Applies rounded corners.

Diff

Installation

Default

Text

Props

Diff.Root

Diff

Installation

Default

Text

Props

Diff.Root