Initial commit

src/components/ds/Surface.jsx

@@ -0,0 +1,72 @@
+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 };