67 lines
1.5 KiB
Svelte
67 lines
1.5 KiB
Svelte
<script lang="ts" module>
|
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
import { cn, type WithElementRef } from '$lib/utils.js';
|
|
import type { CladdColor } from '../button/button.svelte';
|
|
|
|
export type SurfaceVariant =
|
|
| 'solid'
|
|
| 'gradient'
|
|
| 'solid-fill'
|
|
| 'gradient-fill'
|
|
| 'transparent';
|
|
|
|
export type SurfaceProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
|
|
as?: string;
|
|
variant?: SurfaceVariant;
|
|
outline?: boolean;
|
|
hoverable?: boolean;
|
|
clickable?: boolean;
|
|
level?: 1 | 2 | 3 | 4 | 5;
|
|
color?: CladdColor;
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
let {
|
|
ref = $bindable(null),
|
|
as = 'div',
|
|
variant = 'solid',
|
|
outline = false,
|
|
hoverable = false,
|
|
clickable = false,
|
|
level,
|
|
color,
|
|
class: className,
|
|
children,
|
|
...restProps
|
|
}: SurfaceProps = $props();
|
|
|
|
const variantClass: Record<SurfaceVariant, string> = {
|
|
solid: 'cladd-surface',
|
|
gradient: 'cladd-surface cladd-gradient',
|
|
'solid-fill': 'cladd-surface cladd-fill',
|
|
'gradient-fill': 'cladd-surface cladd-gradient-fill',
|
|
transparent: 'cladd-ghost'
|
|
};
|
|
</script>
|
|
|
|
<!-- Nested surfaces step one level deeper automatically; `level` pins it. -->
|
|
<svelte:element
|
|
this={as}
|
|
bind:this={ref}
|
|
data-slot="surface"
|
|
class={cn(
|
|
variantClass[variant],
|
|
outline && 'cladd-outline',
|
|
hoverable && 'cladd-hoverable',
|
|
clickable && 'cladd-clickable',
|
|
level && `cladd-level-${level}`,
|
|
color && `cladd-color-${color}`,
|
|
'text-cladd-fg',
|
|
className
|
|
)}
|
|
{...restProps}
|
|
>
|
|
{@render children?.()}
|
|
</svelte:element>
|