@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/dist/CheckboxInput/CheckboxInput.js

@@ -28,7 +28,7 @@ import "./checkbox.markers.stylex.js";
 import { checkboxScope } from "./checkbox.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     k1xSpc: "x78zum5",
@@ -205,6 +205,7 @@ export function CheckboxInput({
   isLoading = false,
   value,
   isDisabled = false,
+  htmlName,
   disabledMessage,
   isReadOnly = false,
   isOptional = false,
@@ -218,7 +219,8 @@ export function CheckboxInput({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   const id = useId();
   const descriptionID = useId();
@@ -273,11 +275,11 @@ export function CheckboxInput({
     describedByParts.push(disabledMessageTooltip.describedBy);
   }
   const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('checkbox-input', {
       size
     }), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: el => {
         // Interaction (hover/focus) listeners for the disabled-message
         // tooltip attach to the whole row for a larger trigger target;
@@ -288,12 +290,18 @@ export function CheckboxInput({
         disabledMessageTooltip.interactionRef(el);
       },
       ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, !isDisabled && checkboxScope),
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
-        children: [/*#__PURE__*/_jsx("input", {
+        children: [/*#__PURE__*/_jsxDEV("input", {
+          ...rest,
           ref: mergeRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
           id: id,
-          type: "checkbox",
+          type: "checkbox"
+          // Withhold the name while disabled: with a disabledMessage the
+          // input stays focusable (not natively disabled), and a disabled
+          // control must not submit.
+          ,
+          name: isDisabled ? undefined : htmlName,
           checked: isChecked
           // With a disabledMessage the checkbox keeps focusability via
           // aria-disabled so the reason is focus-discoverable; toggling is
@@ -323,38 +331,38 @@ export function CheckboxInput({
           "aria-invalid": status?.type === 'error' ? true : undefined,
           "aria-busy": isBusy || undefined,
           ...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
-        }), /*#__PURE__*/_jsx("div", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
           "aria-hidden": "true",
           ...mergeProps(themeProps('checkbox', {
             size,
             checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
             disabled: isDisabled ? 'disabled' : null
           }), stylex.props(styles.checkbox, checkboxSizeStyles[size], !isDisabled && styles.checkboxFocus, isCheckedOrIndeterminate ? styles.checkboxChecked : styles.checkboxUnchecked, isDisabled && styles.checkboxDisabled, isDisabled && !isCheckedOrIndeterminate && styles.checkboxDisabledUnchecked)),
-          children: isBusy ? /*#__PURE__*/_jsx(Spinner, {
+          children: isBusy ? /*#__PURE__*/_jsxDEV(Spinner, {
             size: "sm",
             shade: "inherit"
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx("svg", {
+          }, void 0, false) : /*#__PURE__*/_jsxDEV(_Fragment, {
+            children: [/*#__PURE__*/_jsxDEV("svg", {
               viewBox: "0 0 10 10",
               ...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
-              children: /*#__PURE__*/_jsx("path", {
+              children: /*#__PURE__*/_jsxDEV("path", {
                 d: "M8.5 2.5L4 7.5L1.5 5",
                 stroke: "currentColor",
                 strokeWidth: "1.5",
                 fill: "none",
                 strokeLinecap: "round",
                 strokeLinejoin: "round"
-              })
-            }), /*#__PURE__*/_jsx("div", {
+              }, void 0, false)
+            }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
               ...stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible)
-            })]
-          })
-        })]
-      }), /*#__PURE__*/_jsx("div", {
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)]
+      }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf x1lsbc85"
         },
-        children: /*#__PURE__*/_jsx(FieldLabel, {
+        children: /*#__PURE__*/_jsxDEV(FieldLabel, {
           label: label,
           inputID: id,
           isLabelHidden: isLabelHidden,
@@ -364,14 +372,14 @@ export function CheckboxInput({
           labelIcon: labelIcon,
           description: description,
           descriptionID: descriptionID
-        })
-      })]
-    }), status?.message && /*#__PURE__*/_jsx(FieldStatus, {
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true), status?.message && /*#__PURE__*/_jsxDEV(FieldStatus, {
       type: status.type,
       message: status.message,
       id: statusMessageID,
       variant: "detached"
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+    }, void 0, false), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  }, void 0, true);
 }
 CheckboxInput.displayName = 'CheckboxInput';

package/dist/CheckboxList/CheckboxList.js

@@ -22,7 +22,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { CheckboxListContext } from "./CheckboxListContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const EMPTY_ARRAY = [];
 /**
  * A checkbox group component for multi-value selection.
@@ -107,7 +107,7 @@ export function CheckboxList({
     isReadOnly,
     loadingValue
   }), [isCollectionMode, optimisticValue, handleChange, isDisabled, showsDisabledMessage, isReadOnly, loadingValue]);
-  return /*#__PURE__*/_jsxs(Field, {
+  return /*#__PURE__*/_jsxDEV(Field, {
     ref: ref,
     "data-testid": dataTestId,
     label: label,
@@ -130,9 +130,9 @@ export function CheckboxList({
       className,
       style
     }),
-    children: [/*#__PURE__*/_jsx(CheckboxListContext, {
+    children: [/*#__PURE__*/_jsxDEV(CheckboxListContext, {
       value: contextValue,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ref: el => {
           // Anchor + hover/focus listeners for the disabled-message tooltip.
           // Handlers are gated internally by isEnabled, so attaching
@@ -142,13 +142,13 @@ export function CheckboxList({
         role: "group",
         "aria-labelledby": labelID,
         "aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
-        children: /*#__PURE__*/_jsx(List, {
+        children: /*#__PURE__*/_jsxDEV(List, {
           density: density,
           hasDividers: hasDividers,
           children: children
-        })
-      })
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  }, void 0, true);
 }
 CheckboxList.displayName = 'CheckboxList';

package/dist/CheckboxList/CheckboxListItem.d.ts

@@ -83,7 +83,7 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
  * />
  * ```
  */
-export declare function CheckboxListItem({ label, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
+export declare function CheckboxListItem({ label, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
 export declare namespace CheckboxListItem {
     var displayName: string;
 }

package/dist/CheckboxList/CheckboxListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAkGvB;yBAhHe,gBAAgB"}
+{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAyGvB;yBAxHe,gBAAgB"}

package/dist/CheckboxList/CheckboxListItem.js

@@ -19,6 +19,7 @@ import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
+import { composeEventHandlers } from "../utils/index.js";
 import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
 import { ListItem } from "../List/ListItem.js";
 import { ListContext } from "../List/ListContext.js";
@@ -27,7 +28,7 @@ import { CheckboxListContext } from "./CheckboxListContext.js";
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   selected: {
     kWkggS: "xgcxg3y",
@@ -76,6 +77,7 @@ export function CheckboxListItem({
   xstyle,
   className,
   style,
+  onClick: onClickProp,
   ...restProps
 }) {
   const ctx = use(CheckboxListContext);
@@ -127,19 +129,19 @@ export function CheckboxListItem({
       onCheck?.(shouldCheck);
     }
   };
-  return /*#__PURE__*/_jsx(ListItem, {
+  return /*#__PURE__*/_jsxDEV(ListItem, {
     ...restProps,
     ref: ref,
     label: label,
     description: description,
     endContent: endContent,
     isDisabled: effectiveDisabled,
-    onClick: isInteractive ? handleToggle : undefined,
+    onClick: isInteractive || onClickProp ? composeEventHandlers(onClickProp, isInteractive ? handleToggle : undefined) : undefined,
     "aria-busy": isBusy || undefined,
     xstyle: [resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly && styles.selected, xstyle],
     className: className,
     style: style,
-    startContent: /*#__PURE__*/_jsx(CheckboxInput, {
+    startContent: /*#__PURE__*/_jsxDEV(CheckboxInput, {
       label: typeof label === 'string' ? label : 'Checkbox',
       isLabelHidden: true,
       value: resolvedChecked,
@@ -148,7 +150,7 @@ export function CheckboxListItem({
       isReadOnly: effectiveReadOnly,
       isLoading: isBusy,
       size: checkboxSize
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 CheckboxListItem.displayName = 'CheckboxListItem';

package/dist/Citation/Citation.js

@@ -17,7 +17,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typeScaleVars, fontWeightVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   label: {
     k1xSpc: "x3nfvp2",
@@ -110,7 +110,7 @@ export function Citation({
   // Both <a> and <span> extend HTMLElement — narrow via intersection
   const elementRef = ref;
   if (variant === 'number') {
-    return /*#__PURE__*/_jsx(Tag, {
+    return /*#__PURE__*/_jsxDEV(Tag, {
       ...rest,
       ref: elementRef,
       role: noteRole,
@@ -121,9 +121,9 @@ export function Citation({
         variant
       }), stylex.props(styles.number, href != null && styles.numberHover, xstyle), className, style),
       children: number
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsxs(Tag, {
+  return /*#__PURE__*/_jsxDEV(Tag, {
     ...rest,
     ref: elementRef,
     role: noteRole,
@@ -133,24 +133,24 @@ export function Citation({
     ...mergeProps(themeProps('citation', {
       variant
     }), stylex.props(styles.label, icon != null && styles.labelWithIcon, href != null && styles.labelHover, xstyle), className, style),
-    children: [icon && /*#__PURE__*/_jsx("span", {
+    children: [icon && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x12xnipv x6b6gus xjspbzw x10xzikg x1litavf x1y0btm7 x14i3s5s xb3r6kr x2lah0s"
       },
-      children: /*#__PURE__*/_jsx("img", {
+      children: /*#__PURE__*/_jsxDEV("img", {
         src: icon,
         alt: "",
         "aria-hidden": "true",
         ...{
           className: "x1ad1g3v x9gl9lo"
         }
-      })
-    }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "xb3r6kr xlyipyv xuxw1ft xeuugli"
       },
       children: title
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 Citation.displayName = 'Citation';

package/dist/ClickableCard/ClickableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoE5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAuEpB;yBAzFe,aAAa"}
+{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA8EpB;yBAhGe,aAAa"}

package/dist/ClickableCard/ClickableCard.js

@@ -30,7 +30,7 @@
 import { useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { Card } from "../Card/Card.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
@@ -40,7 +40,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Styles — only the interactive layer, Card handles everything else
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   interactive: {
     kVAEAm: "x1n2onr6",
@@ -59,7 +59,6 @@ const styles = {
     k5JduY: "x1s928wv",
     kwXMNM: "x1j6awrg",
     kv0HGH: "xarstr8",
-    kUfP38: "x1k48kgn",
     kloYau: "x2q1x1w",
     kRicXK: "x1ywzrc5",
     kPNhGg: "x97pup0",
@@ -72,6 +71,25 @@ const styles = {
     kJs8I2: "x1vwwndy",
     $$css: true
   },
+  borderless: {
+    kMzoRj: "xc342km",
+    $$css: true
+  },
+  bordered: {
+    kVAM5u: "x14i3s5s",
+    kZCmMZ: "xs19ii7",
+    kwRFfy: "x12frdag",
+    kLKAdn: "x1nex4ik",
+    kGO01o: "xbv1mwh",
+    k1ekBW: "xshfolx",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  borderedHoverOnPointer: {
+    kbt25U: "x1ww4t2b",
+    $$css: true
+  },
   disabled: {
     kkrTdU: "x1h6gzvc",
     kSiTet: "xbyyjgo",
@@ -157,7 +175,12 @@ export function ClickableCard({
     onMouseUpProp(e);
   } : onMouseUp;
   const isLink = href != null;
-  return /*#__PURE__*/_jsxs(Card, {
+
+  // Only the `default` variant has a visible border. Card draws a transparent
+  // 1px border on every other variant purely to avoid layout jitter; we drop
+  // it here so the hover overlay covers the full box with no untinted ring.
+  const hasBorder = variant === 'default';
+  return /*#__PURE__*/_jsxDEV(Card, {
     ref: mergeRefs(ref, containerRef),
     width: width,
     height: height,
@@ -170,11 +193,11 @@ export function ClickableCard({
       className: classNameProp,
       style
     }),
-    xstyle: [styles.interactive, styles.focusWithin, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, isDisabled && styles.disabled, xstyleProp],
+    xstyle: [styles.interactive, styles.focusWithin, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
     onClick: !isDisabled ? onClick : undefined,
     onMouseUp: !isDisabled ? handleMouseUp : undefined,
     ...props,
-    children: [isLink ? /*#__PURE__*/_jsx(LinkComponent, {
+    children: [isLink ? /*#__PURE__*/_jsxDEV(LinkComponent, {
       ref: interactiveRef,
       href: href,
       target: target,
@@ -184,7 +207,7 @@ export function ClickableCard({
       ...{
         className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
       }
-    }) : /*#__PURE__*/_jsx("button", {
+    }, void 0, false) : /*#__PURE__*/_jsxDEV("button", {
       ref: interactiveRef,
       type: "button",
       "aria-label": label,
@@ -193,7 +216,7 @@ export function ClickableCard({
       ...{
         className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
       }
-    }), children]
-  });
+    }, void 0, false), children]
+  }, void 0, true);
 }
 ClickableCard.displayName = 'ClickableCard';

package/dist/Code/Code.d.ts

@@ -11,9 +11,23 @@
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
+/** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
+export type CodeColor = 'primary' | 'secondary' | 'inherit';
+/** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */
+export type CodeSize = 'inherit';
 export interface CodeProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;
+    /**
+     * Text color. Mirrors the Text color subset.
+     * @default 'primary'
+     */
+    color?: CodeColor;
+    /**
+     * Font size. Set to `'inherit'` to adopt the surrounding text's font-size
+     * and line-height (useful for inline code inside larger/smaller text).
+     */
+    size?: CodeSize;
     /** Code content */
     children: ReactNode;
 }
@@ -30,7 +44,7 @@ export interface CodeProps extends BaseProps<HTMLElement> {
  * </Text>
  * ```
  */
-export declare function Code({ children, xstyle, className, style, ref, ...props }: CodeProps): import("react").JSX.Element;
+export declare function Code({ children, color, size, xstyle, className, style, ref, ...props }: CodeProps): import("react").JSX.Element;
 export declare namespace Code {
     var displayName: string;
 }

package/dist/Code/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/Code/Code.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAcX;yBArBe,IAAI"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/Code/Code.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuC5C,2FAA2F;AAC3F,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE5D,gFAAgF;AAChF,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAiB,EACjB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAmBX;yBA5Be,IAAI"}

package/dist/Code/Code.js

@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     kMv6JI: "x9m5x89",
@@ -33,6 +33,32 @@ const styles = {
     $$css: true
   }
 };
+const colorStyles = {
+  primary: {
+    kMwMTN: "x1tgivj0",
+    $$css: true
+  },
+  secondary: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  inherit: {
+    kMwMTN: "x1heor9g",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  inherit: {
+    kGuDYH: "x1qlqyl8",
+    kLWn49: "x15bjb6t",
+    $$css: true
+  }
+};
+
+/** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
+
+/** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */
+
 /**
  * Inline code element. Renders a styled `<code>` with monospace font,
  * muted background, and design-system-consistent sizing.
@@ -48,17 +74,21 @@ const styles = {
  */
 export function Code({
   children,
+  color = 'primary',
+  size,
   xstyle,
   className,
   style,
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("code", {
+  return /*#__PURE__*/_jsxDEV("code", {
     ref: ref,
-    ...mergeProps(themeProps('code'), stylex.props(styles.base, xstyle), className, style),
-    "data-testid": props['data-testid'],
+    ...props,
+    ...mergeProps(themeProps('code', {
+      color
+    }), stylex.props(styles.base, colorStyles[color], size && sizeStyles[size], xstyle), className, style),
     children: children
-  });
+  }, void 0, false);
 }
 Code.displayName = 'Code';

package/dist/Code/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports Code and its props type
  * @position Entry point for @astryxdesign/core/Code subpath export
  */
-export { Code, type CodeProps } from './Code';
+export { Code, type CodeProps, type CodeColor, type CodeSize } from './Code';
 //# sourceMappingURL=index.d.ts.map

package/dist/Code/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Code/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Code/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAC,MAAM,QAAQ,CAAC"}

package/dist/CodeBlock/CodeBlock.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { BaseProps } from '../BaseProps';
+import { type SyntaxThemeDefinition } from '../theme/syntax';
 export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
     ref?: React.Ref<HTMLPreElement>;
     code: string;
@@ -39,6 +40,14 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
         end: number;
     }[];
     highlightMode?: 'auto' | 'ranges' | 'spans';
+    /**
+     * Per-instance syntax theme override. Shorthand for wrapping this block in
+     * `<SyntaxTheme theme={...}>` — accepts a preset from
+     * `@astryxdesign/core/theme/syntax` or a theme created with
+     * `defineSyntaxTheme()`. Without it, the block uses the theme-level syntax
+     * colors from the nearest SyntaxTheme ancestor or `defineTheme({ syntax })`.
+     */
+    syntaxTheme?: SyntaxThemeDefinition;
 }
 /**
  * Read-only code display with syntax highlighting, line numbers,
@@ -49,7 +58,7 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
  * <CodeBlock code="const x = 42;" language="javascript" />
  * ```
  */
-export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
+export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
 export declare namespace CodeBlock {
     var displayName: string;
 }

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsU5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAgOD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAkMhB;yBAzNe,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAyTxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAgOD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAqOhB;yBA7Pe,SAAS"}