@astryxdesign/core 0.5.0-canary.f4d494c → 0.5.0

package/dist/Indicator/CheckboxIndicator.js

@@ -155,9 +155,7 @@ export function CheckboxIndicator({
     children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 10 10",
-        ...mergeProps(themeProps('checkbox-indicator-check', {
-          size
-        }), stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible)),
+        ...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
         children: /*#__PURE__*/_jsx("path", {
           d: "M8.5 2.5L4 7.5L1.5 5",
           stroke: "currentColor",
@@ -167,9 +165,7 @@ export function CheckboxIndicator({
           strokeLinejoin: "round"
         })
       }), /*#__PURE__*/_jsx("span", {
-        ...mergeProps(themeProps('checkbox-indicator-dash', {
-          size
-        }), stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible))
+        ...stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible)
       })]
     })
   });

package/dist/Kbd/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0G5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAgC3E;yBAhCe,GAAG"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmI5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAgC3E;yBAhCe,GAAG"}

package/dist/Kbd/Kbd.js

@@ -15,7 +15,6 @@
 import React, { useSyncExternalStore } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
-import { isApplePlatform } from "../utils/isApplePlatform.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -99,6 +98,31 @@ function subscribeToPlatformChanges() {
 function getServerPlatformSnapshot() {
   return false;
 }
+
+/**
+ * Detects whether the current platform is macOS/iOS.
+ * Prefers the User-Agent Client Hints API when it names a platform (modern
+ * Chrome/Edge), falls back to navigator.platform (deprecated but universally
+ * supported) when it is absent or blank.
+ */
+function detectMac() {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+  // Prefer User-Agent Client Hints API (not deprecated)
+  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
+  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
+    const uaPlatform = uaData.platform;
+    // A blank platform is no answer, not a negative one. Builds that rewrite
+    // their client-hints identity ship '', so fall through rather than
+    // reading it as "not Apple".
+    if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
+      return /mac/i.test(uaPlatform);
+    }
+  }
+  // Fallback: navigator.platform (deprecated but still shipped everywhere)
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
+}
 /**
  * Displays a keyboard shortcut as styled <kbd> elements.
  *
@@ -122,7 +146,7 @@ export function Kbd({
   style,
   ...rest
 }) {
-  const isMac = useSyncExternalStore(subscribeToPlatformChanges, isApplePlatform, getServerPlatformSnapshot);
+  const isMac = useSyncExternalStore(subscribeToPlatformChanges, detectMac, getServerPlatformSnapshot);
   const parts = keys.split('+').map(key => key.trim().toLowerCase());
 
   // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since

package/dist/astryx.css

@@ -79,9 +79,6 @@
   :root, .x1kvdh9l{--spacing-0:0px;--spacing-0-5:2px;--spacing-1:4px;--spacing-1-5:6px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-7:28px;--spacing-8:32px;--spacing-9:36px;--spacing-10:40px;--spacing-11:44px;--spacing-12:48px;}
   :root, .x1etlgq0{--text-heading-1-size:var(--font-size-2xl);--text-heading-1-weight:var(--font-weight-semibold);--text-heading-1-leading:1.3333;--text-heading-2-size:var(--font-size-xl);--text-heading-2-weight:var(--font-weight-semibold);--text-heading-2-leading:1.4;--text-heading-3-size:var(--font-size-lg);--text-heading-3-weight:var(--font-weight-semibold);--text-heading-3-leading:1.4118;--text-heading-4-size:var(--font-size-base);--text-heading-4-weight:var(--font-weight-semibold);--text-heading-4-leading:1.4286;--text-heading-5-size:var(--font-size-sm);--text-heading-5-weight:var(--font-weight-semibold);--text-heading-5-leading:1.6667;--text-heading-6-size:var(--font-size-xs);--text-heading-6-weight:var(--font-weight-semibold);--text-heading-6-leading:1.6;--text-body-size:var(--font-size-base);--text-body-weight:var(--font-weight-normal);--text-body-leading:1.4286;--text-large-size:var(--font-size-lg);--text-large-weight:var(--font-weight-semibold);--text-large-leading:1.4118;--text-label-size:var(--font-size-base);--text-label-weight:var(--font-weight-medium);--text-label-leading:1.4286;--text-code-size:var(--font-size-base);--text-code-weight:var(--font-weight-normal);--text-code-leading:1.4286;--text-supporting-size:var(--font-size-sm);--text-supporting-weight:var(--font-weight-normal);--text-supporting-leading:1.6667;--text-display-1-size:var(--font-size-5xl);--text-display-1-weight:var(--font-weight-normal);--text-display-1-leading:1.2381;--text-display-2-size:var(--font-size-4xl);--text-display-2-weight:var(--font-weight-normal);--text-display-2-leading:1.2571;--text-display-3-size:var(--font-size-3xl);--text-display-3-weight:var(--font-weight-normal);--text-display-3-leading:1.2414;}
   .xlz5hwt{--_avatar-group-overlap:var(--x---_avatar-group-overlap)}
-  .xdarwi0{--_avatar-radius:var(--radius-element)}
-  .xeincmr{--_avatar-radius:var(--radius-full)}
-  .x877142{--_avatar-radius:var(--radius-none)}
   .xh8ntw8{--_button-radius:calc(var(--radius-element) - var(--spacing-1))}
   .xcw7vlg{--_button-radius:max(var(--radius-element),calc(var(--_chat-composer-radius) - var(--_chat-composer-padding)))}
   .x1rjw8qi{--_button-radius:var(--radius-full)}
@@ -404,7 +401,6 @@
   .x1pjcqnp:not(#\#):not(#\#){border-radius:inherit}
   .x1ws5lxm:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_dropdown-menu-radius,var(--spacing-2)) - var(--_dropdown-menu-padding,var(--spacing-1))))}
   .xc910v0:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_segmented-control-radius) - var(--_segmented-control-padding)))}
-  .xbc78cj:not(#\#):not(#\#){border-radius:var(--_avatar-radius)}
   .x1vf2byn:not(#\#):not(#\#){border-radius:var(--_banner-radius,var(--radius-container))}
   .x1jxw6zd:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-element))}
   .xy0xnkn:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-full))}
@@ -438,7 +434,6 @@
   .x98rzlu:not(#\#):not(#\#){flex:1}
   .xxhr3t:not(#\#):not(#\#){gap:0}
   .x1jnr06f:not(#\#):not(#\#){gap:4px}
-  .x167g77z:not(#\#):not(#\#){gap:8px}
   .x14kbac9:not(#\#):not(#\#){gap:inherit}
   .x1lsbc85:not(#\#):not(#\#){gap:var(--spacing-0-5)}
   .xsn7fz1:not(#\#):not(#\#){gap:var(--spacing-0)}
@@ -563,7 +558,6 @@
   @media (hover: hover){.x61roa7.x61roa7.x61roa7:where(.x1odsvnm:hover *):not(#\#):not(#\#){border-color:var(--color-border)}}
   @media (hover: hover){.x1xwh4np.x1xwh4np.x1xwh4np:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){border-color:var(--color-border-emphasized)}}
   @media (hover: hover){.x13nosk6.x13nosk6.x13nosk6:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){text-decoration:underline}}
-  .x1lugfcp:not(#\#):not(#\#):not(#\#){-webkit-appearance:none}
   .x67t5t6:not(#\#):not(#\#):not(#\#){-webkit-backdrop-filter:blur(12px)}
   .x1ua5tub:not(#\#):not(#\#):not(#\#){-webkit-box-orient:vertical}
   .x1yhjpo9:not(#\#):not(#\#):not(#\#){-webkit-line-clamp:var(--x-WebkitLineClamp)}
@@ -573,7 +567,6 @@
   .xt2iwb0:not(#\#):not(#\#):not(#\#){-webkit-mask-image:linear-gradient(transparent,transparent)}
   .x5lxg6s:not(#\#):not(#\#):not(#\#){-webkit-overflow-scrolling:touch}
   .x1i10hfl:not(#\#):not(#\#):not(#\#){-webkit-tap-highlight-color:transparent}
-  .xg7jpbn:not(#\#):not(#\#):not(#\#){-webkit-text-fill-color:transparent}
   .xpdipgo:not(#\#):not(#\#):not(#\#){-webkit-touch-callout:none}
   .x8gbvx8:not(#\#):not(#\#):not(#\#){align-content:flex-start}
   .x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
@@ -1153,7 +1146,6 @@
   .x3oybdh:not(#\#):not(#\#):not(#\#){transform:scale(1)}
   .x11lhmoz:not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}
   .x1m9mm8y:not(#\#):not(#\#):not(#\#){transform:translate(-50%,50%)}
-  .xv8yid9:not(#\#):not(#\#):not(#\#){transform:translate(25%,25%)}
   .x4v1no5:not(#\#):not(#\#):not(#\#){transform:translate(50%,50%)}
   .x5i6ehr:not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
   .xuuh30:not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}
@@ -1303,7 +1295,6 @@
   .xaafvuh:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(0deg)}
   .x1nxqau:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(90deg)}
   .xgtlewx:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1)}
-  .x10fxb7p:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translate(-25%,25%)}
   .xqgnvz5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translate(-50%,50%)}
   .xoffwj3:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translate(50%,-50%)}
   .x1df3fe5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
@@ -1472,7 +1463,6 @@
   .xs02d24:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100% + 1px)}
   .x12qplqi:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100% + var(--container-padding-block-start,0px) + var(--container-padding-block-end,0px))}
   .xpa73km:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100dvh - var(--_app-shell-header-height,0px))}
-  .x1oglpa6:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(max(1rem,var(--text-body-size)) * var(--text-body-leading));height:1lh}
   .x1tpcejd:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + 48px)}
   .x1uiybsj:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 4px)}
   .x102lyln:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 8px)}
@@ -1776,13 +1766,7 @@
   .xxyica1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:inherit}
   .x17gn2l9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{grid-column:1}
   .xd54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
-  .xpsyfx0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-block:0}
-  .x1qqcexc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-inline:0}
-  .x1x4c3m6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{padding-block:0}
-  .xtbxizx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-datetime-edit{padding-block:0}
   @starting-style{.x5rzir7.x5rzir7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}}
-  .xkqr7wz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{padding-inline:0}
-  .xslb4at:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-datetime-edit{padding-inline:0}
   .xvtkv6q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:background-color .15s ease,width .15s ease}
   .x17s1k9h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:opacity .15s ease}
   .x19ds33d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{align-self:start}
@@ -1806,15 +1790,12 @@
   .xc2ndz5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:counter(astryx-list) "."}
   .xh3pasq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:var(--_input-clear-hit-content)}
   .xhkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
-  .xolhmmf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-calendar-picker-indicator{display:none}
   .x3nzp0f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{font-family:var(--font-family-code)}
   .xekda60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:-2px}
   .x1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
   .xvw6utc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:-2px}
   .x1iygr5g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:0}
   .x1km86hw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:calc(var(--spacing-4) + var(--_codeblock-gutter-width) + var(--spacing-3))}
-  .x15bqym3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-datetime-edit{line-height:inherit}
-  .x1f74mqm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{line-height:inherit}
   .xph5o2a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:0}
   .xb3n6bw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:1}
   .xni466t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:var(--_sheet-scrim-opacity,1)}
@@ -1825,7 +1806,6 @@
   .x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
   .x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
   .x1wnbjh8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{text-align:end}
-  .x9rmy9g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{text-align:start}
   .x1fgylwi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:center top}
   .xgu12d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:left center}
   .x1e8txe:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform:scaleX(0)}
@@ -1865,7 +1845,6 @@
   .xe80sof:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:-2px}
   .x1xrz1ek:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:0}
   .xu6fald:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--_sheet-keyboard-inset,0px)}
-  .xec4aax:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{min-height:0}
   .x51xajf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-2px}
   .x1m1drc7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:0}
   .xkj6t0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:0}

package/dist/hooks/useHotkeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeys.d.ts","sourceRoot":"","sources":["../../src/hooks/useHotkeys.ts"],"names":[],"mappings":"AA+BA;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA0ED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAkClD"}
+{"version":3,"file":"useHotkeys.d.ts","sourceRoot":"","sources":["../../src/hooks/useHotkeys.ts"],"names":[],"mappings":"AA6BA;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkGD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAkClD"}

package/dist/hooks/useHotkeys.js

@@ -18,15 +18,13 @@
  * unless a hotkey opts in via `allowInInputs`.
  *
  * Platform-aware: `mod` maps to metaKey (⌘) on Apple platforms and
- * ctrlKey elsewhere, through the same isApplePlatform util Kbd reads, so
- * displayed and handled shortcuts cannot disagree.
+ * ctrlKey elsewhere — mirrors the detection used by Kbd.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
  * - /packages/core/src/hooks/useHotkeys.doc.mjs
  */
 import { useEffect, useRef } from 'react';
-import { isApplePlatform } from "../utils/isApplePlatform.js";
 
 /**
  * A single keyboard shortcut registration.
@@ -44,6 +42,30 @@ const KEY_ALIASES = {
   plus: '+'
 };
 
+/**
+ * Detects whether the current platform is macOS/iOS.
+ * Prefers the User-Agent Client Hints API when it names a platform (modern
+ * Chrome/Edge), falls back to navigator.platform (deprecated but universally
+ * supported) when it is absent or blank.
+ * Mirrors the detection used by Kbd so displayed and handled shortcuts agree.
+ */
+function isApplePlatform() {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
+  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
+    const uaPlatform = uaData.platform;
+    // A blank platform is no answer, not a negative one. Builds that rewrite
+    // their client-hints identity ship '', so fall through rather than
+    // reading it as "not Apple".
+    if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
+      return /mac/i.test(uaPlatform);
+    }
+  }
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
+}
+
 /**
  * Whether the event target is a typing surface where global shortcuts
  * should stay silent by default.

package/dist/theme/derivedVarRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CA+ChE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CAMnB"}
+{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CA8ChE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CAMnB"}

package/dist/theme/derivedVarRegistry.js

@@ -26,10 +26,6 @@
  * entries share the same property.
  */
 export const derivedVarRegistry = {
-  avatar: [{
-    property: 'borderRadius',
-    vars: ['--_avatar-radius']
-  }],
   banner: [{
     property: 'borderRadius',
     vars: ['--_banner-radius']

package/dist/theme/syntax/tokens.d.ts

@@ -29,7 +29,7 @@ export declare const syntaxTokenDefaults: {
     readonly '--color-syntax-tag': "var(--color-text-red)";
     readonly '--color-syntax-attribute': "var(--color-text-teal)";
     readonly '--color-syntax-property': "var(--color-text-cyan)";
-    readonly '--color-syntax-punctuation': "var(--color-text-secondary)";
+    readonly '--color-syntax-punctuation': "var(--color-text-disabled)";
     readonly '--color-syntax-background': "var(--color-background-muted)";
 };
 export type SyntaxTokenName = keyof typeof syntaxTokenDefaults;

package/dist/theme/syntax/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAgCtB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CA6BtB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,mBAAmB,CAAC"}

package/dist/theme/syntax/tokens.js

@@ -44,11 +44,8 @@ export const syntaxTokenDefaults = {
   '--color-syntax-attribute': 'var(--color-text-teal)',
   // property -> cyan text (object properties)
   '--color-syntax-property': 'var(--color-text-cyan)',
-  // punctuation -> secondary text (brackets, semicolons). Not disabled text:
-  // disabled grey is calibrated to fail AA on purpose (WCAG exempts inactive
-  // controls), and punctuation in a code sample is normal, always-active
-  // text — see #5386.
-  '--color-syntax-punctuation': 'var(--color-text-secondary)',
+  // punctuation -> disabled text (brackets, semicolons)
+  '--color-syntax-punctuation': 'var(--color-text-disabled)',
   // background -> muted surface
   '--color-syntax-background': 'var(--color-background-muted)'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.0-canary.f4d494c",
+  "version": "0.5.0",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,7 +661,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.0-canary.f4d494c",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
@@ -670,7 +669,8 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "@astryxdesign/cli": "0.5.0"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Avatar/Avatar.doc.mjs

@@ -19,7 +19,7 @@ export const docs = {
       {guidance: true, description: 'Give every interactive avatar (href or onClick) a name or alt. It is the control\'s accessible name, and it warns in development when it is missing.'},
       {guidance: false, description: 'Rely on a status label to name an interactive avatar. "Online" says nothing about where the link goes.'},
       {guidance: false, description: 'Use Avatar for logos, product images, or anything that isn\'t a person or team. Use an image or icon instead.'},
-      {guidance: false, description: 'Use xstyle or className to override shape. Use the shape prop instead so themes can control it globally.'},
+      {guidance: false, description: 'Force a square or custom shape. Avatars are always circular to stay consistent across the system.'},
     ],
     anatomy: [
       {name: 'Photo', required: false, description: 'The profile image, loaded from the src URL. Shown when available.'},
@@ -30,17 +30,13 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-avatar', visualProps: ['size', 'shape']},
+      {className: 'astryx-avatar', visualProps: ['size']},
       {className: 'astryx-avatar-fallback', visualProps: ['size']},
       {className: 'astryx-avatar-status-dot', visualProps: ['variant']},
       {className: 'astryx-avatar-status-dot-glyph', visualProps: ['shape']},
     ],
     vars: [
       {name: '--_avatar-group-overlap', description: 'Negative inline offset applied to every avatar after the first when avatars are stacked in an AvatarGroup. Set from the group size; a more negative value tightens the stack.', default: 'set at runtime from the group avatar size (px)', private: true},
-      {name: '--_avatar-radius', description: 'Border radius of the avatar wrapper, content, focus ring, and the AvatarGroupOverflow "+N" chip. Set per shape variant by shapeStyles.', default: 'var(--radius-full)', private: true},
-    ],
-    derived: [
-      {property: 'borderRadius', vars: ['--_avatar-radius']},
     ],
   },
   description: 'Displays a user avatar with image, initials fallback, and optional status indicator.',
@@ -71,12 +67,6 @@ export const docs = {
       description: "Avatar size. Use a named size ('xsm' 20px, 'sm' 24px, 'md' 36px, 'lg' 48px, 'xl' 128px) or a numeric pixel value. Avatar shares Icon's abbreviated scale, but its tiers are larger because avatars align with media rather than glyphs. Inside an AvatarGroup the group's size wins and this prop is ignored.",
       default: "'md'",
     },
-    {
-      name: 'shape',
-      type: "'circle' | 'rounded' | 'square'",
-      description: "Shape variant of the avatar. 'circle' (default) stays fully round. 'rounded' uses the element radius token so it matches UI corner rounding and can be set globally via theme. 'square' has no radius. Status dot positioning adapts automatically: 4-o'clock on circle, bottom-right corner on rounded/square.",
-      default: "'circle'",
-    },
     {
       name: 'status',
       type: 'ReactNode',

package/src/Avatar/Avatar.test.tsx

@@ -6,7 +6,6 @@ import {act, render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Avatar} from './Avatar';
 import {AvatarStatusDot} from './AvatarStatusDot';
-import {AvatarGroup} from '../AvatarGroup';
 
 describe('Avatar', () => {
   it('exposes role="img" with the name as accessible name', () => {
@@ -417,85 +416,6 @@ describe('Avatar', () => {
     expect(img).toHaveAttribute('src', 'https://example.com/ada.jpg');
   });
 
-  it('renders without error for all shape variants', () => {
-    const shapes = ['circle', 'rounded', 'square'] as const;
-    for (const shape of shapes) {
-      const {unmount} = render(
-        <Avatar
-          name="Ana Thomas"
-          shape={shape}
-          data-testid={`avatar-${shape}`}
-        />,
-      );
-      expect(screen.getByTestId(`avatar-${shape}`)).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it('defaults to circle shape (no shape prop)', () => {
-    render(<Avatar name="Lee" data-testid="avatar-default" />);
-    // Should still render with role="img" using the name as the accessible label.
-    expect(screen.getByRole('img', {name: 'Lee'})).toBeInTheDocument();
-  });
-
-  it('renders status dot for all shape variants', () => {
-    const shapes = ['circle', 'rounded', 'square'] as const;
-    const StatusDot = () => <span data-testid="status-dot" />;
-    for (const shape of shapes) {
-      const {unmount} = render(
-        <Avatar
-          name="Ana"
-          shape={shape}
-          status={<StatusDot />}
-          data-testid={`avatar-${shape}-status`}
-        />,
-      );
-      expect(screen.getByTestId('status-dot')).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it('applies shapeStyles to wrapper when rendered inside AvatarGroup', () => {
-    render(
-      <AvatarGroup>
-        <Avatar name="Alice" shape="rounded" data-testid="group-avatar" />
-      </AvatarGroup>,
-    );
-    expect(screen.getByTestId('group-avatar')).toBeInTheDocument();
-  });
-
-  it("an AvatarGroup's shape overrides an individual Avatar's own shape prop, matching how size already works", () => {
-    render(
-      <AvatarGroup shape="square">
-        <Avatar name="Alice" shape="rounded" data-testid="group-avatar" />
-      </AvatarGroup>,
-    );
-    expect(screen.getByTestId('group-avatar')).toHaveAttribute(
-      'data-shape',
-      'square',
-    );
-  });
-
-  it("an Avatar's own shape prop applies outside any AvatarGroup", () => {
-    render(<Avatar name="Ana" shape="rounded" data-testid="solo-avatar" />);
-    expect(screen.getByTestId('solo-avatar')).toHaveAttribute(
-      'data-shape',
-      'rounded',
-    );
-  });
-
-  it('defaults to circle shape inside an AvatarGroup with no explicit shape', () => {
-    render(
-      <AvatarGroup>
-        <Avatar name="Alice" shape="square" data-testid="group-avatar" />
-      </AvatarGroup>,
-    );
-    expect(screen.getByTestId('group-avatar')).toHaveAttribute(
-      'data-shape',
-      'circle',
-    );
-  });
-
   // --- Name tooltip (tooltip?: string | boolean) ---
   describe('name tooltip', () => {
     const originalShowPopover = HTMLElement.prototype.showPopover;

package/src/Avatar/Avatar.tsx

@@ -97,11 +97,6 @@ type AvatarNumericSize =
  */
 export type AvatarSize = AvatarNamedSize | AvatarNumericSize;
 
-/**
- * Avatar shape options
- */
-export type AvatarShape = 'circle' | 'rounded' | 'square';
-
 /**
  * Resolves named sizes to their numeric pixel values
  */
@@ -123,25 +118,6 @@ export function resolveSize(size: AvatarSize): number {
   }
 }
 
-// Sets one local custom property rather than `borderRadius` directly, so
-// every clipping/ring surface that needs the shape's radius (the wrapper,
-// the interactive focus ring, the content div that actually clips via
-// `overflow: hidden`, and AvatarGroupOverflow's "+N" indicator) reads the
-// same value instead of each hardcoding its own borderRadius independently.
-// A theme override only has to reach this one property, not fight the
-// per-surface StyleX class order to change the shape everywhere at once.
-export const shapeStyles = stylex.create({
-  circle: {
-    '--_avatar-radius': radiusVars['--radius-full'],
-  },
-  rounded: {
-    '--_avatar-radius': radiusVars['--radius-element'],
-  },
-  square: {
-    '--_avatar-radius': radiusVars['--radius-none'],
-  },
-});
-
 /**
  * Base styles for the avatar
  * Uses a wrapper/content structure so status isn't clipped by overflow:hidden
@@ -151,10 +127,10 @@ const styles = stylex.create({
     position: 'relative',
     display: 'inline-flex',
     flexShrink: 0,
-    // Reads the shape variant's `--_avatar-radius` (set by `shapeStyles`
-    // below) rather than a hardcoded value, so `shape` actually changes the
-    // wrapper's own radius instead of only the content div's clip.
-    borderRadius: 'var(--_avatar-radius)',
+    // The wrapper carries the avatar's box as well as its radius, so a theme
+    // rule on the `.astryx-avatar` target reaches both: the size the `size`
+    // visual prop selects on is set here, and the content below fills it.
+    borderRadius: radiusVars['--radius-full'],
   },
   content: {
     display: 'flex',
@@ -162,14 +138,9 @@ const styles = stylex.create({
     justifyContent: 'center',
     width: '100%',
     height: '100%',
+    borderRadius: radiusVars['--radius-full'],
     overflow: 'hidden',
     userSelect: 'none',
-    // The content div is the one that actually clips (via overflow: hidden
-    // above), so it needs its own border-radius matching the wrapper's.
-    // It inherits `--_avatar-radius` from the wrapper, since custom
-    // properties cascade to descendants even though border-radius itself
-    // does not.
-    borderRadius: 'var(--_avatar-radius)',
   },
   image: {
     width: '100%',
@@ -196,6 +167,9 @@ const styles = stylex.create({
   status: {
     position: 'absolute',
   },
+  // Visible focus ring for the name-tooltip tab stop, matching the repo-wide
+  // focus-visible outline treatment (see Timestamp, Token, Thumbnail). Only
+  // applied when a tooltip is active so keyboard users can reveal it.
   // Reset the intrinsic styling of the interactive element (<a>/<button>) so it
   // is a transparent, correctly-sized wrapper around the avatar visuals. The
   // element carries the focus-visible accent ring for keyboard users.
@@ -213,9 +187,8 @@ const styles = stylex.create({
       default: 'pointer',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    // Match the avatar's shape (via `--_avatar-radius`) so the focus ring
-    // hugs it, whichever shape variant is in effect.
-    borderRadius: 'var(--_avatar-radius)',
+    // Match the avatar's circular shape so the focus ring hugs it.
+    borderRadius: radiusVars['--radius-full'],
   },
 });
 
@@ -234,7 +207,7 @@ const dynamicStyles = stylex.create({
   fontSize: (size: number) => ({
     fontSize: `${size * INITIALS_FONT_SIZE_RATIO}px`,
   }),
-  statusPositionCircle: (size: number) => ({
+  statusPosition: (size: number) => ({
     bottom: size * CIRCLE_EDGE_OFFSET_RATIO,
     insetInlineEnd: size * CIRCLE_EDGE_OFFSET_RATIO,
     // `insetInlineEnd` anchors to the right edge in LTR / left in RTL, so the
@@ -244,23 +217,13 @@ const dynamicStyles = stylex.create({
       ':is([dir="rtl"] *)': 'translate(-50%, 50%)',
     },
   }),
-  statusPositionCorner: {
-    bottom: 0,
-    insetInlineEnd: 0,
-    // Same RTL mirroring as statusPositionCircle above: insetInlineEnd
-    // anchors to the right edge in LTR / left in RTL, so the outward push
-    // must flip sign too.
-    transform: {
-      default: 'translate(25%, 25%)',
-      ':is([dir="rtl"] *)': 'translate(-25%, 25%)',
-    },
-  },
 });
 
 const BORDER_WIDTH = 2;
 
 const groupStyles = stylex.create({
   ring: {
+    borderRadius: radiusVars['--radius-full'],
     borderWidth: BORDER_WIDTH,
     borderStyle: 'solid',
     borderColor: colorVars['--color-background-surface'],
@@ -313,14 +276,6 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
    * @default 'md'
    */
   size?: AvatarSize;
-  /**
-   * Shape variant of the avatar.
-   * - 'circle': Full circle (default)
-   * - 'rounded': Rounded square
-   * - 'square': Sharp square
-   * @default 'circle'
-   */
-  shape?: AvatarShape;
   /**
    * The primary image source for the avatar.
    */
@@ -524,7 +479,6 @@ export function Avatar({
   fallbackSrc,
   name,
   size = 'md',
-  shape = 'circle',
   src,
   status,
   tooltip = true,
@@ -584,7 +538,6 @@ export function Avatar({
     : undefined;
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
-  const resolvedShape = avatarGroup?.shape ?? shape;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
 
   // Resolve the tooltip content:
@@ -770,9 +723,7 @@ export function Avatar({
         <div
           {...stylex.props(
             styles.status,
-            resolvedShape === 'circle'
-              ? dynamicStyles.statusPositionCircle(numericSize)
-              : dynamicStyles.statusPositionCorner,
+            dynamicStyles.statusPosition(numericSize),
           )}>
           {status}
         </div>
@@ -785,7 +736,7 @@ export function Avatar({
   // tooltip tab-stop focus ring all live here so the interactive
   // `<a>`/`<button>` and the static `<div>` carry the exact same box.
   const rootStylexProps = mergeProps(
-    themeProps('avatar', {size: resolvedSize, shape: resolvedShape}),
+    themeProps('avatar', {size: resolvedSize}),
     focusOutlineProps.focusVisible(
       styles.wrapper,
       dynamicStyles.size(numericSize),
@@ -793,7 +744,6 @@ export function Avatar({
       avatarGroup && groupStyles.ring,
       avatarGroup && groupStyles.overlap,
       avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap),
-      shapeStyles[resolvedShape],
       xstyle,
     ),
     className,