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,71 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { createAccentVariables, type RgbTuple } from "@nodedc/ui-core";
+import { cn } from "./cn";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "accent";
+export type ButtonSize = "default" | "compact";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  width?: "auto" | "full";
+  accent?: RgbTuple;
+  icon?: ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
+    variant = "secondary",
+    size = "default",
+    width = "auto",
+    accent,
+    icon,
+    className,
+    children,
+    style,
+    type = "button",
+    ...props
+  }, ref) {
+    const accentStyle = accent ? createAccentVariables(accent) : undefined;
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn("nodedc-button", className)}
+        data-variant={variant}
+        data-size={size === "default" ? undefined : size}
+        data-width={width === "auto" ? undefined : width}
+        style={accentStyle ? { ...accentStyle, ...style } : style}
+        {...props}
+      >
+        {icon ? <span className="nodedc-button__icon" aria-hidden="true">{icon}</span> : null}
+        {children}
+      </button>
+    );
+  });
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  shape?: "circle" | "rounded";
+}
+
+export function IconButton({
+  label,
+  shape = "circle",
+  className,
+  children,
+  type = "button",
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn("nodedc-icon-button", className)}
+      data-shape={shape === "circle" ? undefined : shape}
+      aria-label={label}
+      title={label}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}