Make application shell components package-native

2026-07-10 12:41:12 +03:00
parent 9261d3af36
commit ebae662b52
52 changed files with 1036 additions and 185 deletions
@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn.js";
+
+export interface SettingsCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function SettingsCard({ eyebrow, title, description, actions, children, className, ...props }: SettingsCardProps) {
+  return (
+    <section className={cn("nodedc-settings-card", className)} {...props}>
+      <header className="nodedc-settings-card__head">
+        <div className="nodedc-settings-card__titles">
+          {eyebrow ? <span>{eyebrow}</span> : null}
+          <h2>{title}</h2>
+          {description ? <p>{description}</p> : null}
+        </div>
+        {actions ? <div className="nodedc-settings-card__actions">{actions}</div> : null}
+      </header>
+      <div className="nodedc-settings-card__body">{children}</div>
+    </section>
+  );
+}
+
+export interface SwitchProps {
+  checked: boolean;
+  label: string;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export function Switch({ checked, label, disabled = false, onChange }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      className="nodedc-switch"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+    >
+      <span className="nodedc-switch__track" aria-hidden="true"><span /></span>
+      <span>{label}</span>
+    </button>
+  );
+}