@thewhatmatters/wmds 0.2.0

package/docs/patterns/components-tooltip--placement.tsx

@@ -0,0 +1,12 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — placement
+// Storybook: Components/Tooltip → Pattern — placement (?path=/story/components-tooltip--placement)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Tooltip } from "@thewhatmatters/wmds";
+
+<Tooltip>
+  <Tooltip.Trigger render={<Button role="secondary">Details</Button>} />
+  <Tooltip.Content side="inline-end" align="center">
+    View market details
+  </Tooltip.Content>
+</Tooltip>

package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx

@@ -0,0 +1,24 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — horizontal rail
+// Storybook: Foundations/Scroll fade → Pattern — horizontal rail (?path=/story/foundations-scroll-fade--horizontal-rail)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chip } from "@thewhatmatters/wmds";
+
+const categories = [
+  "Strategy",
+  "Research",
+  "Design",
+  "Engineering",
+  "Marketing",
+];
+
+<div
+  aria-label="Categories"
+  className="scroll-fade-x flex gap-2 overflow-x-auto py-1"
+>
+  {categories.map((category) => (
+    <Chip key={category} readOnly size="sm">
+      {category}
+    </Chip>
+  ))}
+</div>

package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx

@@ -0,0 +1,25 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — overflowing list
+// Storybook: Foundations/Scroll fade → Pattern — overflowing list (?path=/story/foundations-scroll-fade--overflowing-list)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+const items = [
+  "Align quarterly priorities",
+  "Review audience fit",
+  "Confirm launch narrative",
+  "Prepare sales enablement",
+  "Publish customer proof",
+  "Schedule partner briefing",
+];
+
+<div className="overflow-hidden rounded-lg border border-border bg-card">
+  <ul
+    aria-label="Launch checklist"
+    className="scroll-fade-y h-56 overflow-y-auto"
+  >
+    {items.map((item) => (
+      <li className="border-b border-border px-4 py-3 last:border-b-0" key={item}>
+        {item}
+      </li>
+    ))}
+  </ul>
+</div>

package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx

@@ -0,0 +1,78 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — chart comparison gallery
+// Storybook: Guides/Chart explorations → Pattern — chart comparison gallery (?path=/story/guides-chart-explorations--comparison-gallery)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  Chart,
+  PageHeader,
+  chartSeriesConfigFromKeys,
+  type ChartDistributionItem,
+  type ChartHeatmapAxisItem,
+  type ChartHeatmapCell,
+  type ChartUnitGridPart,
+} from "@thewhatmatters/wmds";
+
+const compositionConfig = chartSeriesConfigFromKeys([
+  { key: "women", label: "Women" },
+  { key: "men", label: "Men" },
+  { key: "unspecified", label: "Not specified" },
+]);
+
+export function ChartComparison({
+  composition,
+  postReach,
+  activity,
+}: {
+  composition: ChartUnitGridPart[];
+  postReach: ChartDistributionItem[];
+  activity: { rows: ChartHeatmapAxisItem[]; columns: ChartHeatmapAxisItem[]; cells: ChartHeatmapCell[] };
+}) {
+  return (
+    <main className="grid-page min-h-screen bg-body [--grid-column-gap:8px] [--grid-max:1140px] [padding-bottom:44px]">
+      <div className="band pt-8">
+        <section className="col-span-full">
+          <PageHeader variant="page" title="Chart explorations" />
+        </section>
+
+        <div className="band gap-y-6 [align-items:stretch]">
+          <Card className="col-span-full h-full min-w-0 lg:col-span-6">
+            <Card.Body className="flex-1">
+              <Chart.UnitGrid
+                aria-label="Audience composition"
+                config={compositionConfig}
+                parts={composition}
+                minHeight={240}
+              />
+            </Card.Body>
+          </Card>
+
+          <Card className="col-span-full h-full min-w-0 lg:col-span-6">
+            <Card.Body className="flex-1">
+              <Chart.DistributionStrip
+                aria-label="Recent post reach distribution"
+                items={postReach}
+                     metricLabel="Reach"
+                reference={{ value: 9300, label: "Typical 9.3K" }}
+                minHeight={240}
+              />
+            </Card.Body>
+          </Card>
+
+          <Card className="col-span-full h-full min-w-0 lg:col-span-6">
+            <Card.Body className="flex-1">
+              <Chart.Heatmap
+                aria-label="Audience activity by day and time"
+                rows={activity.rows}
+                columns={activity.columns}
+                cells={activity.cells}
+                     metricLabel="Activity"
+                minHeight={240}
+              />
+            </Card.Body>
+          </Card>
+        </div>
+      </div>
+    </main>
+  );
+}

package/docs/patterns/guides-overlay-flows--notification-preferences.tsx

@@ -0,0 +1,140 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — notification preferences
+// Storybook: Guides/Overlay flows → Pattern — notification preferences (?path=/story/guides-overlay-flows--notification-preferences)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { SlidersHorizontal } from "lucide-react";
+import {
+  AlertDialog,
+  Button,
+  Card,
+  CheckboxGroup,
+  Dialog,
+  Input,
+  Sheet,
+  Switch,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardSubtitleClasses,
+  cardTitleClasses,
+  dialogFooterActionsClasses,
+} from "@thewhatmatters/wmds";
+
+export function NotificationPreferencesPage() {
+  const [channelsOpen, setChannelsOpen] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [disableAlertsOpen, setDisableAlertsOpen] = useState(false);
+  const [emailDigests, setEmailDigests] = useState(true);
+  const [criticalAlerts, setCriticalAlerts] = useState(true);
+  const [channels, setChannels] = useState(["email", "push"]);
+
+  function handleCriticalChange(checked: boolean) {
+    if (!checked && criticalAlerts) {
+      setDisableAlertsOpen(true);
+      return;
+    }
+    setCriticalAlerts(checked);
+  }
+
+  return (
+    <>
+      <Card padding="none" className="mx-auto max-w-lg">
+        <Card.Header
+          start={
+            <div>
+              <h2 className={cardTitleClasses}>Notification preferences</h2>
+              <p className={cardSubtitleClasses}>Choose how WhatMatters reaches residents and staff.</p>
+            </div>
+          }
+        />
+        <Card.Body>
+          <div className={`flex flex-col gap-4 py-4 ${cardLayoutBodyOccupantInsetXClasses}`}>
+            <Switch
+              layout="settings"
+              label="Email digests"
+              description="Weekly occupancy summary"
+              checked={emailDigests}
+              onChange={(event) => setEmailDigests(event.target.checked)}
+            />
+            <Switch
+              layout="settings"
+              label="Critical alerts"
+              description="Immediate SMS for threshold breaches"
+              checked={criticalAlerts}
+              onChange={(event) => handleCriticalChange(event.target.checked)}
+            />
+          </div>
+        </Card.Body>
+        <Card.Footer className="justify-end gap-2">
+          <Button role="secondary" size="sm" onClick={() => setFiltersOpen(true)}>
+            Market filters
+          </Button>
+          <Button role="primary" size="sm" onClick={() => setChannelsOpen(true)}>
+            Manage channels
+          </Button>
+        </Card.Footer>
+      </Card>
+
+      <Dialog open={channelsOpen} onOpenChange={setChannelsOpen}>
+        <Dialog.Content
+          title="Alert channels"
+          description="Residents receive notices on every channel you enable."
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="secondary" onClick={() => setChannelsOpen(false)}>
+                Cancel
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setChannelsOpen(false)}>
+                Save
+              </Button>
+            </div>
+          }
+        >
+          <CheckboxGroup label="Channels" values={channels} onValuesChange={setChannels}>
+            <CheckboxGroup.Item value="email" label="Email" />
+            <CheckboxGroup.Item value="push" label="Push notifications" />
+            <CheckboxGroup.Item value="sms" label="SMS" />
+          </CheckboxGroup>
+        </Dialog.Content>
+      </Dialog>
+
+      <AlertDialog
+        open={disableAlertsOpen}
+        onOpenChange={setDisableAlertsOpen}
+        title="Disable critical alerts?"
+        description="Staff will not receive immediate SMS when occupancy thresholds are breached."
+        cancelLabel="Keep alerts on"
+        confirmLabel="Disable alerts"
+        confirmRole="destructive"
+        onConfirm={() => {
+          setCriticalAlerts(false);
+          setDisableAlertsOpen(false);
+        }}
+        onCancel={() => setDisableAlertsOpen(false)}
+      />
+
+      <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+        <Sheet.Content
+          title="Market filters"
+          description="Scope notifications to selected markets."
+          headerStart={<SlidersHorizontal strokeWidth={2} />}
+          size="md"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="secondary" onClick={() => setFiltersOpen(false)}>
+                Reset
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setFiltersOpen(false)}>
+                Apply
+              </Button>
+            </div>
+          }
+        >
+          <div className="flex flex-col gap-4 pb-4">
+            <Input label="Market" placeholder="All markets" />
+            <Input label="Region" placeholder="All regions" />
+          </div>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/guides-profile-typography--editorial-profile.tsx

@@ -0,0 +1,81 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — editorial profile
+// Storybook: Guides/Profile typography → Pattern — editorial profile (?path=/story/guides-profile-typography--editorial-profile)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import {
+  Avatar,
+  Button,
+  ButtonIcon,
+  DisplayControls,
+  GridOverlay,
+  TextLink,
+  type DisplayControlThemeMode,
+} from "@thewhatmatters/wmds";
+import { ChevronRight, VolumeX } from "lucide-react";
+
+export function ProfilePage({ onOpenRole }: { onOpenRole: (company: string) => void }) {
+  const [gridVisible, setGridVisible] = useState(false);
+  const [theme, setTheme] = useState<DisplayControlThemeMode>("auto");
+
+  return (
+    <main
+      data-theme={theme === "auto" ? undefined : theme}
+      className="grid-page min-h-screen bg-body py-12 [--grid-column-gap:24px] [--grid-max:960px] sm:py-16 lg:py-20"
+    >
+      <GridOverlay
+        visible={gridVisible}
+        onVisibleChange={setGridVisible}
+        keyboardShortcut={false}
+      />
+
+      <div className="band">
+        <article className="col-span-full max-w-[52rem] sm:col-start-2 sm:col-span-6 lg:col-start-2 lg:col-span-10">
+          <header className="flex flex-col items-start gap-4">
+            <Avatar name="Avery Kim" size="lg" />
+            <div>
+              <h1 className="type-heading-1 text-fg tracking-tight">Howdy, I’m Avery.</h1>
+              <p className="type-body text-muted">You can call me “Ave.”</p>
+            </div>
+          </header>
+
+          <div className="mt-8 flex flex-col gap-5 sm:mt-10">
+            <p className="type-body text-fg">
+              Currently building at <TextLink href="#work">WhatMatters</TextLink>.
+            </p>
+          </div>
+
+          <section id="work" className="mt-12 sm:mt-14">
+            <h2 className="type-body text-muted">Work</h2>
+            <ul className="mt-4 border-t border-border">
+              <li className="border-b border-border py-2">
+                <Button role="ghost" layout="row" onClick={() => onOpenRole("WhatMatters")}>
+                  <span className="flex items-center gap-3">
+                    <Avatar name="WhatMatters" size="xsm" />
+                    <span>WhatMatters</span>
+                  </span>
+                  <ButtonIcon size="sm"><ChevronRight /></ButtonIcon>
+                </Button>
+              </li>
+            </ul>
+          </section>
+
+          <footer className="mt-12 flex flex-col gap-5 sm:mt-14">
+            <p className="type-body text-fg">
+              Read my <TextLink href="/writing">writing</TextLink>.
+            </p>
+            <Button role="ghost" size="xs" icon={<VolumeX />}>Sound off</Button>
+          </footer>
+        </article>
+      </div>
+
+      <DisplayControls
+        className="fixed bottom-4 right-4 z-20"
+        gridVisible={gridVisible}
+        onGridVisibleChange={setGridVisible}
+        theme={theme}
+        onThemeChange={setTheme}
+      />
+    </main>
+  );
+}