55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { cn } from "./cn.js";
|
|
|
|
export type GlassTone = "default" | "strong" | "soft";
|
|
export type GlassRadius = "card" | "panel" | "modal" | "pill";
|
|
export type GlassPadding = "none" | "sm" | "md" | "lg";
|
|
|
|
export interface GlassSurfaceProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
tone?: GlassTone;
|
|
radius?: GlassRadius;
|
|
padding?: GlassPadding;
|
|
materialRim?: boolean;
|
|
}
|
|
|
|
export function GlassSurface({
|
|
children,
|
|
className,
|
|
tone = "default",
|
|
radius = "card",
|
|
padding = "none",
|
|
materialRim = true,
|
|
...props
|
|
}: GlassSurfaceProps) {
|
|
return (
|
|
<div
|
|
className={cn("nodedc-glass", materialRim && "nodedc-material-rim", className)}
|
|
data-tone={tone}
|
|
data-radius={radius}
|
|
data-padding={padding === "none" ? undefined : padding}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface GlassMaterialSurfaceProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/** Canonical modal/Inspector material. General application panels must not use it. */
|
|
export function GlassMaterialSurface({ children, className, ...props }: GlassMaterialSurfaceProps) {
|
|
return <div className={cn("nodedc-glass-material", className)} {...props}>{children}</div>;
|
|
}
|
|
|
|
export interface MapGlassSurfaceProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/** Light translucent surface used only over Cesium/map imagery. */
|
|
export function MapGlassSurface({ children, className, ...props }: MapGlassSurfaceProps) {
|
|
return <div className={cn("nodedc-map-glass", className)} {...props}>{children}</div>;
|
|
}
|