graphen 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/example/styles/_docs.scss

@@ -81,7 +81,7 @@ body.docs-body {
   top: 0;
   z-index: 30;
   display: grid;
-  grid-template-columns: 280px 1fr auto;
+  grid-template-columns: 1fr auto;
   align-items: center;
   height: 56px;
   padding: 0 24px;
@@ -112,41 +112,6 @@ body.docs-body {
   }
 }
 
-.docs-search {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  max-width: 440px;
-  height: 34px;
-  padding: 0 12px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-muted);
-  font-size: 13px;
-  cursor: text;
-  transition: border-color 0.15s, background 0.15s;
-
-  &:hover { border-color: var(--border-strong); }
-
-  .kbd {
-    margin-left: auto;
-    display: inline-flex;
-    gap: 2px;
-  }
-
-  .kbd > span {
-    padding: 1px 5px;
-    background: var(--bg-elev);
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-subtle);
-  }
-}
-
 .docs-tools {
   display: flex;
   align-items: center;
@@ -691,6 +656,22 @@ body.docs-body {
 .docs-col { display: flex; flex-direction: column; gap: 12px; }
 .docs-spacer-y { height: 16px; }
 
+.docs-dialog-content {
+  max-width: 320px;
+
+  h4 {
+    margin: 0 0 8px;
+    font-size: 17px;
+    font-weight: 500;
+  }
+
+  p {
+    margin: 0 0 18px;
+    color: var(--text-muted);
+    font-size: 13.5px;
+  }
+}
+
 .docs-card-eyebrow {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -716,15 +697,12 @@ body.docs-body {
 @media (max-width: 1180px) {
   .docs-app { grid-template-columns: 240px minmax(0, 1fr); }
   .docs-toc { display: none; }
-  .docs-topbar { grid-template-columns: 240px 1fr auto; }
   .docs-content { padding: 40px 40px 80px; }
 }
 
 @media (max-width: 760px) {
   .docs-app { grid-template-columns: 1fr; }
   .docs-sidebar { display: none; }
-  .docs-topbar { grid-template-columns: 1fr auto; }
-  .docs-search { display: none; }
   .docs-content { padding: 28px 20px 60px; }
   .docs-comp-index { grid-template-columns: repeat(2, 1fr); }
   .docs-title { font-size: 34px; }

package/src/example.tsx

@@ -5,6 +5,7 @@ import {
   Badge,
   Button,
   Card,
+  Dialog,
   Dropdown,
   Input,
   Link,
@@ -150,6 +151,7 @@ const NAV = [
       { id: "separator", label: "Separator" },
       { id: "input", label: "Input" },
       { id: "dropdown", label: "Dropdown" },
+      { id: "dialog", label: "Dialog" },
       { id: "card", label: "Card" },
       { id: "badge", label: "Badge" },
     ],
@@ -169,6 +171,7 @@ const TOC = [
   ["separator", "Separator"],
   ["input", "Input"],
   ["dropdown", "Dropdown"],
+  ["dialog", "Dialog"],
   ["card", "Card"],
   ["badge", "Badge"],
 ] as const;
@@ -362,6 +365,7 @@ function App() {
   const [activeId, setActiveId] = useState<string>("introduction");
   const [installCopied, setInstallCopied] = useState(false);
   const [dropdownValue, setDropdownValue] = useState("red");
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
@@ -419,21 +423,6 @@ function App() {
           <span>graphen</span>
           <span className="ver">{VERSION}</span>
         </a>
-        <div
-          className="docs-search"
-          role="search"
-          aria-label="Search documentation"
-        >
-          <StrokeIcon size={14} stroke={2}>
-            <circle cx="11" cy="11" r="7" />
-            <path d="m20 20-3.5-3.5" />
-          </StrokeIcon>
-          <span>Search components, tokens…</span>
-          <span className="kbd">
-            <span>⌘</span>
-            <span>K</span>
-          </span>
-        </div>
         <div className="docs-tools">
           <button
             type="button"
@@ -865,8 +854,50 @@ function App() {
             </Demo>
           </section>
 
-          <section className="docs-section" id="card">
+          <section className="docs-section" id="dialog">
             <div className="docs-section-eyebrow">Components / 08</div>
+            <h2 className="docs-section-title">Dialog</h2>
+            <p className="docs-section-desc">
+              A fixed overlay surface for focused messages and short actions.
+              Render it conditionally and keep a clear dismissal path.
+            </p>
+            <Demo
+              code={`const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+<Button className="gc-btn--primary" onClick={() => setIsDialogOpen(true)}>
+  Open dialog
+</Button>
+
+{isDialogOpen && (
+  <Dialog isOverlay>
+    <h4>Publish changes?</h4>
+    <p>This action will update the public example bundle.</p>
+    <Button onClick={() => setIsDialogOpen(false)}>Close</Button>
+  </Dialog>
+)}`}
+            >
+              <Button
+                className="gc-btn--primary"
+                onClick={() => setIsDialogOpen(true)}
+              >
+                Open dialog
+              </Button>
+              {isDialogOpen && (
+                <Dialog isOverlay>
+                  <div className="docs-dialog-content">
+                    <h4>Publish changes?</h4>
+                    <p>This action will update the public example bundle.</p>
+                    <Button onClick={() => setIsDialogOpen(false)}>
+                      Close
+                    </Button>
+                  </div>
+                </Dialog>
+              )}
+            </Demo>
+          </section>
+
+          <section className="docs-section" id="card">
+            <div className="docs-section-eyebrow">Components / 09</div>
             <h2 className="docs-section-title">Card</h2>
             <p className="docs-section-desc">
               A single-content surface. Don&apos;t nest cards. If a card has
@@ -905,7 +936,7 @@ function App() {
           </section>
 
           <section className="docs-section" id="badge">
-            <div className="docs-section-eyebrow">Components / 09</div>
+            <div className="docs-section-eyebrow">Components / 10</div>
             <h2 className="docs-section-title">Badge</h2>
             <p className="docs-section-desc">
               Small status pills. Use sparingly — one badge per row, never