Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn";
+
+export type GlassTone = "default" | "strong" | "soft";
+export type GlassRadius = "card" | "panel" | "modal";
+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>
+  );
+}
+