@abuzareal/contour-ui 0.6.2 → 0.6.3

package/examples/catalogue/buttons.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import {
+  Button,
+  IconButton,
+  ExternalLink,
+  DepthButton,
+} from "@abuzareal/contour-ui";
+
+export default function Actions() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <Button onClick={() => setCount((value) => value + 1)}>
+        Count {count}
+      </Button>
+      <IconButton label="Reset count" onClick={() => setCount(0)}>
+        <span aria-hidden="true">↺</span>
+      </IconButton>
+      <ExternalLink href="https://www.npmjs.com/package/@abuzareal/contour-ui">
+        Package on npm
+      </ExternalLink>
+      <DepthButton onClick={() => setCount((value) => value + 1)}>
+        Add one
+      </DepthButton>
+    </>
+  );
+}

package/examples/catalogue/choices.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import {
+  Checkbox,
+  RadioGroup,
+  Switch,
+  Slider,
+  SegmentedControl,
+} from "@abuzareal/contour-ui";
+
+type View = "overview" | "details";
+const options: { value: View; label: string }[] = [
+  { value: "overview", label: "Overview" },
+  { value: "details", label: "Details" },
+];
+export default function Preferences() {
+  const [view, setView] = useState<View>("overview");
+  const [checked, setChecked] = useState(false);
+  const [volume, setVolume] = useState(40);
+  return (
+    <>
+      <p>
+        Local selection only; this does not configure a global density mode.
+      </p>
+      <Checkbox
+        label="Include archived items"
+        checked={checked}
+        onChange={(event) => setChecked(event.target.checked)}
+      />
+      <RadioGroup
+        legend="Example view"
+        options={options}
+        value={view}
+        onChange={setView}
+      />
+      <SegmentedControl
+        label="Preview view"
+        options={options}
+        value={view}
+        onChange={setView}
+      />
+      <Switch label="Example setting" checked={checked} onChange={setChecked} />
+      <Slider
+        label="Example volume"
+        value={volume}
+        onChange={setVolume}
+        min={0}
+        max={100}
+      />
+    </>
+  );
+}

package/examples/catalogue/combobox.tsx

@@ -0,0 +1,119 @@
+import { useRef, useState } from "react";
+import {
+  Button,
+  Combobox,
+  Dialog,
+  Popover,
+  Table,
+  TextField,
+  ThemeScope,
+} from "@abuzareal/contour-ui";
+const projects = [
+  { value: "atlas", label: "Atlas" },
+  {
+    value: "field",
+    label:
+      "Field notes — a long project label that remains readable on a narrow screen",
+  },
+  { value: "closed", label: "Closed project", disabled: true },
+];
+export default function SelectionExample() {
+  const input = useRef<HTMLInputElement>(null);
+  const [values, setValues] = useState("");
+  const [open, setOpen] = useState(false);
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  return (
+    <div className="demo-stack">
+      <p>Local form inspection. No project or settings are saved.</p>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          setValues(
+            JSON.stringify(
+              Object.fromEntries(new FormData(event.currentTarget)),
+            ),
+          );
+        }}
+        onReset={() => setValues("")}
+      >
+        <Combobox
+          ref={input}
+          label="Project"
+          name="project"
+          options={projects}
+          defaultValue="atlas"
+          required
+          hint="Choose an allowed project; typed text is not a selection."
+        />
+        <TextField label="Note after project" name="note" />
+        <div className="demo-row">
+          <Button type="submit">Inspect project values</Button>
+          <Button type="reset" variant="secondary">
+            Reset project
+          </Button>
+          <Button onClick={() => input.current?.focus()}>Focus project</Button>
+        </div>
+      </form>
+      <output aria-label="Project form values">{values}</output>
+      <div className="demo-row">
+        <Button
+          onClick={(event) => {
+            event.currentTarget.focus();
+            setOpen(true);
+          }}
+        >
+          Open picker dialog
+        </Button>
+        <Popover trigger="Open parent layer" title="Nested layers">
+          <Popover trigger="Open child layer" title="Child layer">
+            <p>First Escape closes this child; second closes its parent.</p>
+            <Combobox label="Nested project" options={projects} />
+          </Popover>
+        </Popover>
+      </div>
+      <Dialog
+        title="Choose a local project"
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        <Combobox
+          label="Dialog project"
+          options={projects}
+          defaultValue="atlas"
+        />
+        <Button onClick={() => setOpen(false)}>Keep local selection</Button>
+      </Dialog>
+      <ThemeScope
+        theme={theme}
+        onThemeChange={setTheme}
+        style={{ padding: 16 }}
+      >
+        <p>Independent embedded theme: {theme}.</p>
+        <Button
+          onClick={() =>
+            setTheme((value) => (value === "light" ? "dark" : "light"))
+          }
+        >
+          Toggle embedded theme
+        </Button>
+        <Combobox label="Embedded project" options={projects} />
+        <Table caption="Local project identity" showCaption>
+          <thead>
+            <tr>
+              <th scope="col">ID</th>
+              <th scope="col">Label</th>
+            </tr>
+          </thead>
+          <tbody>
+            {projects.map((project) => (
+              <tr key={project.value}>
+                <th scope="row">{project.value}</th>
+                <td>{project.label}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </ThemeScope>
+    </div>
+  );
+}

package/examples/catalogue/content.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import {
+  Card,
+  Disclosure,
+  Divider,
+  Timeline,
+  EmptyState,
+  Button,
+} from "@abuzareal/contour-ui";
+
+export default function Content() {
+  const [situation, setSituation] = useState<
+    "empty" | "filtered" | "error" | "created"
+  >("empty");
+  const [status, setStatus] = useState("");
+  const recovery = () => {
+    setSituation(situation === "empty" ? "created" : "empty");
+    setStatus(
+      situation === "error"
+        ? "Local retry completed with no saved projects. No service was contacted."
+        : situation === "filtered"
+          ? "Local filter cleared."
+          : "One local example project added. Nothing was saved.",
+    );
+  };
+  return (
+    <>
+      <Card
+        title="Project notes"
+        eyebrow="Example"
+        footer={<a href="/docs/getting-started">Read setup</a>}
+      >
+        <p>Keep the action separate from the card container.</p>
+      </Card>
+      <Disclosure className="project-notes" summary="Technical details">
+        <p>Your application's notes go here.</p>
+      </Disclosure>
+      <Divider label="History" />
+      <Timeline
+        entries={[
+          {
+            date: "Draft",
+            title: "Example milestone",
+            body: "Illustrative content.",
+          },
+        ]}
+      />
+      <section aria-label="Empty-state situations">
+        <p>Choose an illustrative local outcome. No request is sent.</p>
+        <Button
+          onClick={() => {
+            setSituation("empty");
+            setStatus("");
+          }}
+        >
+          Show no saved data
+        </Button>
+        <Button
+          onClick={() => {
+            setSituation("filtered");
+            setStatus("");
+          }}
+        >
+          Show no matches
+        </Button>
+        <Button
+          onClick={() => {
+            setSituation("error");
+            setStatus("");
+          }}
+        >
+          Simulate service failure
+        </Button>
+        {situation === "created" ? (
+          <p>Local example project.</p>
+        ) : (
+          <EmptyState
+            icon={<span aria-hidden="true">○</span>}
+            title={
+              situation === "error"
+                ? "Projects unavailable"
+                : situation === "filtered"
+                  ? "No matching projects"
+                  : "No saved projects"
+            }
+            message={
+              situation === "error"
+                ? "The illustrative request failed. This is not an empty successful result."
+                : situation === "filtered"
+                  ? "Try clearing your filters."
+                  : "Add a local example to see it here."
+            }
+            action={
+              <Button onClick={recovery}>
+                {situation === "error"
+                  ? "Retry local example"
+                  : situation === "filtered"
+                    ? "Clear local filters"
+                    : "Add a local project"}
+              </Button>
+            }
+          />
+        )}
+        <p role="status">{status}</p>
+      </section>
+    </>
+  );
+}

package/examples/catalogue/data-table.tsx

@@ -0,0 +1,18 @@
+import { DataTable, type TableColumn } from "@abuzareal/contour-ui";
+
+type Project = { id: string; name: string; examples: number };
+const rows: Project[] = [{ id: "demo", name: "Example project", examples: 3 }];
+const columns: TableColumn<Project>[] = [
+  { key: "name", header: "Project", sortable: true },
+  { key: "examples", header: "Examples", align: "end", sortable: true },
+];
+export default function ProjectTable() {
+  return (
+    <DataTable
+      caption="Illustrative projects"
+      columns={columns}
+      rows={rows}
+      rowKey="id"
+    />
+  );
+}

package/examples/catalogue/dialogs.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { Button, Dialog } from "@abuzareal/contour-ui";
+
+export default function DetailsDialog() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open details</Button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Project details"
+        description="A local example."
+        footer={<Button onClick={() => setOpen(false)}>Close</Button>}
+      >
+        <p>Your application's details go here.</p>
+      </Dialog>
+    </>
+  );
+}

package/examples/catalogue/feedback.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { Alert, ProgressBar, Spinner, Skeleton } from "@abuzareal/contour-ui";
+
+export default function Feedback() {
+  const [visible, setVisible] = useState(true);
+  return (
+    <>
+      {visible && (
+        <Alert
+          title="Example warning"
+          tone="warning"
+          onDismiss={() => setVisible(false)}
+        >
+          This is a local demonstration.
+        </Alert>
+      )}
+      <div aria-busy="true">
+        <Spinner label="Loading example" />
+        <ProgressBar label="Example upload" value={35} />
+        <Skeleton width="12rem" height="1rem" />
+      </div>
+    </>
+  );
+}

package/examples/catalogue/field.tsx

@@ -0,0 +1,18 @@
+import { useId } from "react";
+import { Field, fieldDescribedBy } from "@abuzareal/contour-ui";
+
+export default function DateField() {
+  const id = useId();
+  const hint = "Choose a delivery date.";
+  return (
+    <Field id={id} label="Delivery date" hint={hint} required>
+      <input
+        id={id}
+        type="date"
+        name="delivery"
+        required
+        aria-describedby={fieldDescribedBy(id, hint)}
+      />
+    </Field>
+  );
+}

package/examples/catalogue/floating.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { DropdownMenu, Popover, Tooltip, Button } from "@abuzareal/contour-ui";
+
+export default function FloatingContent() {
+  const [message, setMessage] = useState("");
+  const [menuOpen, setMenuOpen] = useState(false);
+  return (
+    <>
+      <DropdownMenu
+        label="Example actions"
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        items={[
+          {
+            id: "select",
+            label: "Select example",
+            onSelect: () => setMessage("Example selected locally."),
+          },
+          {
+            id: "unavailable",
+            label: "Unavailable example",
+            disabled: true,
+            onSelect: () => setMessage("Unavailable action."),
+          },
+          {
+            id: "details",
+            label: "View details",
+            onSelect: () => setMessage("Details selected locally."),
+          },
+        ]}
+      />
+      <Popover trigger="About this example" title="Details">
+        <p>No network action occurs.</p>
+      </Popover>
+      <Tooltip content="Displays a local message">
+        <Button onClick={() => setMessage("Hello")}>Say hello</Button>
+      </Tooltip>
+      <p role="status">{message}</p>
+    </>
+  );
+}

package/examples/catalogue/identity.tsx

@@ -0,0 +1,35 @@
+import {
+  BrandMark,
+  Reveal,
+  SectionLabel,
+  RevealHeading,
+  GitHubIcon,
+  LinkedInIcon,
+  ExternalLink,
+} from "@abuzareal/contour-ui";
+
+export default function Identity() {
+  return (
+    <>
+      <BrandMark label="Legacy aa identity example" href="#work-title" />
+      <Reveal>
+        <SectionLabel
+          section={{
+            id: "work",
+            number: 1,
+            label: "Work",
+            title: "Selected work",
+          }}
+          aside="Example"
+        />
+        <RevealHeading id="work-title" lines={[{ text: "Selected work" }]} />
+      </Reveal>
+      <ExternalLink href="https://github.com" aria-label="GitHub">
+        <GitHubIcon />
+      </ExternalLink>
+      <ExternalLink href="https://www.linkedin.com" aria-label="LinkedIn">
+        <LinkedInIcon />
+      </ExternalLink>
+    </>
+  );
+}

package/examples/catalogue/metadata.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { Badge, Tag, Avatar, Stat, Kbd } from "@abuzareal/contour-ui";
+
+export default function Metadata() {
+  const [showTag, setShowTag] = useState(true);
+  return (
+    <>
+      <Badge tone="info">Example status</Badge>
+      {showTag && <Tag onRemove={() => setShowTag(false)}>React</Tag>}
+      <Avatar name="Alex Chen" />
+      <Stat value={12} label="Example records" />
+      <p>
+        Use <Kbd>Tab</Kbd> to move between controls.
+      </p>
+    </>
+  );
+}

package/examples/catalogue/motion.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import {
+  Reveal,
+  Magnetic,
+  CountUp,
+  Marquee,
+  ScrollProgress,
+  TiltCard,
+  FlipCard,
+  Button,
+} from "@abuzareal/contour-ui";
+
+export default function MotionExamples() {
+  const [paused, setPaused] = useState(false);
+  return (
+    <div data-motion={paused ? "off" : undefined}>
+      <Button
+        aria-pressed={paused}
+        onClick={() => setPaused((value) => !value)}
+      >
+        Pause examples
+      </Button>
+      <ScrollProgress />
+      <Reveal>
+        <p>Content entering view.</p>
+      </Reveal>
+      <Magnetic>
+        <Button>Pointer example</Button>
+      </Magnetic>
+      <p>
+        Example records: <CountUp to={12} />
+      </p>
+      <Marquee
+        label="Example technologies"
+        items={["React", "TypeScript", "CSS"]}
+      />
+      <TiltCard>
+        <p>CSS depth example.</p>
+      </TiltCard>
+      <FlipCard
+        label="Show other side"
+        front={<p>Front</p>}
+        back={<p>Back</p>}
+      />
+    </div>
+  );
+}

package/examples/catalogue/navigation.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Tabs, Breadcrumbs, Pagination, Stepper } from "@abuzareal/contour-ui";
+
+export default function Navigation() {
+  const [page, setPage] = useState(1);
+  const [activeTabId, setActiveTabId] = useState("overview");
+  return (
+    <>
+      <Breadcrumbs
+        items={[{ label: "Home", href: "/" }, { label: "Projects" }]}
+      />
+      <Tabs
+        label="Project information"
+        activeTabId={activeTabId}
+        onTabChange={setActiveTabId}
+        tabs={[
+          {
+            id: "overview",
+            label: "Overview",
+            content: <p>Project overview.</p>,
+          },
+          { id: "details", label: "Details", content: <p>Project details.</p> },
+        ]}
+      />
+      <p role="status">Selected tab: {activeTabId}.</p>
+      <Pagination
+        page={page}
+        pageCount={5}
+        onChange={setPage}
+        label="Result pages"
+      />
+      <p>Selected page: {page}. Supply your own results.</p>
+      <Stepper
+        current={1}
+        steps={[
+          { label: "Details" },
+          { label: "Review" },
+          { label: "Complete" },
+        ]}
+      />
+    </>
+  );
+}

package/examples/catalogue/scene-boundary.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { Button, SceneBoundary } from "@abuzareal/contour-ui";
+
+function DemonstrationChild({ fail }: { fail: boolean }) {
+  if (fail) throw Error("Intentional local SceneBoundary demonstration");
+  return (
+    <p>The optional child rendered. No WebGL dependency is loaded here.</p>
+  );
+}
+
+export default function BoundaryExample() {
+  const [fail, setFail] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  return (
+    <section aria-label="Scene boundary example">
+      <p>
+        A static fallback stays outside the boundary. A caught render failure
+        hides only its child. The expected demonstration error may be logged by
+        React; it does not represent a renderer or service failure.
+      </p>
+      <SceneBoundary key={attempt}>
+        <DemonstrationChild fail={fail} />
+      </SceneBoundary>
+      <Button onClick={() => setFail(true)}>
+        Simulate child render failure
+      </Button>
+      <Button
+        onClick={() => {
+          setFail(false);
+          setAttempt((value) => value + 1);
+        }}
+      >
+        Remount demonstration
+      </Button>
+    </section>
+  );
+}

package/examples/catalogue/text-inputs.tsx

@@ -0,0 +1,60 @@
+import { useRef, useState } from "react";
+import {
+  TextField,
+  TextArea,
+  SelectField,
+  Button,
+} from "@abuzareal/contour-ui";
+
+export default function ContactFields() {
+  const emailInput = useRef<HTMLInputElement>(null);
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [topic, setTopic] = useState("feedback");
+  const [submitted, setSubmitted] = useState(false);
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSubmitted(true);
+      }}
+    >
+      <TextField
+        ref={emailInput}
+        label="Email"
+        name="email"
+        type="email"
+        required
+        value={email}
+        onChange={(event) => setEmail(event.target.value)}
+        hint="Use a working email address."
+      />
+      <TextArea
+        label="Message"
+        name="message"
+        required
+        autoResize
+        maxLength={500}
+        value={message}
+        onChange={(event) => setMessage(event.target.value)}
+      />
+      <SelectField
+        label="Topic"
+        name="topic"
+        value={topic}
+        options={[
+          { value: "feedback", label: "Feedback" },
+          { value: "question", label: "Question" },
+        ]}
+        onChange={(event) => setTopic(event.target.value)}
+      />
+      <Button type="submit">Validate locally</Button>
+      <Button type="button" onClick={() => emailInput.current?.focus()}>
+        Focus email
+      </Button>
+      {submitted && (
+        <p role="status">Fields validated locally. No message was sent.</p>
+      )}
+    </form>
+  );
+}