Extract pilot skin-aware component recipes
This commit is contained in:
@@ -20,7 +20,7 @@ function Spinner() {
|
||||
{...createSlot("icon")}
|
||||
aria-hidden="true"
|
||||
animate={{ opacity: 1, rotate: 0, scale: 1 }}
|
||||
className="size-4 rounded-full border-2 border-current border-r-transparent animate-spin"
|
||||
className="size-4 rounded-[var(--ui-spinner-radius)] [border-width:var(--ui-spinner-border-width)] border-current border-r-transparent animate-spin"
|
||||
exit={{ opacity: 0, rotate: 90, scale: 0.7 }}
|
||||
initial={{ opacity: 0, rotate: -90, scale: 0.7 }}
|
||||
transition={{
|
||||
@@ -74,14 +74,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
|
||||
<motion.span
|
||||
animate={
|
||||
prefersReducedMotion || isDisabled
|
||||
? { opacity: 0, x: "-120%" }
|
||||
? { x: "-120%" }
|
||||
: isHovered
|
||||
? { opacity: 0.75, x: "115%" }
|
||||
: { opacity: 0, x: "-120%" }
|
||||
? { x: "115%" }
|
||||
: { x: "-120%" }
|
||||
}
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 left-0 w-1/2 rounded-[inherit] bg-[linear-gradient(120deg,transparent_0%,rgba(255,255,255,0.32)_45%,transparent_100%)] mix-blend-screen"
|
||||
initial={false}
|
||||
className="pointer-events-none absolute inset-y-0 left-0 w-1/2 rounded-[inherit] bg-[var(--ui-button-sheen-gradient)] opacity-[var(--ui-button-sheen-opacity)] [mix-blend-mode:var(--ui-button-sheen-mix)]"
|
||||
initial={{ x: "-120%" }}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0.01 : 0.55,
|
||||
ease: [0.16, 1, 0.3, 1]
|
||||
|
||||
@@ -4,7 +4,8 @@ import { getMotionRecipeClassNames } from "../lib/motion";
|
||||
export const buttonVariants = cva(
|
||||
[
|
||||
"relative isolate inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap",
|
||||
"rounded-[var(--radius-sm)] border font-medium select-none",
|
||||
"rounded-[var(--ui-button-radius)] [border-width:var(--ui-button-border-width)] font-medium select-none",
|
||||
"[transition-duration:var(--ui-button-transition-duration,var(--dur-fast))]",
|
||||
"outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
|
||||
"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
||||
"disabled:pointer-events-none disabled:opacity-55",
|
||||
@@ -20,15 +21,15 @@ export const buttonVariants = cva(
|
||||
},
|
||||
variant: {
|
||||
primary:
|
||||
"border-transparent bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-xs)]",
|
||||
"border-[var(--ui-button-primary-border)] bg-[var(--ui-button-primary-bg)] text-[var(--ui-button-primary-fg)] shadow-[var(--ui-button-primary-shadow)] hover:bg-[var(--ui-button-primary-hover-bg)]",
|
||||
secondary:
|
||||
"border-[var(--color-border-strong)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
|
||||
"border-[var(--ui-button-secondary-border)] bg-[var(--ui-button-secondary-bg)] text-[var(--ui-button-secondary-fg)] shadow-[var(--ui-button-secondary-shadow)] hover:bg-[var(--ui-button-secondary-hover-bg)]",
|
||||
ghost:
|
||||
"border-transparent bg-transparent text-[var(--color-foreground)] hover:bg-[var(--color-surface)]",
|
||||
"border-[var(--ui-button-ghost-border)] bg-[var(--ui-button-ghost-bg)] text-[var(--ui-button-ghost-fg)] shadow-[var(--ui-button-ghost-shadow)] hover:bg-[var(--ui-button-ghost-hover-bg)]",
|
||||
subtle:
|
||||
"border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)] shadow-[var(--shadow-xs)]",
|
||||
"border-[var(--ui-button-subtle-border)] bg-[var(--ui-button-subtle-bg)] text-[var(--ui-button-subtle-fg)] shadow-[var(--ui-button-subtle-shadow)] hover:bg-[var(--ui-button-subtle-hover-bg)]",
|
||||
destructive:
|
||||
"border-transparent bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)] shadow-[var(--shadow-xs)]"
|
||||
"border-[var(--ui-button-destructive-border)] bg-[var(--ui-button-destructive-bg)] text-[var(--ui-button-destructive-fg)] shadow-[var(--ui-button-destructive-shadow)] hover:bg-[var(--ui-button-destructive-hover-bg)]"
|
||||
},
|
||||
loading: {
|
||||
false: "",
|
||||
|
||||
@@ -3,22 +3,23 @@ import { getMotionRecipeClassNames } from "../lib/motion";
|
||||
|
||||
export const cardVariants = cva(
|
||||
[
|
||||
"rounded-[var(--radius-lg)] border text-[var(--color-card-foreground)]",
|
||||
"bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
|
||||
"rounded-[var(--ui-card-radius)] border text-[var(--color-card-foreground)]",
|
||||
"bg-[var(--ui-card-bg)] shadow-[var(--ui-card-shadow)] [border-width:var(--ui-card-border-width)]",
|
||||
getMotionRecipeClassNames("transition", "ring")
|
||||
],
|
||||
{
|
||||
variants: {
|
||||
tone: {
|
||||
default: "border-[var(--color-border)]",
|
||||
default:
|
||||
"border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)]",
|
||||
subtle:
|
||||
"border-[color-mix(in_oklch,var(--color-border)_86%,transparent)] bg-[var(--color-surface)] shadow-[var(--shadow-xs)]",
|
||||
"border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
|
||||
accent:
|
||||
"border-[color-mix(in_oklch,var(--color-primary)_26%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
|
||||
"border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
|
||||
},
|
||||
interactive: {
|
||||
false: "",
|
||||
true: "hover:-translate-y-[2px] hover:shadow-[var(--shadow-md)]"
|
||||
true: "hover:translate-y-[var(--ui-card-hover-translate)] hover:shadow-[var(--ui-card-hover-shadow)]"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -45,7 +45,7 @@ export const DialogContent = forwardRef<
|
||||
{children}
|
||||
<DialogPrimitive.Close
|
||||
aria-label="Close dialog"
|
||||
className="absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)] outline-none transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
|
||||
className="absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-[var(--ui-control-radius)] border border-transparent text-[var(--color-muted-foreground)] outline-none transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:border-[var(--ui-control-border)] hover:bg-[var(--ui-control-bg)] hover:text-[var(--color-foreground)] hover:shadow-[var(--ui-control-shadow)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-panel-bg)]"
|
||||
>
|
||||
<span aria-hidden="true" className="text-lg leading-none">
|
||||
×
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cva } from "../lib/cva";
|
||||
|
||||
export const dialogOverlayVariants = cva([
|
||||
"fixed inset-0 z-50 bg-[var(--color-overlay)] backdrop-blur-[2px]",
|
||||
"fixed inset-0 z-50 bg-[var(--ui-panel-overlay-bg)] backdrop-blur-[var(--ui-panel-overlay-blur)]",
|
||||
"data-[state=open]:motion-overlay-enter data-[state=closed]:motion-overlay-exit"
|
||||
]);
|
||||
|
||||
@@ -9,7 +9,8 @@ export const dialogContentVariants = cva(
|
||||
[
|
||||
"fixed left-1/2 top-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-5",
|
||||
"w-[min(calc(100vw-2rem),40rem)] max-h-[calc(100vh-2rem)] overflow-y-auto",
|
||||
"rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
|
||||
"rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-6 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
|
||||
"[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
|
||||
"data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
|
||||
],
|
||||
{
|
||||
|
||||
@@ -3,12 +3,13 @@ import { getMotionRecipeClassNames } from "../lib/motion";
|
||||
|
||||
export const inputVariants = cva(
|
||||
[
|
||||
"flex w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)]",
|
||||
"text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
|
||||
"flex w-full min-w-0 rounded-[var(--ui-input-radius)] border bg-[var(--ui-input-bg)]",
|
||||
"text-[var(--ui-input-fg)] shadow-[var(--ui-input-shadow)] outline-none",
|
||||
"[border-width:var(--ui-input-border-width)] border-[var(--ui-input-border)] backdrop-blur-[var(--ui-input-backdrop-blur)]",
|
||||
"placeholder:text-[var(--color-muted-foreground)]",
|
||||
"focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
||||
"disabled:cursor-not-allowed disabled:bg-[var(--color-surface)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
|
||||
"read-only:bg-[var(--color-surface)] read-only:text-[var(--color-muted-foreground)]",
|
||||
"disabled:cursor-not-allowed disabled:bg-[var(--ui-input-disabled-bg)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
|
||||
"read-only:bg-[var(--ui-input-readonly-bg)] read-only:text-[var(--color-muted-foreground)]",
|
||||
"aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
|
||||
"aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
|
||||
getMotionRecipeClassNames("ring")
|
||||
|
||||
@@ -6,21 +6,20 @@ import { createDataAttributes, createSlot } from "../lib/contracts";
|
||||
|
||||
const skeletonVariants = cva(
|
||||
[
|
||||
"relative overflow-hidden rounded-[var(--radius-sm)] bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
|
||||
"before:absolute before:inset-0 before:bg-[linear-gradient(110deg,transparent_0%,rgba(255,255,255,0.48)_42%,transparent_72%)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]"
|
||||
"relative overflow-hidden rounded-[var(--ui-skeleton-radius)] bg-[var(--ui-skeleton-bg)]",
|
||||
"before:absolute before:inset-0 before:bg-[var(--ui-skeleton-gradient)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]"
|
||||
],
|
||||
{
|
||||
variants: {
|
||||
shape: {
|
||||
line: "h-4 w-full",
|
||||
block: "h-24 w-full rounded-[var(--radius-md)]",
|
||||
pill: "h-10 w-32 rounded-[var(--radius-full)]",
|
||||
avatar: "size-12 rounded-[var(--radius-full)]"
|
||||
block: "h-24 w-full rounded-[var(--ui-skeleton-block-radius)]",
|
||||
pill: "h-10 w-32 rounded-[var(--ui-skeleton-pill-radius)]",
|
||||
avatar: "size-12 rounded-[var(--ui-skeleton-avatar-radius)]"
|
||||
},
|
||||
tone: {
|
||||
default:
|
||||
"bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
|
||||
muted: "bg-[var(--color-muted)]"
|
||||
default: "bg-[var(--ui-skeleton-bg)]",
|
||||
muted: "bg-[var(--ui-skeleton-muted-bg)]"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -3,17 +3,18 @@ import { getMotionRecipeClassNames } from "../lib/motion";
|
||||
|
||||
export const switchVariants = cva(
|
||||
[
|
||||
"inline-flex h-7 w-12 shrink-0 items-center rounded-full border border-transparent bg-[var(--color-border)] shadow-[var(--shadow-xs)] outline-none",
|
||||
"inline-flex h-7 w-12 shrink-0 items-center rounded-[var(--ui-switch-track-radius)] border bg-[var(--ui-switch-track-bg)] shadow-[var(--ui-switch-track-shadow)] outline-none",
|
||||
"[border-width:var(--ui-switch-track-border-width)] border-[var(--ui-switch-track-border)]",
|
||||
"transition-[background-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
|
||||
"focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
||||
"data-[state=checked]:bg-[var(--color-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
|
||||
"data-[state=checked]:bg-[var(--ui-switch-track-checked-bg)] data-[state=checked]:border-[var(--ui-switch-track-checked-border)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
|
||||
"aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
|
||||
getMotionRecipeClassNames("ring")
|
||||
]
|
||||
);
|
||||
|
||||
export const switchThumbVariants = cva([
|
||||
"pointer-events-none block size-5 rounded-full bg-white shadow-[var(--shadow-xs)]",
|
||||
"pointer-events-none block size-5 rounded-[var(--ui-switch-thumb-radius)] bg-[var(--ui-switch-thumb-bg)] shadow-[var(--ui-switch-thumb-shadow)]",
|
||||
"translate-x-0.5 transition-transform duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
|
||||
"data-[state=checked]:translate-x-[1.55rem]"
|
||||
]);
|
||||
|
||||
Reference in New Issue
Block a user