mac-human-design 0.1.25 → 0.1.27

package/README.md

@@ -56,7 +56,15 @@ fn main() {
 
 ```ts
 import { useState } from "react";
-import { MacButton, MacMotionProvider, MacSegmentedControl, MacSelect } from "mac-human-design";
+import {
+  MacButton,
+  MacDataTable,
+  MacMotionProvider,
+  MacSegmentedControl,
+  MacSelect,
+  MacWindowToolbar,
+  SymbolIconButton,
+} from "mac-human-design";
 import { SystemSymbolImage } from "mac-human-design/symbols";
 import "mac-human-design/styles/macos-base-ui.css";
 
@@ -65,14 +73,36 @@ export function Demo() {
 
   return (
     <MacMotionProvider>
+      <MacWindowToolbar
+        ariaLabel="Demo toolbar"
+        leading={
+          <MacSegmentedControl
+            options={[
+              { value: "files", label: "Files" },
+              { value: "settings", label: "Settings" },
+            ]}
+            value={tab}
+            onChange={setTab}
+          />
+        }
+        trailing={
+          <SymbolIconButton
+            label="Refresh"
+            symbolName="arrow.clockwise"
+            fallback="↻"
+            onClick={() => {}}
+          />
+        }
+      />
       <SystemSymbolImage symbolName="folder" sizePx={18} fallback="▢" />
-      <MacSegmentedControl
-        options={[
-          { value: "files", label: "Files" },
-          { value: "settings", label: "Settings" },
+      <MacDataTable
+        ariaLabel="Demo files"
+        columns={[
+          { id: "name", header: "Name", width: "minmax(120px, 1fr)", render: (row) => row.name },
+          { id: "kind", header: "Kind", width: "90px", render: (row) => row.kind },
         ]}
-        value={tab}
-        onChange={setTab}
+        rows={[{ name: "Documents", kind: "Folder" }]}
+        getRowKey={(row) => row.name}
       />
       <MacButton data-variant="primary">Continue</MacButton>
       <MacSelect.Root items={[{ label: "Files", value: "files" }]}>
@@ -118,8 +148,15 @@ The following components are now in the shared library and can be imported by an
   `MacTabs`, `MacToast`, `MacToggle`, `MacToolbarToggle`,
   `MacToggleGroup`, `MacSegmentedToggleGroup`,
   `MacSeparatedSegmentedToggleGroup`, `MacToolbar`, `MacTooltip`
+- `MacDataTable`, a Finder-style grid/table primitive with loading, empty,
+  selected, keyboard, and interactive-row states
+- `MacSegmentedControl`, a compact macOS segmented control wrapper with
+  accessible labels and full-width support
+- `MacWindowToolbar`, a Motion-backed Tauri window toolbar with drag-region
+  and no-drag control group handling
 - `StatusMessage`
-- `SymbolIconButton`
+- `SymbolIconButton`, a centered SF Symbols icon button with fallback glyphs,
+  loading state, tooltips, and pass-through styling hooks
 - `ViewDragRegion`
 - `isDraggableAreaTarget` utility
 
@@ -128,6 +165,9 @@ Example import:
 ```ts
 import {
   AppWindowShell,
+  MacDataTable,
+  MacSegmentedControl,
+  MacWindowToolbar,
   StatusMessage,
   SymbolIconButton,
   ViewDragRegion,

package/changelog.md

@@ -2,6 +2,36 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.27
+
+### Added
+
+- Added README usage and export documentation for `MacDataTable`,
+  `MacWindowToolbar`, `MacSegmentedControl`, and `SymbolIconButton`.
+- Extended the macOS design verifier to require README coverage for shared
+  app-level macOS components and their labelled toolbar/table examples.
+
+### Changed
+
+- The main README example now demonstrates a toolbar with a segmented control,
+  centered `SymbolIconButton`, and `MacDataTable` usage.
+- Bumped the package to `0.1.27`.
+
+## 0.1.26
+
+### Added
+
+- Added safe `className`, `style`, and `tooltipSideOffset` pass-through props
+  to `SymbolIconButton`.
+- Added verifier coverage for `SymbolIconButton` pass-through props, fixed
+  geometry preservation, tooltip offset handling, and explicit `type="button"`.
+
+### Changed
+
+- `SymbolIconButton` now sets `type="button"` so toolbar icon buttons do not
+  accidentally submit surrounding forms.
+- Bumped the package to `0.1.26`.
+
 ## 0.1.25
 
 ### Added

package/package.json

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

package/scripts/verify-macos-design.mjs

@@ -5,6 +5,7 @@ import { fileURLToPath } from "node:url";
 const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
 const packageJsonPath = path.join(repoRoot, "package.json");
+const readmePath = path.join(repoRoot, "README.md");
 const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
 const symbolIconButtonPath = path.join(repoRoot, "src", "components", "SymbolIconButton.tsx");
 const galleryPath = path.join(repoRoot, "src", "components", "MacBaseUIGallery.tsx");
@@ -48,6 +49,7 @@ const sources = new Map(
 );
 const stylesSource = readText(stylesPath);
 const packageJson = JSON.parse(readText(packageJsonPath));
+const readmeSource = readText(readmePath);
 const wrapperSource = readText(wrapperPath);
 const symbolIconButtonSource = readText(symbolIconButtonPath);
 const gallerySource = readText(galleryPath);
@@ -193,7 +195,12 @@ if (/\by\s*:/.test(iconMotionBranch)) {
 const symbolIconRequirements = [
   ["SymbolIconButton imports MacIconButton", /import\s+\{\s*MacIconButton,\s*MacTooltip\s*\}\s+from\s+["']\.\/MacBaseUI["']/],
   ["SymbolIconButton render element is MacIconButton", /render=\{\s*<MacIconButton\b/],
-  ["SymbolIconButton applies hd-mac-symbol-icon-button class", /className=["']hd-mac-symbol-icon-button["']/],
+  ["SymbolIconButton applies hd-mac-symbol-icon-button class", /joinClasses\("hd-mac-symbol-icon-button", className\)/],
+  ["SymbolIconButton defaults to button type", /type=["']button["']/],
+  ["SymbolIconButton supports className pass-through", /\bclassName,\s*\n\s*style,/],
+  ["SymbolIconButton supports style pass-through after fixed geometry", /\.\.\.style/],
+  ["SymbolIconButton supports tooltip offset", /tooltipSideOffset = 5/],
+  ["SymbolIconButton applies tooltip offset", /sideOffset=\{tooltipSideOffset\}/],
   ["SymbolIconButton exposes aria-busy loading state", /aria-busy=\{isLoading \|\| undefined\}/],
   ["masked symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-mask["']/],
   ["fallback symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-fallback["']/],
@@ -300,6 +307,24 @@ if (missingToolbarRequirements.length > 0) {
   );
 }
 
+const missingPublicDocs = [
+  ["README documents MacDataTable", /`MacDataTable`[\s\S]*Finder-style grid\/table primitive/],
+  ["README documents MacWindowToolbar", /`MacWindowToolbar`[\s\S]*Tauri window toolbar/],
+  ["README documents SymbolIconButton", /`SymbolIconButton`[\s\S]*centered SF Symbols icon button/],
+  ["README usage imports MacDataTable", /import\s+\{[\s\S]*MacDataTable[\s\S]*\}\s+from\s+["']mac-human-design["']/],
+  ["README usage imports MacWindowToolbar", /import\s+\{[\s\S]*MacWindowToolbar[\s\S]*\}\s+from\s+["']mac-human-design["']/],
+  ["README usage imports SymbolIconButton", /import\s+\{[\s\S]*SymbolIconButton[\s\S]*\}\s+from\s+["']mac-human-design["']/],
+  ["README shows labelled toolbar", /<MacWindowToolbar[\s\S]*ariaLabel=["']Demo toolbar["']/],
+  ["README shows labelled data table", /<MacDataTable[\s\S]*ariaLabel=["']Demo files["']/],
+].filter(([, pattern]) => !pattern.test(readmeSource));
+
+if (missingPublicDocs.length > 0) {
+  fail(
+    "Missing README coverage for shared macOS component exports.",
+    missingPublicDocs.map(([label]) => label),
+  );
+}
+
 const missingSegmentedControlRequirements = [
   ["stable segmented control class", /"hd-mac-segmented-control"/],
   ["default accessible label", /ariaLabel = "Segmented control"/],

package/src/components/SymbolIconButton.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { MacIconButton, MacTooltip } from "./MacBaseUI";
 import { useSystemSymbol } from "../symbols/useSystemSymbol";
 
@@ -10,11 +11,18 @@ type SymbolIconButtonProps = {
   isLoading?: boolean;
   iconSizePx?: number;
   symbolEnabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  tooltipSideOffset?: number;
 };
 
 const ICON_BUTTON_SIZE = "30px";
 const ICON_BUTTON_RADIUS = "7px";
 
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
 export function SymbolIconButton({
   label,
   symbolName,
@@ -24,6 +32,9 @@ export function SymbolIconButton({
   isLoading,
   iconSizePx = 18,
   symbolEnabled = true,
+  className,
+  style,
+  tooltipSideOffset = 5,
 }: SymbolIconButtonProps) {
   const { dataUrl: symbolDataUrl } = useSystemSymbol({
     symbolName,
@@ -40,9 +51,10 @@ export function SymbolIconButton({
             aria-label={label}
             aria-busy={isLoading || undefined}
             title={label}
+            type="button"
             disabled={disabled || isLoading}
             onClick={onClick}
-            className="hd-mac-symbol-icon-button"
+            className={joinClasses("hd-mac-symbol-icon-button", className)}
             data-loading={isLoading || undefined}
             style={{
               width: ICON_BUTTON_SIZE,
@@ -50,6 +62,7 @@ export function SymbolIconButton({
               height: ICON_BUTTON_SIZE,
               minHeight: ICON_BUTTON_SIZE,
               borderRadius: ICON_BUTTON_RADIUS,
+              ...style,
             }}
           >
             {symbolDataUrl ? (
@@ -88,7 +101,7 @@ export function SymbolIconButton({
         }
       />
       <MacTooltip.Portal>
-        <MacTooltip.Positioner sideOffset={5}>
+        <MacTooltip.Positioner sideOffset={tooltipSideOffset}>
           <MacTooltip.Popup>{label}</MacTooltip.Popup>
         </MacTooltip.Positioner>
       </MacTooltip.Portal>