graphen 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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/components/CoverEmpty/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import classNames from "classnames";
+import { IconImg } from "../Icons";
+
+type Props = {
+  className?: string;
+};
+
+function CoverEmpty({ className = "" }: Props) {
+  const classes = classNames("gc-cover-empty", className);
+
+  return (
+    <span className={classes}>
+      <IconImg className="gc-cover-empty__icon" />
+    </span>
+  );
+}
+
+export default CoverEmpty;

package/src/components/CoverEmpty/styles/_styles.scss

@@ -0,0 +1,17 @@
+.gc-cover-empty {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: $color-silver;
+
+  &__icon {
+    width: 38px;
+    height: 38px;
+    stroke: currentcolor;
+    fill: none;
+    stroke-width: 1.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

package/src/components/Icons/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+type IconProps = {
+  className?: string;
+};
+
+export const IconSearch = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M21 21l-4.3-4.3" />
+  </svg>
+);
+
+export const IconEdit = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+  </svg>
+);
+
+export const IconTrash = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M3 6h18" />
+    <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
+    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+  </svg>
+);
+
+export const IconPlus = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+export const IconRefresh = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+    <path d="M21 3v6h-6" />
+  </svg>
+);
+
+export const IconClock = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7v5l3 2" />
+  </svg>
+);
+
+export const IconImg = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <path d="M21 15l-5-5L5 21" />
+  </svg>
+);
+
+export const IconMail = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="M3 7l9 6 9-6" />
+  </svg>
+);
+
+export const IconCheck = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+);
+
+export const IconChevron = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames";
+
+export type SegmentedControlOption<TValue extends string = string> = {
+  value: TValue;
+  label: React.ReactNode;
+};
+
+type Props<TValue extends string = string> = {
+  options: ReadonlyArray<SegmentedControlOption<TValue>>;
+  value: TValue;
+  onChange: (value: TValue) => void;
+  className?: string;
+};
+
+function SegmentedControl<TValue extends string = string>({
+  options,
+  value,
+  onChange,
+  className = "",
+}: Props<TValue>) {
+  return (
+    <div
+      className={classNames("gc-segmented-control", className)}
+      role="tablist"
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="tab"
+          aria-selected={value === option.value}
+          className={classNames("gc-segmented-control__option", {
+            "gc-segmented-control__option--on": value === option.value,
+          })}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default SegmentedControl;

package/src/components/SegmentedControl/styles/_styles.scss

@@ -0,0 +1,26 @@
+.gc-segmented-control {
+  display: inline-flex;
+  background: $gb-color-component;
+  border: 1px solid $gb-color-component-dark;
+  border-radius: 999px;
+  padding: 3px;
+
+  &__option {
+    border: 0;
+    background: none;
+    padding: 7px 16px;
+    border-radius: 999px;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: $color-boulder;
+    cursor: pointer;
+
+    &--on {
+      background: $color-white;
+      color: $gb-color-primary;
+      box-shadow:
+        0 1px 2px rgb(33 43 54 / 5%),
+        0 1px 1px rgb(33 43 54 / 3%);
+    }
+  }
+}

package/src/components/Stat/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import classNames from "classnames";
+
+export type StatModifier = "gray" | "blue" | "green" | "amber" | "red";
+
+type Props = {
+  modifier?: StatModifier;
+  label: React.ReactNode;
+  value: React.ReactNode;
+  className?: string;
+};
+
+function Stat({ modifier = "gray", label, value, className = "" }: Props) {
+  return (
+    <div className={classNames("gc-stat", `gc-stat--${modifier}`, className)}>
+      <div className="gc-stat__key">
+        <span className="gc-stat__dot" />
+        {label}
+      </div>
+      <div className="gc-stat__value">{value}</div>
+    </div>
+  );
+}
+
+export default Stat;

package/src/components/Stat/styles/_styles.scss

@@ -0,0 +1,51 @@
+.gc-stat {
+  background: $color-white;
+  border: 1px solid $gb-color-component-dark;
+  border-radius: $radius-large;
+  padding: 16px 18px;
+  box-shadow:
+    0 1px 2px rgb(33 43 54 / 5%),
+    0 1px 1px rgb(33 43 54 / 3%);
+
+  &__key {
+    font-family: $gb-font-mono;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: $color-boulder;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  &__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: $color-silver;
+  }
+
+  &__value {
+    font-size: 27px;
+    font-weight: 600;
+    color: $color-mine-shaft;
+    margin-top: 8px;
+    letter-spacing: -0.02em;
+  }
+
+  &--blue &__dot {
+    background: $gb-color-primary;
+  }
+
+  &--green &__dot {
+    background: $gb-color-success;
+  }
+
+  &--amber &__dot {
+    background: #c77b12;
+  }
+
+  &--red &__dot {
+    background: $gb-color-danger;
+  }
+}

package/src/example/styles/_docs.scss

@@ -573,6 +573,38 @@ body.docs-body {
   svg { width: 18px; height: 18px; color: var(--text); }
 }
 
+.docs-iconset-cell__svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.docs-subsection-title {
+  margin: 28px 0 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.docs-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  width: 100%;
+}
+
+.docs-cover-empty-stage {
+  width: 160px;
+  height: 120px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
 .docs-type-row {
   display: grid;
   grid-template-columns: 80px 80px 1fr;
@@ -613,6 +645,72 @@ body.docs-body {
   .swatch-radius { width: 36px; height: 24px; background: var(--surface-2); border: 1px solid var(--border-strong); }
 }
 
+.docs-bp-grid {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.docs-bp-row {
+  display: grid;
+  grid-template-columns: 180px 120px 1fr;
+  gap: 16px;
+  align-items: center;
+  padding: 10px 18px;
+  border-top: 1px solid var(--border);
+
+  &:first-child { border-top: none; }
+
+  .mixin,
+  .range { font-family: var(--font-mono); font-size: 12.5px; }
+  .range { color: var(--text-muted); }
+  .vars { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
+}
+
+.docs-bp-demo {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+
+  .pill {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    min-width: 128px;
+    padding: 10px 18px;
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    opacity: 0.35;
+    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
+
+    .nm { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
+    .rg { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
+  }
+}
+
+/* The live part of the Responsiveness demo — powered by the
+   library's own gx-* mixins, not by docs-local media queries. */
+@mixin docs-bp-pill-active {
+  background: var(--accent-soft);
+  border: 1px solid var(--accent);
+  opacity: 1;
+}
+
+@include gx-phone {
+  .docs-bp-demo .pill--phone { @include docs-bp-pill-active; }
+}
+
+@include gx-tablet {
+  .docs-bp-demo .pill--tablet { @include docs-bp-pill-active; }
+}
+
+@include gx-desktop {
+  .docs-bp-demo .pill--desktop { @include docs-bp-pill-active; }
+}
+
 .docs-comp-index {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

package/src/example.scss

@@ -20,7 +20,6 @@
 @import "components/Flex/styles/styles";
 @import "components/FlexItem/styles/styles";
 @import "components/Input/styles/styles";
-@import "components/Image/styles/styles";
 @import "components/Joystick/styles/styles";
 @import "components/Led/styles/mixins";
 @import "components/Led/styles/styles";
@@ -47,6 +46,9 @@
 @import "components/Badge/styles/styles";
 @import "components/Dropdown/styles/styles";
 @import "components/Skeleton/styles/styles";
+@import "components/CoverEmpty/styles/styles";
+@import "components/SegmentedControl/styles/styles";
+@import "components/Stat/styles/styles";
 @import "example/styles/splash";
 @import "example/styles/styles";
 @import "example/styles/docs";

package/src/example.tsx

@@ -5,12 +5,16 @@ import {
   Badge,
   Button,
   Card,
+  CoverEmpty,
   Dialog,
   Dropdown,
+  Icons,
   Input,
   Link,
   Logo,
+  SegmentedControl,
   Separator,
+  Stat,
   constants,
 } from "./index";
 
@@ -100,6 +104,16 @@ const SPACING = [
   ["$gb-sp-16", "64 px", "4rem", 64],
 ] as const;
 
+const BREAKPOINTS = [
+  ["@include gx-phone", "< 768 px", "up to $g-tablet-width − 1px"],
+  [
+    "@include gx-tablet",
+    "768 – 1023 px",
+    "$g-tablet-width … $g-desktop-width − 1px",
+  ],
+  ["@include gx-desktop", "≥ 1024 px", "$g-desktop-width and up"],
+] as const;
+
 const RADIUS = [
   ["$gb-r-sm", "4 px", 4],
   ["$gb-r", "6 px", 6],
@@ -124,6 +138,29 @@ const ICONS: ReadonlyArray<readonly [string, string]> = [
   ["plus", "M12 5v14M5 12h14"],
 ];
 
+const ICON_SET: ReadonlyArray<
+  readonly [string, (props: { className?: string }) => React.ReactElement]
+> = [
+  ["IconSearch", Icons.IconSearch],
+  ["IconEdit", Icons.IconEdit],
+  ["IconTrash", Icons.IconTrash],
+  ["IconPlus", Icons.IconPlus],
+  ["IconRefresh", Icons.IconRefresh],
+  ["IconClock", Icons.IconClock],
+  ["IconImg", Icons.IconImg],
+  ["IconMail", Icons.IconMail],
+  ["IconCheck", Icons.IconCheck],
+  ["IconChevron", Icons.IconChevron],
+];
+
+const SEGMENTED_OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active" },
+  { value: "archived", label: "Archived" },
+] as const;
+
+type SegmentedValue = (typeof SEGMENTED_OPTIONS)[number]["value"];
+
 const NAV = [
   {
     title: "Getting started",
@@ -139,6 +176,7 @@ const NAV = [
       { id: "typography", label: "Typography" },
       { id: "spacing", label: "Spacing & radius" },
       { id: "iconography", label: "Iconography", count: "14" },
+      { id: "responsiveness", label: "Responsiveness" },
     ],
   },
   {
@@ -155,6 +193,9 @@ const NAV = [
       { id: "card", label: "Card" },
       { id: "badge", label: "Badge" },
       { id: "navigation", label: "Navigation" },
+      { id: "segmented-control", label: "Segmented control" },
+      { id: "stat", label: "Stat" },
+      { id: "cover-empty", label: "Cover empty" },
     ],
   },
 ];
@@ -165,6 +206,7 @@ const TOC = [
   ["typography", "Typography"],
   ["spacing", "Spacing & radius"],
   ["iconography", "Iconography"],
+  ["responsiveness", "Responsiveness"],
   ["logo", "Logo"],
   ["button", "Button"],
   ["link", "Link"],
@@ -176,6 +218,9 @@ const TOC = [
   ["card", "Card"],
   ["badge", "Badge"],
   ["navigation", "Navigation"],
+  ["segmented-control", "Segmented control"],
+  ["stat", "Stat"],
+  ["cover-empty", "Cover empty"],
 ] as const;
 
 type IconProps = {
@@ -368,6 +413,7 @@ function App() {
   const [installCopied, setInstallCopied] = useState(false);
   const [dropdownValue, setDropdownValue] = useState("red");
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [segmentedValue, setSegmentedValue] = useState<SegmentedValue>("all");
 
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
@@ -663,6 +709,74 @@ function App() {
                 <IconCell key={name} name={name} d={d} />
               ))}
             </div>
+            <h3 className="docs-subsection-title">Icon set</h3>
+            <p className="docs-section-desc">
+              Ready-to-use React icon components exported from{" "}
+              <code>Icons</code>. They inherit <code>currentColor</code>; size
+              and stroke are set by the consumer via a class name.
+            </p>
+            <div className="docs-icon-grid">
+              {ICON_SET.map(([name, IconComponent]) => (
+                <div className="docs-icon-cell docs-iconset-cell" key={name}>
+                  <IconComponent className="docs-iconset-cell__svg" />
+                  <span>{name}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="docs-section" id="responsiveness">
+            <div className="docs-section-eyebrow">Foundations / 05</div>
+            <h2 className="docs-section-title">Responsiveness</h2>
+            <p className="docs-section-desc">
+              Breakpoints are exposed as Sass variables and wrapped by three
+              mixins — <code>gx-phone</code>, <code>gx-tablet</code> and{" "}
+              <code>gx-desktop</code>. Each mixin scopes its block to exactly
+              one range, so the three never overlap. The demo below is styled
+              with the real mixins — resize the window to see the active range
+              light up.
+            </p>
+            <div className="docs-bp-grid" role="table" aria-label="Breakpoints">
+              {BREAKPOINTS.map(([mixin, range, vars]) => (
+                <div className="docs-bp-row" key={mixin}>
+                  <span className="mixin">{mixin}</span>
+                  <span className="range">{range}</span>
+                  <span className="vars">{vars}</span>
+                </div>
+              ))}
+            </div>
+            <div className="docs-spacer-y" />
+            <Demo
+              stageClass="center"
+              code={`.docs-bp-demo .pill { opacity: 0.35; }
+
+@include gx-phone {
+  .docs-bp-demo .pill--phone { opacity: 1; }
+}
+
+@include gx-tablet {
+  .docs-bp-demo .pill--tablet { opacity: 1; }
+}
+
+@include gx-desktop {
+  .docs-bp-demo .pill--desktop { opacity: 1; }
+}`}
+            >
+              <div className="docs-bp-demo">
+                <div className="pill pill--phone">
+                  <span className="nm">gx-phone</span>
+                  <span className="rg">&lt; 768 px</span>
+                </div>
+                <div className="pill pill--tablet">
+                  <span className="nm">gx-tablet</span>
+                  <span className="rg">768 – 1023 px</span>
+                </div>
+                <div className="pill pill--desktop">
+                  <span className="nm">gx-desktop</span>
+                  <span className="rg">≥ 1024 px</span>
+                </div>
+              </div>
+            </Demo>
           </section>
 
           <section className="docs-section" id="logo">
@@ -1025,6 +1139,77 @@ function App() {
             </Demo>
           </section>
 
+          <section className="docs-section" id="segmented-control">
+            <div className="docs-section-eyebrow">Components / 12</div>
+            <h2 className="docs-section-title">Segmented control</h2>
+            <p className="docs-section-desc">
+              A pill-shaped toggle for switching between a few mutually
+              exclusive views. Prefer it over a dropdown when there are two to
+              four options that benefit from being visible at once.
+            </p>
+            <Demo
+              stageClass="center"
+              code={`<SegmentedControl
+  options={[
+    { value: "all", label: "All" },
+    { value: "active", label: "Active" },
+    { value: "archived", label: "Archived" },
+  ]}
+  value="${segmentedValue}"
+  onChange={setSegmentedValue}
+/>`}
+            >
+              <SegmentedControl<SegmentedValue>
+                options={SEGMENTED_OPTIONS}
+                value={segmentedValue}
+                onChange={setSegmentedValue}
+              />
+            </Demo>
+          </section>
+
+          <section className="docs-section" id="stat">
+            <div className="docs-section-eyebrow">Components / 13</div>
+            <h2 className="docs-section-title">Stat</h2>
+            <p className="docs-section-desc">
+              A single key figure with a labelled, color-coded dot. Group a few
+              of them to summarise the state of a page. The dot color is set via
+              the <code>modifier</code> prop.
+            </p>
+            <Demo
+              stageClass="column"
+              code={`<Stat modifier="blue" label="Posts" value="128" />
+<Stat modifier="green" label="Published" value="94" />
+<Stat modifier="amber" label="Drafts" value="26" />
+<Stat modifier="red" label="Flagged" value="8" />`}
+            >
+              <div className="docs-stat-grid">
+                <Stat modifier="blue" label="Posts" value="128" />
+                <Stat modifier="green" label="Published" value="94" />
+                <Stat modifier="amber" label="Drafts" value="26" />
+                <Stat modifier="red" label="Flagged" value="8" />
+              </div>
+            </Demo>
+          </section>
+
+          <section className="docs-section" id="cover-empty">
+            <div className="docs-section-eyebrow">Components / 14</div>
+            <h2 className="docs-section-title">Cover empty</h2>
+            <p className="docs-section-desc">
+              A neutral placeholder for a missing image or empty media slot. It
+              fills its container, so give the parent a fixed size.
+            </p>
+            <Demo
+              stageClass="center"
+              code={`<div style={{ width: 160, height: 120 }}>
+  <CoverEmpty />
+</div>`}
+            >
+              <div className="docs-cover-empty-stage">
+                <CoverEmpty />
+              </div>
+            </Demo>
+          </section>
+
           <footer className="docs-footer">
             <div>graphen · {VERSION} · MIT</div>
             <div>Built by the CODA_ team</div>