Publish DevRunbook source

packages/ui/src/primitives/surface.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+import { classNames } from '../lib/class-names'
+
+export type SurfaceElement = 'div' | 'section' | 'article' | 'aside'
+export type SurfaceElevation = 'flat' | 'raised' | 'overlay'
+
+export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+  readonly as?: SurfaceElement
+  readonly elevation?: SurfaceElevation
+  readonly children: ReactNode
+}
+
+export function Surface({
+  as: Component = 'div',
+  elevation = 'flat',
+  className,
+  children,
+  ...props
+}: SurfaceProps) {
+  return (
+    <Component
+      className={classNames(
+        'drb-surface',
+        `drb-surface--${elevation}`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}