fix(ui): Bump cva and minor type fixes (#5818)

**What**
- Bumps `class-variance-authority` to new beta version - `cva@beta`.
- Updates all usages of `cva` to new API.
- Clear up the naming of types in `usePrompt`

**Why**
- A bug in how `class-variance-authority` exported its types mean that we were relying on patching the package to ensure that the correct types made it into the build of our UI package. This was important to ensure intellisense for component variants, such as `<Button size="large" />`. Previously in the UI monorepo, having the patch was enough to ensure that the correct types made it into the build, but that was not the case after we moved the design system to the core repo. The issue with types is fixed in the `@1` version of `cva` which is currently in beta. I have pinpointed the version to the current beta version to ensure stability despite the package currently being in beta.
This commit is contained in:
Kasper Fabricius Kristensen
2023-12-07 21:13:44 +01:00
committed by GitHub
parent 85cda7ce37
commit 591ba2388d
21 changed files with 228 additions and 305 deletions

View File

@@ -1,41 +1,37 @@
"use client"
import * as Primitives from "@radix-ui/react-switch"
import { VariantProps, cva } from "class-variance-authority"
import { VariantProps, cva } from "cva"
import * as React from "react"
import { clx } from "@/utils/clx"
const switchVariants = cva(
"bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
{
variants: {
size: {
small: "h-[16px] w-[28px]",
base: "h-[18px] w-[32px]",
},
const switchVariants = cva({
base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
variants: {
size: {
small: "h-[16px] w-[28px]",
base: "h-[18px] w-[32px]",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
const thumbVariants = cva(
"bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
{
variants: {
size: {
small:
"h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
},
const thumbVariants = cva({
base: "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
variants: {
size: {
small:
"h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
interface SwitchProps
extends Omit<