mac-human-design 0.1.12 → 0.1.14

package/changelog.md

@@ -2,6 +2,32 @@
 
 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
+
+- Refined shared control Motion defaults so buttons and icon buttons scale from
+  center without vertical hover or press translation.
+- Added explicit center transform origins to macOS icon buttons and symbol
+  glyphs to keep animated icon-only controls visually anchored.
+- Bumped the package to `0.1.13`.
+
 ## 0.1.12
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.12",
+  "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/MacBaseUI.tsx

@@ -111,14 +111,22 @@ function isDisabled(props: Record<string, unknown>) {
   return Boolean(props.disabled || props["data-disabled"] || props["aria-disabled"]);
 }
 
-function interactiveControlDefaults(props: Record<string, unknown>): MotionDefaults {
+function interactiveControlDefaults(macClassName: string, props: Record<string, unknown>): MotionDefaults {
   if (isDisabled(props)) {
     return {};
   }
 
+  if (includesAny(macClassName, ["hd-mac-icon-button", "hd-mac-help-button"])) {
+    return {
+      whileHover: { scale: 1.04 },
+      whileTap: { scale: 0.94 },
+      transition: macFastTransition,
+    };
+  }
+
   return {
-    whileHover: { y: -0.5, scale: 1.012 },
-    whileTap: { y: 1, scale: 0.985 },
+    whileHover: { scale: 1.006 },
+    whileTap: { scale: 0.982 },
     transition: macFastTransition,
   };
 }
@@ -147,7 +155,7 @@ function getMotionDefaults(macClassName: string, props: Record<string, unknown>)
       "hd-mac-disclosure-trigger",
     ])
   ) {
-    return interactiveControlDefaults(props);
+    return interactiveControlDefaults(macClassName, props);
   }
 
   if (macClassName.includes("hd-mac-input")) {

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

@@ -235,6 +235,7 @@
   place-content: center;
   padding: 0;
   line-height: 0;
+  transform-origin: center;
   vertical-align: middle;
 }
 
@@ -261,6 +262,19 @@
   text-align: center;
   flex-shrink: 0;
   margin: auto;
+  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 {