@sublimee/surfaces 0.1.1

package/src/surface.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+
+/** Available surface elevation variants */
+export type SurfaceVariant = 'base' | 'elevated' | 'higher' | 'inset' | 'extruded' | 'glass';
+
+/** Available padding sizes */
+export type SurfacePadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Available border radius sizes */
+export type SurfaceRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+/** Valid HTML element names for polymorphic rendering */
+export type SurfaceElement = 'div' | 'article' | 'section' | 'aside' | 'main' | 'header' | 'footer' | 'nav';
+
+/** Props for the Surface component */
+export interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Visual elevation variant. @default 'elevated' */
+  variant?: SurfaceVariant;
+  /** Internal padding. @default 'md' */
+  padding?: SurfacePadding;
+  /** Border radius. @default 'lg' */
+  radius?: SurfaceRadius;
+  /** Show border. @default false */
+  border?: boolean;
+  /** Enable interactive hover shadow lift. @default true */
+  interactive?: boolean;
+  /** HTML element to render. @default 'div' */
+  as?: SurfaceElement;
+  /** Child elements */
+  children?: React.ReactNode;
+}
+
+/** Maps padding sizes to CSS custom properties */
+const paddingMap: Record<SurfacePadding, string> = {
+  none: '0',
+  sm: 'var(--sublime-space-3)',   // 12px
+  md: 'var(--sublime-space-card-padding)', // 24px (space-6)
+  lg: 'var(--sublime-space-8)',   // 32px
+  xl: 'var(--sublime-space-10)',  // 40px
+};
+
+/** Maps radius sizes to CSS custom properties */
+const radiusMap: Record<SurfaceRadius, string> = {
+  none: 'var(--sublime-radius-none)',
+  sm: 'var(--sublime-radius-sm)',
+  md: 'var(--sublime-radius-md)',
+  lg: 'var(--sublime-radius-lg)',
+  xl: 'var(--sublime-radius-xl)',
+  full: 'var(--sublime-radius-full)',
+};
+
+/**
+ * Surface component - A semantic container that wraps content with
+ * elevation, padding, and visual boundaries.
+ *
+ * @example
+ * ```tsx
+ * <Surface variant="elevated" padding="lg">
+ *   <h2>Card Title</h2>
+ *   <p>Card content</p>
+ * </Surface>
+ * ```
+ */
+export const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>((props, ref) => {
+  const {
+    variant = 'elevated',
+    padding = 'md',
+    radius = 'lg',
+    border = false,
+    interactive = true,
+    as: Component = 'div',
+    children,
+    className = '',
+    style,
+    ...rest
+  } = props;
+
+  // Build CSS classes
+  const classes = [
+    'sublime-surface',
+    `sublime-surface--${variant}`,
+    interactive ? 'sublime-surface--interactive' : '',
+    border ? 'sublime-surface--border' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Build inline styles
+  const inlineStyles: React.CSSProperties = {
+    padding: paddingMap[padding],
+    borderRadius: radiusMap[radius],
+    ...style,
+  };
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: inlineStyles,
+      ...rest,
+    },
+    children
+  );
+});
+
+Surface.displayName = 'Surface';