Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-24 17:04:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to tailwind@4

Browse Source
This commit is contained in:
Lucas Smith
2026-06-29 13:26:14 +10:00
parent 187b612568
commit b79895b38c
289 changed files with 1477 additions and 1941 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/common/copy-text-button.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export const CopyTextButton = ({
<div
className={cn(
'flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-muted-foreground/10 hover:active:bg-muted-foreground/20',
'flex h-6 w-6 items-center justify-center rounded-sm transition-all hover:bg-muted-foreground/10 hover:active:bg-muted-foreground/20',
{
'ml-1': Boolean(badgeContentCopied || badgeContentUncopied),
},
packages/ui/components/common/local-time.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const LocalTime = ({ date, className }: LocalTimeProps) => {
}}
onMouseLeave={onMouseLeave}
>
<div className="space-y-1.5 text-xs">
<div className="twv3-space-y-1.5 text-xs">
<TimeRow
label="Local"
value={local}
packages/ui/components/document/document-email-checkboxes.tsx
+10 -10
View File
@@ -20,7 +20,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
const isHidden = (event: DocumentEmailEvents) => hiddenEvents?.includes(event) ?? false;
return (
<div className={cn('space-y-3', className)}>
<div className={cn('twv3-space-y-3', className)}>
{!isHidden(DocumentEmailEvents.RecipientSigned) && (
<div className="flex flex-row items-center">
<Checkbox
@@ -43,7 +43,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient signed email</Trans>
@@ -81,7 +81,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient signing request email</Trans>
@@ -119,7 +119,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient removed email</Trans>
@@ -157,7 +157,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document pending email</Trans>
@@ -198,7 +198,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document completed email</Trans>
@@ -236,7 +236,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document deleted email</Trans>
@@ -274,7 +274,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document completed email</Trans>
@@ -312,7 +312,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document created from direct template email</Trans>
@@ -353,7 +353,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient expired email</Trans>
packages/ui/components/document/document-global-auth-access-select.tsx
+2 -2
View File
@@ -72,7 +72,7 @@ export const DocumentGlobalAuthAccessTooltip = () => (
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document access</Trans>
@@ -87,7 +87,7 @@ export const DocumentGlobalAuthAccessTooltip = () => (
<Trans>Multiple access methods can be selected.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Require account</strong> - The recipient must be signed in to view the document
packages/ui/components/document/document-global-auth-action-select.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export const DocumentGlobalAuthActionTooltip = () => (
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<Trans>Global recipient action authentication</Trans>
</h2>
@@ -90,7 +90,7 @@ export const DocumentGlobalAuthActionTooltip = () => (
</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Require passkey</strong> - The recipient must have an account and passkey configured via their
packages/ui/components/document/document-read-only-fields.tsx
+1 -1
View File
@@ -151,7 +151,7 @@ export const DocumentReadOnlyFields = ({
</p>
<button
className="absolute top-0 right-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
className="absolute top-0 right-0 my-1 p-2 focus:outline-hidden focus-visible:ring-0"
onClick={() => handleHideField(field.secondaryId)}
title="Hide field"
>
packages/ui/components/document/document-send-email-message-helper.tsx
+9 -5
View File
@@ -9,15 +9,19 @@ export const DocumentSendEmailMessageHelper = () => {
<ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.name}'}</code> -{' '}
<Trans>The signer's name</Trans>
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.name}'}</code>{' '}
- <Trans>The signer's name</Trans>
</li>
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.email}'}</code> -{' '}
<Trans>The signer's email</Trans>
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">
{'{signer.email}'}
</code>{' '}
- <Trans>The signer's email</Trans>
</li>
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{document.name}'}</code>{' '}
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">
{'{document.name}'}
</code>{' '}
- <Trans>The document's name</Trans>
</li>
</ul>
packages/ui/components/document/document-signature-settings-tooltip.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ export const DocumentSignatureSettingsTooltip = () => {
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Signature types</Trans>
@@ -20,7 +20,7 @@ export const DocumentSignatureSettingsTooltip = () => {
<Trans>The types of signatures that recipients are allowed to use when signing the document.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>
packages/ui/components/document/document-visibility-select.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ export const DocumentVisibilityTooltip = () => {
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document visibility</Trans>
@@ -65,7 +65,7 @@ export const DocumentVisibilityTooltip = () => {
<Trans>The visibility of the document to the recipient.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Everyone</strong> - Everyone can access and view the document
packages/ui/components/document/envelope-recipient-field-tooltip.tsx
+1 -1
View File
@@ -180,7 +180,7 @@ export function EnvelopeRecipientFieldTooltip({
<p className="mt-1 text-center text-muted-foreground text-xs">{getRecipientDisplayText(field.recipient)}</p>
<button
className="absolute top-0 right-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
className="absolute top-0 right-0 my-1 p-2 focus:outline-hidden focus-visible:ring-0"
onClick={() => setHideField(true)}
title="Hide field"
>
packages/ui/components/recipient/recipient-action-auth-select.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export const RecipientActionAuthSelect = ({
<Trans>These will override any global settings. Multiple methods can be selected.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Inherit authentication method</strong> - Use the global action signing authentication method
packages/ui/components/template/template-type-select.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const TemplateTypeTooltip = ({ organisationTeamCount }: { organisationTea
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<p>
<Trans>
<strong>Private</strong> templates can only be used by your team.
packages/ui/primitives/alert-dialog.tsx
+3 -3
View File
@@ -22,7 +22,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, children: _children, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
'fade-in fixed inset-0 z-50 animate-in bg-background/80 backdrop-blur-sm transition-opacity',
'fade-in fixed inset-0 z-50 animate-in bg-background/80 backdrop-blur-xs transition-opacity',
className,
)}
{...props}
@@ -52,13 +52,13 @@ const AlertDialogContent = React.forwardRef<
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-2 flex flex-col text-center sm:text-left', className)} {...props} />
);
AlertDialogHeader.displayName = 'AlertDialogHeader';
const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
<div className={cn('sm:twv3-space-x-2 flex flex-col-reverse sm:flex-row sm:justify-end', className)} {...props} />
);
AlertDialogFooter.displayName = 'AlertDialogFooter';
packages/ui/primitives/alert.tsx
+6 -1
View File
@@ -32,7 +32,12 @@ const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, padding, ...props }, ref) => (
<div ref={ref} role="alert" className={cn('space-y-2', alertVariants({ variant, padding }), className)} {...props} />
<div
ref={ref}
role="alert"
className={cn('twv3-space-y-2', alertVariants({ variant, padding }), className)}
{...props}
/>
));
Alert.displayName = 'Alert';
packages/ui/primitives/button.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
{
variants: {
variant: {
packages/ui/primitives/calendar.tsx
+4 -4
View File
@@ -13,18 +13,18 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
showOutsideDays={showOutsideDays}
className={cn('p-3', className)}
classNames={{
months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
month: 'space-y-4',
months: 'flex flex-col sm:flex-row twv3-space-y-4 sm:twv3-space-x-4 sm:twv3-space-y-0',
month: 'twv3-space-y-4',
caption: 'flex justify-center pt-1 relative items-center',
caption_label: 'text-sm font-medium',
nav: 'space-x-1 flex items-center',
nav: 'twv3-space-x-1 flex items-center',
nav_button: cn(
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
),
nav_button_previous: 'absolute left-1',
nav_button_next: 'absolute right-1',
table: 'w-full border-collapse space-y-1',
table: 'w-full border-collapse twv3-space-y-1',
head_row: 'flex',
head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
row: 'flex w-full mt-2',
packages/ui/primitives/card.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
gradient,
'dark:gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.primary.DEFAULT/70%)_5%,theme(colors.border/80%)_30%)]':
gradient,
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_var(colors.primary.DEFAULT/70%)]': true,
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]': true,
'dark:shadow-[0]': true,
},
className,
@@ -51,7 +51,7 @@ Card.displayName = 'Card';
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
<div ref={ref} className={cn('twv3-space-y-1.5 flex flex-col p-6', className)} {...props} />
),
);
packages/ui/primitives/checkbox.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
'peer h-4 w-4 shrink-0 rounded-xs border border-input bg-background ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
className,
)}
{...props}
packages/ui/primitives/color-picker.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const ColorPicker = ({
disabled={disabled}
className="h-12 w-12 rounded-md border bg-background p-1 disabled:pointer-events-none disabled:opacity-50"
>
<div className="h-full w-full rounded-sm" style={{ backgroundColor: color }} />
<div className="h-full w-full rounded-xs" style={{ backgroundColor: color }} />
</button>
</PopoverTrigger>
packages/ui/primitives/command.tsx
+4 -4
View File
@@ -62,7 +62,7 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
@@ -80,10 +80,10 @@ const CommandTextInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
{...props}
@@ -145,7 +145,7 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/context-menu.tsx
+4 -4
View File
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
<ContextMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className,
)}
@@ -81,7 +81,7 @@ const ContextMenuItem = React.forwardRef<
<ContextMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -98,7 +98,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
<ContextMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -122,7 +122,7 @@ const ContextMenuRadioItem = React.forwardRef<
<ContextMenuPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/dialog.tsx
+4 -4
View File
@@ -38,7 +38,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out',
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out',
className,
)}
{...props}
@@ -74,7 +74,7 @@ const DialogContent = React.forwardRef<
{!hideClose && (
<DialogPrimitive.Close
data-testid="btn-dialog-close"
className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X className="h-4 w-4" />
<span className="sr-only">
@@ -89,7 +89,7 @@ const DialogContent = React.forwardRef<
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-1.5 flex flex-col text-center sm:text-left', className)} {...props} />
);
DialogHeader.displayName = 'DialogHeader';
@@ -97,7 +97,7 @@ DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse space-y-2 space-y-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0',
'twv3-space-y-2 twv3-space-y-reverse sm:twv3-space-x-2 sm:twv3-space-y-0 flex flex-col-reverse sm:flex-row sm:justify-end',
className,
)}
{...props}
packages/ui/primitives/document-dropzone.tsx
+7 -7
View File
@@ -78,7 +78,7 @@ export const DocumentDropzone = ({
<Card
role="button"
className={cn(
'group flex flex-1 cursor-pointer flex-col items-center justify-center ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'group flex flex-1 cursor-pointer flex-col items-center justify-center ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
gradient={!disabled}
@@ -92,7 +92,7 @@ export const DocumentDropzone = ({
// Disabled State
<div className="flex">
<motion.div
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
variants={DocumentDropzoneDisabledCardLeftVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
@@ -100,7 +100,7 @@ export const DocumentDropzone = ({
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
</motion.div>
<motion.div
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/50 group-hover:bg-destructive/5"
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/50 group-hover:bg-destructive/5"
variants={DocumentDropzoneDisabledCardCenterVariants}
>
<AlertTriangle
@@ -109,7 +109,7 @@ export const DocumentDropzone = ({
/>
</motion.div>
<motion.div
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
variants={DocumentDropzoneDisabledCardRightVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
@@ -121,7 +121,7 @@ export const DocumentDropzone = ({
// Non Disabled State
<div className="flex">
<motion.div
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
variants={DocumentDropzoneCardLeftVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
@@ -129,13 +129,13 @@ export const DocumentDropzone = ({
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
</motion.div>
<motion.div
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
variants={DocumentDropzoneCardCenterVariants}
>
<Plus strokeWidth="2px" className="h-12 w-12 text-muted-foreground/20 group-hover:text-documenso" />
</motion.div>
<motion.div
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
variants={DocumentDropzoneCardRightVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
packages/ui/primitives/document-flow/add-settings.tsx
+4 -4
View File
@@ -173,7 +173,7 @@ export const AddSettingsFormPartial = ({
)}
<Form {...form}>
<fieldset className="flex h-full flex-col space-y-6" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-6 flex h-full flex-col" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="title"
@@ -209,7 +209,7 @@ export const AddSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<Trans>
Controls the language for the document, including the language to be used for email
notifications, and the final certificate that is generated and attached to the document.
@@ -327,12 +327,12 @@ export const AddSettingsFormPartial = ({
<Accordion type="multiple" className="mt-6">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="mb-2 rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-2 text-muted-foreground text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
<FormField
control={form.control}
name="externalId"
packages/ui/primitives/document-flow/add-signers.tsx
+5 -5
View File
@@ -524,7 +524,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="signingOrder"
render={({ field }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -581,7 +581,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="allowDictateNextSigner"
render={({ field: { value, ...field } }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -669,13 +669,13 @@ export const AddSignersFormPartial = ({
name={`signers.${index}.signingOrder`}
render={({ field }) => (
<FormItem
className={cn('col-span-2 mt-auto flex items-center gap-x-1 space-y-0', {
className={cn('twv3-space-y-0 col-span-2 mt-auto flex items-center gap-x-1', {
'mb-6':
form.formState.errors.signers?.[index] &&
!form.formState.errors.signers[index]?.signingOrder,
})}
>
<GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
<GripVerticalIcon className="h-5 w-5 shrink-0 opacity-40" />
<FormControl>
<Input
type="number"
@@ -906,7 +906,7 @@ export const AddSignersFormPartial = ({
/>
<div
className={cn('mt-2 flex flex-row items-center space-x-4', {
className={cn('twv3-space-x-4 mt-2 flex flex-row items-center', {
'mt-4': showAdvancedSettings,
})}
>
packages/ui/primitives/document-flow/document-flow-root.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const DocumentFlowFormContainerFooter = ({
...props
}: DocumentFlowFormContainerFooterProps) => {
return (
<div className={cn('mt-4 flex-shrink-0', className)} {...props}>
<div className={cn('mt-4 shrink-0', className)} {...props}>
{children}
</div>
);
packages/ui/primitives/document-flow/field-content.tsx
+2 -2
View File
@@ -175,8 +175,8 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
className={cn(
'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
{
'!text-center': textAlign === 'center' || !textToDisplay,
'!text-right': textAlign === 'right',
'text-center!': textAlign === 'center' || !textToDisplay,
'text-right!': textAlign === 'right',
'font-signature text-[clamp(0.07rem,25cqw,1.125rem)]': isSignatureField,
},
)}
packages/ui/primitives/document-flow/field-item.tsx
+6 -6
View File
@@ -315,7 +315,7 @@ const FieldItemInner = ({
'flex h-5 w-5 flex-col items-center justify-center rounded-r-md font-bold text-[0.5rem] text-white opacity-0 transition duration-200 group-hover/field-item:opacity-100',
signerStyles.fieldItemInitials,
{
'!opacity-50': disabled || passive,
'opacity-50!': disabled || passive,
},
)}
>
@@ -324,7 +324,7 @@ const FieldItemInner = ({
</div>
{isDevMode && (
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-xs backdrop-blur-xs">
<div className="flex flex-col gap-0.5 text-[9px]">
{field.nativeId && (
<span>
@@ -375,7 +375,7 @@ const FieldItemInner = ({
{advancedField && (
<button
title={_(msg`Advanced settings`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onAdvancedSettings}
onTouchEnd={onAdvancedSettings}
>
@@ -385,7 +385,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicate}
onTouchEnd={onDuplicate}
>
@@ -394,7 +394,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate on all pages`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicateAllPages}
onTouchEnd={onDuplicateAllPages}
>
@@ -403,7 +403,7 @@ const FieldItemInner = ({
<button
title={_(msg`Remove`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onRemove}
onTouchEnd={onRemove}
>
packages/ui/primitives/dropdown-menu.tsx
+4 -4
View File
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
inset && 'pl-8',
className,
)}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/form/form.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn('space-y-2', className)} {...props} />
<div ref={ref} className={cn('twv3-space-y-2', className)} {...props} />
</FormItemContext.Provider>
);
},
packages/ui/primitives/hover-card.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'zoom-in-90 z-50 w-64 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
'zoom-in-90 z-50 w-64 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
className,
)}
{...props}
packages/ui/primitives/input.tsx
+2 -2
View File
@@ -9,10 +9,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
ref={ref}
packages/ui/primitives/menubar.tsx
+6 -6
View File
@@ -20,7 +20,7 @@ const Menubar = React.forwardRef<
>(({ className, ...props }, ref) => (
<MenubarPrimitive.Root
ref={ref}
className={cn('flex h-10 items-center space-x-1 rounded-md border bg-background p-1', className)}
className={cn('twv3-space-x-1 flex h-10 items-center rounded-md border bg-background p-1', className)}
{...props}
/>
));
@@ -34,7 +34,7 @@ const MenubarTrigger = React.forwardRef<
<MenubarPrimitive.Trigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-3 py-1.5 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
className,
)}
{...props}
@@ -52,7 +52,7 @@ const MenubarSubTrigger = React.forwardRef<
<MenubarPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className,
)}
@@ -111,7 +111,7 @@ const MenubarItem = React.forwardRef<
<MenubarPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -128,7 +128,7 @@ const MenubarCheckboxItem = React.forwardRef<
<MenubarPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -152,7 +152,7 @@ const MenubarRadioItem = React.forwardRef<
<MenubarPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/multiselect.tsx
+5 -5
View File
@@ -402,7 +402,7 @@ const MultiSelect = ({
>
<div
className={cn(
'relative min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
'relative min-h-[38px] rounded-md border border-input text-sm outline-hidden transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
{
'p-1': selected.length !== 0,
'cursor-text': !disabled && selected.length !== 0,
@@ -431,7 +431,7 @@ const MultiSelect = ({
>
{option.label}
<button
className="absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
className="absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleUnselect(option);
@@ -474,7 +474,7 @@ const MultiSelect = ({
}}
placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
className={cn(
'flex-1 bg-transparent outline-none placeholder:text-muted-foreground/70 disabled:cursor-not-allowed',
'flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed',
{
'w-full': hidePlaceholderWhenSelected,
'px-3 py-2': selected.length === 0,
@@ -490,7 +490,7 @@ const MultiSelect = ({
onChange?.(selected.filter((s) => s.fixed));
}}
className={cn(
'absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
'absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
(hideClearAllButton ||
disabled ||
selected.length < 1 ||
@@ -514,7 +514,7 @@ const MultiSelect = ({
>
{open && (
<CommandList
className="bg-popover text-popover-foreground shadow-lg outline-none"
className="bg-popover text-popover-foreground shadow-lg outline-hidden"
onMouseLeave={() => {
setOnScrollbar(false);
}}
packages/ui/primitives/navigation-menu.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ const NavigationMenuList = React.forwardRef<
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
ref={ref}
className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
className={cn('group twv3-space-x-1 flex flex-1 list-none items-center justify-center', className)}
{...props}
/>
));
@@ -37,7 +37,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item;
const navigationMenuTriggerStyle = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:bg-accent focus:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 h-10 py-2 px-4 group w-max',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-hidden focus:bg-accent focus:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 h-10 py-2 px-4 group w-max',
);
const NavigationMenuTrigger = React.forwardRef<
packages/ui/primitives/pin-input.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const PinInputSlot = React.forwardRef<
<div
ref={ref}
className={cn(
'relative flex h-10 w-10 items-center justify-center border-input border-y border-r font-mono shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
'relative flex h-10 w-10 items-center justify-center border-input border-y border-r font-mono shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'z-10 ring-1 ring-ring',
className,
)}
packages/ui/primitives/popover.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
className,
)}
{...props}
@@ -73,7 +73,7 @@ const PopoverHover = ({ trigger, children, contentProps, side = 'top' }: Popover
return (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger
className="flex cursor-pointer outline-none"
className="flex cursor-pointer outline-hidden"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
packages/ui/primitives/radio-group.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
packages/ui/primitives/recipient-selector.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export const RecipientSelector = ({
{recipient.sendStatus !== SendStatus.SENT ? (
<Check
aria-hidden={recipient.id !== selectedRecipient?.id}
className={cn('h-4 w-4 flex-shrink-0', {
className={cn('h-4 w-4 shrink-0', {
'opacity-0': recipient.id !== selectedRecipient?.id,
'opacity-100': recipient.id === selectedRecipient?.id,
})}
packages/ui/primitives/select.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
disabled={loading || props.disabled}
@@ -93,7 +93,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/sheet.tsx
+4 -4
View File
@@ -39,7 +39,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, children: _children, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out',
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out',
className,
)}
{...props}
@@ -147,7 +147,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
{showOverlay && <SheetOverlay className={sheetClass} />}
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ position, size }), className)} {...props}>
{children}
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">
<Trans>Close</Trans>
@@ -161,13 +161,13 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-2 flex flex-col text-center sm:text-left', className)} {...props} />
);
SheetHeader.displayName = 'SheetHeader';
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
<div className={cn('sm:twv3-space-x-2 flex flex-col-reverse sm:flex-row sm:justify-end', className)} {...props} />
);
SheetFooter.displayName = 'SheetFooter';
packages/ui/primitives/signature-pad/signature-pad-color-picker.tsx
+4 -4
View File
@@ -24,28 +24,28 @@ export const SignaturePadColorPicker = ({
<SelectContent className="w-[100px]" align="end">
<SelectItem value="black">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-black shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-black shadow-xs" />
<Trans>Black</Trans>
</div>
</SelectItem>
<SelectItem value="red">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[red] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[red] shadow-xs" />
<Trans>Red</Trans>
</div>
</SelectItem>
<SelectItem value="blue">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[blue] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[blue] shadow-xs" />
<Trans>Blue</Trans>
</div>
</SelectItem>
<SelectItem value="green">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[green] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[green] shadow-xs" />
<Trans>Green</Trans>
</div>
</SelectItem>
packages/ui/primitives/signature-pad/signature-pad-draw.tsx
+2 -2
View File
@@ -281,7 +281,7 @@ export const SignaturePadDraw = ({ className, value, onChange, ...props }: Signa
<div className="absolute right-3 bottom-3 flex gap-2">
<button
type="button"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => onClearClick()}
>
<Trans>Clear Signature</Trans>
@@ -301,7 +301,7 @@ export const SignaturePadDraw = ({ className, value, onChange, ...props }: Signa
<button
type="button"
title="undo"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
onClick={onUndoClick}
>
<Undo2 className="h-4 w-4" />
packages/ui/primitives/signature-pad/signature-pad-type.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const SignaturePadType = ({ className, value, defaultValue, onChange }: S
<input
data-testid="signature-pad-type-input"
placeholder={t`Type your signature`}
className="w-full bg-transparent px-4 text-center font-signature text-7xl text-foreground placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
className="w-full bg-transparent px-4 text-center font-signature text-7xl text-foreground placeholder:text-4xl focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0"
// style={{ color: selectedColor }}
value={value}
onChange={(event) => {
packages/ui/primitives/signature-pad/signature-tabs.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ export function TabsTrigger({ value, icon, children, className, ...props }: Tabs
onClick={() => onValueChange(value)}
className={cn(
'relative flex items-center px-4 py-3 font-medium text-sm transition-all',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
isSelected ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
className,
)}
packages/ui/primitives/slider.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));
packages/ui/primitives/switch.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
className,
)}
{...props}
packages/ui/primitives/tabs.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-xs px-3 py-1.5 font-medium text-sm ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
className,
)}
{...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
{...props}
packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+5 -5
View File
@@ -439,7 +439,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name="signingOrder"
render={({ field }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -481,7 +481,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name="allowDictateNextSigner"
render={({ field: { value, ...field } }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -570,8 +570,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name={`signers.${index}.signingOrder`}
render={({ field }) => (
<FormItem className="col-span-2 mt-auto flex items-center gap-x-1 space-y-0">
<GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
<FormItem className="twv3-space-y-0 col-span-2 mt-auto flex items-center gap-x-1">
<GripVerticalIcon className="h-5 w-5 shrink-0 opacity-40" />
<FormControl>
<Input
type="number"
@@ -772,7 +772,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
/>
<div
className={cn('mt-2 flex flex-row items-center space-x-4', {
className={cn('twv3-space-x-4 mt-2 flex flex-row items-center', {
'mt-4': showAdvancedSettings,
})}
>
packages/ui/primitives/template-flow/add-template-settings.tsx
+8 -8
View File
@@ -183,7 +183,7 @@ export const AddTemplateSettingsFormPartial = ({
)}
<Form {...form}>
<fieldset className="flex h-full flex-col space-y-6" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-6 flex h-full flex-col" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="title"
@@ -213,7 +213,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
Controls the language for the document, including the language to be used for email
notifications, and the final certificate that is generated and attached to the document.
</TooltipContent>
@@ -333,7 +333,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document Distribution Method</Trans>
@@ -346,7 +346,7 @@ export const AddTemplateSettingsFormPartial = ({
</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Email</strong> - The recipient will be emailed the document to sign, approve, etc.
@@ -454,12 +454,12 @@ export const AddTemplateSettingsFormPartial = ({
{distributionMethod === DocumentDistributionMethod.EMAIL && (
<Accordion type="multiple">
<AccordionItem value="email-options" className="border-none">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Email Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-4 text-muted-foreground text-sm leading-relaxed [&>div]:pb-0">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
{organisation.organisationClaim.flags.emailDomains && (
<FormField
control={form.control}
@@ -588,12 +588,12 @@ export const AddTemplateSettingsFormPartial = ({
<Accordion type="multiple">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-4 text-muted-foreground text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
<FormField
control={form.control}
name="externalId"
packages/ui/primitives/textarea.tsx
+2 -2
View File
@@ -8,10 +8,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
return (
<textarea
className={cn(
'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
ref={ref}
packages/ui/primitives/toast.tsx
+3 -3
View File
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva(
'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between twv3-space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
{
variants: {
variant: {
@@ -55,7 +55,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
className,
)}
{...props}
@@ -72,7 +72,7 @@ const ToastClose = React.forwardRef<
ref={ref}
data-testid="toast-close"
className={cn(
'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50 md:opacity-0 group-hover:md:opacity-100',
'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50 md:opacity-0 group-hover:md:opacity-100',
className,
)}
toast-close=""
packages/ui/primitives/toggle.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
const toggleVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
{
variants: {
variant: {
packages/ui/styles/theme.css
+76 -8
View File
@@ -1,6 +1,65 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* biome-ignore-all lint/suspicious/noDuplicateProperties: twv3-space-* lists both --value(number) and --value([length]) forms; v4 keeps only one per class. */
@import "tailwindcss";
@config "../tailwind.config.cjs";
@custom-variant dark (&:is(.dark:not(.dark-mode-disabled) *));
/* `print:` variant; defining it as a JS `screen` breaks the `container` utility under v4. */
@custom-variant print (@media print);
/* Safelist for the runtime recipient color classes (v4 ignores the JS config `safelist`). */
@source inline("{ring,bg,border,text}-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("hover:bg-recipient-{green,blue,purple,orange,yellow,pink}/{15,30}");
@source inline("active:bg-recipient-{green,blue,purple,orange,yellow,pink}/15");
@source inline("hover:border-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("group-hover:text-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("group-hover/field-item:bg-recipient-{green,blue,purple,orange,yellow,pink}");
/* Restore the v3 `ring` defaults (v4 changed them to 1px / currentColor). */
@theme {
--default-ring-width: 3px;
--default-ring-color: hsl(var(--ring));
}
/*
* v3-compatible `space-*` utilities. v4's built-in `space-*` uses a zero-specificity
* `:where()` selector that lets child margins collapse the gaps; these reproduce the v3
* selector/edges so existing layouts keep working. Pair with `twv3-space-{x,y}-reverse`.
*/
@utility twv3-space-y-* {
& > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-y-reverse)));
margin-top: calc(--value([length]) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(--spacing(--value(number)) * var(--tw-space-y-reverse));
margin-bottom: calc(--value([length]) * var(--tw-space-y-reverse));
}
}
@utility twv3-space-x-* {
& > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-x-reverse)));
margin-left: calc(--value([length]) * calc(1 - var(--tw-space-x-reverse)));
margin-right: calc(--spacing(--value(number)) * var(--tw-space-x-reverse));
margin-right: calc(--value([length]) * var(--tw-space-x-reverse));
}
}
/* Reverse companions for the twv3-space-* utilities above (built-in ones use a different selector). */
@utility twv3-space-y-reverse {
& > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 1;
}
}
@utility twv3-space-x-reverse {
& > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 1;
}
}
@layer base {
:root,
@@ -193,6 +252,17 @@
@apply border-border;
}
/* Restore v3 preflight defaults that v4 changed. */
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
input::placeholder,
textarea::placeholder {
color: hsl(var(--muted-foreground));
}
body {
@apply bg-background text-foreground;
font-feature-settings:
@@ -209,11 +279,9 @@
* - Sets page size to A4
* - Sets the font size to 12pt
*/
.print-provider {
@page {
margin: 1in;
size: A4;
}
@page {
margin: 1in;
size: A4;
}
.gradient-border-mask::before {
packages/ui/tailwind.config.cjs
+1 -2
View File
@@ -1,9 +1,8 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const baseConfig = require('@documenso/tailwind-config');
const { RECIPIENT_DYNAMIC_CLASS } = require('./lib/recipient-colors');
// Recipient dynamic classes are safelisted via `@source inline(...)` in theme.css (v4 ignores JS `safelist`).
module.exports = {
presets: [baseConfig],
content: [...baseConfig.content, './primitives/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
safelist: [RECIPIENT_DYNAMIC_CLASS],
};