@chesapeake/stack 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.6] - 2026-09-19
+
+### Added
+
+- Neutral `FocusCard`, `FocusFeed`, `TodoCard`, and `EventCard` components for
+  mixed todo and calendar-style feeds
+- Public focus component subpath exports
+
 ## [0.1.5] - 2026-08-03
 
 ### Added
@@ -83,6 +91,7 @@ and this project adheres to
 - Apache 2.0 license
 
 [0.1.4]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.4
+[0.1.6]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.6
 [0.1.3]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.3
 [0.1.2]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.2
 [0.1.1]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.1

package/components/ux/focus/EventCard.tsx

@@ -0,0 +1,48 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from "react";
+import { FocusCard } from "./FocusCard.tsx";
+
+export interface EventCardProps {
+  title: string;
+  time: ReactNode;
+  location?: ReactNode;
+  metadata?: ReactNode;
+  actions?: ReactNode;
+  allDay?: boolean;
+  className?: string;
+}
+
+/** Read-only calendar event presentation; consumers own calendar mutations. */
+export function EventCard({
+  title,
+  time,
+  location,
+  metadata,
+  actions,
+  allDay = false,
+  className,
+}: EventCardProps) {
+  return (
+    <FocusCard
+      className={className}
+      leading={
+        <div
+          aria-hidden="true"
+          className="mt-1 h-5 w-5 shrink-0 rounded-full border-2 border-primary/60"
+        />
+      }
+      actions={actions}
+    >
+      <div className="space-y-1">
+        <div className="font-medium">{title}</div>
+        <div className="text-sm text-muted-foreground">
+          {allDay ? "All day" : time}
+        </div>
+        {location}
+        {metadata}
+      </div>
+    </FocusCard>
+  );
+}

package/components/ux/focus/FocusCard.tsx

@@ -0,0 +1,37 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card.tsx";
+
+export interface FocusCardProps {
+  children: ReactNode;
+  leading?: ReactNode;
+  actions?: ReactNode;
+  completed?: boolean;
+  className?: string;
+}
+
+/** Shared surface and layout for every item in a focus feed. */
+export function FocusCard({
+  children,
+  leading,
+  actions,
+  completed = false,
+  className,
+}: FocusCardProps) {
+  return (
+    <Card
+      role="listitem"
+      className={`bg-background min-w-0 p-4 transition-shadow hover:shadow-md ${
+        completed ? "bg-muted/50 opacity-75" : ""
+      } ${className ?? ""}`}
+    >
+      <div className="flex min-w-0 items-start gap-3">
+        {leading}
+        <div className="min-w-0 flex-1">{children}</div>
+        {actions}
+      </div>
+    </Card>
+  );
+}

package/components/ux/focus/FocusFeed.tsx

@@ -0,0 +1,39 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from "react";
+
+export interface FocusFeedProps {
+  children: ReactNode;
+  loading?: boolean;
+  empty?: ReactNode;
+  className?: string;
+  label?: string;
+}
+
+/** A narrow, accessible feed surface for mixed todo and event cards. */
+export function FocusFeed({
+  children,
+  loading = false,
+  empty,
+  className,
+  label = "Focus feed",
+}: FocusFeedProps) {
+  const content = loading ? (
+    <div className="text-muted-foreground p-8 text-center" role="status">
+      Loading feed...
+    </div>
+  ) : (
+    (empty ?? children)
+  );
+
+  return (
+    <div
+      aria-label={label}
+      className={`flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4 ${className ?? ""}`}
+      role="list"
+    >
+      {content}
+    </div>
+  );
+}

package/components/ux/focus/TodoCard.tsx

@@ -0,0 +1,88 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Input } from "../../ui/input.tsx";
+import { FocusCard } from "./FocusCard.tsx";
+
+export interface TodoCardProps {
+  title: string;
+  completed: boolean;
+  onToggle: () => void;
+  onTitleChange?: (title: string) => void;
+  metadata?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function TodoCard({
+  title,
+  completed,
+  onToggle,
+  onTitleChange,
+  metadata,
+  description,
+  actions,
+  className,
+}: TodoCardProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+
+  const save = () => {
+    const next = draft.trim();
+    if (next && next !== title) onTitleChange?.(next);
+    setEditing(false);
+  };
+
+  return (
+    <FocusCard
+      completed={completed}
+      className={className}
+      leading={
+        <input
+          aria-label={completed ? "Mark incomplete" : "Mark complete"}
+          checked={completed}
+          className="mt-1 h-5 w-5 shrink-0 cursor-pointer rounded text-primary focus:ring-2 focus:ring-primary"
+          onChange={onToggle}
+          type="checkbox"
+        />
+      }
+      actions={actions}
+    >
+      <div className="space-y-1">
+        {editing ? (
+          <Input
+            aria-label="Edit todo title"
+            autoFocus
+            onBlur={save}
+            onChange={(event) => {
+              setDraft(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") save();
+              if (event.key === "Escape") setEditing(false);
+            }}
+            value={draft}
+          />
+        ) : (
+          <button
+            className={`block w-full rounded-sm text-left font-medium hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+              completed ? "text-muted-foreground line-through" : ""
+            }`}
+            onClick={() => {
+              setDraft(title);
+              if (onTitleChange) setEditing(true);
+            }}
+            type="button"
+          >
+            {title}
+          </button>
+        )}
+        {metadata}
+        {description}
+      </div>
+    </FocusCard>
+  );
+}

package/components/ux/focus/index.ts

@@ -0,0 +1,8 @@
+export { EventCard } from "./EventCard.tsx";
+export type { EventCardProps } from "./EventCard.tsx";
+export { FocusCard } from "./FocusCard.tsx";
+export type { FocusCardProps } from "./FocusCard.tsx";
+export { FocusFeed } from "./FocusFeed.tsx";
+export type { FocusFeedProps } from "./FocusFeed.tsx";
+export { TodoCard } from "./TodoCard.tsx";
+export type { TodoCardProps } from "./TodoCard.tsx";

package/components/ux/index.ts

@@ -46,5 +46,6 @@ export type {
 } from "./StandardLayout/index.ts";
 
 export * from "./task/index.ts";
+export * from "./focus/index.ts";
 export * from "./connectivity/index.ts";
 export * from "./runner/index.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chesapeake/stack",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
   "type": "module",
   "packageManager": "npm@10.2.0",
@@ -111,6 +111,11 @@
     "./components/ux/task/TaskInput": "./components/ux/task/TaskInput.tsx",
     "./components/ux/task/TaskCard": "./components/ux/task/TaskCard.tsx",
     "./components/ux/task/TaskList": "./components/ux/task/TaskList.tsx",
+    "./components/ux/focus": "./components/ux/focus/index.ts",
+    "./components/ux/focus/FocusCard": "./components/ux/focus/FocusCard.tsx",
+    "./components/ux/focus/FocusFeed": "./components/ux/focus/FocusFeed.tsx",
+    "./components/ux/focus/TodoCard": "./components/ux/focus/TodoCard.tsx",
+    "./components/ux/focus/EventCard": "./components/ux/focus/EventCard.tsx",
     "./components/ux/connectivity": "./components/ux/connectivity/index.ts",
     "./components/ux/connectivity/ConnectivityBadge": "./components/ux/connectivity/ConnectivityBadge.tsx",
     "./components/ux/runner": "./components/ux/runner/index.ts",