mac-human-design 0.1.7 → 0.1.8

package/changelog.md

@@ -2,6 +2,21 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.8
+
+### Added
+
+- Added `MacDataTable`, a reusable macOS Finder-style table/list primitive with
+  column definitions, header rows, selectable rows, loading and empty states,
+  bordered surfaces, and compact macOS typography.
+- Added `MacWindowToolbar`, a Tauri-aware macOS window toolbar that owns
+  draggable-region markup while wrapping interactive leading, content, and
+  trailing controls in no-drag zones.
+
+### Changed
+
+- Bumped the package to `0.1.8`.
+
 ## 0.1.7
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/src/components/MacBaseUIGallery.tsx

@@ -53,7 +53,9 @@ import {
   MacToolbarToggle,
   MacTooltip,
 } from "./MacBaseUI";
+import { MacDataTable } from "./MacDataTable";
 import { MacSegmentedControl } from "./MacSegmentedControl";
+import { MacWindowToolbar } from "./MacWindowToolbar";
 
 const choices = [
   { label: "General", value: "general" },
@@ -61,6 +63,11 @@ const choices = [
   { label: "Advanced", value: "advanced" },
 ];
 
+const tableRows = [
+  { name: "Documents", modified: "Today", size: "-", kind: "Folder" },
+  { name: "report.pdf", modified: "Yesterday", size: "2.4 MB", kind: "PDF" },
+];
+
 function GallerySection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <section className="hd-mac-gallery-section">
@@ -395,6 +402,23 @@ export function MacBaseUIGallery() {
         <MacAvatar.Root>
           <MacAvatar.Fallback>HD</MacAvatar.Fallback>
         </MacAvatar.Root>
+        <MacWindowToolbar
+          leading={<MacSegmentedControl options={choices} value={segment} onChange={setSegment} />}
+          title="Library"
+          trailing={<MacIconButton aria-label="Refresh">↻</MacIconButton>}
+        />
+        <MacDataTable
+          bordered
+          columns={[
+            { id: "name", header: "Name", width: "minmax(140px, 1fr)", render: (row) => row.name },
+            { id: "modified", header: "Modified", width: "90px", render: (row) => row.modified },
+            { id: "size", header: "Size", width: "70px", render: (row) => row.size },
+            { id: "kind", header: "Kind", width: "80px", render: (row) => row.kind },
+          ]}
+          rows={tableRows}
+          getRowKey={(row) => row.name}
+          isRowSelected={(row) => row.name === "Documents"}
+        />
         <MacNavigationMenu.Root>
           <MacNavigationMenu.List>
             <MacNavigationMenu.Item>

package/src/components/MacDataTable.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+
+export type MacDataTableColumn<Row> = {
+  id: string;
+  header: React.ReactNode;
+  width: string;
+  render: (row: Row, index: number) => React.ReactNode;
+  align?: "start" | "center" | "end";
+  className?: string;
+  headerClassName?: string;
+  style?: React.CSSProperties;
+  headerStyle?: React.CSSProperties;
+};
+
+export type MacDataTableProps<Row> = {
+  columns: readonly MacDataTableColumn<Row>[];
+  rows: readonly Row[];
+  getRowKey: (row: Row, index: number) => React.Key;
+  isRowSelected?: (row: Row, index: number) => boolean;
+  onRowClick?: (row: Row, index: number) => void;
+  onRowDoubleClick?: (row: Row, index: number) => void;
+  loading?: boolean;
+  loadingContent?: React.ReactNode;
+  emptyContent?: React.ReactNode;
+  bordered?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  rowClassName?: (row: Row, index: number) => string | undefined;
+  rowStyle?: (row: Row, index: number) => React.CSSProperties | undefined;
+};
+
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function alignmentClassName(align: MacDataTableColumn<unknown>["align"]) {
+  if (align === "center") {
+    return "hd-mac-data-table-cell-center";
+  }
+  if (align === "end") {
+    return "hd-mac-data-table-cell-end";
+  }
+  return undefined;
+}
+
+export function MacDataTable<Row>({
+  columns,
+  rows,
+  getRowKey,
+  isRowSelected,
+  onRowClick,
+  onRowDoubleClick,
+  loading = false,
+  loadingContent = "Loading...",
+  emptyContent = "No rows.",
+  bordered = false,
+  className,
+  style,
+  rowClassName,
+  rowStyle,
+}: MacDataTableProps<Row>) {
+  const gridTemplateColumns = columns.map((column) => column.width).join(" ");
+  const hasInteractiveRows = Boolean(onRowClick || onRowDoubleClick);
+
+  return (
+    <div
+      className={joinClasses("hd-mac-data-table", bordered && "hd-mac-data-table-bordered", className)}
+      style={style}
+    >
+      <div
+        className="hd-mac-data-table-header"
+        role="row"
+        style={{ gridTemplateColumns }}
+      >
+        {columns.map((column) => (
+          <div
+            key={column.id}
+            className={joinClasses(
+              "hd-mac-data-table-header-cell",
+              alignmentClassName(column.align),
+              column.headerClassName,
+            )}
+            role="columnheader"
+            style={column.headerStyle}
+          >
+            {column.header}
+          </div>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="hd-mac-data-table-message">{loadingContent}</div>
+      ) : rows.length === 0 ? (
+        <div className="hd-mac-data-table-message">{emptyContent}</div>
+      ) : (
+        rows.map((row, index) => {
+          const selected = isRowSelected?.(row, index) ?? false;
+          return (
+            <div
+              key={getRowKey(row, index)}
+              className={joinClasses(
+                "hd-mac-data-table-row",
+                hasInteractiveRows && "hd-mac-data-table-row-interactive",
+                rowClassName?.(row, index),
+              )}
+              data-selected={selected || undefined}
+              onClick={onRowClick ? () => onRowClick(row, index) : undefined}
+              onDoubleClick={onRowDoubleClick ? () => onRowDoubleClick(row, index) : undefined}
+              role="row"
+              style={{ gridTemplateColumns, ...rowStyle?.(row, index) }}
+            >
+              {columns.map((column) => (
+                <div
+                  key={column.id}
+                  className={joinClasses(
+                    "hd-mac-data-table-cell",
+                    alignmentClassName(column.align),
+                    column.className,
+                  )}
+                  role="cell"
+                  style={column.style}
+                >
+                  {column.render(row, index)}
+                </div>
+              ))}
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}

package/src/components/MacWindowToolbar.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+export type MacWindowToolbarProps = {
+  leading?: React.ReactNode;
+  title?: React.ReactNode;
+  trailing?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function MacWindowToolbar({
+  leading,
+  title,
+  trailing,
+  children,
+  className,
+  style,
+}: MacWindowToolbarProps) {
+  return (
+    <div
+      className={joinClasses("hd-mac-window-toolbar", className)}
+      data-tauri-drag-region
+      style={style}
+    >
+      {leading ? (
+        <div className="hd-mac-window-toolbar-group" data-tauri-no-drag-region>
+          {leading}
+        </div>
+      ) : null}
+      {title ? (
+        <div className="hd-mac-window-toolbar-title" data-tauri-drag-region>
+          {title}
+        </div>
+      ) : null}
+      {children ? (
+        <div className="hd-mac-window-toolbar-content" data-tauri-no-drag-region>
+          {children}
+        </div>
+      ) : null}
+      {trailing ? (
+        <div className="hd-mac-window-toolbar-group" data-tauri-no-drag-region>
+          {trailing}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,6 +1,8 @@
 export * from "./MacBaseUI";
 export { MacBaseUIGallery } from "./MacBaseUIGallery";
+export { MacDataTable, type MacDataTableColumn, type MacDataTableProps } from "./MacDataTable";
 export { MacSegmentedControl, type MacSegmentedControlOption } from "./MacSegmentedControl";
+export { MacWindowToolbar, type MacWindowToolbarProps } from "./MacWindowToolbar";
 export { StatusMessage } from "./StatusMessage";
 export { SymbolIconButton } from "./SymbolIconButton";
 export { AppWindowShell } from "./AppWindowShell";

package/src/index.ts

@@ -1,7 +1,9 @@
 export * from "./components/MacBaseUI";
 export { MacBaseUIGallery } from "./components/MacBaseUIGallery";
 export { AppWindowShell } from "./components/AppWindowShell";
+export { MacDataTable, type MacDataTableColumn, type MacDataTableProps } from "./components/MacDataTable";
 export { MacSegmentedControl, type MacSegmentedControlOption } from "./components/MacSegmentedControl";
+export { MacWindowToolbar, type MacWindowToolbarProps } from "./components/MacWindowToolbar";
 export { SymbolIconButton } from "./components/SymbolIconButton";
 export { StatusMessage } from "./components/StatusMessage";
 export { ViewDragRegion } from "./components/ViewDragRegion";

package/src/styles/macosBaseUi.css

@@ -1107,6 +1107,119 @@
   background: var(--hd-mac-border);
 }
 
+.hd-mac-window-toolbar {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--hd-mac-border);
+  padding: 10px 16px;
+  background: var(--hd-mac-surface);
+  box-sizing: border-box;
+}
+
+.hd-mac-window-toolbar-group,
+.hd-mac-window-toolbar-content {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hd-mac-window-toolbar-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--hd-mac-text);
+  font: 600 15px/20px var(--hd-mac-font);
+}
+
+.hd-mac-data-table {
+  min-width: 0;
+  color: var(--hd-mac-text);
+  font-family: var(--hd-mac-font);
+}
+
+.hd-mac-data-table-bordered {
+  overflow: hidden;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 10px;
+}
+
+.hd-mac-data-table-header,
+.hd-mac-data-table-row {
+  display: grid;
+  min-width: 0;
+}
+
+.hd-mac-data-table-header {
+  border-bottom: 1px solid var(--hd-mac-border);
+  padding: 8px 10px;
+  color: var(--hd-mac-muted-text);
+  font: 600 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-data-table-row {
+  border-bottom: 1px solid var(--hd-mac-border);
+  padding: 8px 10px;
+}
+
+.hd-mac-data-table-row:last-child {
+  border-bottom: 0;
+}
+
+.hd-mac-data-table-row-interactive {
+  cursor: default;
+}
+
+.hd-mac-data-table-row-interactive:hover {
+  background: var(--hd-mac-fill-hover);
+}
+
+.hd-mac-data-table-row[data-selected] {
+  background: color-mix(in srgb, var(--hd-mac-blue) 18%, transparent);
+}
+
+.hd-mac-data-table-row[data-selected]:hover {
+  background: color-mix(in srgb, var(--hd-mac-blue) 24%, transparent);
+}
+
+.hd-mac-data-table-header-cell,
+.hd-mac-data-table-cell {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hd-mac-data-table-cell {
+  color: var(--hd-mac-secondary-text);
+  font: 400 12px/18px var(--hd-mac-font);
+}
+
+.hd-mac-data-table-cell:first-child {
+  color: var(--hd-mac-text);
+  font-size: 13px;
+}
+
+.hd-mac-data-table-cell-center {
+  text-align: center;
+}
+
+.hd-mac-data-table-cell-end {
+  text-align: end;
+}
+
+.hd-mac-data-table-message {
+  padding: 12px 10px;
+  color: var(--hd-mac-secondary-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
 .hd-mac-gallery {
   display: grid;
   gap: 14px;