73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
import * as React from 'react';
|
|
import { cva } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* Surface — the canonical container in the design system.
|
|
*
|
|
* Every card, panel and boxed region in the app is a Surface, so radius,
|
|
* border, elevation and hover behaviour can only be defined in one place.
|
|
* `glass` is the default because the app sits on a gradient-mesh background
|
|
* that solid white cards flatten.
|
|
*/
|
|
const surfaceVariants = cva(
|
|
'transition-all duration-base ease-out',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
glass: 'glass-card border border-white/60',
|
|
solid: 'bg-surface border border-border',
|
|
subtle: 'bg-surface-subtle border border-border',
|
|
sunken: 'bg-surface-sunken border border-transparent',
|
|
outline: 'bg-transparent border border-border',
|
|
/* The one dark surface — the Owliver panel */
|
|
panel: 'panel-surface border border-panel-border text-panel-foreground',
|
|
},
|
|
elevation: {
|
|
none: 'shadow-none',
|
|
xs: 'shadow-xs',
|
|
sm: 'shadow-sm',
|
|
md: 'shadow-md',
|
|
lg: 'shadow-lg',
|
|
xl: 'shadow-xl',
|
|
},
|
|
radius: {
|
|
md: 'rounded-lg',
|
|
lg: 'rounded-xl',
|
|
xl: 'rounded-2xl',
|
|
},
|
|
padding: {
|
|
none: 'p-0',
|
|
sm: 'p-4',
|
|
default: 'p-5',
|
|
lg: 'p-6',
|
|
},
|
|
interactive: {
|
|
true: 'cursor-pointer hover:shadow-lg hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60 focus-visible:ring-offset-2',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'glass',
|
|
elevation: 'sm',
|
|
radius: 'xl',
|
|
padding: 'default',
|
|
},
|
|
}
|
|
);
|
|
|
|
const Surface = React.forwardRef(
|
|
({ className, variant, elevation, radius, padding, interactive, as, ...props }, ref) => {
|
|
const Comp = as || 'div';
|
|
return (
|
|
<Comp
|
|
ref={ref}
|
|
className={cn(surfaceVariants({ variant, elevation, radius, padding, interactive }), className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
Surface.displayName = 'Surface';
|
|
|
|
export { Surface, surfaceVariants };
|