mac-human-design 0.1.13 → 0.1.14

package/changelog.md

@@ -2,6 +2,22 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.14
+
+### Added
+
+- Added `SymbolIconButton` coverage to the macOS Base UI gallery, including a
+  fallback-only state for non-Tauri render paths.
+
+### Changed
+
+- Added a `symbolEnabled` prop to `SymbolIconButton` so consumers and examples
+  can intentionally render fallback glyphs without invoking the Tauri symbol
+  bridge.
+- Split masked SF Symbol and fallback glyph rendering into separate centered
+  elements, with fallback-specific typography and optical vertical correction.
+- Bumped the package to `0.1.14`.
+
 ## 0.1.13
 
 ### Changed

package/package.json

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

package/src/components/MacBaseUIGallery.tsx

@@ -56,6 +56,7 @@ import {
 import { MacDataTable } from "./MacDataTable";
 import { MacSegmentedControl } from "./MacSegmentedControl";
 import { MacWindowToolbar } from "./MacWindowToolbar";
+import { SymbolIconButton } from "./SymbolIconButton";
 
 const choices = [
   { label: "General", value: "general" },
@@ -93,6 +94,9 @@ export function MacBaseUIGallery() {
         <MacDestructiveButton>Delete</MacDestructiveButton>
         <MacPlainButton>Cancel</MacPlainButton>
         <MacIconButton aria-label="Add">+</MacIconButton>
+        <SymbolIconButton label="Refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} />
+        <SymbolIconButton label="Upload" symbolName="square.and.arrow.up" fallback="↑" onClick={() => {}} />
+        <SymbolIconButton label="Fallback refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} symbolEnabled={false} />
         <MacHelpButton aria-label="Help">?</MacHelpButton>
       </GallerySection>
 

package/src/components/SymbolIconButton.tsx

@@ -9,6 +9,7 @@ type SymbolIconButtonProps = {
   disabled?: boolean;
   isLoading?: boolean;
   iconSizePx?: number;
+  symbolEnabled?: boolean;
 };
 
 const ICON_BUTTON_SIZE = "30px";
@@ -22,10 +23,12 @@ export function SymbolIconButton({
   disabled,
   isLoading,
   iconSizePx = 18,
+  symbolEnabled = true,
 }: SymbolIconButtonProps) {
   const { dataUrl: symbolDataUrl } = useSystemSymbol({
     symbolName,
     cssPixelSize: iconSizePx,
+    enabled: symbolEnabled,
   });
   const glyphPx = `${iconSizePx}px`;
 
@@ -48,30 +51,38 @@ export function SymbolIconButton({
               borderRadius: ICON_BUTTON_RADIUS,
             }}
           >
-            <span
-              aria-hidden
-              className="hd-mac-symbol-icon"
-              style={{
-                width: glyphPx,
-                height: glyphPx,
-                color: "currentColor",
-                backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
-                fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
-                fontSize: symbolDataUrl ? "0" : glyphPx,
-                fontWeight: 500,
-                lineHeight: "1",
-                WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-                WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
-                WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-                WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
-                maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-                maskPosition: symbolDataUrl ? "center" : undefined,
-                maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-                maskSize: symbolDataUrl ? "contain" : undefined,
-              }}
-            >
-              {symbolDataUrl ? null : fallback}
-            </span>
+            {symbolDataUrl ? (
+              <span
+                aria-hidden
+                className="hd-mac-symbol-icon hd-mac-symbol-icon-mask"
+                style={{
+                  width: glyphPx,
+                  height: glyphPx,
+                  color: "currentColor",
+                  backgroundColor: "currentColor",
+                  WebkitMaskImage: `url("${symbolDataUrl}")`,
+                  WebkitMaskPosition: "center",
+                  WebkitMaskRepeat: "no-repeat",
+                  WebkitMaskSize: "contain",
+                  maskImage: `url("${symbolDataUrl}")`,
+                  maskPosition: "center",
+                  maskRepeat: "no-repeat",
+                  maskSize: "contain",
+                }}
+              />
+            ) : (
+              <span
+                aria-hidden
+                className="hd-mac-symbol-icon hd-mac-symbol-icon-fallback"
+                style={{
+                  width: glyphPx,
+                  height: glyphPx,
+                  fontSize: glyphPx,
+                }}
+              >
+                {fallback}
+              </span>
+            )}
           </MacIconButton>
         }
       />

package/src/styles/macosBaseUi.css

@@ -265,6 +265,18 @@
   transform-origin: center;
 }
 
+.hd-mac-symbol-icon-mask {
+  line-height: 0;
+}
+
+.hd-mac-symbol-icon-fallback {
+  color: currentColor;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  transform: translateY(-0.04em);
+}
+
 .hd-mac-help-button {
   display: inline-grid;
   width: 18px;